Highlight Current Page Blogger. Bagi yang suka bermain dengan Blogger Template tentu ingin menambahkan sesuatu yang berbeda dari template lainnya. Mungkin pemberian Highlight navigasi ketika kita menuju pada salah satu halaman static bisa menjadi pilihan. Beberapa cara bisa dilakukan, tapi kebanyakan menggunakan jQuery atau juga javascripts. Tapi ada cara yang lebih mudah yang saya temukan di Bloggertuts yang menggunakan modifikasi pada tag <ul> dengan permainan <b:if>.
Mungkin tambahan code yang digunakan agak panjang dan diulang-ulang, tergantung dari jumlah link pada navigasi yang digunakan. Bila anda sudah mempunyai Linklist maka tinggal melakukan modifikasi pada bagian link. Untuk memulainya segera login Account Blogger dan menuju pada edit template, jangan lupa untuk save template.
Contoh:
<ul id='nav'>
<li><a class='current' href='URL HOME' title='Homepages'>Home</a></li>
<li><a class='current' href='URL ABOUT' title='About Writer'>About</a></li>
<li><a class='current' href='URL CONTACT' title='Contact Person'>Contact</a></li>
<li><a class='current' href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>
</ul>
dirubah menjadi:
<ul id='nav'>
<b:if cond='data:blog.url != "URL HOME"'>
<li><a href='URL HOME' title='Homepages'>Home</a></li>
<b:else/>
<li><a class='current' href='URL HOME' title='Homepages'>Home</a></li>
</b:if>
<b:if cond='data:blog.url != "URL ABOUT"'>
<li><a href='URL ABOUT' title='About Writer'>About</a></li>
<b:else/>
<li><a class='current' href='URL ABOUT' title='About Writer'>About</a></li>
</b:if>
<b:if cond='data:blog.url != "URL CONTACT"'>
<li><a href='URL CONTACT' title='Contact Person'>Contact</a></li>
<b:else/>
<li><a class='current' href='URL CONTACT' title='Contact Person'>Contact</a></li>
</b:if>
<b:if cond='data:blog.url != "URL SITEMAP"'>
<li><a href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>
<b:else/>
<li><a class='current' href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>
</b:if>
</ul>
Ganti yang diBold dengan URL yang digunakan.
Lalu pada CSSnya ditambahkan class baru:
#nav ul li a.current {color:#000; background:#fff; text-decoration:none;}
Untuk trik ini tidak berlaku pada external link, karena secara otomatis pages akan berpindah. Bagi yang membuat navigasi dari awal dapat menggunakan cara yang digunakan oleh Dante pada artikel Navigation with Automatic Highlight Current Pages
16 Comments for Highlight Current Page Blogger:
waw,,,,,
ijin tkp mas....
@#$% hebat salut deh.
prinsipnya sama ama bloggertuts tapi tekniknya beda. yang ini lebih simpel.
keren bozz tutorialnya
eh blogger kudus y??
bisa tukeran link ga sama blogger DAWE
di http://bowol.blogspot.com/
koment ah, pake laptop baru bro,.. hehe
semgat jg deh buat account adsense nya,..
Sebagai rasa terima kasih aku mau berbagi link dgn 3 buah blogku yg PR 3, link anda akan kuletakkan ke tiganya tanpa harus dilink balik ke 3 blog tsb, jadi oneway link, mau
Waahh...ini yang aku cari mas.
thx y tips'y.
keren sob tampilan barunya, disain web seperti kartu nama sebagai homepage, gabungan yang menarik, blogger jadi makin bertaring jadinya :) (maaf OOT hehe..)
@Denny...gimana ya caranya bikin index berita/headline seperti http://hizbut-tahrir.or.id/
JR .: sepertinya yang di hizbut-tahrir.or.id itu pake WP/CMS lain selain blogger, untuk di blogger sendiri harus ditulis manual dengan menggunakan add gadget baru diatas postingan.
thanks
@Denny...Oh begitu ya. Tadi aku hunting, trus nemu ini
http://www.dynamicdrive.com/dynamicindex17/rsspausescroller/index.htm
gimana caranya Kang? Asli bingung aku Kang, Maklum newbie....
@JR .: mungkin bisa mencoba artikel saya ini mas, sama dari dynamic drive juga http://www.oblo.web.id/2009/07/slide-featured-post-jquery.html
wah mantap mau coba tapi masih ada beberapa yg harus saya perhatikan ... terlebh dhlu ... di scriptnya valid gk
kalo boleh nanya
apa maksudnya CSSnya ditambahkan class baru:
#nav ul li a.current {color:#000; background:#fff; text-decoration:none;}
css itu dbagian mana?
coba ke sini http://epg-studio.blogspot.com/
tq bro infonya...
bermanfaat bgt...
thanks mas codenya...
dah berhasil ngedit menuku,,
Posting Komentar
Spam is not Good for your Body :)