blog berbagi

tutorial cara pasang sub menu di blogger

kalau kemaren saya posting tutorial blogger cara pasang auto readmore yang tampil dengan gambar  dalam kesempatan ini saya akan bahas tutorial cara pasang sub menu  dimana menu semacam ini tidak disediakan oleh blogger jadi jika blog menggunakan blogger dan ingin pasang sub menu   kita harus memasangnya sendiri,
beda dengan blog wordpress yang fasilitas semacam ini sudah tersedia di dalam template  bawaan wordpress.com, jadi pengguna wordpress tidak perlu repot-repot memasangnya. cuma di wordpress kita tidak bebas mendesain template kecuali kita mengupgrade CCS terlebih dahulu,itupun masih belom bebas secara total seperti blog yang menggunakan blogger. contoh sub menu bisa anda lihat di blog ini “silahkan arakan kursor mose anda di menu download 3gp” nah seperti itulah  hasilnya nanti
oke mari kita mulai tutorialnya. cara pasang sub menu  di blogger:
1-> masuk dasboard-> design->dan pilih edit HTML
2-> jangan lupa centang kotak kecil di sebelah expand widget template dan backup dulu template asli.
3-> silahkan cari kode  ]]></b:skin>
klo sudah ketemu letakkan kode dibawah ini di atas kode tersebut

#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

sebelum melanjutkan kita harus menetukan dimana kita akan meletakkan sub menu tersebut. dan biasanya di letakkan diatas header
nah untuk meletakkan di atas header silahkan cari kode berikut
<div id=’header-wrapper’>
4-> setelah ketemu silahkan letakkan kode dibawah ini di atas kode tersebut

<div id=’NavbarMenu’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a href=’http://ipoenkblb.blogspot.com‘>Home</a> </li>
<li><a href=’#'>Blogger Template</a>
<ul>
<li><a href=’http://ipoenkblb.blogspot.com/search/label/2 column‘>2 Column</a> </li>
<li><a href=’http://cara2daninfo.blogspot.com/search/label/3 column‘>3 Column</a> </li>
<li><a href=’http://ipoenkblb.blogspot.com/search/label/4 column‘>4 Column</a> </li> </ul> </li>
<li><a href=’#'>Blogging Trick</a> </li>
<li><a href=’#'>Forum</a>
<ul>
<li><a href=’http://cara2daninfo.blogspot.com/search/label/Learn SEO‘>Learn SEO</a> </li>
<li><a href=’http://ipoenkblb.blogspot.com/search/label/Adsense‘>Adsense</a> </li>
<li><a href=’http://cara2daninfo.blogspot.com/search/label/Blog Monetize‘>Blog Monetize</a> </li>
<li><a href=’http://ipoenkblb.blogspot.com/search/label/Link Exchange‘>Link Exchange</a> </li>
</ul> </li> </ul>
</div> </div>

5-> sekarang silahkan anda ganti kode di atas yang saya beri warna biru adalah link/URL menu yang ingin anda tampilkan,
dan yang berwarna merah adalah judul dari menu yang anda tampilkan.
contoh URL yang saya pasang diatas adalah link/URL yang berdasarkan label,
6-> jangan lupa simpan pekerjaan anda.dan lihat hasilnya.


sumber : http://newbeingetop.wordpress.com/2011/10/29/tutorial-cara-pasang-sub-menu-di-blogger/

Artikel Terkait :