HALO Friend, welcome | LOGIN | DAFTAR
Rabu, 14 November 2012 | 15:59 WIB

Cara Membuat Menu Horizontal Warna Warni



 DEMO

  Cara Membuat Menu Horizontal Warna-Warni - Hallo Sahabat Facewoman Hari Ini Saya Akan Memposting Artikel Tentang Widget Blog,Yah, Apa Lagi Kalau Bukan Tentang Cara Membuat Menu Horizontal Warna Warni ,Postingan Saya Kali Ini Adalah Untuk Anda Yang Sering Bertanya Ke Email Saya bagaimana Cara Membuat Menu Warna - Warni.

 Karena Kalian Semua Setia Dan Slallu Mengunjungi Blog Saya, Maka Saya Akan Memberi Trick Ini KePada Anda Yang Membutuhkan. Maaf Sebelumnya Saya Engga Ngasih Tau Trick Ini ke Anda Semua Sahabat, Karena Saya Lupa Dengan CSS'y Hehhehe :D.

 Ini Dia Kita Simak Langsung Saja Cara- Caranya :D

1. Pertama - Tama Tentu Masuk Ke Blogger Anda
2. Lalu Edit HTML Dan Cari Kode Berikut Ini ]]></b:skin>.
Jika Sudah Ketemu Letakan Kode Di bawah ini Diatas Kode :

.menupic{background:#fff;width:970px;margin:0 auto;}



#homk{



background:url() repeat-x;



height:32px



}



#homk1,#homk7,#homk25 {



background:url() repeat-x;



height:32px



}



#homk2 {



background: #192f92;



background-image: -moz-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -webkit-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -o-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -ms-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d68523), color-stop(0.66, #ffc518));



-moz-box-shadow: 3px 3px 4px #aaaaaa;



-webkit-box-shadow: 3px 3px 4px #aaaaaa;



box-shadow: 3px 3px 4px #aaaaaa;



height:33px



}



#homk9 {



background:url(http://1.bp.blogspot.com/-dQmzG6uB_SA/TliACQPEU_I/AAAAAAAABiM/iEpG0Z69GH0/s1600/header+pink+patimeh.png)

 repeat-x;



height:33px



}



#homk14 {



background:url(http://1.bp.blogspot.com/-LeN9yJQsAK0/UBWDgQ7hLQI/AAAAAAAAAtk/dQPvtbSJPmo/s1600/food-facewoman.gif) repeat-x;



height:33px



}



#menuwrapper2 {



width:970px;



height:30px;



margin:0 auto



}



.clearit {



clear:both;



height:0;



line-height:0.0;



font-size:4px



}



#menunavigasihorisontal {



background:url(http://4.bp.blogspot.com/-vLiNWM7UQvg/T8h8uoLWC6I/AAAAAAAAATo/LNH-yfrcQFY/s1600/KUCARA.1.jpg);



width:970px;



border-top:0 solid #999;



border-bottom:1px solid #FFF;



color:#fff;



height:32px;



overflow:hidden;



-moz-border-radius-topleft:8px;



-moz-border-radius-topright:8px;



margin:0 auto



}



#menunavigasihorisontal li a {



border-right:1px float:left;



display:block;



font-weight:970;



text-decoration:none;



color:#fff;



margin:0;



padding:8px 7px



}



#menunavigasihorisontal ul {



padding-left:0px;



font:bold 15px Arial;



color:#F7F7F7;



text-shadow:#999 2px 0px 1px ;



text-transform:none;



list-style-type:none;



letter-spacing:.01em;



margin:0



}



#bb2nav {



width:100%



}



#bb2nav,#bb2nav ul {



list-style:none;



font-size:bold 12px;



margin:0;



padding:0



}



#bb2nav a {



border-right:0 solid #fff;



border-left:1px solid #fff;



float:left;



display:block;



font-weight:700;



text-decoration:none;



color:#fff;



margin:0;



padding:8px 7px



}



#bb2nav li {



float:left;



position:static;



width:auto



}



#bb2nav li.red a:hover {



background:url(http://4.bp.blogspot.com/-SqYzHfcWzjw/T31nE59tXiI/AAAAAAAAAMI/FZQaIbYVbfE/s1600/menukuke2.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.red1 a:hover {



background:url(http://1.bp.blogspot.com/-7EteHCuLkOk/T8h848p3kmI/AAAAAAAAATw/wJMkByY9Xxw/s1600/KUCARA.2.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.blue1 a:hover {



background:#f69 url(http://1.bp.blogspot.com/-GAOcxmDM4Tg/TwgDi1-JM8I/AAAAAAAAAIY/BC5ZM_i-H3Q/s1600/blue1bar.png.png);



color:#222;



text-decoration:none



}



#bb2nav li.coffe a:hover {



background:#f69 url(http://2.bp.blogspot.com/-APHvlhn1LUQ/TwgDjy42iMI/AAAAAAAAAIk/zzWDMGp0ooM/s1600/coffebar.png.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.green a:hover {



background:#00cc00;



color:#FFF;



text-decoration:none



}



#bb2nav li.brown a:hover {



background:#f69 url(http://1.bp.blogspot.com/-5CxpgfNi2cg/T7uoOgxhinI/AAAAAAAABTc/VuSKwRJR1AI/s1600/Untitled-1.png);



color:#fff;



text-decoration:none



}



#bb2nav li.grey3 a:hover {



background:#f69 url(http://1.bp.blogspot.com/-075byZ_qQQw/T31nEx9GDeI/AAAAAAAAAMA/cGCJJ6M66tI/s1600/Menukuke1.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.pink a:hover {



background:#f69 url(http://3.bp.blogspot.com/-t5p6pz6rr4g/TinEeAHAKNI/AAAAAAAABeA/EOULa5biizE/s1600/navlov.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.orange a:hover {



background:#006699;



color:#FFF;



text-decoration:none



}



#bb2nav li.orange1 a:hover {



background:url(http://4.bp.blogspot.com/-jaAh-uN0znw/UDckLc_DS7I/AAAAAAAACWI/DAiT6AtFBbU/s1600/andikwin+tutorial.png);



color:#fff;



text-decoration:none

}

3.Setelah Itu Save Simpan.

 Langkah Selanjutnya Adalah Klik " ELMEN HALAMAN > TAMBAH WIDGET > Pilih HTML/JAVA SCRIPT,

Lalu Copas Kode Di Bawah Ini Tepat Di Kolom HTML/JAVA SCRIPT :

<div id='menunavigasihorisontal'>

<div id='menuwrapper2'>

<ul id='bb2nav'>

<li class='orange1'>

<div id='homk1'><a class='tooltip' href='#' rel='nofollow' title=''>HOME</a></div></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title=''>BASKET</a></li>

<li class='coffe'><a class='tooltip' href='#' rel='nofollow' title=''>MOTOGP</a></li>

<li class='blue1'>

<a class='tooltip' href='#' rel='nofollow' title=''>SEPAK BOLA</a></li>

<li class='coffe'><a class='tooltip' href='#' rel='nofollow' title=''>SPORT LAIN</a></li>

<li class='grey3'><div id='homk14'><a class='tooltip' href='#' rel='nofollow' target='_blank' title='Situs Berita Sepak Bola Persita '>Arena Persita</a></div></li>

<li class='grey3'><div id='homk25'><a class='tooltip' href='#' rel='nofollow' target='_blank' title='Koleksi Video'>VIDEO</a></div></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title=''>FORMULA 1</a></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title=''>MOMENTUM</a></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title='Buku Tamu Fajar'>BUKU TAMU</a></li>

</ul>

<br class='clearit'/>

</div>

<div style='clear:both;'/>

</div>

Mudah Bukan Semua Ituu ??? Semoga Trik Saya Bermanfaat ( Fajar "AP" )

 === TERIMAKASIH ===

Bagikan ke :
thumbnail Title: Cara Membuat Menu Horizontal Warna Warni
Posted by: arena persita fajar
Rating: 4.5 ★★★★★ - 174.984 Reviews
Reviewer: 1 hour 30 min - 9.999 Kalori
Sponsored Link

5 Komentar di " Cara Membuat Menu Horizontal Warna Warni"

  1. Ijin Nyimak Kawan,Bagus Nih Menu Nya

    BalasHapus
    Balasan
    1. Iyah Silahkan Broo

      #Salam Blogger

      Hapus
  2. akhirnya yg ditunggu2 di share juga,,
    setelah lama fakum dri blogging mmpir ksni smakin keren aja, www.tamanmisteri.com , nm bru mas dgn tmpilan lma,, :D

    BalasHapus
  3. sudah di coba & berhasil dgn baik..terima kasih atas sharenya sgt bermanfaat sekali..sekalian ijin utk belajar trik2 lainnya yah utk dipraktekan di blog sy..sukses blogger indonesia :)

    BalasHapus

Poskan Saran, kritik Serta Opini Anda Pada Blog Facewoman :

TERPOPULER :
TERKOMENTARI :
Mari Gabung Di KBN ( KOMUNITAS BLOGGER NEWBIE INDONESIA ) » KLIK DISINITemui Kami di twitter@andikwinclose
(close)
Back Top