Cara Membuat Navigasi Menu Label di Blog Baru

Hay sobat STKL, kali ini saya akan membagikan artikel tentang Cara Membuat Navigasi Menu Label di Blog Baru, bagi para master wab hal ini adalah hal yg sepele. Namun bagi kita yang awam akan dunia blog terutama saya sendiri, membuat menu label seperti ini adalah hal yg sangat sulit.

Baik langsung saja kita lihat cara-caranya sebagai berikut :

• Login ke blogger.com
• Pilih Blog yang akan sobat ganti/ edit templatenya
• Pilih Template -> Edit HTML 
• Copy kode dibawah ini dan paste-kan di atas kode ]]><b:skin>

/* Template Wrapper */
.maxwrap {max-width:950px;margin:0 auto;}
#wrapper {max-width:950px;margin:0 auto;padding:0;overflow:hidden;}
#content-wrapper {overflow:hidden;padding:0;}

/* Main Navigation */
#stkl-navigation{background:#fff;font-size:0;white-space:nowrap;letter-spacing:.5px;margin:0 auto 20px auto;border-top:1px solid rgba(0,0,0,0.06);border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 0 4px rgba(0,0,0,0.1);}
#stkl-navigation ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#stkl-navigation a{display:block;padding:20px 12px;text-decoration:none;color:#fff;text-transform:uppercase;}
#stkl-navigation ul,#stkl-navigation li {background:#e74c3c;margin:0 auto;padding:0;list-style:none}
#stkl-navigation li {display:inline-block;position:relative;font-size:13px;font-weight:700;}
#stkl-navigation li.indie a{background:rgba(0,0,0,0.06);padding:20px}
#stkl-navigation li:hover.indie,#stkl-navigation li:hover.indie a{background:rgba(0,0,0,.06)}
#stkl-navigation input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#stkl-navigation label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#stkl-navigation label span {font-size:16px;position:absolute;left:55px}
#stkl-navigation ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#stkl-navigation ul.menus a {color:#ec3838;line-height:55px}
#stkl-navigation li a:hover {background:rgba(0,0,0,.06);color:#fff;}
#stkl-navigation ul.menus a:hover {background:rgba(0,0,0,.06);color:#fff;}
#stkl-navigation li ul{visibility:hidden;opacity:0;background:#fff;margin:0;width:150px;height:auto;position:absolute;top:100%;left:0;z-index:10;box-shadow:0 4px 15px -2px rgba(0,0,0,0.1);}
#stkl-navigation li:hover ul.menus,#stkl-navigation li:hover &gt; ul{visibility:visible;opacity:1;}
#stkl-navigation li li {display:block;float:none;font-size:13px;border-bottom:1px solid #f5f5f5;}
#stkl-navigation li li:last-child {border:0;}
#stkl-navigation li ul ul {left:100%;top:0}
#stkl-navigation li li &gt; a{background:#fff;color:#999;display:block;padding:12px 15px;margin:0;text-decoration:none;text-transform:none;font-weight:400;box-shadow:inset 3px 0 0 transparent;transition:background .3s}
#stkl-navigation li li:hover,#stkl-navigation li li a:hover {background:#fafafa;color:#444;box-shadow:inset 3px 0 0 #ccc;}

Catatan : Kode warna diganti sesuai keinginan sobat STKL

• Jika sudah, sobat copy kan kode dibawah ini lalu paste kan dibawah </header> 

<div class='clear'/>
<nav id='stkl-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
</ul>
</div>
</nav>

Catatan : Ganti tanda # dengan Url blog sobat STKL

• Save Template, maka hasilnya akan seperti gambar dibawah ini :

Sekian Tips Cara Membuat Navigasi Menu Label di Blog Baru. Semoga artikel yg saya berikan bermanfaat bagi sobat semua.