Selamat Datang Di Blog Sederhana http://andylaoe.blogspot.com | Semoga Artikel-Artikel Yang Ada Bisa Bermanfaat | Terima Kasih Atas Kunjungannya.

Sabtu, 30 Juni 2012

Pin It

Widgets

Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot



Menu/Navigasi adalah bagian blog/website yang tidak dapat dipisahkan. Keberadaannya sangat penting sebagai alat bagi pengunjung menuju ke bagian/halaman blog/website.

Pada posting kedua CSS Horizontal Menu untuk Blogger/Blogspot, saya persembahkan "Stripped Red Horizontal Menu for Blogger Blog"
Cara memasang widget menu horizontal menu di Blogger/Blogspot:
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 {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("http://2.bp.blogspot.com/-umuM1wnuz40/TcuRP2rASsI/AAAAAAAAAdY/ubN3m056CUs/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("http://2.bp.blogspot.com/-umuM1wnuz40/TcuRP2rASsI/AAAAAAAAAdY/ubN3m056CUs/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
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 HomeDaftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:
<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">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 class="current"><a href="http://buka-rahasia.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 gadget/widget tersebut ke bawah/atas header. 
9. Save lagi.
10. Done!
Please Share it! :)

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
BLOG SEDERHANA

0 komentar:

Posting Komentar

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Terima kasih atas kunjungannya, Semoga artikel di atas bisa bermanfaat.

Silakan komentar sesuai dengan artikel yang di sajikan!!!!
terima kasih.


andylaoe.blogspot.com

Blog Teman

ALT/TEXT GAMBAR
 

About Me

Recent Posts

Recent Comments

| Blog Sederhana © 2012. All Rights Reserved | Template Style by Blog Sederhana .com | email adittia.wibowo@gmail.com | Back To Top |