Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
27 Mar 2013

Cara Membuat Menu Navigasi Horizontal di Blog

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.

Menu Horizontal

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...

4 Komentar

Semangat gan.. Thanks sudah berkunjung kemari :)

sy kok gk bisa y...????

Mungkin ada yang terlewatkan, mohon dicoba lagi ya..
atas kunjungannya, saya ucapkan terima kasih..

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup