[Requested by Share4rt, dll] Pagi yang cerah, kemarin Hack4rt telah mengganti template baru dari kangkapuk yang bernama Dark Responsive yang sudah valid HTML5. Kali ini saya akan memberikan sebuah tutorial bagiaman cara membuat menu atas melayang seperti hack4rt.com . Menu ini bisa bermanfaat dengan memudahkan viewer untuk berpindah dan kembali kehalaman lain. Berikut tutorialnya, cekidot
Kita Main di EDIT HTML pada Template
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/AVvXsEiaf5AuvCsDEebDl3j225mBPwFyiCAdhSoEp51pQ5-6hiT0KWZhuK6d71frkCMvM1RDuYmBwwwa_lobx2WOHQNRtKjsWme1BrXoX6U20p4EyBsMh_KA7we9U9L0nrnVr4fbQX3N6zEfY0c/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/AVvXsEgeSfk9ftSn1VdNBBvP_U7MN2lr9tNYm9u9TXGq27r-_jx5Dugqfvy2SvRaJPrKY2-5r-crq5kXUVHZcYs8VBTNT7hvyNz4BAK7z5Ce9XbFxfDL5t0w9IgiPEbZQUbTBF_yg8R4uAs-73c/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/AVvXsEh6qONaxilYBBkmTrofNxB1eDltswI07DjWF5DDnjfilDT7YNeYdtMBTnAYXbskBq27YgoZXWAOsUpglHYKjPzlr6t2CJ-W2AZwb_LWmfvV5aKQ-za273cjscPh4sbhSsjPT4HPIlGLMFs/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>
Silahkan edit list "<li>" tersebut dengan keinginan anda, tapi kalau ingin ada Search Formnya jangan diedit tuh search formnya. Terimakasih :)
*note Kalau bentrok sama kotak yang bawah nya, bisa di pake "margin-top:20px;" pada kotak wrapper.
Terimakasih telah membaca artikel Cara Membuat Menu Atas Melayang. Anda bisa bookmark halaman ini dengan URL http://hack4rt-blog.blogspot.com/2013/03/cara-membuat-menu-atas-melayang.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.
