Tutorial Membuat Menu Navigasi di Blog

Kamu pasti tahu Template Super SEO kan ? Jika belum tahu, coba lihat diatas bagian blog ini di headernya ada Navigasi Top Menu kan? Keren ya? Di sebelah kiri buat Page Menu. Di sebelah kanannya buat ikon media sosial.

Sekilas Adsense juga sudah memasangnya. Lihat deh ke bagian atas halaman ini. Ada 'kan? Nah, bagaimana cara membuatnya?

Sebenernya membuat Top Menu diatas Header Blog tersebut sangat mudah loh! Hanya dengan melakukan Copy & Paste kode CSS dan HTML berikut ini ke dalam template blog anda.

Tahapan Pasang Top Menu

1. KODE CSS 
Copas 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/AVvXsEi2adjeIkjGYjlKLrZGeeheGEp-7_wQx9igeMkAxBHUzC-R0I_4u-x5Cn6nMmoMY6SkqnEDULxDYFUB8E4-e9-iA6xRPm8NjLOD3Vo0l32xMpFhHdw1F93b4pjJwLTWu3KqZ5HOtydW9fsx/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 ataskode <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-->

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: Tata Letak > klik "Page" > "New Page". Dan Klik SIMPAN.

Kini Navigasi Bar (Top Menu) di atas Header Blog sudah terpasang di blog Anda. Good Luck!

Apabila terjadi masalah, silahkan berkomentar.

Jika ingin mencopas artikel ini, jangan lupa sertakan sumbernya http://sekilas-adsense.blogspot.com/