Cara membuat Vertical Menu with Descriptions

Vertical menu ini mampu menghadirkan deskripsi menu dengan effek css3. Effek css3 akan terlihat saat cursor berada di atas link menu. Dengan digunakannya sebuah boks deskripsi menu dengan kapasitas cukup longgar, maka anda dapat menyampaikan beberapa hal terkait menu title yang diharapkan membuat pengunjung blog merasa penasaran sehingga tergelitik untuk mengetahui isi menu tersebut.

D E M O

Kode CSS :

ul#GRvmenudescript{
        padding:0;   
        margin:0;
        list-style-type:none;
}
ul#GRvmenudescript li{
        margin:0 0 1px 0;
        padding:0;
}
ul#GRvmenudescript a{ 
        opacity:0.7;
        filter:alpha(opacity=70);
        position:relative;
        text-align:center;
        width:90%;
        height:40px;
        display:block;
        padding:1px 5px !important;
        border:2px solid #663300;
        background: url(https://lh5.googleusercontent.com/-ova0lkgfLv0/T2rtrENi6LI/AAAAAAAAAd8/YoWE1LEIskQ/h120/bg_grad-black-gray-2x140.png) bottom left repeat-x;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color:#fff; 
        text-shadow:1px 1px 1px #000;
        font-size:12px;
        text-transform:uppercase;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
}
ul#GRvmenudescript a span{ 
        text-align:left;
}
ul#GRvmenudescript a,ul#GRvmenudescript a span{ 
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.6s ease;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
ul#GRvmenudescript a span{ 
        z-index:-10;
        position:absolute;
        top:0;
        left:-2000px;
        display:block;
        width:200%;
        height:auto;
        background:#0a0809;
        background:-moz-linear-gradient(-45deg,#0a0809 0%,#aebcbf 100%);
        background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#0a0809),color-stop(100%,#aebcbf));
        background:-webkit-linear-gradient(-45deg,#0a0809 0%,#aebcbf 100%);
        background:-o-linear-gradient(-45deg,#0a0809 0%,#aebcbf 100%);
        background:-ms-linear-gradient(-45deg,#0a0809 0%,#aebcbf 100%);
        background:linear-gradient(-45deg,#0a0809 0%,#aebcbf 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a0809', endColorstr='#aebcbf',GradientType=1);
        border:5px double #663300;   
        border-radius:5%;
        padding:5px;
        font-family:Arial;
        text-transform:none;
        font-size:12px;
        cursor:pointer;
        color:#fff;
        text-shadow:1px 1px 1px #000;
}
ul#GRvmenudescript a:hover, ul#GRvmenudescript a:focus, ul#GRvmenudescript a:active{
        background: url(https://lh5.googleusercontent.com/-ova0lkgfLv0/T2rtrENi6LI/AAAAAAAAAd8/YoWE1LEIskQ/h120/bg_grad-black-gray-2x140.png) top  right repeat-x;
        color:#09F;
        opacity:1.0;
        filter:alpha(opacity=100);
}
ul#GRvmenudescript a:hover span, ul#GRvmenudescript a:focus span, ul#GRvmenudescript a:active span{
        top:-1px; 
        opacity:0.9;
        filter:alpha(opacity=90);
        left:95%;
        z-index:999;
}

Kode CSS :

<ul id="GRvmenudescript">
<li><a href="http://gubhugreyot.blogdetik.com/" target="_blank"><strong>Pulau<br /> Bali</strong> <span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9vtrnIe61c80n27D_oC3tZrLFp6jwenTokttXLTfihXC6YPlrKDZvnWzfqo7d9muJCmPenBhMTqROzD4RKpKEw6t0nZPeCLmtldiF4rbiVKLC3XdIjszdP8jFv34xWTTOX5NVnoNWLQ/s128/th_gubhugreyot-bali-dance.jpg" width="100" height="100" style="float:left;margin:5px 12px 5px 0;" />Sebuah pulau kecil yang sangat Indah. Tempat wisata budaya terbaik di Indonesia. Masyarakat Bali berbeda dengan pada umumnya masyarakat di Indonesia .....</span></a></li>
<li><a href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com" target="_blank"><strong>Pulau <br />Papua</strong>
<span>Sebuah daerah yang kaya raya dengan sumber kekayaan alam tiada batas tetapi sangat kontradiktif dengan kondisi sosial masyarakatnya .....</span></a></li>
<li><a href="http://gubhugreyot.blogspot.com/search/label/CSS3" target="_blank"><strong>Pulau<br /> Kalimantan</strong> 
<span>Dari ribuan pulau yang menjadi bagian Negara Republik Indonesia, inilah pulau terbesar yang hingga saat ini ......</span></a></li>
</ul>

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Lanjutkan dengan membuka page elements (Elemen Laman) untuk menyimpan xHTML. Silahkan klik "Rancangan (Design)".
9. Klik "Add a Gadget (Tambah Gadget)" yang terletak dalam box dengan garis putus-putus. Tunggu hingga sebuah window berisi halaman Tambah Gadget terlihat.
10. Cari dan klik "HTML/Javascript".
11. Copy dan paste-kan xHTML di dalam box HTML/Javascript.
12. Klik "SIMPAN (SAVE)".
13. Buka blog dan lihat hasilnya.

Catatan/Keterangan :

1. Selain disimpan di atas kode ]]></b:skin>, kode css dapat juga disimpan bersama xHTML melalui "Add a Gadget". Untuk menyimpan dengan cara ini, tambahkan tag style di antara kode css.
   

   Penambahan tag style :

   <style type="text/css">
   Letakkan kode CSS di dini!
   </style>

2. Jika "elemen" untuk "Add a Gadget" berada di sidebar kiri gunakan kode css seperti yang sudah tersedia, namun apabila menu ini diletakkan di sidebar kanan, rubah :
   left:95%; menjadi left:-210%;
   Kode di atas terletak pada syntax :
   

   Perubahan kode CSS :

   ul#GRvmenudescript a:hover span, ul#GRvmenudescript a:focus span, ul#GRvmenudescript a:active span{
           top:-1px; 
           opacity:0.9;
           filter:alpha(opacity=90);
           left:95%; /* jika menggunakan kolom sidebar right rubah left:-210%; */
           z-index:999;
   }

3. Image pada deskripsi menu mempunyai ukuran maksimal berkisar 1.5x lebar kolom sidebar.
4. Anda dapat menambahkan link menu beserta deskripsinya sebanyak anda mau dengan membuat link menu baru (<li><a href="..." .. </li>). Letakkan link menu baru setelah menu ke tiga.
5. Panduan cara backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials (menu sebelah kiri).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «