Info

SELAMAT DATANG

Selamat datang di mnc-mirror.blogspot.com .. silahkan untuk melihat-lihat.. eitss tapi jangan lupa untuk follow dan kunjungi balik yah :D hehee

Sekilas Tentang Saya

Nama saya Halim Swito Pakpahan,
saya selalu ingin tahu sesuatu yang baru karena saya sangat tertarik dengan sesuatu yang baru

Senin, 30 Januari 2012

Membuat Tab Menu Warna Warni

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 Sobat 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 dan Ubah KOde yg Berwarna MERAH dengan Judul Yang Sobat Inginkan
  5 . SIMPAN kemudian lihat hasilnya
Comments
0 Comments

0 komentar:

Posting Komentar