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.

MEMBUAT NAVIGATOR HORISONTAL VERSI PERTAMA

CARA MEMBUAT NAVIGATOR (MENU)  HORISONTAL

Tempelet blog (blogspot) yang sudah anda miliki kadang sudah terdapat navigator horisontalnya,,,, ?? itu bukan masalah karena sudah banyak sekali tempelet yang sudah jadi ,,,, tinggal pakai saja beres dech ,,,!!!
Seperti postingan saya yang terdahulu mengenai 'menu navigator vertikal' , sekarang saya akan sedikit berbagi dengan postingan membuat menu navigator horisonta ,Tapi bagi sobat yang tidak ingin untuk mengganti template baru lagi dan belum memiliki tab navigator horizontal pada headernya, berikut cara membuatnya:


1.Langkah Pertama
  • Loggin ke blogger
  • Pada dasbor klik tata letak
  • klik edit HTML kemudian cari kode ]]></b:skin>
  • kemudian letakkan kode berikut diatas ]]></b:skin>

    menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
    .menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
    .menuhorisontal li{display:inline; margin:0}
    .menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;}
    .menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}


    hasilnya seperti ini
  • tab menu navigator horizontal

    :
    atau kode berikut:



    .menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
    .menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
    .menuhorisontal li{display:inline; margin:0}
    .menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;-moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px}
    .menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

    Untuk hasil seperti ini
    tab menu navigator horizontal



    keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. Untuk kode warna bisa lihat DISINI
  • Simpan template. 


2. Langkah Ke Dua

Klik tata letak=> elemen halaman=> tambah gadget pada bagian atas header atau bagian bawahnya=>   HTML/JavaScrip

Copy dan paste kode dibawah ini  pada content: ( tambah  HTML/javaScrip )


<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://...(alamat web/blog anda)">HOME</a>

<a href="http://...(alamat web/blog anda)" target="_blank">Agama</a>

<a href="http://...(alamat web/blog anda)" target="_blank">Tecnology</a>

<a href="http://...(alamat web/blog anda)" target="_blank">Kesehatan</a>

<a href="http://...(alamat web/blog anda)" target="_blank">Islamic Animation</a>

<a href="http://...(alamat web/blog anda)" target="_blank">Glitter Teks</a>

<a href="http://www.blogger.com/" target="_blank">Loggin Blogger</a>

</li>
</div>
</div>



Keterangan: untuk URL silahkan ganti dengan alamat web/blog anda, begitu pula warna backgroundnya silahkan sesuaikan dengan selera. Bisa lihat kode warnanya DISINI

Selamat mencoba,,,,, 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