Tutorial : Cara Buat Scroll Box (gobok)



Assalamualaikum

Ramai yg email tanya sya camne nak buat Scroll Box utk simpan banner cam yg ada kat bhgn footer tu…Kak Yong panggil ‘gobok’….Big Grin

sya-footer

Ni ambik dari blog Kak Yong masa dia buat review blog sya dulu…malas lak nak wat print screen…Raised Eyebrow

Biasanya sya bagi code camne nak buat…tp bila dh ramai yg tanya…lebih baik wat entry sket pasal ni kan…kod nya copy paste je dari ‘gobok’ sya utk rujukan…jom tgk kod di bawah….

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 190px; height: 200px; text-align: center;"><br>

Due@13.02.2011
<a href="http://deqlis-contest.blogspot.com/2011/01/1st-ga-my-birthday-giveaway.html" target="_blank"><img src="http://1.bp.blogspot.com/_xauB0phOKPM/TSB91HEFSYI/AAAAAAAABoc/dTbc5ATjU2U/s320/1st+GA+deqlis.jpg" alt="" border="0" width="145" height="155" /></a><br>

Due@10.02.2011
<a href="http://warna-warnihidupaku.blogspot.com/2011/01/contest-blog-paling-cantik-comel-dan.html" target="_blank"><img src="http://2.bp.blogspot.com/_YgUtmFlaVhY/TSnyczPftaI/AAAAAAAAAUA/06mqYJZociY/s400/drawn_wallpapers_vector_wallpapers_pink_light_015899_1.jpg" alt="" border="0" width="145" height="100" /></a><br>

</div>

Kod yg berwarna biru adalah awalan & akhiran kod…cuma uols ubah yg sya warna merah….ini adalah utk ubah ketinggian dan kelebaran ‘gobok’ uols nanti…

Yang warna hijau lak utk ubah kedudukan ‘gobok’…nak letak ditengah, dikanan atau dikiri….uols tukarkan je text disitu…

  • center : tengah
  • left : kiri
  • right : kanan

Kod yg berada ditengah2 tu lak adalah kod html utk letakkan banner dan url ke blog kawan2 atau penganjur contest..bergantung kepada yg uols nak letak…

Sya jarang copy paste kod yg ada kt blog kalau nak exchange banner..sya guna kod yg sama je..apa yg sya buat adalah tukarkan url utk blog dan url utk image…baru nampak kemas…

Uols blh tgk kat kod di atas…

a href=”blog url” >>> ini adalah kod utk link kan ke blog…uols copy paste je url blog kawan2 tu kat sini…

img src=”image url” >>> ini adalah kod utk paparkan image banner tu di blog uols…biasanya uols right click kat blog kawan yg nak exchange banner tu…then click “copy image url”…kalau kat blog tu ada wat disable right click..pergi je kat exchange banner code…cari bhgn image src dan copy url yg ada kat situ…

figure yg sya warnakan merah lak utk selaraskan image size….width adalah selaras…kiranya sama je utk semua image/banner…width bergantung kepada size sidebar uols…cuma uols nak kena edit bhgn height aje..sebab ada banner/image yg panjang dn lebarnya tak sama…

kalau uols tgk di kod tu kan..width utk setiap banner dan image adalah 145px…cuma ketinggian aje yg berubah bergantung kepada size banner yg nak ditampal…

text yg berwarna orange tu lak, uols blh je nak letak apa2pun..letak nama blog atau nama empunya blog atau due date GA/contest…kalau tk nak pun ok je…text ni akan appear di atas setiap banner / image…

Kalau uols rasa susah…copy & paste je kod exchange banner tu…then edit bhgn width dan height aje utk sesuaikan ngn sidebar bg nampak cantik dan kemas….tapi kalau utk tampal banner GA/Contest mmg nak kena wat sendiri le..sebab jarang sgt penganjur sediakan kod utk banner ni….

Kod ni nanti letak di html gadget di blog uols…kemudian save…DONE…

Dah lama tk wat tutorial..tak tahu la uols faham ke tidak penerangan sya ni…apa2pun simple je nak buat scroll box ni…kalau uols faham kod html tu…mmg senang sgt…

Selamat berjaya … kalau ada yg tk faham just inform yea…blh sya edit tutorial ni bg senang faham sket…Winking

SyamilaMohd

10 thoughts on “Tutorial : Cara Buat Scroll Box (gobok)

  1. Kabar Pendidikan October 16, 2011 at 9:38 am

    trimksih informasinya.. sangat berguna. ditunggu kunjungan baliknya di blog kabar pendidikan… http://kabar-pendidikan.blogspot.com
    Kabar Pendidikan recently posted..Arti Penting Belajar Menurut Alqur’anMy Profile

  2. NoYB August 12, 2011 at 2:57 am

    Salam…Alhamdulillah…..tutO yg sgt senang di fahami…Sy dah buat & Thanxxxx a Lot…… 🙂

  3. Rinah March 14, 2011 at 2:25 am

    السلام عليكم

    Terima kasih..
    Dah guna tutorial nie..
    Rinah recently posted..How to catch a lieMy Profile

    • syamila March 14, 2011 at 3:29 pm

      ye ke..alhamdulillah

  4. Ummi Hanie February 17, 2011 at 4:33 pm

    nice gobok 😉
    My recent post Happy Birthday Adik Safiyya

    • syamila February 22, 2011 at 5:48 am

      he3

  5. kakyong72 February 12, 2011 at 8:21 am

    bagus sya dah buat n3 tutorial ni… 😉
    buleh di war2 kan utk next review..
    My recent post Segmen review- no 3 Blog Chekna

    • syamila February 14, 2011 at 8:01 pm

      blh je kak yong… 😉

      • nazz February 18, 2011 at 3:46 am

        Assalamualaikum kak mila, bleh pggl sy nazz…tingin sgt nak ada blog WP sendiri…tp xtahu la nak create cner…Ade x nota2 yang sy leh refer dari A smpai Z? Ni email sy kalau akak ada pape nak inform…nazz_1087@yahoo.com.my

        • syamila February 22, 2011 at 5:48 am

          blh search je kat google..nanti kak sya email…

Leave a Reply

Name *
Email *
Website

CommentLuv badge