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...
Teknik Buat Blog

nice tutorial!

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

iza berkata...
Teknik Buat Blog

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

mimie1678 berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

geekz36 berkata...
Teknik Buat Blog

nice entry, nak try gak nnt

tyah♥ berkata...
Teknik Buat Blog

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

biskut berkata...
Teknik Buat Blog

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

LinRosLy berkata...
Teknik Buat Blog

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

LinRosLy berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

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

Gula-gula hati berkata...
Teknik Buat Blog

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

fatihahilmi :) berkata...
Teknik Buat Blog

TK JADIK :(

α!∂αηαтαѕуα™ berkata...
Teknik Buat Blog

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

Mama Rayyan berkata...
Teknik Buat Blog

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

wafimamap3 berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

@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...
Teknik Buat Blog

>terima kasih...lawatan anda...

Niena Aziz berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

@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...
Teknik Buat Blog

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

umiliza989 berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

Niena Aziz berkata...
Teknik Buat Blog

menjadi!yay!
mekaseh :)

Hafiza Omar berkata...
Teknik Buat Blog

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

ifah dafila berkata...
Teknik Buat Blog

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

Rasyidah berkata...
Teknik Buat Blog

Thanks...

Mazri Khairil Mazri berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

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

Nurul Jannah Binti Ahmad berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

@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...
Teknik Buat Blog

makasih infonya sangat bermanfaat

iznawzi berkata...
Teknik Buat Blog

salam..tq..menjadi..:)

Muhammad Afiq Shiful berkata...
Teknik Buat Blog

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

MaMa Rey berkata...
Teknik Buat Blog

tq banyak2 baru jumpa yg mudah difahami..tq