Vertikal Menu Keren Ala Indiana-net

18.56 Diposting oleh Unknown

Akhirnya kelar juga saya utak atik template hari ini dengan tujuan membuat menu vertikal untuk daftar postingan yang saya rasa penting, menu vertikal seperti ini mungkin sudah tidak aneh lagi bagi para sobat blogger yang mungkin sudah sering anda lihat pada blog" lainnya.yang berbeda mungkin hanya dari warna dan tampilan saja. Contoh menu vertikal yang saya buat bisa anda lihat pada gambar dibawah ini.

Bila anda berminat untuk membuat Menu vertikal ini caranya cukup mudah yaitu :

1 Anda login ke Blogger terlebih dulu dengan menggunakan account anda

2 Setelah itu anda masuk ke menu template dan klik edit HTML

3 Pada Edit HTML anda cari kode seperti ini ]]></b:skin>

4 Bila sudah anda temukan kode tersebut selanjutnya anda copy kode CSS dibawah ini dan pastekan tepat

diatas kode ]]></b:skin>

Kode CSS :

#VMenu {
 width: 280px;
margin:5px;
}
#VMenu ul{
background:#6b0101;
padding:3px;
list-style:none;
}
#VMenu li{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:20px 20px;
background-repeat:no-repeat;
list-style:none;
margin:0;
padding:0;
background: -moz-linear-gradient(top, #000950, #0012ff, #000950);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#0012ff), to(#000950));
}
#VMenu li a {
height: 27px;
text-decoration: none;
color:#fff;
font-family:Arial narrow;
font-size:14px;
font-weight:700;
text-shadow:1px 1px 1px #000;
}
#VMenu li a:link, #VMenu li a:visited {
background-position:0px 4px;
color:#fff;
display: block;
padding: 8px 0 0 22px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:20px 20px;
background-repeat:no-repeat;
}
#VMenu li:hover{
background: -moz-linear-gradient(top, #470000,#ff0000, #470000);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#ff0000), to(#470000));
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:30px 30px;
background-repeat:no-repeat;
margin-left: 20px;
}

5 Setelah anda copy kode diatas dan meletakannya diatas kode ]]></b:skin> selanjutnya anda klik save

6 Setelah anda save template anda langkah selanjutnya anda ke menu tata letak dan pada menu tata letak

anda klik tambah add gadget atau tambah gadget dan pilih gadget yang HTML Javascript.

7 Bila sudah anda pilih gadget HTML Javascriptnya sekarang anda copy dan paste kode" XHTML dibawah

ini pada gadget HTML Javascript tersebut.

Kode XHTML :

<div id="VMenu">
<ul>
<li><a href="LINK 1" title="Title 1">JUDUL 1</a></li>
<li><a href="LINK 2" title="Title 1">JUDUL 2</a></li>
<li><a href="LINK 3" title="Title 1">JUDUL 3</a></li>
<li><a href="LINK 4" title="Title 1">JUDUL 4</a></li>
<li><a href="LINK 5" title="Title 1">JUDUL 5</a></li>
</ul>
</div>

8 Klik simpan atau save dan buka blog anda untuk melihat hasilnya

Keterangan :

Untuk tulisan LINK 1 sd LINK 5 silahkan anda ganti dengan Link postingan anda.

Untuk tulisan JUDUL 1 sd JUDUL 5 silahkan anda ganti dengan Judul Postingan anda

dan bila anda ingin memperbanyak isi dari menu Vertikal tersebut, anda cukup memperbanyak kode seperti ini saja dengan cara copy paste.

<li><a href="LINK 1" title="Title 1">JUDUL 1</a></li>

Silahkan anda coba dan semoga postingan saya tentang cara membuat menu vertikal kali ini bisa bermanfaat bagi anda. Terima kasih atas kunjungannya