Info

SELAMAT DATANG

Selamat datang di Info CyberManiaXp - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel dunia teknik (Blogging,Harga Hardware , Artikel unik Dan Lain Lain) yang Kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik

Sekilas Tentang CyberMania

Nama saya aLamp,saya berumur 17 , bersetatus pelajar kelas 3 SMK,jurusan TKJ (Tekhnik Komunikasi dan Jaringan) dan saya bertempat tinggal di Bekasi (Jawa Barat) . saya sangat suka Tekhnologi..

warna warni saat mouse menyorotnya Dengan Css

Diposting oleh aLamp | Label: Turtol Blog Unik |

Assalamualaikum Wr.Wb .. Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana cara membuat widget tersembunyi dengan css3.Pada Tutorial Blog Kali ini .. Saya akan Menjelaskan Pada Sobat 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 Sobat Tertarik Terhadap Menu Tersebut..

Mari Sobat Ikuti Langkah-langkah Berikut.. :

Login Ke akun Blogger sobat
Pada Dasbor pilih RANCANGAN + EDIT HTML dan jagan lupa untuk mencentang kolom expand template widget
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 Dan Lihat Hasilnya.. :D

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Rabu, 28 September 2011

warna warni saat mouse menyorotnya Dengan Css

Assalamualaikum Wr.Wb .. Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana cara membuat widget tersembunyi dengan css3.Pada Tutorial Blog Kali ini .. Saya akan Menjelaskan Pada Sobat 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 Sobat Tertarik Terhadap Menu Tersebut..

Mari Sobat Ikuti Langkah-langkah Berikut.. :

Login Ke akun Blogger sobat
Pada Dasbor pilih RANCANGAN + EDIT HTML dan jagan lupa untuk mencentang kolom expand template widget
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 Dan Lihat Hasilnya.. :D

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Cool Blue Outer Glow Pointer