sjcom bojonegoro
 

Pada Tutorial Blog Kali ini .. Saya akan Menjelaskan  Pada kamu Semua Tentang Bagaimana Cara membuat menu warna-warni saat mouse menyorotnya. Nah Maksud dari 'menu warna-warni saat mouse menyorotnya' ialah menu yg Pada Saat Mouse  kita Sorotkan Ke Menu tersebut.., Menu itu akan Berubah-ubah warnanya nah contoh menunya ialah Menu Yg Ada Di Blog ini, Tepatnya dibagian atas blog ini..Menu ini Membuatnya Tidaklah Sulit,Karna Saya Sudah Membuat Menu yg ini yg Simpel Cara Pemasangannya yaitu saobat tinggal menaruhkan kode di bawah <body> saja... Nah Jika kamu Tertarik Terhadap Menu Tersebut..

Mari Sobat Ikuti Langkah-langkah Berikut.. :

   1. Login Ke akun Blogger sobat
   2. Pada Dasbor pilih RANCANGAN + EDIT HTML dan jagan lupa untuk mencentang kolom expand template widget
   3. Masuka KOde Berikut  Dibawah kode <div id='outer-wrapper'>



<style type='text/css'>#menubar {position: fixed;top:0px;z-index: 1000;background:-moz-linear-gradient(top,#1F2326,#000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;width:988px;margin: 0;padding: 0;height:30px;}#menu {width:988px;height:30px;position:relative}#menu ul {padding:0;margin:0;list-style:none;position:absolute;left:0;top:0;width:988px;height:30px;z-index:10}#menu ul li {float:left;padding-bottom:4px}#menu ul li#li1 {padding:0}#menu li a {display:block;text-transform:capitalize;height:20px;float:left;color:#fff;text-decoration:none;line-height:20px;padding:0 10px;font-family:kristen itc;font-size:13px;border-right:1px solid #FF0000;margin:3px 0 0;}#menu li a:hover {color:#ff0000;white-space:nowrap;}#menu li a.current {color:#ffffff;}#menu li a:hover.current {color:#ffffff;}#menu li a:hover b {display:block;width:988px;height:30px;position:absolute;left:0; top:0;z-index:-1;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}#menu li#li1 a:hover b {background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));}#menu li#li2 a:hover b {background-image: -moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -webkit-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);}#menu li#li3 a:hover b {background: -moz-linear-gradient(top,#AF0000,#6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#menu li#li4 a:hover b {background: #D11717 -moz-linear-gradient(top,#D11717,#000);background: -webkit-gradient(linear, left top, left bottom, from(#D11717), to(#000));}#menu li#li5 a:hover b {background:-moz-linear-gradient(top,#001C5A,#000);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#000));}#menu li#li6 a:hover b {background: #244007 -moz-linear-gradient(top,#244007,#000);background: -webkit-gradient(linear, left top, left bottom, from(#244007), to(#000));}#menu li#li7 a:hover b {background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));}#menu li#li9 a:hover b {background:-moz-linear-gradient(top,#029BC5,#000);background: -webkit-gradient(linear, left top, left bottom, from(#029BC5), to(#000));}#menu li#li8 a:hover b {background: #40071F -moz-linear-gradient(top,#40071F,#000);background: -webkit-gradient(linear, left top, left bottom, from(#40071F), to(#000));}</style>
<div id='menubar'>
<div id='menu'>
<ul>
<li id='li1'><a href='#'><b/>Home</a></li>
<li id='li2'><a href='#'><b/>About Me</a></li>
<li id='li3'><a href='#' ><b/>Daftar Isi</a></li>
<li id='li4'><a href='#'><b/>Masuk</a></li>
<li id='li8'><a href='#'><b/>Daftar</a></li>
<li id='li5'><a href='#'><b/>My Facebook</a></li>
<li id='li9'><a href='#'><b/>My Twitter</a></li>
<li id='li7'><a href='#'><b/>Kode Warna</a></li>
</ul>
</div>
</div>
  4 .Ubah Tanda # dengan Url yg Sobat inginkan
5 . SIMPAN Dan Lihat Hasilnya.. :D

Posting Komentar

 
Top