2 December 2014

Cara Membuat Menu Navigasi dan Kotak Pencarian full Responsive


Menu Navigasi dan Kotak Pencarian Responsiv;
Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog, Ada bermacam-macam bentuk dan versi menu navigasi di dalam setiap blog , ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.


Untuk membuatnya anda bisa melakukan posedur dan langkah langkah berikut:
1. Login ke menu blogger. Klik Design kemudian pilih...
-Tempalte
-Edit HTML
-Backup template anda
2. Setelah itu, letakkan kode berikut ini diatas
]]></b:skin>

/* Napigate tamfan */
#napigate{background:#1658A0}
#napigate ul li a{color:#fff}
#napigate ul li ul li a:hover{background:#34495e}
#napigate ul li:hover a{background:#2c3e50}
#napigate{overflow:hidden;clear:both}
#napigate ul{list-style:none;padding:0;margin:0}
#napigate ul li{display:block;float:left;margin:0}
#napigate ul li a{display:block;text-shadow:1px 1px 2px #666;font-family:'Oswald',sans-serif;font-size:16px;padding:10px 15px;transition:all 0s ease-in-out;text-transform:uppercase;}
#napigate ul li ul li{float:none;border-top:1px solid rgba(0,0,0,0.11)}
#napigate ul li ul li a{font-size:14px;text-shadow:0 0 0 #fff}
#napigate ul li ul{visibility:hidden;position:absolute;z-index:9999}
#napigate ul li:hover ul{visibility:visible;background:#34495e}
#pencari{margin-left:5px;background:#fff;margin-bottom:5px;text-align:center}
#search{padding:5px}
#penginput{padding:5px;border:0;background:#2c3e50;color:#fff}
#nyarinya input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0}
#search-top{padding:5px;overflow:hidden;text-align:right;margin:0}
#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:36px;width:40px;background-color:#34495e;background-position:13px -243px;border:none;float:right;cursor:pointer}
#nyarinya{float:right;padding-right:5px}
#hidding2{display:none}
#hidding2{background:#1658A0;color:#fff;padding:10px;font-size:16px;font-family:'Oswald',sans-seriff;cursor:pointer}

Kembali Masukkan kode berikut ini diatas
]]></b:skin>
agar navigasinya responsive

@media only screen and (max-width:992px){
#napigate ul li{float:none}#napigate ul li ul{position:inherit;visibility:visible;background:#34495e}#napigate ul li ul li a{padding:10px 0 10px 45px}#napigate ul li:hover a{background:inherit}#napigate ul{display:none;float:none;clear:both}#hidding1,#hidding2{display:block;clear:both}#hidding2{float:left}.displaying{display:inherit!important}
}

masukkan jquery dibawah ini tepat diatas kode
</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

abaikan jika telah terdapat jquery di template anda

masukkan script di bawah ini diatas kode </head>

<script>
$(document).ready(function(){
$("#hidding1").click(function(){
$("#croscoll ul").toggleClass("displaying");
});
$("#hidding2").click(function(){
$("#napigate ul").toggleClass("displaying");
});
});
</script>

3 masukkan kode ini dibawah kode
</header>

<nav id='napigate'>
<label id='hidding2'>&#8801; Menu</label>
<ul>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Download Apk Android</a></li>
<li><a href='#'>Trik Android</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Jasa Adsense Non Hosted</a></li>
<li><a href='#'>Jasa Adsense Hosted</a></li>
<li><a href='#'>Jasa Adsense Upgrade</a></li>
<li><a href='#'>Trik Adsense</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Jasa Template Responsive</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>Template Blog</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Download Game PC</a></li>
<li><a href='#'>Download Game HP</a></li>
</ul>
</li>
<li><a href='#'>ABC</a><ul>
<li><a href='#'>Harga Handphone</a></li>
<li><a href='#'>Harga Laptop</a></li>
<li><a href='#'>Harga Netbook</a></li>
</ul>
</li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Travel</a></li>
</ul>
<div id='nyarinya'>
<form action='/search' id='search-top' method='get'>
<input id='diklik' name='q' placeholder='Search...' type='text'/><input id='search-button-top' type='submit' value=''/></form>
</div>
</nav>

4 save Selesai,




EmoticonEmoticon