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

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

4 komentar

  1. Wah keren, langsung di terapin di blog ahh... hehehe

    BalasHapus
    Balasan
    1. haha.. :D hati2 ntar ikut miring2 orangnya :D

      Hapus
  2. Wah keren bang,ohya ngomong blog demonya bahasa arab ya haha

    BalasHapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon