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:
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?
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..??
aku udah masukin semua blog temen di bloglines :D
sip, aku udah praktekkan,,, dapet tambahan ilmu nih dari om :) trims
Duh... aku ga pake layout neh! Tp pake template. Masih bisa dipraktekin jg ga, ya? :(
seneng kl ke sini slalu dpt ilmu baru.... tapi prakteknya itu yg agak lom sempat:)
@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.
aku cari yg gampang, dgn fasilitas di oggix,om...
kayaknya gampang tinggal ngopy tp kog error terus, ada apa gerangan...?
@endangwithnadina: yup.
@kenny: maksudnya error dimana?
kang...tambah lagi tutorialnya dong, untuk menambah trik nih. thx yah.
@gaussac: sama-sama mas.
Post a Comment