Tutorial Buat Scroll Dalam Blog Archive Jimatkan Ruang blog

Dah lama cik tom tak buat tutorial. Busy+takde yang request so stop la dulu. Kali ni cik tom nak buat tutorial cara buat scroll dalam blog archive bagi kak diana dan miszlullaby. Kak diana dah berjaya buat. Tahniah ye.

Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kemas.

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE

*Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.

STEP 2

Tekan keyboard, CTRL+F secara serentak.Cari code;

<div id='ArchiveList'>

STEP 3

Di atas coding step 2, sila copy dan paste coding;

<div style='overflow:auto; width:ancho; height:100px;'>

**height=korang boleh ubah berapa panjang kotak scroll yang korang nak.

STEP 4

Di akhir coding step 2 tue, korang kena masukkan penutup coding bagi step 3 iaitu

</div>

Contoh coding;
<div style=’overflow:auto; width:ancho; height:300px;’>
<div id=’ArchiveList’>
<div expr:id=’data:widget.instanceId + &quot;_ArchiveList&quot;’>
<b:if cond=’data:style == &quot;HIERARCHY&quot;’>
<b:include data=’data’ name=’interval’/>
</b:if>
<b:if cond=’data:style == &quot;FLAT&quot;’>
<b:include data=’data’ name=’flat’/>
</b:if>
<b:if cond=’data:style == &quot;MENU&quot;’>
<b:include data=’data’ name=’menu’/>
</b:if>
</div>
</div> </div>
<b:include name=’quickedit’/>

 

STEP 5


Klik Preview dan Save jika tiada sebarang error serta berpuashati.

Selamat mencuba ye…

credit: syamila

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

73 thoughts on “Tutorial Buat Scroll Dalam Blog Archive Jimatkan Ruang blog

  • December 13, 2010 at 6:07 am
    Permalink

    eiela pun tak reti nak buat nih. tak jadi-jadi.

    Latest Entri :
    Takde Mood, Tak Tau Nak Buat Apa

    Reply
  • December 13, 2010 at 5:35 am
    Permalink

    oh.dah lama nak tau buat scroll box nih. hehe. thank you cik tom ;D

    Reply
  • December 13, 2010 at 5:42 am
    Permalink

    bagus ciktom nih..

    tapi akak nih..kalu klik xpen wijet gak..phobia slaluh..hhahaa..

    blog akak xpenah buat back up cik tom..kene buat ke?..hehe

    malu weh..sb penakut it..hehe

    Reply
  • December 13, 2010 at 5:43 am
    Permalink

    err.cik tom.sori tny lgi. kalau nak buat scroll box utk bloglist pulak caner eyk.. sme jugak ke?

    Reply
  • December 13, 2010 at 5:51 am
    Permalink

    TQ cikgu tomato..hihi

    Reply
  • December 13, 2010 at 5:56 am
    Permalink

    MCM NK BUAT TAPI MEMANG TAK FAHAM LA…ADUS…

    Reply
  • December 13, 2010 at 5:56 am
    Permalink

    Thks atas tutorial ni Tom..Ellen memng cari ni sebab hari tu blog ellen kawan tlg buatkan, maklumlah tak reti..hehe

    Reply
  • December 13, 2010 at 6:32 am
    Permalink

    bgus2 leh buat letak award..
    dulu cari gak tutorial ni, skg dh mlas lak..;)

    Reply
  • December 13, 2010 at 6:37 am
    Permalink

    bookmark dlu yer….nnti nak edit gak la……tq for tutorial ni…..mmg cari2

    Reply
  • December 13, 2010 at 6:42 am
    Permalink

    Terimakasih cik tom bagi ilmu IT ni..
    nak tanya satu,
    camna nak paste gamb supaya xda frame

    Reply
  • December 13, 2010 at 6:46 am
    Permalink

    dah buat dah..trima kasih cik tom~

    Reply
  • December 13, 2010 at 6:50 am
    Permalink

    yeah.. akyn berjaya buat…
    tengs a lot.. bnyak membantu tutor kat sini.. 🙂

    Reply
  • December 13, 2010 at 6:51 am
    Permalink

    thanx cik tom..
    macam taw2 je saya mmg cari2 tutorial ni.. thanx sekali lagi :)cik tom mmg besttt!!! 🙂

    Reply
  • December 13, 2010 at 6:54 am
    Permalink

    akak pun buat scroll pasal nak jimatkan ruang..
    akak kan kerap jugak update ni..
    jadi tak kemas bila berjela2..

    Reply
  • December 13, 2010 at 7:20 am
    Permalink

    wah… tutorial lagi.. tak yah susah2 cari da..cik tom da buat..bagus2..hihi

    Reply
  • December 13, 2010 at 7:26 am
    Permalink

    wah!!!! TQ yer cik tom.. dah lama nak buat tapi xjd.. TQ

    Reply
  • December 13, 2010 at 7:38 am
    Permalink

    terbaik la cik tom. mmg den tongah cari ni.
    cik tom best!!

    Reply
  • December 13, 2010 at 7:40 am
    Permalink

    terimakasihh cik tomm….=)

    Reply
  • December 13, 2010 at 7:48 am
    Permalink

    oit nak try lah yg nih..

    Reply
  • December 13, 2010 at 7:52 am
    Permalink

    tom:
    mksih yg pasal ajar buat seting komen tu..dh ubah td..dtg jenguk tutorial baru lak..hehe..sy xtau apa pun benarnya..hehe..keep in touch

    Reply
  • December 13, 2010 at 7:55 am
    Permalink

    yehh dah jadik..thankss banyakk

    Reply
  • December 13, 2010 at 8:00 am
    Permalink

    thanks yer sbb sudi kongsi tips ni.

    saya dah vote 🙂

    Reply
  • December 13, 2010 at 8:18 am
    Permalink

    thanks cik tom bg info nie..hehe..untuk gathering tu plak mmg ramai blogger ganu yg iqbal jumpa …cuma kena ada sokongan ramai la utk gathering tu…kalau cik tom start dulu ok jugak..hehe,,

    Reply
  • December 13, 2010 at 8:29 am
    Permalink

    wah menarikkkkkkkk

    Reply
  • December 13, 2010 at 8:30 am
    Permalink

    rajin cik tom wat tutorial ni.. best gak.. tapi kat blog aibaks tu nak pasang kat mane ek?

    Reply
  • December 13, 2010 at 8:46 am
    Permalink

    dni pun guna benda ni. jimat ruang 😀

    Reply
  • December 13, 2010 at 9:27 am
    Permalink

    thnx 4 sharing cik tom! :))

    Reply
  • December 13, 2010 at 9:27 am
    Permalink

    hohoh mmbantu nih ;D
    nnti bler dh letak blog achieve ak try ;D

    Reply
  • December 13, 2010 at 9:54 am
    Permalink

    wah!rajin tul ciktom kte nie..chaiyok!hihi

    Reply
  • December 13, 2010 at 11:29 am
    Permalink

    thanks for the tuto! :)nice entry

    Reply
  • December 13, 2010 at 12:00 pm
    Permalink

    menarik! nanti nak try la
    thanks cik tom

    Reply
  • December 13, 2010 at 1:37 pm
    Permalink

    yeay! dah jadi 🙂
    thanks cik tom 🙂

    vote 305 dan 272 ye 🙂

    Reply
  • December 13, 2010 at 2:06 pm
    Permalink

    wahh ni kene try nti nih…

    Reply
  • December 13, 2010 at 5:26 pm
    Permalink

    alahai ciktom..cam tau2 jer lin mmg nak tutorial ni…kena buat tuk elakkan loading lambat sgt ni..hehe..tq ciktom sbb sudi kasi komen kat kiter…

    Reply
  • December 13, 2010 at 9:14 pm
    Permalink

    rajin cik tom buat tutorial..
    thankz..

    Reply
  • December 14, 2010 at 3:18 am
    Permalink

    Dah cuba, tp cam tak reti nak buat :/ Hik hik

    Reply
  • December 14, 2010 at 7:37 am
    Permalink

    Tak berjaya-lah Cik Tom 🙁

    Reply
  • December 17, 2010 at 2:34 pm
    Permalink

    yeayyyyyyyyy!!!!dah jadi.mekaseyh cik tom.
    mmuuahhxx pipi kanan,mmuaahhxx pipi kiri =)

    Reply
  • December 22, 2010 at 6:00 pm
    Permalink

    yes! yes! akhirnya di malam yang sepi jz berjaya juge buat ni.. thanks cik tom 🙂

    Reply
  • December 25, 2010 at 11:19 am
    Permalink

    Thanks cik tom. 🙂

    Reply
  • December 26, 2010 at 5:26 am
    Permalink

    macam biasa lah… ad mesti xleh nk buat… coding kita x sama.. uwaaa…;(

    Reply
  • December 27, 2010 at 3:50 am
    Permalink

    cik tom,berjaya!!
    thanx ya =)
    ni 2nd time buat
    1st time buat dl x jdi
    sye amk mood dulu,br jadi kot.hehe

    Reply
  • December 29, 2010 at 5:14 am
    Permalink

    kenapa saya x de coding tu huhu.. uwaaaa!!! tolong cik tom.. T_T

    Reply
  • December 30, 2010 at 8:07 am
    Permalink

    @dya adriza: cik tom try tgk coding di blog awak tadi…erm ade je code di dlm step 2 tue…step 3 plk awk kena copy paste code tue sebelum code dlm step 2…cuba follow up step satu persatu ye…slmt mencuba..

    Reply
  • December 30, 2010 at 8:15 am
    Permalink

    @adfeez:cik tom dah jwb di blog…

    Reply
  • December 30, 2010 at 8:16 am
    Permalink

    @nazuha: dah berjaya kan?tahniah…

    Reply
  • December 31, 2010 at 3:22 am
    Permalink

    sangat-sangat membantu 😀
    terima kasih.

    Reply
  • December 31, 2010 at 4:07 am
    Permalink

    tq cik tom, da selalu buat pon lupe gak.. haha..

    Reply
  • January 6, 2011 at 2:40 am
    Permalink

    cik tom..
    dah dapat laa..hehe..
    tq..
    dah berjaya buat 2 tutorial cik tom..hehe..
    tq..

    Reply
  • January 15, 2011 at 8:25 am
    Permalink

    cik tom, tqm! akhirnya jumpa apa yg dicari 🙂

    Reply
  • January 17, 2011 at 7:48 am
    Permalink

    slm Ct..kite br tukar kalendar blog archieve kpd scroll je.CT bila free nti blh tak buat tutorial pasang blog kalendar sbg blog archieve?dgn link utk dptkan kalendar tu.puas cr yg lawa2 tp tak jumpa.tq ye!

    Reply
  • February 2, 2011 at 7:52 am
    Permalink

    kenape SCC cari kod tu tak jumpe??

    Reply
  • February 2, 2011 at 7:56 am
    Permalink

    ok..
    dah boleh !=D

    hehe..lupe nak expand tmplate pulak..

    Reply
  • February 6, 2011 at 6:03 am
    Permalink

    hye cik tom..hunny dah try buat benda ni banyak kali..tapi tak boleh.code dia taknak terima..macam mana ek nak buat??

    Reply
  • February 9, 2011 at 4:49 pm
    Permalink

    cik tom,nak tanye ni..

    Macam mana cik tom buat kotak pink beserta coding dalam entry ni ek? (untuk "contoh coding" tu)

    sorry kacau cik tom.hehe.mekaseyh=)

    Reply
  • February 19, 2011 at 12:35 am
    Permalink

    cik tom..tolong saye kenape tak jadi nie da banyak kali buat tapi tak berubah.

    Reply
  • February 20, 2011 at 10:18 am
    Permalink

    thanks a lot cik tom..

    Reply
  • February 20, 2011 at 2:26 pm
    Permalink

    @miss: ur wlcm 😉

    Reply
  • February 20, 2011 at 2:29 pm
    Permalink

    @hoya hadis: awk punye url blog awk ye??sbb url tue salah…kl x mcm nk tgk..huhu..

    Reply
  • March 16, 2011 at 2:12 am
    Permalink

    cik tom..
    saya buat tutorial nie kat blog saya..
    btw..
    credit to u..
    thanks buat tutorial ni yaaa..
    ^.^

    Reply
  • March 29, 2011 at 2:41 pm
    Permalink

    cik tom, ML pinjam tutorial ni ye, sebab ade kawan yang mintak tunjukkan scrollbox warne warni.

    Yang blockquote tu, xsempat nak belajar..ML dok print screen dari microsoft word ke Paint. Hihihi…Mekaseyh ye cik tom.=)

    Reply
  • April 9, 2011 at 11:01 am
    Permalink

    urmm.dah lama sy crik mende ni,teringin sgt na buat.tp step first ag dah xbley wat.xjumpe pon kod tu..:( tlg sy ciktom..

    Reply
    • April 13, 2011 at 7:14 pm
      Permalink

      aik cik tom jenguk blog tifa ada je code tue n dah menjadi pun…maybe sbb lmbt sgt cik tom jawab kot..huhuh..pe pun tahniah ye dah berjaya 🙂

      Reply
  • May 5, 2011 at 3:48 pm
    Permalink

    salam cik tom…bole tolong tak say tak berjaya buat kotak scroll tu?berapa kali cuba dia asik kuar warna merah perkataan kat bawah niiii…erggghhhh gerammmm…

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

    Reply
    • May 13, 2011 at 4:10 pm
      Permalink

      cik tom rasa umi silap masukkan code…ataupun blogger problem…tp kalau kes cik tom camni biasanya silap masukkan code atau code yang masuk tue takde penutup code…

      Reply
  • May 17, 2011 at 3:53 pm
    Permalink

    knp saya tada “” dlm saya pnya html ??
    saya mau wat this toturial laaa .,. huuuuuhhhuuuuuu 🙁
    Jom baca entri terkini dyea …Prince In MyHEARTMy Profile

    Reply
  • June 18, 2011 at 12:02 am
    Permalink

    saya pun try wat..tak boleh jugak T____T
    dia naek Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

    Error 500

    huuu

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

error: Content is protected !!