Thursday, April 7, 2011

Tutorial Buat Scroll Pada Bloglist

Semua murid bangun!!! huhuhu... ok apabila krole dah mula berkata macam tu maksudnya krole nak buat tutorial pada hari ini ahaks~ hari ini krole nak buat tutorial bagaimana caranya untuk membuat scrolling bloglist seperti yang ada kat blog krole ni, mesti korang nak tahu kan??? mengapa krole tiba-tiba jak nak buat tutorial ni kan??? (huhuhu adakah???) cuba korang tengok gambar kat atas tu!!! diatas permintaan daripada blogger ayu krole terpanggil untuk membuat tutorial ni, kerana bak kata pepatah otai-otai blogger... "sharing is caring" pergh!!! lama tak sebut ayat ni ahaks~ ok, kepada blogger ayu dan member-member semua sebenarnya nak buat scroll dalam bloglist ni senang jak ahaks~ so kalau korang semua ikut step-step yang krole sediakan dalam tutorial ni komfirm berjaya!!! yeah!!! kerana seperti biasa didalam blog ni krole buatkan tutorial ini sesimple yang boleh agar mudah difahami, kita mulakan~

Step 1 :
-login masuk kedalam akaun blogger anda dan klik Design>>>Edit HTML>>>cari code seperti dibawah.

<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>


*yang krole warnakan kuning tu berbeza mengikut tajuk yang diberikan kepada widget ye~

Step 2 :
-kemudian tambahkan code yang berwarna merah seperti dibawah

<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>
*lebar dan tinggi boleh diubah pada heigh dan width mengikut kehendak anda~

kemudian save dan siap!!! anda dah berjaya!!!




p/s : senang kan???

13 Komen:

NurUL ShaZLinI IdAYu said...

mekasih en. krole...:)
mula2 xbpe nak jadik coz kod x bpe sme..da godek2 cket baru jadik..:)

eRza farEeha said...

wahh..nice tuto krole..keep it up!

krole said...

ayu=huhuhu tahniah!!!

krole said...

erza=wuahhh cubala ye wak ngee~

Shella said...

Makasih info nya

CikTomyam said...

cool =D

krole said...

shella=huhuuh welkam~

krole said...

cim tomyam=nice huh~ngeee

Firdaus Kasim said...

krole.. aq dah berjaya buat.. hehe

This is my latest post :) :
Blogger Popular Sombong

Anonymous said...

huhu...marvellous!!! thank you..!!

cik HUSYI said...

Dapat buat.
Tapi,macam mana ye nak bagi shoutbox tu tutup rapat2?

Anne Nurain said...

suda try n bjaya..hehe..
thanks!! ^___^

Kak Aya said...

terima kasih untuk tutorial ini..saya mohon untuk link kan entry ini ye!