Membuat Menu Horizontal Blogspot . Bagaimana Tutorial Cara Membuat Menu Horizontal di blogspot seperti menu kolom Home, About, Contact and Other secara horizontal,banyak jenis menu horizontal yang bisa divariasikan, seperti dengan dropdown CSS ,multi level jquery ,anvigasi slide dan dengan html jquery.
nah kali ini saya akan berikan tutorial cara Membuat Menu Horizontal pada Blogspot , berikut caranya :
1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.2. Cari ]]></b:skin> (cari dengan Ctrl + F)
3. Setelah ketemu Copy kode CSS di bawah ini dan paste tepatnya diatas kode ]]></b:skin>
---------------------------------------------------------------------------------------------------------
/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */-------------------------------------------------------------------------------------------------------
4. Save Template.
5. Masuk ke Page Elements > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript
7. Masukkan Kode HTML dibawah ini tepat di kolom HTML/JavaScrips tersebut :
<!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<li><a
href='#/'>HOME</a></li>
<li><a href='#/search/label/forum'>forum</a></li>
<li><a href='#/search/label/software'>software</a></li>
<li><a href='#/search/label/browser'>browser</a></li>
<li><a href='#/search/label/anti virus'>anti virus</a></li>
<li><a href='#/search/label/tips and trik'>tips and trik</a></li>
<li><a href='#/search/label/tips blog'>tips blog</a></li>
<li><a href='#/search/label/komputer'>komputer</a></li>
<li><a href='#/search/label/warna html'>warna html</a></li>
</div>
<!-- Navigasi tabs Sederhana Ends -->--------------------------------------------------------------------------------------
8. Yang berwarna merah (#) sulahkan ganti dengan URL Sobat, dan bewarna biru (Forum, Software, Dll) selahkan tukar dengan keinginan Sobat.
9. Klik save / Simpan
Lihat hasilnya..
selamat mencoba...
Semoga Bermanfaat.. :)
0 komentar:
Posting Komentar