Highlight Current Page Blogger


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>.

Navigation Static Pages
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 != &quot;URL HOME&quot;'>
<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 != &quot;URL ABOUT&quot;'>
<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 != &quot;URL CONTACT&quot;'>
<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 != &quot;URL SITEMAP&quot;'>
<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:

ihsan mufthi write.. 01 Februari, 2010 Delete

waw,,,,,
ijin tkp mas....

choen write.. 02 Februari, 2010 Delete

@#$% hebat salut deh.

prinsipnya sama ama bloggertuts tapi tekniknya beda. yang ini lebih simpel.

bowo write.. 04 Februari, 2010 Delete

keren bozz tutorialnya

eh blogger kudus y??

bisa tukeran link ga sama blogger DAWE
di http://bowol.blogspot.com/

BambangOke write.. 05 Februari, 2010 Delete

koment ah, pake laptop baru bro,.. hehe

semgat jg deh buat account adsense nya,..

Link gratis 3 bh PR 3 write.. 06 Februari, 2010 Delete

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

Adit's Blog write.. 10 Februari, 2010 Delete

Waahh...ini yang aku cari mas.

thx y tips'y.

Ardhiansyam write.. 12 Februari, 2010 Delete

keren sob tampilan barunya, disain web seperti kartu nama sebagai homepage, gabungan yang menarik, blogger jadi makin bertaring jadinya :) (maaf OOT hehe..)

Just Revolution (PR) write.. 25 April, 2010 Delete

@Denny...gimana ya caranya bikin index berita/headline seperti http://hizbut-tahrir.or.id/

Denny write.. 26 April, 2010 Delete

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

Just Revolution (PR) write.. 26 April, 2010 Delete

@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....

Denny write.. 26 April, 2010 Delete

@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

Alexa-com Weblog write.. 31 Agustus, 2010 Delete

wah mantap mau coba tapi masih ada beberapa yg harus saya perhatikan ... terlebh dhlu ... di scriptnya valid gk

gorfy write.. 15 November, 2010 Delete

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?

Angsana Cyber write.. 15 Februari, 2011 Delete

coba ke sini http://epg-studio.blogspot.com/

rumah write.. 30 September, 2011 Delete

tq bro infonya...
bermanfaat bgt...

Hamzah Hutomo write.. 23 Desember, 2011 Delete

thanks mas codenya...
dah berhasil ngedit menuku,,

Posting Komentar

Spam is not Good for your Body :)

 
© 2010 Blogger Tutorial | Powered by Blogger | Valid X/HTML (Home Page)
Framework: Choen Design: Denny
Back To Top