FBACKLINK
Saturday 28 December 2013

Buat Menu Vertikal Dengan CSS Di Blog

Selamat siang kawan yang sangat bersahaja dan baik hatinya, Terima kasih  telah datang dan membaca artikel ini. Ini adalah artikel saya yang ke 30. Kalian para blogger sejati pasti pernah mendengar Menu Horizontal dengan css diblog, tapi untuk kali ini saya tidak menjelaskan cara membuat itu tapi saya disini sakarang akan menjelaskan bagaimana cara membuat menu vertikal dengan css.

Screenshot
buat menu vertikal dengan css di blog


Oke tanpa panjang lebar kita langsug praktekan
1.Buka Blogger
2.Pilih Layout/ Tata letak
3.Pilih add Element
4.Pilih HTML/Javascript
5.Masukan kode ini didalamnya

<style>
.fblink_menu{
font: bold 14px Arial;
width: 190px;         /* lebar menu */
}
.fblink_menu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.fblink_menu ul li{
margin:0;
padding:0;
}
.fblink_menu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #a5a5a4;
-moz-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
-webkit-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
text-shadow: 0 -1px 1px #a0fef8;
-moz-transition: all 0.2s ease-in-out;
-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;
}
.fblink_menu ul li a:hover, .fblink_menu ul li a.selected{
color:#fd0a04;
-moz-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
-webkit-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
}
</style>

<div class="fblink_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Trik Blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
6.Kemudian Save/ Simpan

Note
Ganti kode # dengan alamat url
Ganti huruf yang berwarna orange dengan judul kalian

Sampai disini dulu tutor saya tentang Menu Vertikal dengan CSS di Blog, jangan lupa komen dan klik iklan yh :)

12 komentar

Nice post sob :) mampir ya http://www.x1nj3ct0r.tk/2013/12/cara-hack-facebook-terbaru.html

wah, ntar kalo didsain gini bukannya tambah panjang kebawah gan.. kalo ane lebih suka yang diatas horizontal itu..hehehe

mantep gan ;)
kunjungi :) http://murian69.blogspot.com/

keren gan !!!!!!!!!!!!
visit ya http://danangeternal.blogspot.com/

wah nice inpoh gan, baru tau ane . thx for share

wah keren nih :D nice post gan!

Wow keren gan, nice info gan

blog ane sederhana aja gan g usah bnyak gaya hehe

melihat screen shootnya kelihatan keren banget yah sob, pengen nyoba tapi masih belum ada waktu nih hehe...

wah bagus juga nih menu vertikal nya :)

kebetulan blog saya belum ada menunya nih mas. mungkin menu vertikal ini bisa saya jadikan pertimbangan :)

Jangan menggunakan link hidup
Jangan menggunakan kata kata Spam, SARA, OOT, dsb
Berkomentarlah sesuai Topik
Jika tidak mengikuti peraturan diatas maka akan saya anggap SPAM
Silakan komen , No Moderation but you get backlink