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>
<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>
<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
35 Comments:
nice tutorial!
Terkini : Seluar Dalam Kalis Bom | Fakta Bukan Auta | GIVEAWAY Lumayan
Salam...
Ini bukan tutorial utk saya kan?hehe...
ku sedia menanti...
alahai.. wat tak jadi... huhuhhu...
@Tutorial Blogkalau buat cara ini blog update akan berada diatas.cara manual..tu saya faham ..tapi bila ada update senarai tak berubah..
nice entry, nak try gak nnt
tak faham.kene copy ke kod yg pnjang lebar ni?
tak dapat lar bro buat yg nih.rasanya setiap template berbeza kot.
Salam....Kak Lin Dah Beberapa Kali Cuba Nak Buat Scrolling Pada Bloglist(Friend Link) Tapi Tak Jadi...Boleh Bantu Akak Tak?
Salam...
Terima kasih Daun Keladi....Scrolling Pd Bloglist Kak Lin Dah Menjadi! Hehehehe
Bantuan Yg Di Berikan Hya Allah Jua Yg Dapat Membalasnya....
@LinRosLyterima kasih juga kerana sudi dtg dan baca artikel blog saya
thanks ea...
banyak yang saya dapat pelajari kat blog nie...:D
TK JADIK :(
salam.. sy nak tutorial scroll untuk ruang komen? ada tak? pls teach me.
x jd lah..sedih bangat nie..x faham..puas dah gode2..
Salam yahaya boleh tak ajar yang animate bulak sama macam blogupp tu. lagi senang tak payah nak scroll... terima kasih kerana tunjuk ajarku sifu..
@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..
>terima kasih...lawatan anda...
askum, saya dah byk kali cuba buat..tapi tak jadi jugak.., mcm mana ni ya? boleh tolong?
@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...
jd juga akhirnya...puas jg try rupanya lpa nk klik expand template widget...hehe..
tq...=)
assalam....saya dah cuba buat,,,,tp xmenjadi...help me...sya nak buat scroll kat saya py bloglist yang panjang berjela 2
@umiliza989kalau boleh terangkan masaalah lebih senang.sebab saya tak tahu apa yg berlaku..
menjadi!yay!
mekaseh :)
salam..nice tutorial..really help me..thanx a lot!=)
xjd ! pless help me . tol2 intrsted na uat cm nih :'(
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
@Mazri Khairil Mazriwaalaikumsalam...sama sama kita berkongsi maklumat..tq
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?
@Nurul Jannah Binti Ahmadkena masuk bloglist yg ada pada blogger dulu baru ada kod tu....lepas tu baru buat yg ada pada tutorial ini...:)
makasih infonya sangat bermanfaat
salam..tq..menjadi..:)
Thanks,dah jadi.Itupon lepas renovate sikit template tu.
tq banyak2 baru jumpa yg mudah difahami..tq
Tq dengan tutorial ini..harap menjadi
kenapa tak jadi pulak?