Ada beberapa Cara Membuat Menu Horizontal Blogger atau blogspot, saya akan berikan 2 cara saja. Menu horizontal bisa dibuat dengan menggunakan widget khusus blogger yaitu dengan menggunakan html widget seperti menambah link scroll atau bisa juga menambahkan lewat templatenya menggunakan kode html dan css.
Untuk cara membuat menu horizontal pada blogger atau blogspot dengan menggunakan widget yaitu dengan menambahkan widget setelah header. Kode ini yang akan menjadi menu horizontal dan menu ini dapat diubah2 sesuai keinginan tanpa harus mengganti kode html pada template. Namun hal ini memiliki kekurangan yaitu jika kita menggunakan widget maka akan membuat loading time menjadi lebih lama karena seperti yang telah saya utarakan sebelumnya mengenai cara terbaik untuk mempercepat loading time blogger yaitu dengan mengurangi jumlah widget blogger.
Untuk membuat menu horizontal pada blogger menggunakan widget:
Sebelum membuat menu horizontal jangan lupa download template agar misal ada kesalahan bisa menggunakan template sebelumnya
kalau sudah cari kode berikutb:section class='header' id='header' maxwidgets='1' showaddelement='no'
kemudian ganti angka 1 dengan 2 dan no dengan yes
terus dibawahnya ada kodeb:widget id='Header1' locked='true'
Ganti true dengan false Terus save template
Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut
Jangan lupa mengganti kode <div id="nav"># dan nama yang berwarna merah.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>
Terus buka elemen halaman atau page elemen pada header klik add page elemen html terus paste kode itu terus save.
Untuk menu horizontal dalam template atau menggunakan html dan css
langsung saja kopi kode diatas kemudian paste di bawah <body>
Kemudian kopi kode dibawah ini:#nav ul{
Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain.
display:block;
margin: 0px;
padding: 0px;
}
#nav li{
float:left;
list-style-type:none;
padding:3px 5px 3px 5px;
margin:1px;
border:#CCCCCC 1px solid;
}
#nav li a{
text-decoration:none;
}
#nav li:hover{
background:#00FFFF;
}
Setelah itu paste diatas
]]></b:skin>
lalu save template.Lihat hasilnya.
mungkin lbih bagus klo tutorialnya pkek demo, jadi kita bisa tau hsil yg akan di dapat
BalasHapusmakasih gan.... infonya mantap
BalasHapusThanks U..
BalasHapus:a
BalasHapusuh keren gan..thanx so much ya, tapi cara merubah warna gimana ya? masa sama warnanya dengan agan..dan cara post di masing2 elemen gimana?
BalasHapusini info yang menarik.haru saya coba nih.mohon kunjungannya ya.blognya udah saya follow.mohon ya follow backnya
BalasHapus:D:D:D
sedikit bingung :a:
BalasHapusRIBET GAN
BalasHapusg jelas bang,,msih bngung,,,:e: :e: :e:
BalasHapus:j:
BalasHapusxcz :C:
BalasHapusthx mas bro tipsnya...untuk buat linknya gmn yach..hehe..maklum masi newbi gan...
BalasHapus# diganti dengan apa ya. thnks informasinya
BalasHapus