Cara Membuat Vertikel Menu [Miring] Javscript dengan Mudah dan Cepat

Satria Perwira    11/16/2012    Trixs Blogging   

Cara Membuat Vertikel Menu [Miring] Javscript dengan Mudah dan Cepat

Rafi Orilya,-Vertikal menu adalah suatu unsur blog yang sering digunakan oleh admin blogger untuk memperindah blognya dan sebagai link pintas dari daftar yang ada di blognya. Sehingga pengunjung dapat mudah memilih daftar yang ada di blognya melalui Menu tersebut.

Biasanya banyak yang menggunakan menu tersebut untuk postingan yang paling penting ataupun sebagai direct  ke link yang ingin dituju. Kali ini saya akan berbagi cara membuat Vertikal Menu, langkahnya sama seperti postingan sebelumnya saat membuat horizontal menu.

]=]> DEMO <[=[

Oke, langsung saja ikuti langkah dibawah :

1. Login ke blogger
2. Masuk ke Template => pilih Edit HTML
3. Cari kode ]]></b:skin> , cara mudah mencarinya dengan menekan CTRL+F (maka akan muncul form searching) masukkan kode itu
4. Setelah ketemu sama kode itu copy kode script dibawah :

/* The CSS Code for the menu starts here rafi-orilya.blogspot.com */

ul.svertical{

width: 200px; /* width of menu */

overflow: auto;

background:white;/* background of menu */

margin: 0;

padding: 0;

padding-top: 7px; /* top padding */

list-style-type: none;

}

ul.svertical li{

text-align: right; /* right align menu links */

}

ul.svertical li a{

position: relative;

display: inline-block;

text-indent: 5px;

overflow: hidden;

background:#35BEFF; /* initial background color of links */

font: bold 16px Germand;

text-decoration: none;

padding: 5px;

margin-bottom: 7px; /* spacing between links */

color: black;

-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */

-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);

box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);

-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

ul.svertical li a:hover{

padding-right: 30px; /* add right padding to expand link horizontally to the left */

color: black;

background: #0B55F1;

-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */

-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);

box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);

}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */

content: "";

position: absolute;

left: 0;

top: 0;

border-style: solid;

border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */

border-color: transparent transparent transparent white; /* change black to match the background color of the menu UL */

}

5. Pastekan sebelum/diatas kode ]]></b:skin>
6. Save Template
7. Masuk ke Tata Letak => Tambah Gadget => Pilih HTML/Java Script
8. Copy paste script dibawah kedalam gadget tersebut :

<ul class="svertical">

<li><a href="http://www.rafi-orilya.blogspot.com/">Rafi Orilya</a></li>

<li><a href="Link Anda">CSS Examples</a></li>

<li><a href=" Link Anda">JavaScript Codes</a></li>

<li><a href=" Link Anda">Jquery Effects</a></li>

<li><a href=" Link Anda">HTML Tips</a></li>

<li><a href=" Link Anda">Coding Forums</a></li>

</ul>

9. Save

Sukses, silahkan cek...

Artikel Dilindungi
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin