Cara Membuat Menu Horizontal Warna-Warni - Saya Akan Memposting Artikel Tentang Widget Blog,Yah, Apa Lagi Kalau Bukan Tentang Cara Membuat Menu Horizontal Warna Warni.
Ini Dia Kita Simak Langsung Saja Cara- Caranya :
1. Pertama - Tama Tentu Masuk Ke Blogger Anda
2. Lalu Edit HTML Dan Cari Kode Berikut Ini ]]>
Jika Sudah Ketemu Letakan Kode Di bawah ini Diatas Kode :
.menupic{background:#fff;width:100%;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eVrg4cEjurOwMwIz-KcCtf-vrvdYSxgtac1jKZhOr9GvXnCts58r3RSzHh3RFQw7I86263wVFBwVcqXcSJq8VFen2m4_9cCbOMUEm-x_uAwVKGz2Y8rpJ_KYCcfGetiSIvuBYzLZDHyf/s1600/header+pink+patimeh.png) repeat-x;
height:33px
}
#homk14 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3z0fP7uGPDVhyphenhyphenCkL17oftE34mqAlRQ1k4o1PZrWxB5a-8dFygVmI0Z8njNgTITqWUOPv4CluLC6LL6xGhYnkFQ2a5ZCNGH0fQ65GbniDs-ZngepRAKO0WjgqcgOZK29oyhNHS101Eb0Ws/s1600/food-facewoman.gif) repeat-x;
height:33px
}
#menuwrapper2 {
width:100%;
height:30px;
margin:0 auto
}
.clearit {
clear:both;
height:0;
line-height:0.0;
font-size:4px
}
#menunavigasihorisontal {
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRH7g1eIQFfg79rPS21w9EgZrvD4Dq27X66X9IQs5ct6s6Vu9adHEbaUnbJsyIQHyRjh439l8PygLng53B1nV2etI9rxKw1wFyd_kMIEotLfloM4-JyQyJovlR_m1fjjfS8MDcPdLd2W61/s1600/menukuke2.png);
color:#FFF;
text-decoration:none
}
#bb2nav li.red1 a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6xBE35rrjbTXiOeZmSAf2jTcDRC7YP0xTPJegA43eF-ESE_4hTJ3qFTexjsGQmWL1yuDJBbeo3sJ4pW4ELJpTMvbCDz4EIouDTLIareCI4lSjI_iWZr3sYlrzioHOy2nJQZOyDgIVUc/s1600/KUCARA.2.png);
color:#FFF;
text-decoration:none
}
#bb2nav li.blue1 a:hover {
background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi69_ZwhXUCDX3StGqbyywvHwIl2iWgVbH0jxIylAcXt-ZYfQ0-3gnEoK_5yIcgMXFf54IWmr_dyuyxb7bwEwA8uiIZj8N3ky8cmExP-dx4Qy0RG_xkkVtUWclDyB4ddy12F1ttAHOwau9o/s1600/blue1bar.png.png);
color:#222;
text-decoration:none
}
#bb2nav li.coffe a:hover {
background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemPd951K-hDn1mizbvo08hAYng6_n7WXyHszn8Fc7EWNttgrs93n_g6QMYeeoCgc3UT65dd8kXltvlMwnDz5MQy89n-V8GHn7mhENicxvC-15ANIzapcReWXR0cbFIeFHhxCiyqh_Ywl_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwkLl6wunBkkTPugV2RVjBrTzoQVzaRnOs2wcDtyTlDVK29tQoyLEH8mzrlzRgg7Zem3C94XsUufKvLyhG0Kw_jghlshzc4CRImY3dZid6CsC4Cq5OYZr5rOT-Hk_UO0bhbvBp0h_lAw/s1600/Untitled-1.png);
color:#fff;
text-decoration:none
}
#bb2nav li.grey3 a:hover {
background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdsE5hnN3VxEGtahINrWYb8doxbCqa8JnQCzjM468iFHN2NOlr9QoDIUKiVmZ-4QUYWvco4VxEuMFoeEiEa0WzuC8pCsd6PQvFaaWpqsNBxH-x1MqsJpZhTqP0AYxKznty51shi7QZw_bR/s1600/Menukuke1.png);
color:#FFF;
text-decoration:none
}
#bb2nav li.pink a:hover {
background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Tdq9m2FNKs__YI4y1n9OpqOrYoCpxOPs3DHNc4Uq5hSmBiT8uPV10PqRYUWes2JEGfr8dTUzDJWBpy-CE6AdfN9l8J-BZkJZDiBdPZlH3o85h3tfqxIlHgBLryW6s4FYJzDbROUD04o/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwxSptRPqknEQbPeN4zYwwokA0eStoD2y_svXg4xkKn5zncauZ_ehkOIr4OMlQdcQphRogXBeGHaXhj3nI1puNgKAds2YV-jjEtAknfX3mm6yRIqp7bjVttcVb6yCqBzUy1YYidg9xnmY/s1600/andikwin+tutorial.png);
color:#fff;
text-decoration:none
}
3.Setelah Itu Save Atau 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 :
Mudah Bukan Caranya??? Semoga Trik Saya Bermanfaat
*Sumber: http://ngocop16.blogspot.fr/2012/11/cara-membuat-menu-horizontal-warna-warni.html
Tidak ada komentar:
Posting Komentar