Cara
Membuat Menu Horisontal di Blog - Banyak sekali blog tutorial
yang mungkin sering membahas
cara memasang menu horisontal di blog.
Mulai dari yang biasa - biasa ( di sediakan pihak
blogger )
hingga yang nggak biasa alias lebih canggih.( bisa sobat liat di menu
horisontal blog ini .. hehehe)
Seperti yang kita ketahui bersama bahwa menu yang di sediakan pihak
blogger memiliki tampilan yang tetap. ( sepengetahuan saya ) sehingga
bagi sobat blogger yang hobby utak atik blog, mungkin sedikit kurang
mengasikkan. Kali ini, setelah memposting artikel
cara
mengetahui blog dofollow atau nofollow, saya akan mencoba sharing
pada sobat blogger tentang cara membuat menu horisontal di blog yang di
lengkapi dengan fasilitas dropdown atau lebih tepatnya cara membuat
menu
horisontal dropdown di blog. Untuk demonya sobat nggak perlu jauh
jauh, cuma perlu liat aja menu di bawah header blog ini.
Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan
ikuti
tutorial berikut.
1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode
]]></b:skin> ( Gunakan Ctrl + F untuk
memudahkan percarian)
4. Letakkan kode berikut di atasnya.
#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvcvwTkL1xsX3TeOdUL36bcsF290X_-jM63fk31nBiAjXN8qn4q1UnhPS83v8zQVciJ5jPB2VjmQcZK9k2fwDmg8ga_DdAHHFRcrhrnLMpJ41bqVXPtFDeo6WRPqtc3NilwGqUtxZEXw8/)
repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet
MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvcvwTkL1xsX3TeOdUL36bcsF290X_-jM63fk31nBiAjXN8qn4q1UnhPS83v8zQVciJ5jPB2VjmQcZK9k2fwDmg8ga_DdAHHFRcrhrnLMpJ41bqVXPtFDeo6WRPqtc3NilwGqUtxZEXw8/)
repeat-x;
height:33px;
}
#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjfozUETQCoeIVXH1rqTO1OO023h6OCz2rwZT430T5dUGgkIi57BdKnxtgfJzGkBJ5_91NASB2IHeyu5Q_ohiQRdzu0nXtsShVCxwPhyT9Igc9oBONaNaBb_mc1vWB1tW1IAn9PsdEeYg/)
repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}
#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjfozUETQCoeIVXH1rqTO1OO023h6OCz2rwZT430T5dUGgkIi57BdKnxtgfJzGkBJ5_91NASB2IHeyu5Q_ohiQRdzu0nXtsShVCxwPhyT9Igc9oBONaNaBb_mc1vWB1tW1IAn9PsdEeYg/)
repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}
#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#tejas li li {
}
#tejas li ul a {
width: 140px;
}
#tejas li ul a:hover, #tejas li ul a:active {
}
#tejas li ul ul {
margin: -34px 0 0 170px;
}
#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}
#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}
#tejas li:hover, #tejas li.sfhover {
position: static;
}
tambahan :
- Modifikasi kode di atas terutama ukuran lebar dan tinggi yang
harus di sesuaikan dengan ukuran template blog sobat.
- Hampir semua bagian dari kode di atas bisa di edit, tapi kalo
menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya
saja... terserah sobat..
5. Letakkan kode berikut di bawah kode
<div
id='content-wrapper'> ( cari dengan Ctrl+F )
<div id='tejahtc'>
<div id='tejas'>
<ul>
<li><a href='
http://christiantatelu.blogspot.com/'>Home</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=
Link sobat di sini!'
title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-4</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-7</a></li>
<li><a href='
Link sobat di sini!'
title='Link-Title'>Link-Name-8</a></li>
</ul>
</div>
</div>
<div class='clear'/>
- Ganti tulisan yang berwarna biru
dengan link dari kategori atau bisa juga dengan link posting.
contoh link kategori atau label,
modelnya seperti ini.
http://christiantatelu.blogspot.com/search/label/BLOG
sedangkan link posting seperti ini .
http://christiantatelu.blogspot.com/2012/01/membuat-link-terbuka-di-tab-baru.html
- Ganti
tulisan berwarna ungu dengan url blog
sobat.
- Ganti link name dengan judul kategori atau judul
posting atau apapun yang penting menarik untuk di klik. untuk link
title samakan saja dengan link name.
6. Save template..
Hahahaha. Pembahasan
saya yang kemarin adalah ciri-ciri cewek matre. nah kali ini saya akan
membahas Ciri-ciri Cowok tidak setia. Dan para cewek-cewek. pahamilah
ini.
