Cara Membuat Navigasi Top Menu ala Super SEO
March 5, 2015
Cara Membuat Navigasi Top Menu di atas Header Blog ala Template Super SEO
TAHU dong template blog Super SEO?
Di atas headernya ada Navigasi Top Menu 'kan? Keren ya? Di sebelah kiri buat Page Menu. Di sebelah kanannya buat ikon media sosial.
CB Net juga sudah memasangnya. Lihat deh ke bagian atas halaman ini. Ada 'kan? Nah, bagaimana cara membuatnya?
Cara membuat Top Menu di atas Header Blog ala Template Super SEO tersebut gampang! Tinggal memasukkan (Copy & Paste) kode CSS dan HTML berikut ini ke dalam template blog Anda.
Copas kode berikut ini di atas kode ]]</b:skin>
2. Kode HTML
Copas kode berikut ini di bawah kode <div class='outer-wrapper'> atau di atas kode <div class='header-wrapper'>
3. Ganti tanda pagar (#) dengan link URL akun Facebook, Twitter, RSS, dan Google Plus Anda!
5. Save Template! Beres!
6. Klik "Layout" > Edit widget "TopMenu" di atas header
7. Centang halaman (page) yang akan ditampilkan di Topnav Menu!
Jika belum membuat page/halaman untuk ditampilan di Top Menu itu, buat saja! Caranya: klik "Page" > "New Page".
8. Save!
Kini Navigasi Bar (Top Menu) di atas Header Blog ala Template Super SEO sudah terpasang di blog Anda.
Good Luck!
TAHU dong template blog Super SEO?
Di atas headernya ada Navigasi Top Menu 'kan? Keren ya? Di sebelah kiri buat Page Menu. Di sebelah kanannya buat ikon media sosial.
CB Net juga sudah memasangnya. Lihat deh ke bagian atas halaman ini. Ada 'kan? Nah, bagaimana cara membuatnya?
Cara membuat Top Menu di atas Header Blog ala Template Super SEO tersebut gampang! Tinggal memasukkan (Copy & Paste) kode CSS dan HTML berikut ini ke dalam template blog Anda.
Tahapan Pasang Top Menu ala Super SEO
1. KODE CSSCopas kode berikut ini di atas kode ]]</b:skin>
#top{background:#fff;margin:0 auto;padding:0;width:900px}#topnav{background:#fff;height:32px;margin:0;padding:2px 0 1px;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;font-size:11px}.left{float:left}#topnav ul{float:left;list-style:none;margin:0 0 0 1px;padding:0}#topnav .current_page_item{background:#fff}#topnav ul li{list-style:none;margin:0 0 0 5px;padding:0}#topnav li{float:left;list-style:none;margin:0 5px 0 0;padding:0;font-weight:700;text-transform:uppercase}#topnav li a,#topnav li a:link,#topnav li a:visited{font-weight:700;color:#242423;display:block;margin:0;padding:10px 10px 7px 1px}#topnav li a:hover{color:#48d}.right{float:right}right a{color:#999}.iconFacebook,.iconGoogle,.iconTwitter,.iconRSS{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBvgWM9Se3-6-bZxjc7EAQ6PANFnCwHZ6r4tdBMIt7XkFntMhBKmVEylgO_0a6vMWXLGNOv8twiph1ItP3QcdLeZpFf9vrFYfycCxfS3ruyR-ScLso2XfXdZkiyPEue1-0wzjpNRsxui9/s1600/socialicons.png) no-repeat 4px 0;border-left:1px solid #fafafa;display:block;float:right;font-size:11px!important;font-weight:700;height:32px;line-height:32px!important;margin:0 0 0 6px;padding:0 6px 0 30px}.iconTwitter{background-position:4px -72px}.iconRSS{background-position:4px -108px;padding-right:0}.iconGoogle{background-position:4px -36px}
2. Kode HTML
Copas kode berikut ini di bawah kode <div class='outer-wrapper'> atau di atas kode <div class='header-wrapper'>
<div id='top'>
<div id='topnav'>
<div class='left'>
<b:section id='topmenu' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='TopMenu' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='page_item current_page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>
<li class='page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--end: left-->
<div class='right'>
<a class='iconFacebook' href='#'>Facebook</a>
<a class='iconTwitter' href='#'>Twitter</a>
<a class='iconRSS' href='#'>RSS</a>
<a class='iconGoogle' href='#'>Google</a>
</div></div></div>
<!--end: right-->
<div id='topnav'>
<div class='left'>
<b:section id='topmenu' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='TopMenu' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='page_item current_page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>
<li class='page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--end: left-->
<div class='right'>
<a class='iconFacebook' href='#'>Facebook</a>
<a class='iconTwitter' href='#'>Twitter</a>
<a class='iconRSS' href='#'>RSS</a>
<a class='iconGoogle' href='#'>Google</a>
</div></div></div>
<!--end: right-->
3. Ganti tanda pagar (#) dengan link URL akun Facebook, Twitter, RSS, dan Google Plus Anda!
5. Save Template! Beres!
6. Klik "Layout" > Edit widget "TopMenu" di atas header
7. Centang halaman (page) yang akan ditampilkan di Topnav Menu!
Jika belum membuat page/halaman untuk ditampilan di Top Menu itu, buat saja! Caranya: klik "Page" > "New Page".
8. Save!
Kini Navigasi Bar (Top Menu) di atas Header Blog ala Template Super SEO sudah terpasang di blog Anda.
Good Luck!
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Terima kasih mas , ternyata ala Template Super SEO , saya kira cara membuat navigasi yang SEO Friendly :D , thanks
ReplyDeletekeren banget mas..namun kok tidak responsive njeh? karena ketika aku buka dengan mobile, kurang bisa menyesuaikan layar
ReplyDeletemantep mas broo ...
ReplyDeleteaq da nyoba tapi kok g bisa ya
ReplyDeleteKalo kayak di blog ini piye mas?
ReplyDeleteTerima kasih mas tutorial nya
ReplyDeleteterima kasih informasinya
ReplyDeleteKok outer-wrapper dan header-wrapper gk ada ya? padahal pake tamplate cb theme
ReplyDeletewkwkwkwkwk, replace di bawah header ternyata, thanks min :v
ReplyDeletekok di template gk ada ]] itu ya? padahal pakai NJW
ReplyDelete