Subscribe

RSS Feed (xml)

Powered By

Powered by Blogger

Click to view random flickr photos tagged with my junior and nightview!  

WELCOME to Random Flickr photos tagged with my junior and nightview!
www.flickr.com

www.flickr.com

Wednesday, March 28, 2007

Hide/Show atau Expand/Collapse - Navigation

Jika anda mempunyai banyak link (lebih dari 100), tentu akan kelihatan kurang menarik apabila dipasang semua berurutan di sidebar, ini ada cara untuk tetap bisa memasang seluruh link di sidebar tapi dengan tampilan yang lebih rapi dan menarik. :)

Seperti contoh di side bar blog ini:

Expand/Collapse Blogroll...Click [+/-]

[+/-] Joni Poetra Blogroll in Indonesia

[+/-] Joni Poetra Blogroll in English

[+/-] BlogU Students

[+/-] My Trail


Ini dinamakan dengan Hide/Show, Expand/Collapse - Navigation Element. Jadi kita bisa tetap memasang link tersebut dengan meng-collapse isinya.

Tinggal di klik kode --> [+/-]... untuk meng-expand tanpa mereload ulang, sama seperti Super Peek-A-Boo Posts sistem kerjanya.

Tertarik ingin memasangnya? ;)

Gampang kok, cuma 3 steps yang diperlukan, yaitu:

Step 1. Sign In terlebih dahulu, Dashboard-Layout-Edit HTML-jangan lupa centang terlebih dahulu Expand Widget Templates, lalu masukkan kode di bawah ini letakkan pada style sheet.

.commenthidden {display:none}
.commentshown {display:inline}


Contoh blog ini diletakkan persis setelah kode di bawah ini atau pada sidebar style:
/* ---( sidebar )--- */

Step 2. Copy paste kode di bawah ini diantara <head> dan </head> tags, tapi jangan pada style sheet.

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>


Contoh blog ini diletakkan persis sebelum </head> tag.
Kemudian Save Template.

Step 3. Klik Template tab, lalu Add a Page Element-HTML/JavaScript,

copy paste kode dibawah ini:

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title</a><br />
<div class="commenthidden" id="UniqueName"></div>


Selesai. =D>

INGAT:

Ganti 'UniqueName' dan 'Title' sesuai dengan nama dan title yang anda inginkan dan letakkan link yang ingin anda pasang pada tulisan yang berwarna ungu.

<div class="commenthidden" id="UniqueName"> Di sini tempat meletakkan link yang ingin anda pasang </div>

Sebagai contoh kode yang dipasang pada: [+/-] My Trail (hanya untuk Step 3.)

<a aiotitle="click to expand" href="javascript:togglecomments('My Trail')">[+/-] My Trail</a><br /><br>
<div class="commenthidden" id="My Trail">
<a target="_blank" href="http://www.iitr.ernet.in/">Indian Institute of Technology Roorkee</a></div>


Tulisan yang berwarna ungu adalah contoh kode link yang dipasang.

PS: Ini bisa diimplementasikan baik untuk link, label, maupun banner atau chicklet, dengan memasang kodenya diantara <div class="commenthidden" id="UniqueName"> Disini tempat meletakkan kode baik untuk link, label, maupun banner atau chicklet </div>. =D>

12 comments:

mashuri said...

Wah....ini asyik neh...Tapi belajar dulu neh. Apalagi kalo udah masalah ini....saya oon banget neh.

Pada blogu student miliknya Joni, ada sign "update"-nya. Ini juga bagian dari keunggulan ini...ato ditandain secara manual?

Nieke,, said...

iya nih. om mashuri harus belajar sama on joni pake Peek-A-Boo begini..
soalnya blogrollnya om Mashuridah panjang banged tuh.. hehe..

aku juga mau blajar ahhh..
tapiiii.. kalo' di pakein ginian mempengaruhi "berat" tidaknya blog kita ga om? pake ini bisa lebi ringan apa makin berat apa ga ngaruh..??

venus said...

aku udah masukin semua blog temen di bloglines :D

CempLuk said...

sip, aku udah praktekkan,,, dapet tambahan ilmu nih dari om :) trims

- Nilla - said...

Duh... aku ga pake layout neh! Tp pake template. Masih bisa dipraktekin jg ga, ya? :(

Kristin said...

seneng kl ke sini slalu dpt ilmu baru.... tapi prakteknya itu yg agak lom sempat:)

Joni Poetra said...

@mashuri: gampang kok mas, cuma harus nyediain waktu memang..
kalo untuk sign ...Updated!-nya itu dapat layanan tambahan dari blogrolling.com, jadi pd preference diset secara otomatis pemberitahuan Update-nya.. jd gak manually.

@nieke: menurut aku gak terlalu ngaruh ke loadingnya *kalo disini*, tapi gak tau kalo disitu yg buka blog ini berat gak?

@venus: itu fasilitas link tambahan juga kek blogrolling.com. :D

@cempluk: ur welcome.

@nilla: ada page elementnya gak? masih blogger klasik ya?

@kristin: hihihi.. iya emang hrs nyisihin waktu.

endangwithnadina said...

aku cari yg gampang, dgn fasilitas di oggix,om...

kenny said...

kayaknya gampang tinggal ngopy tp kog error terus, ada apa gerangan...?

Joni Poetra said...

@endangwithnadina: yup.

@kenny: maksudnya error dimana?

gaussac said...

kang...tambah lagi tutorialnya dong, untuk menambah trik nih. thx yah.

Joni Poetra said...

@gaussac: sama-sama mas.