Cara Membuat Super Vertical CSS Menu Blogger/Blogspot
Dalam posting ini, saya persembahkan dua vertical menu dengan CSS murni dan image (gambar), yang setting dan pemasangannya di blog Blogger/Blogspot sangat mudah.
<style type="text/css">Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXfhR8u0IuYmVSWPttQTfdZyQ1Yy4TUraHavJPFnNVUEAdn-oBOGMI1nq2nzEBQzxD1b84JLRWpsRJK_GDKnhOHUrwGH95avUiQDA9v56Y06ALgRUvvdAUEEzA8x5MxN2e5yfOKUGpX0/s1600/menu4.gif sendiri.
#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/AVvXsEiBXfhR8u0IuYmVSWPttQTfdZyQ1Yy4TUraHavJPFnNVUEAdn-oBOGMI1nq2nzEBQzxD1b84JLRWpsRJK_GDKnhOHUrwGH95avUiQDA9v56Y06ALgRUvvdAUEEzA8x5MxN2e5yfOKUGpX0/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/AVvXsEiBXfhR8u0IuYmVSWPttQTfdZyQ1Yy4TUraHavJPFnNVUEAdn-oBOGMI1nq2nzEBQzxD1b84JLRWpsRJK_GDKnhOHUrwGH95avUiQDA9v56Y06ALgRUvvdAUEEzA8x5MxN2e5yfOKUGpX0/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>
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>
<style type="text/css">Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEDdhKzxC9CN_csN0j-Dz9tsmSNNxng82CmYGuci2KBI5gNYpBm9spYqwvfXWW0UFBhV3xSxAPSqSD35r9N2WSC2qGAewdebdS7WS9Tc5Az4L5cxhpPSSuK1TQMgaITo8KpbIAWsW1sVo/s1600/menu2.gif sendiri.
#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/AVvXsEgEDdhKzxC9CN_csN0j-Dz9tsmSNNxng82CmYGuci2KBI5gNYpBm9spYqwvfXWW0UFBhV3xSxAPSqSD35r9N2WSC2qGAewdebdS7WS9Tc5Az4L5cxhpPSSuK1TQMgaITo8KpbIAWsW1sVo/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/AVvXsEgEDdhKzxC9CN_csN0j-Dz9tsmSNNxng82CmYGuci2KBI5gNYpBm9spYqwvfXWW0UFBhV3xSxAPSqSD35r9N2WSC2qGAewdebdS7WS9Tc5Az4L5cxhpPSSuK1TQMgaITo8KpbIAWsW1sVo/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/AVvXsEgEDdhKzxC9CN_csN0j-Dz9tsmSNNxng82CmYGuci2KBI5gNYpBm9spYqwvfXWW0UFBhV3xSxAPSqSD35r9N2WSC2qGAewdebdS7WS9Tc5Az4L5cxhpPSSuK1TQMgaITo8KpbIAWsW1sVo/s1600/menu2.gif) 0 -64px;padding: 8px 0 0 10px;}
</style>
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>
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 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 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!
Encoded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee. © All Rights Reserved.
Labels: Blog Design, HTML-CSS Tricks, Navigation/Menu
Testimonial: