Tudung kanak-kanak


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

Comments

  1. 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 says:

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

  3. Rinah says:

    السلام عليكم

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

    1. syamila says:

      ye ke..alhamdulillah

    1. syamila says:

      he3

  4. kakyong72 says:

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

    1. syamila says:

      blh je kak yong… 😉

      1. nazz says:

        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

        1. syamila says:

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

Leave a Reply

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

CommentLuv badge