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.

kalautau.com - membuat custom menu bar blogspot

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.

$type=three$author=hide$comment=hide$rm=hide

Nama

adsense,12,android,12,asal usul,24,cara mudah,28,dokumen-online,2,fenomena,20,hardware,3,Inspiratif,13,internet,3,kesehatan,1,optimasi-seo,9,paket-internet,4,pengetahuan umum,14,sebab-akibat,18,serba-serbi,66,smartphone,13,Template,1,tutorial blogger,12,video,1,windows,8,Zenfone,4,
ltr
item
Cari Tau Sesuatu: Menu Bar dan SiteNavigationElement Blogspot
Menu Bar dan SiteNavigationElement Blogspot
Apakah membuat menu bar itu sulit ? berikut adalah Cara mudah membuat menu bar costum SiteNavigationElement sesuai dengan kebutuhan blog anda.
https://1.bp.blogspot.com/-niXYdItchhc/V1_bbE-dj0I/AAAAAAAACHg/df5cZUr95MwIvCuuTQYJiXJFkx_utV9VgCLcB/s640/Menu%2BBar.png
https://1.bp.blogspot.com/-niXYdItchhc/V1_bbE-dj0I/AAAAAAAACHg/df5cZUr95MwIvCuuTQYJiXJFkx_utV9VgCLcB/s72-c/Menu%2BBar.png
Cari Tau Sesuatu
https://www.kalautau.com/2016/06/menu-bar-dan-sitenavigationelement.html
https://www.kalautau.com/
https://www.kalautau.com/
https://www.kalautau.com/2016/06/menu-bar-dan-sitenavigationelement.html
true
4562393370500858218
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy