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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoMrYn6fAlSTuovajYunY9sGdRwsyWtnI-xERXwiLCeUQTsCz6TaFtrfMGqegBaw7LE3Uea21m7tfSMZoKoJ9ADZ0V6sq61ISLRtCxhw_R9KiVQaL5uFwoBKoQ1q0NPYhZmOxoJglAulc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmtdAXBFCrdleziFEH_KW1wbH-DLtDh5vhVt3H95Q7xX4mhBQ3EiknDNCVNt1ljuoJA3Nv3eMPT-5Ky0SHEjO48WkZMcLvplHRk82BvNIGbhB3PLB3RCuD52oWrOSR6iiZpbBXm4sYLQ/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='"loading" + data:blog.mobileClass'> lalu letakkan kode HTML berikut tepat di bawah kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'><nav id="nav"><ul><li><a href='http://www.hack4rt.us'><img alt="Home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzY875WH32P51od0CwLHwHOxmPU5Cg2kg3Bbxhe1lWPv2JUvCwBtNJGCYBzL9bJG8SHAbXzj6xf11XYBz7Wxbra_HwU6A5BTBnBDqMk64Qx3NWJEKwvyjGiksxp7ndPVb4g464BpOniQ/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>*note Kalau bentrok sama kotak yang bawah nya, bisa di pake "margin-top:20px;" pada kotak wrapper.<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>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 : Unknown ~ Faris Share
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
thx sob tutorialnya
ReplyDeletehttp://duniagame7.blogspot.com/