Cara pasang Scroll Box pada blog







Scroll box seperti yang boleh anda lihat pada contoh yang di paparkan di atas sangat berguna jika anda ingin menjimatkan penggunaan ruang pada blog terutamanya pada bahagian side bar. Banyak benda yang boleh kita masukkan pada scroll box seperti, teks, link, image dan widget. Blog kita sendiri pun boleh dimasukkan pada scroll box.

Untuk membina scroll box seperti yang dipaparkan pada contoh di atas, sila ikut beberapa langkah yang di tunjukkan di bawah.

Langkah 1

Teks dan URL

p/s: Salin dan pastekan kod di bawah pada notepad terlebih dahulu.

Anda boleh edit kod yang di bold dengan warna biru mengikut kesesuaian blog anda.Gantikan kod-kod yang berwarna merah dengan URL dan tajuk yang berkaitan.

<div style="border: 1px solid; color: #cccccc; height: 100px; overflow: auto; padding: 15px; width: 200px;">
<a href="http://masukkan url tajuk 1">Tajuk 1</a>
<a href="http://masukkan url tajuk 2">Tajuk 2</a>
<a href="http://masukkan url tajuk 3">Tajuk 3</a>
<a href="http://masukkan url tajuk 4">Tajuk 4</a>
<a href="http://masukkan url tajuk 5">Tajuk 5</a>
<a href="http://masukkan url tajuk 6">Tajuk 6</a>
</div>


Image dan URL

p/s: Salin dan pastekan kod di bawah pada notepad terlebih dahulu.

Anda boleh edit kod yang di bold dengan warna biru mengikut kesesuaian blog anda.Gantikan kod-kod yang berwarna merah dengan URL anda dan kod yang berwarna hijau dengan URL bagi  image yang hendak di paparkan.

<div style="border: 1px solid; color: #cccccc; height: 100px; overflow: auto; padding: 15px; width: 200px;">
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 1"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 2"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 3"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 4"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 5"></a>
<a href="http://masukkan url anda"><img src="http://masukkan URL iamge 6"></a>
</div>


Widget

Contoh: Widget top commentators

p/s: Salin dan pastekan kod di bawah pada notepad terlebih dahulu.

Anda boleh edit kod yang di bold dengan warna biru mengikut kesesuaian blog anda.Script untuk widget top commentators berwarna merah. Gantikan kod yang berwarna merah dengan script widget yang ingin anda paparkan.

<div style="border: 1px solid; color: #cccccc; height: 100px; overflow: auto; padding: 15px; width: 200px;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2Fmaribinablog.blogspot.com&num=15&filter=nescafe ais" type="text/javascript"></script>
</div>


Langkah 2

Log in blog => Dashboard => layout => Add A Gadget. Seterusnya, klik HTML/Javascript. Salin kod yang telah siap di edit (rujulk langkah 1) dan paste pada ruangan content HTML/Javascript.

Akhir sekali, klik save.
Cara pasang Scroll Box pada blog

thanks 4 da tips..~~

ni yg aku mintak ko ajak ari tu kan? tp aku lom buat lg..ahkssss

@I'M NOT mr_PERFECT

~Ngabehkan boreh jo..Haha

wah sgt bguna nie..

LAYANN...!!!
Thnx bro

herm.. cmane ye nak masukkan sume post kite tu jadik scroll box je? canneee?
yg nie sidebar je eh? kalau sumeeee post?

@♥[perL]♥

Masukkan widget recent post pada scroll box. Ikut tutorial masukkan widget pada scroll box kat post ni.

wow. teringin nak wat menda niyh, tapi malassss!! anyway, timakasehh! ^^v

Anonymous
delete

mekasih..
ilmu yg bguna
smartict2u.blogspot.com

seep... makasih tip-tipnya....

Top comment ni hanya utk komen biasa je kan. Sbbnya aku dah bertukar pada Disqus, pastu, dah tak naik apa2...
Ko ada cara lain tak utk top komen yg guna disqus.....
Lg 1, apasal aku komen kat blog ko ni, tak naik gbr aku?huhu....ko buat cmne? kena guna selain google ke?

yeah berjaya....thanks cigu

sgt berguna..terima kasih daun keladi :))

untuk teks dan url,
sya ada soalan nie..

Tajuk 1

masukkan url tajuk 1 macam mana nak dapatkan yer...

boleh tolong ajarkan x?

Bro, macam mana nak taruk scroll menu untuk Blog Archive? Mana nak dapat script widget dia eh. Shag dah try aritu, tak dapat.