Breaking News
Loading...
Sunday, May 19, 2013

Cara Membuat Menu Atas Melayang Pada Blog

Cara Membuat Menu Atas Melayang Pada Blog


Assalamualaikum.Wr.Wb .


Halo sobat Info ^^
Kali ini saya akan mengshare Cara Membuat Menu Atas Melayang Pada Blog , cara ini saya dapat dari Sm4rtFren Blog .. Berikut cara-caranya ..

Cari kode </b:skin> dan letakkan kode berikut tepat di atas kode </b:skin>
/*Navigasi Hack4rt*/
#nav h1 a,#nav h2 a{font-family:'Oswald',Helvetica;font-weight:bold;letter-spacing:1px;line-height:normal;text-transform:none;color:#00a3ff;text-shadow: 0px 1px 0px rgb(0, 0, 0);font-size:18px}
#nav,.footer{background:rgb(34, 34, 34);box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;}
#nav{position:fixed;z-index:999;top:0;width:100%;margin-bottom:10px;}
#nav ul {margin:0 auto;padding:0;max-width:1024px;}
#nav a {display:block; line-height:30px;text-decoration:none;color:#fff;padding:0 15px;text-shadow: 0px 1px 0px rgb(0, 0, 0);}
#nav li {list-style:none;display:-moz-inline-stack;display:inline-block; zoom:1;*display:inline;margin:0;padding:0;} 

/*SearchBox*/
form#search{margin:0px;padding:0px;height:30px;}
#ganteng #search input[type=text]{background: url(http://4.bp.blogspot.com/-vbF_3Gfg0yk/UD-6aYqXqxI/AAAAAAAABfc/LgGgjkQ_T5Y/s1600/search-white.png) no-repeat scroll 10px 6px #222;
border: 1px solid #333;
font: bold 12px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;
color: #d7d7d7;
width: 268px;
text-shadow: 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 3px #000 inset;
-webkit-transition: all .2s ease 0;
-moz-transition: all .2s ease 0s;
-o-transition: all .2s ease 0s;
transition: all .2s ease 0s;
padding: 6px 0 6px 30px;
margin: 0px;}
#ganteng #search input[type=text]:focus{background:url(http://1.bp.blogspot.com/-vStM8apiZ80/UDpwRpYojmI/AAAAAAAABZM/ItcJ9muEfAQ/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;color:#6a6f75;width:268px;box-shadow:0 0 1px #000 inset;-webkit-box-shadow:0 0 1px #000 inset;-moz-box-shadow:0 0 1px #000 inset;text-shadow:0 2px 3px rgba(0,0,0,0.1);margin:0px}

Kemudian Cari <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> lalu letakkan kode HTML berikut tepat di bawah kode <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<nav id="nav">
<ul>
<li><a href='http://www.hack4rt.us'><img alt="Home" src="http://3.bp.blogspot.com/-nBigMXKIpCQ/UCHujn3jNkI/AAAAAAAACS8/5-RGq7WQ8u8/s1600/home.png">Home</a></li>
<li><a href="http://www.hack4rt.com">Site Map</a></li> 
<li><a href="#">Link Exchange</a></li> 
<li><a href="#" title="Hack4rt Twitter">Twitter</a></li> 
<li><a href="#" title="Hack4rt Facebook">Facebook</a></li> 
<li><a href="#">Hack4rt Posts</a></li> 
<li id="ganteng"><form action="search" id="search" method="get" target="_blank"> <input name="q" placeholder="Telusuri Website..." size="40" type="text"/> </form> </li> 
</ul> 
</nav>
*note Kalau bentrok sama kotak yang bawah nya, bisa di pake "margin-top:20px;" pada kotak wrapper.
Silahkan edit list "<li>" tersebut dengan keinginan anda, tapi kalau ingin ada Search Formnya jangan diedit tuh search formnya.

Bila ada yang mau ditanyakan tanyakan saja di komentar 
Terima kasih telah berkunjung Sob ^^

Sumber : Sma4rt Fren Blog 

Assalamualaikum.Wr.Wb .




Ditulis Oleh : Achmadi Iman Faris ~ Faris Share

Faris Art Sobat sedang membaca artikel tentang Cara Membuat Menu Atas Melayang Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

1 komentar:

  1. thx sob tutorialnya
    http://duniagame7.blogspot.com/

    ReplyDelete

Mohon Sobat Untuk Tidak Berkata Kasar Pada Formulir Komentar, Dan Mohon Untuk Saling Menghargai .
[1] . Berkomentar boleh , tapi jangan nyepam(BOM COMMENT) ya kaaka ..
[2] . Live link tidak papa , tapi maksimal sehari 2 link jika berkomentar;)
Sekian Dari Admin Dan Terima kasih....

 
Toggle Footer
Copyright © 2012 Faris Share™ All Right Reserved
Blogger Designed by IVYthemes | MKR Site