Membuat Menu Navigasi Current Page

Current page merupakan tampilan pada navigasi yang berfungsi untuk menandai page yang sedang aktif pada navigasi. Untuk lebih jelasnya bisa anda lihat pada image di samping. Berhubung current page ini sudah saya aplikasikan pada template saya kemarin, anda bisa melihat livenya di sini. Selain berfungsi untuk menandai page aktif, current page juga membuat tampilan blog menjadi lebih elegant dengan sedikit pengembangan.

Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML, tidak perlu memberi centang pada Expand Widget Template
4. Cari kode berikut
   
   </head>
   
   
5. Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi
   
   

   <style type='text/css'>
   #menu-wrapper {
   margin: 0;
   padding: 5px 10px 5px 0;
   background: #b7b7ff;
   font-size: .9em;
   line-height: 22px;
   border-top: 1px solid #a8a8ff;
   border-bottom: 1px solid #a8a8ff;
   }
   .menu {
   margin: 0;
   float: left;
   height: 26px;
   }
   .menu ul {
   margin: 0;
   padding: 6px 0 0 10px;
   font-weight: bold;
   list-style-type: none;
   text-align: left;
   }
   .menu li {
   display: inline;
   margin: 0;
   }
   .menu li a {
   text-decoration: none;
   margin: 0;
   padding: 4px 10px;
   color: #32527a;
   }
   .menu li a:hover {
   background: #c6c6ff;
   color: #64527a;
   }
   .current-cat{
   padding: 5px 10px;
   color: #64527a;
   background:#c6c6ff;
   border: 1px solid #a8a8ff;
   -moz-border-radius: 5px; -webkit-border-radius: 5px;
   border-radius: 5px;
   }
   .actived a {
   color: #64527a !important;
   }
   </style>
   
   <script type='text/javascript'>
   function currentpage (url,current,name) {
   var name = name ;
   var url = url;
   var current = current;
   if (current == url) {
   document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   }
   else {
   document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   }
   }
   </script>

   p
6. Cari lagi kode seperti ini
   
   <div id='header-wrapper'>
7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (langkah ini menentukan letak navigasi anda, apabila diletakkan sebelum kode tadi maka menu anda akan berada di atas header. Dan sebaliknya apabila kode diletakkan setelah end tag kode tadi maka navigasi akan berada di bawah header.)
   
   

   <div id='menu-wrapper'>
   <b:section class='menu' id='menubar' showaddelement='no'>
   <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
   <b:includable id='main'>
   <ul>
   <b:loop values='data:links' var='link'>
   <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
   </b:loop>
   </ul>
   </b:includable>
   </b:widget>
   </b:section>
   </div>

8. Klik Simpan

     Untuk menambahkan link pada navigasi, silakan masuk Rancangan » Elemen Halaman » pilih Daftar Link. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik Simpan. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts:

Membuat Highlight Author Comment

Memberi Nomor Pada Komentar (Numbering Comments)

Membuat Comments Bubble Versi 2

Membuat Comments Bubble Pada Blog

Membuat Efek Blur Pada Image

Membuat Efek Scroll

Membuat Navigasi Breadcrumbs di Blogspot

Membuat Menu Navigasi Current Page

Vertical Menu Dengan Efek Show Hide

Membuat Efek Shadow Pada Image