Pada postingan kali ini saya akan memberikan cara pembuatannya pada blog. Ikuti caranya dan langkah-langkahnya dengan seksama, dengan kamu mengikuti pastinya kamu tidak akan mendapatkan kesulitan dalam pengeditan kode CSS nya.
1. Masuk ke akun Blogger kamu dan pilih layout terus cari Edit HTML
2. Masukkan kode CSS ini di atas kode ]]></b:skin>1. Masuk ke akun Blogger kamu dan pilih layout terus cari Edit HTML
/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}
3. Kemudian SAVE
( Kamu bisa mengganti warna yang ada dengan warna yang kamu sukai )
4. Selanjutnya pilih Page Element dan klik Add Page Elemnet pilih lagi HTML/java Script.
Masukkan kode ini didalamnya :
5. Jika sudah klik SAVE.
Lihatlah perubahan yang tampak pada blog kamu. Blog kamu sekarang terlihat lebih professional. Demikian tips blog untuk kali ini, semoga bermanfaat.
<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://your blog name.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://your blog name.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://your blog name.blogspot.com">» Free Template</a></li>
<li><a href="http://your blog name.blogspot.com">» Handphone</a></li>
<li><a href="http://your blog name.blogspot.com">» Komputer</a></li>
</ul>
( Ganti your blog name dengan nama blog milik kamu )<li><a href="/">» HOME</a></li>
<li><a href="http://your blog name.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://your blog name.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://your blog name.blogspot.com">» Free Template</a></li>
<li><a href="http://your blog name.blogspot.com">» Handphone</a></li>
<li><a href="http://your blog name.blogspot.com">» Komputer</a></li>
</ul>
5. Jika sudah klik SAVE.
Lihatlah perubahan yang tampak pada blog kamu. Blog kamu sekarang terlihat lebih professional. Demikian tips blog untuk kali ini, semoga bermanfaat.
0 komentar:
Posting Komentar