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/AVvXsEgVAac5vZLdnSdC_S5vrVz1F8zvZAwg9WMNk5tHmHoRpmsuRSQ68YQaFI_AtfLO480pWi6Kgyjf4L9UkDJx_dnNzq7EnHTJc42hdSG1ydRpLzyzpVOhoJZPm2WaWbOjqHnghtcR89v-_GA/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/AVvXsEh9BdW7gBOQn9IwcjOIcnANv9SJaWKKnu20yk1CeaZLrE9laEH_D080aeOnc259f_rC0QNgG3oc_qsnU-7lyyMVdEaP2G63TFQb5HYMXH26JtLiEy4Fe3R84SCOpiGf5udwIURDdmywe-Q/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/AVvXsEjPq35Op5Af9c_zJnWLsp2bwLPjUQZWlrqLrIehk2GR40JDwXkJZ0xd9JpNJcbD8oRZrkBrOZUepRuA3qjmNPR-tQdq2xwTk-DlPFFqqjHo67BPeQDUBXWT8jMSxAy4SFf0dE_LLYPK0Dk/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.
Rating: 100% based on 99998 ratings. 5 user reviews.
Original Post : http://www.hack4rt.us/2013/03/cara-membuat-menu-atas-melayang.html
Ditulis Oleh Noval Bintang
0 komentar:
Posting Komentar