Cara Membuat Menu Navigasi Horizontal di Blog

Unknown

CSS, Tutorial Blogging, Widget

27 Mar 2013

4 Komentar

Cara Membuat Menu Navigasi Horizontal di Blog - Cara Membuat Menu Horizontal di Blog atau Cara Membuat Menu Navigasi Blog Horizontal atau Cara Membuat Menu Navigasi Horizontal pada Blog.

Halo sobat Hilbram semua.. Sudah lama saya tidak memposting artikel akhir-akhir ini, tapi saya akan selalu optimis memberikan info-info yang saya dapat untuk kamu-kamu semua. Pada postingan kali ini saya akan membahas kembali tutorial Blogspot yang menarik untuk kita simak bersama, yaitu Membuat Menu Navigasi Blog Menjadi Horizontal. Dengan adanya menu navigasi horizontal di blog, maka untuk pemuatan menu yang bermacam-macam di blog akan menjadi praktis dan tidak memakan banyak tempat di blog. Betul tidak? Visitorpun akan menikmati kenyaman pada blog yang mempunyai menu navigasi horizontal yang terkesan tidak ribet untuk melihat macam-macam fitur yang ada pada suatu blog dan tentunya visitor tidak akan merasa terhalang oleh menu yang berlebihan. Bagi blog yang mempunyai menu dan fitur banyak, maka ini sangat wajib untuk kita praktekan langsung ke blog kita. Bagi kamu yang berminat, yuk mari simak tutorialnya berikut ini:

1. Seperti biasa, login dulu ke akun Blogger kamu.
2. Pilih Template > Edit Html > Lanjutkan > Centang ( Expand Template Widget ).
3. Cari kode ]]></b:skin> ( untuk mempermudah pencarian, tekan Ctrl+F atau F3 ).
4. Copas kode berikut, di atas kode ]]></b:skin>.

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_INLRz26oXSwdybXcIJv2ZpWWNmjAnH29cossSNTi6rWG8os9M-LgSf2_zOXy3Hh2T4gGyA6OPiQl2SZhTau_Qe86tHIpoeFi6l13brpsKhulzRh6B1dcZoaNmmayIW6GJw2N-5YkZRf9/) 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/AVvXsEj_INLRz26oXSwdybXcIJv2ZpWWNmjAnH29cossSNTi6rWG8os9M-LgSf2_zOXy3Hh2T4gGyA6OPiQl2SZhTau_Qe86tHIpoeFi6l13brpsKhulzRh6B1dcZoaNmmayIW6GJw2N-5YkZRf9/) 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/AVvXsEg3egJpt1-TbMyXUSRwpEDqXeMoIZKiwctmidc0NHP8OWIWoFbmSrFmSLzSKsbQrXuhe7TbdanV5bva5Tc9UMa707j4wJuona3bDepXc0QHar4w_LCpwWbfpPGBaIOtZ04PzZts5ltqtZrq/) 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/AVvXsEg3egJpt1-TbMyXUSRwpEDqXeMoIZKiwctmidc0NHP8OWIWoFbmSrFmSLzSKsbQrXuhe7TbdanV5bva5Tc9UMa707j4wJuona3bDepXc0QHar4w_LCpwWbfpPGBaIOtZ04PzZts5ltqtZrq/) 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: Kamu bisa memodifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog kamu.

5. Lalu, cari kembali kode <div id='content-wrapper'>
6. Copas kode berikut, dan letakkan di bawah kode <div id='content-wrapper'>

<div id='tejahtc'>
<div id='tejas'>
<ul>
<li><a href='http://hilbramkurnia3.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'/>

  *Keterangan:

1. Ganti kode yang berwarna merah, dengan URL blog kamu.
2. Ganti kode yang berwarna hijau, dengan URL menu yang ingin ditampilkan pada menu horizontal blog kamu. Sebagai contoh: Link URL kategori/label atau bisa juga link postingan.

Demikian turorial kita pada kesempatan kali ini, terima kasih atas perhatian dan kunjungan kamu semua ke blog sederhana ini, segala kekurangan kami mohon maaf. Semoga Berhasil...