Membuat Menu Horizontal Keren

Malam yang panas kipas lagi rusak tidur gak bisa, wkwkwkwkwkwkwkwkwkwk,... Itukan derita loh. Kita cerita dulu Ok, kemarin saya pernah diajarkan oleh dosen saya membuat web dengan menggunakan CSS setelah saya tes di blog ternya bisa membuat menu dengan menggunakan CSS. Ok sekarang kita membuat menu horizontal diblogger dengan menggunakan CSS silakan lihat contoh dibawah ini:



Begini cara2xnya :
1. Login dulu ke blogger kalian
2. Klik Rancangan --> Edit HTML
3. Kasih Conteng di Expand Template Widget (bilah terjadi kesalahan)
4. Tekan Ctrl+F Copy kode ini ]]></b:skin> letakan di Find tekan Enter
5. Setelah ketemu Copy code di bawah ini, letakan di atas ]]></b:skin>

#navlist ul{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited{
color: #006600;
background-color: #000000;
text-decoration: none;
border: 1px solid #006600;
}

#navlist a:hover{
color: #000000;
background-color: #006600;
}

6. Simpan Template
7. Setelah itu klik Elemen Laman --> Tambah Gadget --> HTML/JavaScrip
8. Copy code di bawah ini dan letakan di dalamnya

<div id="menu_keren">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Galery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contack Us</a></li>
<li><a href="#">Request</a></li>
</ul>
</div>

9. Yang tanda "#" ganti dengan URL anda
10. Simpan Template dan lihat hasilnya

Selamat beraktifitas dan berkarya ?...

Apa ini yang anda cari ?

11 comments:

ie-dam mengatakan... [Reply]

knp tdk bisa makai link lain....

Klopototolia-TJ mengatakan... [Reply]

@ie-dam : Bisa kok mas, ganti aja yg pagar "#" dengan alamat URL anda,...

Die_Gokil mengatakan... [Reply]

mas bisa ga modelnya disamain sma model template di blog kitanya .

fahim blog mengatakan... [Reply]

terimakasih...
keren nih..

Erfan_Zone mengatakan... [Reply]

Trims sob, q coba ya...!!!!!

Gusman mengatakan... [Reply]

Mantap banget gan!!

sampobea mengatakan... [Reply]

goood

a.zainal61 mengatakan... [Reply]

gan kalau bisa tolong bagaimana membuat menu horizontal profesional mirip website resmi
terima kasih

Klopototolia TJ mengatakan... [Reply]

@a.zainal61 : maaf yah gan, saya tidak tau yg namanya web profesional saya hanya seorang pemblogger biasa...
kalau membuat menu horizontal di blog cssnya diletakan di atas "b:skin" sedangkan diweb html itu meletakan cssnya diatas "body", susah mas kalau di jelaskan, nati malahan salah lagi :'(

BOCAH DOKO mengatakan... [Reply]

siiipppp booossss

adhit-megazine.blogspot.com mengatakan... [Reply]

cara membuat menu yang ada tulisannya Software Free Tools, Hacking ,Trick Blogger, Lain-lain itu gmna gan,q tunggu balasanya dari agan,mksih soalnya sya msih nuwbie

Tinggalkan Komentar Anda di Bawah ini!!!

Kalau ada Artikelnya yang kurang jelas, tuliskan komentar anda dibawah ini!!! Tapi yang sopan yah demi menjaga kenyamanan bersama, Anda Sopan Kami Segan!!! untuk komentar SPAM akan saya hapus!!!

 

© 2010 Klopototolia TJ. Powered By : Blogger

ping fast  my blog, website, or RSS feed for Free Ping your blog, website, or RSS feed for Free