Navigasi merupakan point penting jika ingin menjadikan blog Anda lebih bagus, maka dari itu saya membagikan tutorial membuat / modifikasi navigation menu responsive ala Contoh Blog. Seperti yang Anda ketahui, navigasi juga dapat menginformasikan tentang, label, maupun halaman / situs yang Anda taruh di navigasi tersebut.

Di setiap blog pasti mempunyi disain yang berbeda, dan ingin mempunyi ciri khas dari blog tersebut. Dengan itu disain dari navigasi pun menjadi berkembang, dan mempunyi daya tarik yang berbeda di setiap disain navigasi tersebut.

Membuat Menu Navigasi Responsive Ala Contoh Blog


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda cari kode ]]></b:skin> atau </style>, dan pastekan kode dibawah ini di atas kode tersebut

/* Navigasi Menu */

#navigasimenu {width:100%;margin:0 auto;max-width:980px;background: #fff;}

#menu {background:#333;color:#eee;height:40px;border-bottom:4px solid #ccc;width:100%;max-width:937px;margin:0 auto 0 20px}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none}

#menu ul{height:40px}

#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu li:last-child{border-right: none}

#menu a{display:block;line-height:35px;padding:0 11px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#c00}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:40px;line-height:40px;text-align:center}

#menu label span{font-size:15px;position:fixed;left:60px;text-transform:uppercase}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.prett{padding:0 27px 0 14px}

#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#c00;}

Langkah kedua :

Silakan Anda cari kode @media screen and (max-width:960px){, dan pastekan kode dibawah ini di bawah kode tersebut

#menu{position:relative}

#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}

#menu ul.menus{width:100%;position:static;padding-left:20px}

#menu li{display:block;float:none;width:auto}

#menu input,#menu label{position:absolute;top:0;left:0;display:block}

#menu input{z-index:4}

#menu input:checked + label{color:white}

#menu input:checked ~ ul{display:block}

Langkah ketiga :

Silakan Anda cari kembali kode @media screen and (max-width:768px){, dan pastekan kode dibawah ini ke bawah kode tersebut

#menu {position:relative;width:92%}

#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}

#menu ul.menus{width:100%;position:static;padding-left:20px}

#menu li{display:block;float:none;width:auto}

#menu input,#menu label{position:absolute;top:0;left:0;display:block}

#menu input{z-index:4}

#menu input:checked + label{color:white}

#menu input:checked ~ ul{display:block}

Langkah ke-empat:

<div id='navigasimenu'>

<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

<input type='checkbox'/>

<label>&#8801;<span>Navigation</span></label>

<ul>

<li><a href='/'><i class='fa fa-home fa-2x fa-fw' style='padding:3px'></i></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='Tips SEO'><span itemprop='name'>Tips SEO</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='SEO Templates'><span itemprop='name'>Templates</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='Google Adsense'><span itemprop='name'>AdSense</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='Desain Blog'><span itemprop='name'><i class='fa fa-wrench'></i> Desain Blog</span><font size='2'> &#9660;</font></a>

<ul class='menus'>

<li><a href='YOU URL HERE' itemprop='url' title='Creat a Blog'><span itemprop='name'>Cara Membuat Blog</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='Ganti Template'><span itemprop='name'>Cara Ganti Template</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='HTML Color'><span itemprop='name'>Kode Warna HTML</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='Tag Kondisional'><span itemprop='name'>Tag Kondisional</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' title='Font Awesome'><span itemprop='name'>Font Awesome</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>HTML Parser</span></a></li>

</ul>

</li>

<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Layanan Premium</span></a></li>

<li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Galeri Template</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>LAINNYA</span><font size='2'> &#9660;</font></a>

<ul class='menus'>

<li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>CB Net</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' target='_blank' title='CB News'><span itemprop='name'>CB News</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>CB AMP</span></a></li>

<li><a href='YOU URL HERE' itemprop='url' target='_blank' title='CB Bootstrap'><span itemprop='name'>CB Bootstrap</span></a></li>

</ul>

</li>

</ul>

</nav>

<div class='clear'></div>

</div>

Pemasangan navigasi pun selesai, silakan Anda Save template Anda. Dan silakan Anda lihat blog Anda, navigasi pun berubah.

Jika di template Anda sudah memiliki kode navigasi, silakan Anda hapus dulu kode tersebut, agar kode yang saya berikan tidak acak - acakan.