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 Super Vertical CSS Menu Blogger/Blogspot



Vertical menu (menu yang berupa list dalam posisi vertikal) bisa menjadi alternatif navigasi blog Blogger anda. Menu ini biasa diletakkan di bagian sidebar, baik di atas maupun dibawah.
Dalam posting ini, saya persembahkan dua vertical menu dengan CSS murni dan image (gambar), yang setting dan pemasangannya di blog Blogger/Blogspot sangat mudah.




Kode CSS:
<style type="text/css">
#menu4 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #000;border-size: 1px;border-width: 1px;}
#menu4 ul {list-style: none;margin: 0;padding: 0;}
#menu4 li a {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 80%;font-weight: bold;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;} 
#menu4 li a:link, #menu4 li a:visited {color: #CCC;display: block;background: url(http://2.bp.blogspot.com/-BYKS1ojCcO4/ThT_Ke_Xx7I/AAAAAAAAAr0/mCOdKVLwxa4/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background:  url(http://2.bp.blogspot.com/-BYKS1ojCcO4/ThT_Ke_Xx7I/AAAAAAAAAr0/mCOdKVLwxa4/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>
Note: Upload dan host gambar http://2.bp.blogspot.com/-BYKS1ojCcO4/ThT_Ke_Xx7I/AAAAAAAAAr0/mCOdKVLwxa4/s1600/menu4.gif sendiri.
Kode HTML:
<div id="menu4">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Kode CSS:
<style type="text/css">
#menu2 {width: 200px;border-style: solid solid none solid;border-color: #677D92;border-size: 1px;border-width: 1px;margin: 10px;} 
#menu2 ul {list-style: none;margin: 0;padding: 0;}
#menu2 li a {font-size: 80%;font-weight: bold;font-family: Verdana, Arial, Helvetica, sans-serif;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu2 li a:link, #menu2 li a:visited {color: #fff;display: block;background: url(http://2.bp.blogspot.com/-we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif);padding: 8px 0 0 10px;}
#menu2 li a:hover, #menu2 li #current {color: #283A50;background: url(http://2.bp.blogspot.com/-we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif) 0 -32px;padding: 8px 0 0 10px;}
#menu2 li a:active {color: #283A50;background: url(http://2.bp.blogspot.com/-we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif) 0 -64px;padding: 8px 0 0 10px;}
</style>
Note: Upload dan host gambar http://2.bp.blogspot.com/-we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif sendiri.
Kode HTML:
<div id="menu2">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#>Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Cara Membuat dan Memasang Vertical Menu CSS:

1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS </head> (gunakan Ctrl + F untuk mencari)
3. Save template.
4. Copy Kode HTML, ganti # dengan url-url blog atau url apapun yang ingin dipasang. Ganti kata-kata HomeProducts, dan lain-lain dengan anchor text yang diinginkan. Tambahkan/hapus baris antara <li> dan <li>  sebelum </ul>untuk menambah/menghapus menu.
5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript dan masukkan kode HTML.
7. Klik save.
8. Drag/geser widget menu vertical tersebut ke posisi yang diinginkan.
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 |