Cara Membuat Menu Navigasi Horinzontal Di Blogger

Diposting oleh Manz Dasilva on Kamis, 12 Januari 2012

Kali ini Manz akan membahas tentang Cara Membuat Menu Navigasi Horinzontal Di Blogger. Menu Horizontal ini sangat ringan, simple, dan keren. Menu Horizontal ini juga tidak akan memberatkan Loading Blog anda. Jika anda berminat ikuti Langkah - Langkahnya. Demonya seperti tampilan Menu Horizontal mirip blog saya.
.::Langkah - Langkah::.
1. Masuk ke akun blogger anda.
2. Klik Rancangan >> Klik Tambah gadget >> Terus klik HTML/Java Script.
3. Setelah anda Klik HTML/Java Script masukan kode CSS3 di bawah ini dan Pastekan Di HTML/Java Script.
<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="#">Home</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">My Award</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#"><blink>Tukar Link</blink></a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='insert keyword here...'/><input class='submitbutton' type='submit' value='search'/></form></div></div>
4. Ganti  Tulisan "#" dengan URL yang anda inginkan.
5. Setelah semuanya selesai Klik Tombol Simpan.
6. Jika anda ingin mengganti background nya anda cari kode seperti ini.
background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
7. Hapus kode di atas dan ganti dengan kode di bawah ini.
Kode untuk Background gradient Black :

background: #999;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );


Kode untuk Background gradient Biru :

background: #499bea;
background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
8. Setelah selesai klik tombol Simpan.

Semoga artikel singkat ini bisa bermanfaat untuk anda. Selamat mencoba dan semoga berhasil. Jangan lupa untuk berkomentar di blog do-follow ini.

.::Related Post::.

{ 0 komentar... read them below or add one }

Posting Komentar

Silahkan anda meninggalkan komentar di blog ini,
anda bisa mendapat kan kunjungan balik dari saya Plus Mendapatkan backlink gratis dari blog ini, karena blog ini blog Do-Follow.
Mohon Maaf nich gan !! Jangan meninggalkan komentar Link dan SPAM dalam bentuk apapun, jika anda berkomentar SPAM saya akan melaporkan komentar anda sebagai SPAM..
Terima Kasih atas kunjungannya dan terima kasih juga atas berkomentar di blog Do-Follow ini..