Cara Menghasilkan Super Vertical Css Santapan Blogger/Blogspot

Vertical sajian (menu yang berupa list dalam posisi vertikal) bisa menjadi alternatif navigasi blog Blogger anda. Menu ini biasa ditaruh di bab sidebar, baik di atas maupun dibawah.

Dalam posting ini, aku persembahkan dua vertical sajian dengan CSS murni dan image (gambar), yang setting dan pemasangannya di blog Blogger/Blogspot sungguh 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL09A5L0TmMru3AWSUt62-j9HbjiOem32IS8Z72ifveLypXAIwY6Emgqb46SVvKlf6eqKU1JZC9GMHYBIKR8V_qlOyJTqgflo5PHx7pLtuvvQJg3Nd19Hl6-0_gXgXxLpeBshcJbX7cCM/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL09A5L0TmMru3AWSUt62-j9HbjiOem32IS8Z72ifveLypXAIwY6Emgqb46SVvKlf6eqKU1JZC9GMHYBIKR8V_qlOyJTqgflo5PHx7pLtuvvQJg3Nd19Hl6-0_gXgXxLpeBshcJbX7cCM/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>

Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL09A5L0TmMru3AWSUt62-j9HbjiOem32IS8Z72ifveLypXAIwY6Emgqb46SVvKlf6eqKU1JZC9GMHYBIKR8V_qlOyJTqgflo5PHx7pLtuvvQJg3Nd19Hl6-0_gXgXxLpeBshcJbX7cCM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjussF-XgB33sFBp2bnF24l1GKucKsS2LM09Wv-dusdj02gdjI82yRO91iiiW4doTP9BAt_-cLHr7TIzxjeNKBorpN4Etj_aEow_GhUcKPLqBFzK73-KqBDifY3xdTurlU00aEKQijwY/s1600/menu2.gif);padding: 8px 0 0 10px;}
#menu2 li a:hover, #menu2 li #current {color: #283A50;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjussF-XgB33sFBp2bnF24l1GKucKsS2LM09Wv-dusdj02gdjI82yRO91iiiW4doTP9BAt_-cLHr7TIzxjeNKBorpN4Etj_aEow_GhUcKPLqBFzK73-KqBDifY3xdTurlU00aEKQijwY/s1600/menu2.gif) 0 -32px;padding: 8px 0 0 10px;}
#menu2 li a:active {color: #283A50;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjussF-XgB33sFBp2bnF24l1GKucKsS2LM09Wv-dusdj02gdjI82yRO91iiiW4doTP9BAt_-cLHr7TIzxjeNKBorpN4Etj_aEow_GhUcKPLqBFzK73-KqBDifY3xdTurlU00aEKQijwY/s1600/menu2.gif) 0 -64px;padding: 8px 0 0 10px;}
</style>

Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjussF-XgB33sFBp2bnF24l1GKucKsS2LM09Wv-dusdj02gdjI82yRO91iiiW4doTP9BAt_-cLHr7TIzxjeNKBorpN4Etj_aEow_GhUcKPLqBFzK73-KqBDifY3xdTurlU00aEKQijwY/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 sempurna 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 Home, Products, 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 pilihan HTML/Javascript dan masukkan instruksi HTML.

7. Klik save.

8. Drag/geser widget sajian vertical tersebut ke posisi yang diinginkan.

9. Save lagi.

10. Done!