Tips dan Tutorial Blogging | Personalisasi Blog Dengan Menu Vertikal CSS

Alhamdulillah, disaat kondisi fisik yang tidak mendukung masih bisa menyempatkan untuk berbagi. Kali ini Iskaruji dot com kembali menghadirkan cara membuat menu. Jika sebelum menu dropdown hover seperti yang dipake pada blog ini, maka sekarang adalah membuat bentuk menu vertikal. Kelebihan bentuk menu ini adalah lebih ringaan loadnya karena hanya disusun dengan menggunakan CSS.

Tips Blogging Menu Dropdown Hover Bikin Menu TabView Link Hover Pelangi Bikin Redirect URL Efek Shadow Teks Efek Timbul Teks Tooltip Sederhana Tooltip Bergambar Opacity Gambar Auto Click Banner Bikin Banner Rotasi

Silahkan letakkan kode berikut di Add Gadget > HTML/JavaScript blog kamu. Personalisasi sesuai dengan kebutuhan... <style type="text/css"> .urbangreymenu{ width: 190px; /*width of menu*/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(http://www.dynamicdrive.com/cssexamples/media/downgreen.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 7px 0 7px 31px; /*31px is left indentation of header text*/ } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ } .urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /*link text is indented 8px*/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: black; } </style> <div class="urbangreymenu"> <h3 class="headerbar"> Tips Blogging</h3> <ul> <li><a href="http://www.iskaruji.com/2011/01/memasang-menu-dropdown-hover.html">Menu Dropdown Hover</a></li> <li><a href="http://www.iskaruji.com/2010/12/memasang-menu-tab-view.html">Bikin Menu TabView</a></li> <li><a href="http://www.iskaruji.com/2011/01/pasang-link-hover-pelangi.html">Link Hover Pelangi</a></li> <li><a href="http://www.iskaruji.com/2011/02/bikin-redirect-url-blog.html">Bikin Redirect URL</a></li> <li><a href="http://www.iskaruji.com/2011/02/bikin-efek-shadow-pada-teks.html">Efek Shadow Teks</a></li> <li><a href="http://www.iskaruji.com/2011/02/bikin-efek-tulisan-timbul.html">Efek Timbul Teks</a></li> <li><a href="http://www.iskaruji.com/2011/02/bikin-tooltip-sederhana-menggunakan-css.html">Tooltip Sederhana</a></li> <li><a href="http://www.iskaruji.com/2011/02/bikin-tooltip-bergambar.html">Tooltip Bergambar</a></li> <li><a href="http://www.iskaruji.com/2011/05/tips-triks-css-bikin-gambar-redup.html">Opacity Gambar</a></li> <li><a href="http://www.iskaruji.com/2011/03/pasang-autoclick-pada-banner.html">Auto Click Banner</a></li> </ul> </div> Untuk melihat lebih banyak koleksi kreasi CSS, silahkan kunjungi:

Posted in: CSS,Edukasi,Menu,Tips triks,Tutorial