 |
| membuat menu melayang ala hack4rt dan zonailmu |
Cara Membuat Menu Melayang Mirip Hack4rt dan Zonailmu | Sore semua, walaupun cuaca yang sangat tidak bersahabat tapi tetep semangat ngeblog... wkwkwkww. kemarin ZonaIlmu telah mengganti template baru dari mas sugeng yang telah dimodif oleh bang novalbs yang bernama Simple Faster v.2. Kali ini saya akan memberikan sebuah tutorial bagiaman cara membuat menu atas melayang seperti zonailmu.net . 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 Zonailmu*/#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/AVvXsEjW6Pp2dcG_YYxfZZZA961ZDhpUSHezIUTTblHeeww6NVCdHCzmJcu88HjJOAVbNS6k8lYL5CLeaOp6t_m9P-y8xS9dNyTRyFYDyviQ8biRWQUYcsiT5ctqCnHwa2kZXofjG7515zA898c/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/AVvXsEju8Yopx5G837k2R_GifbSvPtzoj3NDzfVc5z8kzlXDG3w1Jcnz1AcIk-S7QBC3YJixfA9SgG-kF6p67cfk9iD6zWeiQszVZwHuKQANQGlz5yn9uil6xrp60kHQ8EbQmEAvcc0mFDiM9SA/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.zonailmu.net'><img alt="Home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBDMHZUcrEUSX3ms4yT4sw2L0I4wsWILGlXwfal3Zz0xlSwB30CltC9xt0xYhMULLMzDFYvlI3aTDtqHAraAif3_of7ZOPA8j3dD4XSTEJu_rCW81F2escfnrBgUrnZ28rr5GzakbqDE/s1600/home.png">Home</a></li><li><a href="http://www.zonailmu.net">Site Map</a></li> <li><a href="#">Link Exchange</a></li> <li><a href="#" title="zonailmu Twitter">Twitter</a></li> <li><a href="#" title="zonailmu Facebook">Facebook</a></li> <li><a href="#">My 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.
Thanks 4 : www.hack4rt.us
*note Kalau bentrok sama kotak yang bawah nya, bisa di pake "margin-top:20px;" pada kotak wrapper.
0 komentar :
Post a Comment
Silahkan Jaga Sopan Santun dalam Berkomentar.
Terima Kasih.