Cara memasang widget menu horizontal di Blogger/Blogspot

Wednesday, July 18, 2012

print this page
send email

 Sperti sebelumnya saya pernah posting membuat jam dengan theme garuda dan bagi yang mau buat widget keren ini di blog sobat langsung aja klik disini.

Dan sekarang saya kembali buat posting yang baru yaitu Membuat widget menu horizontal di blog sobat. oke panjang bla bla langsung aja bro ini dia caranya:

1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
 Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygZx8UXzSzWhNwEvD5KdYj9z_rM6_Lm3VJ6onEGOPIHH3OzOoSGXeNZTVAlszxmi9OoKhxVBv-0qvCUnJWTeiV2SNeLm4VQsGSh1K_e1RWLYv-6Z-iKL41vT7vjBDI5VEL1Ibv0TmVoU/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOpbJDcUte0sAbkUbgO3sD6AntvsE-7kIJGPKxkczPbLRGa8dGORH4IzQd1nirfFwARpPaYoCSOzYKFiHHxdL-ex5MWmm0phvSn2G06vMAYmNkoAmgPasLMu9FX6gfP-0-BbRTQw2v2A/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}
3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan  # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan. Kode HTML:

<ul id="menu">
<li><a class="current" href="http://badry7.blogspot.com">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh:
<li><a class="current" href="http://badry7.blogspot.com">Home</a></li>
Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:
<li><a href="#">anchor text</a></li> sebelum </ul>.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

 

6. Setelah pop up window muncul, pilih opsi HTML/Javascript

 7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.
7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header. 
9. Save lagi.
10. Done! 

Jangan Lupa Komentarnya Ya Sob,
Kalau Ada Yang Kurang Paham




Cpx24.com CPM Program

0 Komentar:

Post a Comment

Pemberitahuan :
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.

** Jika anda terbantu dengan apa yang ada di blog ini jangan lupa untuk IZIN COPAS dan Ucapan Terimasih pada kotak komentar di bawah.**



close
Chat