Cara pasang Scroll Box pada blog Cara pasang Scroll Box pada blog

Tajuk 1
Tajuk 2
Tajuk 3
Tajuk 4
Tajuk 5
Tajuk 6

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%2Fabout-tutorials.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.