tempat belajar blog dan terhubung teman blogger untuk belajar trik blogger, tips edit blog, trik google, SEO dan SERP

Iklan

Blog ini di Sponsori

Jumat, 11 Mei 2012

Cara membuat menu Vertikal di Blogspot

  • Login ke blog anda > Klik Design
  • Add a gadged dan pilih HTML / javascript
  • Penempatan gadged atau widget tepatnya pada sidebar kanan atau kiri, karena menu ini vertikal dan tentunya susunan menunya kebawah.
  • Copy kode berikut dan paste pada gadged tsb
<style>
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 5px;width: 250px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #000000;font: bold 12px Verdana, Helvetica, sans-serif;color: #FFFFFF;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.menu-vertikal li ul{position: absolute;width: 250px;display: none;}
.menu-vertikal li ul li{float: left;}
.menu-vertikal li ul a{width: 250px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #454545;}
* html .menu-vertikal li { float: left; height: 1%; }
* html .menu-vertikal li a { height: 1%; }
</style>
<ul id="verticalmenu" class="menu-vertikal">
<li><a href="/">Home</a></li>
<li><a href="http://Link1">Menu1</a></li>
<li><a href="http://Link2">Menu2</a></li>
<li><a href="http://Link3">Menu3</a></li>
</ul>
  • Kemudian Save

Keterangan cara membuat menu vertikal di Blogspot :

  • Ganti Link1, Link2, Link3 dan Menu1, Menu2, Menu3 sesuai kebutuhan anda. yangs aya contohkan hanya 4 menu dengan Home. Jika ingin menambah, silahkan di tambahi dibawah sendiri ya <li><a href="http://Link4">Menu4</a></li> dan seterusnya.
  • Kode berwarna Merah adalah lebar menu dan list menu, silahkan anda sesuaikan dengan lebar widget sidebar blog anda.
  • Kode berwarna Piru adalah warna background menu Vertikal
  • Kode dengan warna Orange adalah warna tulisan dan bisa anda rubah sendiri
  • Kode berwarna Pink adalah warna hover background menu vertikal tersebut. Maksudnya warna background apabila mouse di arahkan pada menu tersebut.
Membuat menu vertikal di blog hanya perlu sedikit waktu, karena prosesnya juga tidak lama alias rada rada gampang ^^.
    Comments
    0 Comments

    Tidak ada komentar:

    Posting Komentar

    Maaf jika sebagian komen sobat tidak terbalas di karenakan kesibukan admin.

    -Berbahasa sopan, no spam dan fokus pada artikel adalah ciri blogger yang baik.
    Thanks for visit :

     

    SMS Gratis

    Tips Hari Ini

    jika blog anda sudah hilang tombol Monetize untuk Adsense, langkah mudahnya adalah dengan menulis http://www.blogger.com/adsense-overview.g?blogID=IDBLOG-ANDA di Address bar browser lalu tekan enter

    memasukan iklan teks dalam postingan cukup dengan mengetikan kode <div id="adsleft" style="width:100px;height:100px">Isi Iklan</div>

    untuk membuat optimasi SEO pada URL tambahkan ID seperti id="ycusoy+admin.belajar.blogspot.com" dan TITLE seperti title="Judul Posting"

    untuk membuat optimasi SEO pada Gambar tambahkan ALT seperti alt="JUDUL POSTING"

    Sepatah Kata:

    mencoba berbagi berdasar pengalaman pribadi dan referensi internet

    INFO LAINNYA

    2009 Admin-Belajar Blog. All rights reserved.
    Powered by Ycusoy and Blogger.
    blogger seo friendly from www.yantocusoy.tk