Cara Membuat Menu Navigasi DropDown + Search Buttom SEO Full Responsive Di Blogger
19.54 / Unknown / Edit Template,
Dalam edit template, cara membuat menu navigasi dropdown yang full responsive pada blogger atau blogspot sangat penting jika anda menggunakan template responsive. Mengapa harus pakai template responsive? Jawabannya adalah karena saran dari Google sendiri agar blog anda bisa menyesuaikan dengan semua perangkat, mulai dari Pc, tablet hingga mobile (lihat contoh gambar di bawah). Jika anda tertarik ingin memasangnya, silahkan ikuti caranya di bawah ini.
Menu Navigasi DropDown + Search Buttom
Pertama, Pasang Kode CSS
Fungsi dari kode CSS dalam edit template adalah sebagai style yang bisa diatur sesuai dengan keinginan anda. Nahh.. disinilah anda bisa mengatur tinggi dan lebar menu navigasi dan search buttom sesuai dengan template anda. Bagaimana cara penempatannya? Silahkan anda ikuti step by step berikut ini:
Login ke Blogger.
Pilih Template.
Klik disembarang tempat pada kode template lalu tekan Ctrl + F pada keyboar PC anda, maka akan muncul kotak pencarian.
Pada kotak pencarian, paste kode ini ]]></b:skin> lalu tekan Enter pada keyboar PC anda.
Copy kode CSS di bawah ini lalu letakkan tepat di atas kode ]]></b:skin>
/* MENU NAVIGATION */
#nav {font:bold 11px Arial,sans-serif;background:#117AC9;border-top:1px solid #3690D4;border-bottom:1px solid #0F6DB3;margin:0 auto;padding:0 0;text-transform:uppercase;display:inline-block;max-width:864px;width:100%;}
#nav ul#menu {float:left;margin:0px 0px 0px 18px;padding:0px 0px;height:34px;}
#nav li {margin:0px 0px;padding:0px 0px;float:left;display:inline;list-style:none;position:relative;}
#nav li > a {display:block;padding:0 10px;margin:3px 0;line-height:28px;text-decoration:none;color:#fff;}
#nav li li > a {display:block;padding:0 10px;margin:0 0;line-height:24px;text-decoration:none;color:#fff;}
#nav li:hover > a, #nav a:hover {background-color:#555;}
#nav li ul {background:#555;margin:0 0;width:170px;height:auto;position:absolute;top:31px;left:0px;z-index:10;display:none;}
#nav li li {display:block;float:none;}
#nav li:hover > ul {display:block;}
#nav li ul ul {left:100%;top:0px;}
#search-form {float:right;margin:0 18px 0 0;font-weight:bold;}
#search-form input#search-box[type="text"] {background:#fff;float:left;height:26px;line-height:26px;margin:4px 0;padding:0 10px;width:100px;color:#333;border:none;}
#search-form input#search-button[type="submit"] {
float:right;background:#333;color:#666;height:26px;line-height:26px;margin:4px 0;padding:0 7px;border:none;}
#search-form input#search-button[type="submit"]:hover{background:#222;cursor:pointer}
#search-form input#search-box[type="text"]:focus {background:#eee;outline:none;}
.tinynav {background:#fff;display:none;margin:4px 0 4px 18px;padding:6px;border:none;}
.tinynav option {padding:0 4px;}
/* END MENU NAVIGATION */
Kedua, Pasang Kode Full Responsive
Fungsi kode responsive berikut ini pada edit template yaitu membuat blog anda bisa dibuka disemua device seperti PC, laptop, tablet dan smartphone. Bagaimana cara meletakkannya? Silahkan anda ikuti step by step berikut ini sama seperti peletakan kode CSS di atas:
Login ke Blogger.
Pilih Template.
Klik disembarang tempat pada kode template lalu tekan Ctrl + F pada keyboar PC anda, maka akan muncul kotak pencarian.
Pada kotak pencarian, paste kode ini ]]></b:skin> lalu tekan Enter pada keyboar PC anda.
Copy kode CSS di bawah ini lalu letakkan tepat di atas kode ]]></b:skin>
@media only screen and (max-width:640px){
.tinynav {display: inline-block;}
#menu {display:none;}
}
@media only screen and (max-width:480px){
#nav ul#menu {margin:0px 0px 0px 10px;}
#search-form {margin:3px 8px 3px 3px;}
#search-form input#search-box[type="text"] {width:60px;}
.tinynav {margin:5px 3px 3px 8px;width:95px;}
}
@media screen and (max-width:320px){
.tinynav {margin:5px 3px 3px 5px;width:80px;}
#search-form {margin:3px 5px 3px 3px;}
#search-form input#search-box[type="text"] {width:40px;}
}
@media screen and (max-width:240px){
.tinynav {margin:5px 3px 3px 3px;width:70px;}
#search-form {margin:3px 5px 3px 3px;}
#search-form input#search-box[type="text"] {width:30px;}
}
Ketiga, Pasang Kode Java Script
Fungsi dari script ini dalam edit template blogspot adalah untuk membuat menu dropdown yang menyusut sesuai dengan perangkat yang digunakan untuk membuka blog anda. Bagaimana cara penempatannya? Silahkan anda ikuti step by step berikut ini:
Login ke Blogger.
Pilih Template.
Klik disembarang tempat pada kode template lalu tekan Ctrl + F pada keyboar PC anda, maka akan muncul kotak pencarian.
Pada kotak pencarian, paste kode ini </head> lalu tekan Enter pada keyboar PC anda.
Copy kode CSS di bawah ini lalu letakkan tepat di atas kode </head>
<!--start navigasi menu-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
/*! http://tinynav.viljamis.com v1.2 by @viljamis */
(function(a,k,g){a.fn.tinyNav=function(l){var c=a.extend({active:"selected",header:"",indent:"- ",label:""},l);return this.each(function(){g++;var h=a(this),b="tinynav"+g,f=".l_"+b,e=a("<select/>").attr("id",b).addClass("tinynav "+b);if(h.is("ul,ol")){""!==c.header&&e.append(a("<option/>").text(c.header));var d="";h.addClass("l_"+b).find("a").each(function(){d+='<option value="'+a(this).attr("href")+'">';var b;for(b=0;b<a(this).parents("ul, ol").length-1;b++)d+=c.indent;d+=a(this).text()+"</option>"});
e.append(d);c.header||e.find(":eq("+a(f+" li").index(a(f+" li."+c.active))+")").attr("selected",!0);e.change(function(){k.location.href=a(this).val()});a(f).after(e);c.label&&e.before(a("<label/>").attr("for",b).addClass("tinynav_label "+b+"_label").append(c.label))}})}})(jQuery,this,0);
//]]>
</script>
<script>
// TinyNav.js
$(function () {
$('#menu').tinyNav();
});
</script>
<!--end navigasi menu-->
Keempat, Pasang Kode Peletakan Navigasi
Sementara fungsi kode yang terakhir ini dalam edit template adalah untuk memunculkan menu navigasi pada blog anda. Jika kode ini tidak dipasang, maka menu navigasi + search buttom tidak akan muncul. Intinya, kode ini sebagai pemanggil agar muncul. Bagaimana cara peletakannya? Silahkan anda ikuti step by step berikut ini:
Login ke Blogger.
Pilih Template.
Klik disembarang tempat pada kode template lalu tekan Ctrl + F pada keyboar PC anda, maka akan muncul kotak pencarian.
Pada kotak pencarian, paste kode ini <div id='content-wrapper'> lalu tekan Enter pada keyboar PC anda.
Copy kode CSS di bawah ini lalu letakkan tepat di atas kode <div id='content-wrapper'>
<!-- desktop navigation menu start -->
<nav id='nav'>
<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a> </li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/> <input id='search-button' type='submit' value='Go'/></form>
</nav>
<div class='clear'/>
<!-- secondary navigation menu end -->
Jika masih kurang jelas seputar artikel ini Cara Membuat Menu Navigasi DropDown + Search Buttom SEO Full Responsive Di Blogger silahkan komentar saja di bawah. Semoga postingan di atas bermanfaat buat anda, terimakasih telah berkunjung...
0 Response to "Cara Membuat Menu Navigasi Dan Search Button Dalam Satu Kolom di Blog"
Post a Comment