Cara membuat scrolling bloglist pada blog

Scrolling bloglist  adalah seperti mana terdapat pada sidebar blog ini.Mempunyai butang untuk memasukkan link ,memaparkan hanya senarai blog, mengikut update dan tidak menggunakan banyak ruangan .Kebanyakan blog list yang ada adalah panjang jadi dengan menggunakan cara ini adalah lebih mudah untuk menguruskan kannya.



Untuk membuatnya:

Mula mula masukkan bloglist dahulu.
Pada design pilih --page elements-add a gadget--bloglist
Bagi dashboard baru pilih Layout...Add a Gadget...bloglist

Sebelum itu backup template terlebih dahulu.

Kemudian :
masuk ke design—edit html-expand template widget
untuk dashboard baru pilih template...Edit HTML....tandakan pada expand template widget
Kemudian cari kod yg dibawah,yg bertanda dengan warna merah  adalah berbeza mengikut tajuk yg diberi pada widget.
<b:widget id='BlogList1' locked='false' title='Blog List' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kemudian tambahkan kod berwarna hijau seperti dibawah ini.

<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

 Kemudian save template

#Lebar dan tinggi widget boleh diubah pada bahagian teks warna oren.
Kemudian save template

Topik berkaitan: Cara letak border,background dan scroll pada widget 

Update 23/12/2012

Catat Ulasan

34 Comments:

suffer8zine berkata...
terima kasih atas kunjungan

nice tutorial!

Terkini : Seluar Dalam Kalis Bom | Fakta Bukan Auta | GIVEAWAY Lumayan

iza berkata...
terima kasih atas kunjungan

Salam...
Ini bukan tutorial utk saya kan?hehe...
ku sedia menanti...

mimie1678 berkata...
terima kasih atas kunjungan

alahai.. wat tak jadi... huhuhhu...

yahaya berkata...
terima kasih atas kunjungan

@Tutorial Blogkalau buat cara ini blog update akan berada diatas.cara manual..tu saya faham ..tapi bila ada update senarai tak berubah..

geekz36 berkata...
terima kasih atas kunjungan

nice entry, nak try gak nnt

tyah♥ berkata...
terima kasih atas kunjungan

tak faham.kene copy ke kod yg pnjang lebar ni?

biskut berkata...
terima kasih atas kunjungan

tak dapat lar bro buat yg nih.rasanya setiap template berbeza kot.

LinRosLy berkata...
terima kasih atas kunjungan

Salam....Kak Lin Dah Beberapa Kali Cuba Nak Buat Scrolling Pada Bloglist(Friend Link) Tapi Tak Jadi...Boleh Bantu Akak Tak?

LinRosLy berkata...
terima kasih atas kunjungan

Salam...
Terima kasih Daun Keladi....Scrolling Pd Bloglist Kak Lin Dah Menjadi! Hehehehe

Bantuan Yg Di Berikan Hya Allah Jua Yg Dapat Membalasnya....

yahaya berkata...
terima kasih atas kunjungan

@LinRosLyterima kasih juga kerana sudi dtg dan baca artikel blog saya

Gula-gula hati berkata...
terima kasih atas kunjungan

thanks ea...
banyak yang saya dapat pelajari kat blog nie...:D

fatihahilmi :) berkata...
terima kasih atas kunjungan

TK JADIK :(

α!∂αηαтαѕуα™ berkata...
terima kasih atas kunjungan

salam.. sy nak tutorial scroll untuk ruang komen? ada tak? pls teach me.

Mama Rayyan berkata...
terima kasih atas kunjungan

x jd lah..sedih bangat nie..x faham..puas dah gode2..

wafimamap3 berkata...
terima kasih atas kunjungan

Salam yahaya boleh tak ajar yang animate bulak sama macam blogupp tu. lagi senang tak payah nak scroll... terima kasih kerana tunjuk ajarku sifu..

yahaya berkata...
terima kasih atas kunjungan

@wafimamap3scrolling utk bloglist boleh buat guna marquee..cuba lihat pada tutorial cara membuat teks berjalan.Tapi list tu kena masuk secara manual.Utk buat mcm kat tutorial ni sukar sebab dlm css kena guna javascript..

http://qistinaayu0040507.blospot.com berkata...
terima kasih atas kunjungan

>terima kasih...lawatan anda...

Niena Aziz berkata...
terima kasih atas kunjungan

askum, saya dah byk kali cuba buat..tapi tak jadi jugak.., mcm mana ni ya? boleh tolong?

yahaya berkata...
terima kasih atas kunjungan

@Niena Azizkena tgk tempat dimana nak letak kod warna hijau.kalau salah tempat tak boleh
mesti selepas..kod <div class='widget-content'> dan mesti letak </div> selepasnya.
jgn putus asa....kalau nak belajar..lama2 nanti..dah lali dgn kod..tak heran dah...

zih@n berkata...
terima kasih atas kunjungan

jd juga akhirnya...puas jg try rupanya lpa nk klik expand template widget...hehe..
tq...=)

umiliza989 berkata...
terima kasih atas kunjungan

assalam....saya dah cuba buat,,,,tp xmenjadi...help me...sya nak buat scroll kat saya py bloglist yang panjang berjela 2

yahaya berkata...
terima kasih atas kunjungan

@umiliza989kalau boleh terangkan masaalah lebih senang.sebab saya tak tahu apa yg berlaku..

Niena Aziz berkata...
terima kasih atas kunjungan

menjadi!yay!
mekaseh :)

Hafiza Omar berkata...
terima kasih atas kunjungan

salam..nice tutorial..really help me..thanx a lot!=)

ifah dafila berkata...
terima kasih atas kunjungan

xjd ! pless help me . tol2 intrsted na uat cm nih :'(

Rasyidah berkata...
terima kasih atas kunjungan

Thanks...

Mazri Khairil Mazri berkata...
terima kasih atas kunjungan

salam...

sy dah copy tutorial nie ke blog sy...
dah letak kreditnya :)

tq

http://khairilmazri.blogspot.com/2012/03/cara-membuat-scrolling-bloglist-pada.html

yahaya berkata...
terima kasih atas kunjungan

@Mazri Khairil Mazriwaalaikumsalam...sama sama kita berkongsi maklumat..tq

Nurul Jannah Binti Ahmad berkata...
terima kasih atas kunjungan

salam.tak jadi pun..dah bnyak kali dah try..
cari kod tu xjmpa..dah expand dah..dah tukar suma dah,tp still xdpt..mcm mna eh?

yahaya berkata...
terima kasih atas kunjungan

@Nurul Jannah Binti Ahmadkena masuk bloglist yg ada pada blogger dulu baru ada kod tu....lepas tu baru buat yg ada pada tutorial ini...:)

Rudy Hartono berkata...
terima kasih atas kunjungan

makasih infonya sangat bermanfaat

iznawzi berkata...
terima kasih atas kunjungan

salam..tq..menjadi..:)

Muhammad Afiq Shiful berkata...
terima kasih atas kunjungan

Thanks,dah jadi.Itupon lepas renovate sikit template tu.

MaMa Rey berkata...
terima kasih atas kunjungan

tq banyak2 baru jumpa yg mudah difahami..tq