PANDUAN,TIPS,TRIK DAN CARA MEMBUAT BLOG DENGAN MUDAH SERTA GRATIS

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

You need to upgrade your Flash Player to version 10 or newer.

MENU NAVIGATOR VERTIKAL




Vertikal navigator menu memanjang kebawah (vertikal), menu ini cocok jika dipasang di sidebar karena bentuk menunya memanjang kebawah, lain halnya dengan horisontal menu yang bentuknya menyamping cocok jika dipasang di header.

Disini saya akan coba membuat menu vertikal simple namun stylish dan tidak memakan waktu yang lama untuk loadingnya karena tidak disertai gambar untuk backgroundnya.

oky...kita mulai saja langkah2nya (kayak latihan berbaris aja...heeee)

1. Dasbor blogger anda yaitu ke http://blogger.com 
2. Tata letak>>>>klik Edit HTML 
3. Masukkan kode css dibawah ini tepat diatas kode ]]></b:skin>


/*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;
}

Perhatikan code yang berwarna merah dan kegunaanya.. atur menurut selera kamu.
untuk mencari code warna buka situs www.colorschemer.com/online atau klik DISINI

4. Kalau sudah kemudian SAVE



Langkah selanjudnya 


1. Tata letak >>>> Elemen halaman
2. Klik tambah widget >>>>klik HTML/javascript
3. Masukkan kode dibawah ini



<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://toturialbkog.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://edyputra.blogspot.com">» Bengkelku</a></li>
<li><a href="http://edy-putra.blogspot.com">» Islam itu indah</a></li>
<li><a href="http://edygame.blogspot.com">» Game on line</a></li>
<li><a href="http://albumedyputra.blogspot.com">» Albunku</a></li>
</ul>



5. Simpan.geser/drag sesuai keinginan anda

Ganti teks yang berwarna merah dengan URL link yang ingin kamu pasang, dan yang berwarna biru adalah text display linknya.

Silahkan sobat2 mencobanya,Smoga berhasilsedang menelepon.....salam Blogger .

  • Share this
  • Sumbit to Digg
  • Sumbit to StumbleUpon
  • Sumbit to Delicious
  • Sumbit to Technorati
  • Sumbit to Reddit
  • Sumbit to Mixx
  • Sumbit to Twitter
  • Sumbit to Furl
  • Sumbit to Design Float
  • Sumbit to Blinklist
  • Sumbit to Yahoo Buzz
  • Sumbit to Google Bookmarks

Artikel Terkait

0 comments:

Post a Comment

SILAHKAH COMEN DULU...
MAKASIH TELAH MEMBERI COMEN DAN WUKTUNYA....
SALAM PERSAHABATAN.....
edy putra Jl.cik lanang62 Kauman Rt04/05 Jepara-59417

CARI ARTIKEL DISINI By Google

Loading

    COMENTATOR

    CHAT ROOM

    CONTAC Edy putra