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

Post a Comment

36 Comments:

suffer8zine said...
Teknik Buat Blog

nice tutorial!

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

iza said...
Teknik Buat Blog

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

mimie1678 said...
Teknik Buat Blog

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

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

nice entry, nak try gak nnt

The Fath said...
Teknik Buat Blog

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

ghost said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

Unknown said...
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....

sibersensasi said...
Teknik Buat Blog

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

❤Mrs. Myra❤ said...
Teknik Buat Blog

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

Fatiha Hilmi said...
Teknik Buat Blog

TK JADIK :(

Aidanatasya said...
Teknik Buat Blog

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

Mama Rayyan said...
Teknik Buat Blog

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

wafimamakidz said...
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..

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

>terima kasih...lawatan anda...

Unknown said...
Teknik Buat Blog

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

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

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

norliza said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

menjadi!yay!
mekaseh :)

Hafiza Omar said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

Rasyidah said...
Teknik Buat Blog

Thanks...

Yeop Maz said...
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

sibersensasi said...
Teknik Buat Blog

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

Nurul Jannah Binti Ahmad said...
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?

sibersensasi said...
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...:)

Anonymous said...
Teknik Buat Blog

makasih infonya sangat bermanfaat

iez saac said...
Teknik Buat Blog

salam..tq..menjadi..:)

Sebuah Pengorbanan said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

tq banyak2 baru jumpa yg mudah difahami..tq

hadiraf kitchen said...
Teknik Buat Blog

Tq dengan tutorial ini..harap menjadi

Admin ASMKAWA said...
Teknik Buat Blog

kenapa tak jadi pulak?