oke gan,,, kali ini ane mw jelasin tentang cara membuat menu fertikal pada blog,,,, sebelumnya ane sakit,, jadi g sempat deh buat update,,,,
lansung aja ea gan,,,, cekidot

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.



selamat mencoba ea gan,,,, dan semoga berhasi,,,,,

Posting ini telah dilihat sebanyak (Beberapa kali)

Baca juga artikel lainya

blog

• cara pasang music diblog
• cara membikin link bergoyang
• cara membuat kelap-kelip disertai bintang
• cara memasang readmore otomatis
• cara membuat daftar isi blog
• cara pasang spoiler pada blog
• Tutorial Bikin Footer Footer Bar + Random Post Berjalan
• Panduan Pasang Script Anti Block / Copy Di Blogger
• Cara Mudah Membuat Efek Salju Di Blog
• Pasang Buku Tamu Tersembunyi Di Blogger
• Membuat Menu Serta Sub Menu Tanpa jQuery
• 6 Macam Style Navigasi Halaman Untuk Blogger
• Cara Bikin Tulisan Berjalan Di Address Bar
• Cara Pasang FB Like, Twitter, Google +1 Di Blogger
• Cara membuat Tukar Link Sendiri Pada Postingan Blogspot
• Cara Membuat Spoiler Di Blogspot
• cara membuat template sendiri
• Membuat Menu Melayang Pada Blog
• cara memasang Google Translator
• pelacak ip address
• cara membuat kursor dengan teks

SITE MAP

• download game hp
• cara pasang menu butang melayang pada blog
• cara memasang kode warna pada blog
• kode warna blog
• cara membuat salamat datang pada blog
• cara membuat kelap-kelip disertai bintang
• cara memasang readmore otomatis
• cara pasang spoiler pada blog
• Cara Membuat Poster Film Menggunakan Adobe Photoshop
• cara mengganti bagground photo
• membuat gelembung pada photo dengan photoshop
• photoshop online
• tv online
• CARA MEMASANG CHAT MY CHATROLL ,FB,TWITTER
• Tutorial Bikin Footer Footer Bar + Random Post Berjalan
• Panduan Pasang Script Anti Block / Copy Di Blogger
• Cara Mudah Membuat Efek Salju Di Blog
• Pasang Buku Tamu Tersembunyi Di Blogger
• Membuat Menu Serta Sub Menu Tanpa jQuery

Posted in: blog,SITE MAP