Menu Bar dan SiteNavigationElement Blogspot
Dalam sebuah blog/situs, Menu bar di gunakan sebagai navigasi atau penunjuk arah, yaitu untuk mempermudah visitor menemukan halaman-halaman lain dalam blog Anda. selain itu menu bar merupakan fasilitas yang wajib diberikan setiap blog/situs, yang mana didalamnya berisi sekumpulan link-link penting menuju halaman tertentu.
Dengan adanya Menu bar, pengunjung dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya. Apakah di blog anda sudah memiliki menu bar? jika belum, betapa susahnya pengunjung blog untuk mendapatkan halaman halaman lain yang berisikan konten blog anda.
Dalam tutorial kali ini, saya akan mempraktekkan membuat menu bar SiteNavigationElement dengan cara yang mudah dan dapat di edit sesuai dengan kemauan anda, namun anda harus mengerti bahasa HTML dasar, agar anda dapat memahami alur dari pembuatan menu bar.
Berikut adalah cara membuat costum menu bar blogspot.
1. Login ke dashboard blog anda
2. pilih halaman template
3. pilih button edit html
4. Cari kode ]]></b:skin> (gunakan ctrl+f) dan letakkan kode di bawah ini tepat di atas ]]></b:skin>
<!-- [CSS Menu] -->
#menu{background:#1da1f2; color:#eee; height:35px; border-bottom:4px solid #ED0100; width:100%; max-width:1200px}
#menu ul,#menu li{margin:0 0; padding:0 0; list-style:none}
#menu ul{height:35px}
#menu li{float:left; display:inline; position:relative; border-right:0px solid #1da1f2; border-left:0px solid #1da1f2;font:bold 14px Arial}
#menu li:first-child{border-left:none}
#menu a{display:block; line-height:35px; padding:0 14px; text-decoration:none; color:#fff}
#menu li:hover a,#menu li a:hover{background:#ED0100}
#menu input{display:none; margin:0 0; padding:0 0; width:50px; height:35px; opacity:0; cursor:pointer}
#menu label{font:bold 30px Arial; display:none; width:35px; height:36px; line-height:36px; text-align:center}
#menu label span{font-size:12px; position:absolute; left:35px}
#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.home{background:#ed0100}
#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:#333}
<!-- [Akhir CSS Menu] -->
5. selanjutanya cari kode <div id="content-wrapper"> atau kode <div class="content-wrapper"> (gunakan ctrl+f) untuk mempercepat pencarian. dan letakkan kode di bawah ini tepat di bawah kode
<div id="content-wrapper"> atau kode <div class="content-wrapper">
<!-- [Menu Bar dan SiteNavigationElement ] -->
<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation' style='position: relative; top: 0px; z-index: 9999;'>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<ul>
<li itemprop='name'> <a class='home' href='/' itemprop='url'><span>
Home</span></a></li>
<li itemprop='name'><a href='#' itemprop='url' rel='nofollow'>
<span>Menu 1</span></a>
<ul class='menus'>
<li><a href='#' shape='rect'>Sub Menu 1.1</a></li>
<li><a href='#' shape='rect'>Sub Menu 1.2</a></li>
<li><a href='#' shape='rect'>Sub Menu 1.3</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url' rel='nofollow'>
<span>Menu 2</span></a>
<ul class='menus'>
<li><a href='#' shape='rect'>Sub Menu 2.1</a></li>
<li><a href='#' shape='rect'>Sub Menu 2.2</a></li>
<li><a href='#' shape='rect'>Sub Menu 2.3</a></li>
</ul>
</li>
</ul>
</nav>
<!-- [Akhir Menu Bar dan SiteNavigationElement ] -->
kemudian gantilah semua tanda # dengan link label/halaman anda.
contoh link: http://www.kalautau.com/search/label/cari-tau?&max-results=8
arti html diatas adalah memerintahkan blogger, memfilter artikle/posting yang memiliki label cari-tau dengan jumlah posting 8 items.
kemudian gantilah nama menu sesuai dengan kategori/label anda, silahkan rubah yang bewarna Menu 1 , Menu 2 , Sub Menu 1.1 dan seterusnya. sedangkan untuk itemprop='name', itemprop='url' tidak perlu di rubah, karena merupakan element property SiteNavigationElement.
catatan : Semua Script di atas adalah membuat menu bar sekaligus struktur data SiteNavigationElement, agar search engine lebih mudah melacak struktur data navigasi blog anda.jika anda telah melakukan 5 langkah di atas, silahkan simpan template anda kemudian check struktur data SiteNavigationElement menu bar anda di sini.
