cara nak buat scroll box bergambar

salam...
tutorial mudah ya....
sebelum ni i ada buat tutorial berkenaan membuat scroll box yang boleh diruk di SINI
hari cuma nak update tutorial tu ajer...
cuma nak tambahkan background pada scroll box tu
macam kat bawah ni ha

comel comot cute
comel comot cute
comel comot cute
comel comot cute
comel comot cute
comel comot cute
comel comot cute

ok..... jum blajar..... hehehe....


tak susah pon....
copy and paste ajer kot di bawah ni di dalam posting anda....

---

<div style="overflow: auto; width: 300px; height: 110px;background-color: #ffffff; background-attachment: scroll;background-repeat: no-repeat; background-position:left top;background-image:url(http://dl8.glitter-graphics.net/pub/434/434518xlbzh5vtds.gif); text-align: justify; padding:5px; border: 2px solid#80FF00;"> comel comot cute
comel comot cute
comel comot cute
comel comot cute
comel comot cute
comel comot cute
comel comot cute </div>

---

hello....
- width: 300px; height: 110px yang ni... untuk lebar (width) dan tinggi (height) leh la tukar ke saiz yang u ol nak ye
- yang diwarnakan biru tu masukkan url gambar yang u ol nak
- yang warna pink tu ayat yang u ol nak masukkan dalam box tu nanti.... jangan tertinggal penutup </div> tu plak... kang tak jadi scroll box u ol tu....
- yang ni background-position:left top pula untuk posisi atau tempat gambar yang u ol nak tu. boleh tukar ke left bottom, right top atau right bottom. biasanya gambar yang digunakan tu bersaiz kecil. kalau saiz besar akan penuhi box pula nanti.....
- kalau nak masukkan gambar penuh abaikan kode yang diatas ni ( background-position)

 
p/s: kalau nak gambar yang kecil, carilah di google dan perhatikan saiznya k....

buat ayat berkelip-kelip di post

salam semua.................
apa la agaknya yang semua orang sedang lakukan sekarang eik?
apa pulak rancangan hujung minggu ni?
mesti ada yang dah merancang-rancang nak tengok movie kan?
ada banyak filem melayu yang sedang dan bakal di tayangkan macam cerita

• HANTU KAK LIMAH BALIK RUMAH
• NGANGKUNG
• AKU MASIH DARA

bestnya dapat tengok movie... sikit punya lama aku tak ke panggung sejak irfan ada la kot huhu......
oh ya ada ker yang tertanya-tnya camana nak buat ayat terkedip-kedip tu? hehehe
aku sebenarnya yang baru jumpa tutorial nih ....
ok kalau tak tau... ni ha caranya............
copy paste je kod kat bawah ni pada halaman posting korang

---

<blink>Ayat yang korang nak kelip kelipkan </blink>

---

nanti akan jadi macamni
tadaaaaaaaaaaaa

Ayat yang korang nak kelip kelipkan

*** pada Ayat yang korang nak kelip kelipkan tu tukarlah pada ayat yang korang nak ya....
tak yah kacau coding CSS dah...
cuma terus type je kat post korang...
cuma pastikan pilih edit HTML lah...
kalau compose tak jadi tau

membuat image dengan link ke web atau gambar lain

ada sesetengah contest yang memerlukan kita masukkan gambar yang perlu di 'link' kan ke page tersebut kan?

so ini adalah cara-cara nya

sangat lah mudah.

cuma copy paste kod di bawah ini sahaja 

---

<a href=“link-url“><img src=“image-location” border=“0″ /></a>

---

Tip 1: jika mahu link web yang dibuka tu adalah ke page yang baru pastikan anda masukkan ,  target=“_blank”   dalam tag <a> 

---

 contohnya

<a href="link-url"  target=“_blank”><img src=“image-location” border=“0″ /></a>

---

sekiranya anda klik pada imej diatas anda akan dibawa mempelajari pelbagai bahasa dalam menyuarakan rasa cinta eheh....
dan kod untuk imej ini setelah guna pakai kod seperti diatas ialah:

<a href=“http://www.omniglot.com/language/phrases/iloveyou.htm"  target=“_blank”><img src="http://i968.photobucket.com/albums/ae168/amiaija/659826uei0v4dowf.gif" border=“0″ /></a>

letakkan penimbang blog ke dalam blogspot

 salam......
untuk sahabat blogger yang nak tahu cara letak penimbang blog dalam blog masing2 ialah
copy and paste jer kod kat bawah ni ha........
sama ada di sidebar atau di dalam post
boleh juga letak dalam page lain.....

<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="0" style="border-collapse: collapse;"><tbody>
<tr><td height="91" valign="top">
<table class="tooltop" style="border-collapse: collapse; height: 76px;"><tbody>
<tr><td>
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr><td colspan="5" valign="top"><b><span style="font-size: x-small;">Domain(s)anda: </span></b><span style="font-size: xx-small;">masukkan setiap alamat URL dalam baris yang berlainan (Maximum 10)</span></td></tr>
<tr><td colspan="4" valign="top">
<textarea name="domain" rows="11" style="width: 100%;"></textarea></td><td>
</td></tr>
<tr><td>
<input style="float: left;" type="submit" value="Check!" /></td><td>
<span style="font-size: xx-small;">(penimbang pN.rOs)</span></td><td>
</td><td colspan="2"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
<tr><td>
<iframe class="toolbot" frameborder="0" height="90" name="pageframe" width="100%"></iframe></td></tr>
<tr><td height="39">
</td></tr>
</tbody></table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No domain provided"); return false; }
return true;
}
</script>

nanti di blog anda akan kelihatan seperti ini......

Domain(s)anda: masukkan setiap alamat URL dalam baris yang berlainan (Maximum 10) (penimbang pN.rOs)

pada tulisan penimbang puan ros tu tukar la nama korang tau....
oklah sini jer...
samat mencuba

buat bullet di sidebar dan post blog

salam.....

susah bila nak terangkan tutorial dalam SB so saya terangkan kat sini boleh?

soalan berkenaan tutor ini ditanya oleh NURULAZHAM

mula-mula cam biasa kena la ada sumber bullet nya

senang cerita amik je kat dalam blog ni ha

BULLET SOURCE 

lepastu

LOG IN blog anda DESIGN (LAYOUT) EDIT HTML KLIK EXPAND WIDGET TEMPLATE

kemudian cari kod ]]></b:skin>

lepas tu

copy paste semua kod di bawah ni

.sidebar ul { list-style: disc url(Image URL) inside;

vertical-align: top;padding: 0; margin: 0;}

.sidebar li {vertical-align: top;  padding: 0;  margin: 0;}

dan letakkan di atas kod  ]]></b:skin> yang korang cari tadi....

pada Image URL dalam  kod di atas tukar la dengan kod url untuk bullet yang korang nak.
ingat tau : jangan buang tanda ( .. ) tu... just masukkan url jer ke dalam kurungan tu

contoh bila dah tukar:

.sidebar ul { list-style: disc url(http://dl8.glitter-graphics.net/pub/322/322178y1bgrri674.gif) inside;

vertical-align: top;padding: 0; margin: 0;}

.sidebar li {vertical-align: top;  padding: 0;  margin: 0;}

so nanti korang punya sidebar akan kelihatan macam ni

tadaaaaaaa

p/s: samat mencuba.... saya kongsi ilmu jer ni
harap-harap kalau sesiapa yang berjaya pliz tinggalkan komen korang ... nak tau adakah this tutor really work dan work perfectly....

sidebar and blog post bullet

ini bukan tutorial yer kawan-kawan...
tapi aku buat satu list untuk bullet yang aku suker....
yang ada kat kiri table tu adalah url untuk bullet nye....
so nanti nak guna senang tak yah aku tergagau-gagau....
sesapa nak leh ambil jer k....
ni pon sumber dari naman web lain... ada kat bawah tu untuk rujukan

luv bullet		http://dl10.glitter-graphics.net/pub/437/437540vjrt56ter3.gif
luv bullet 2		http://dl10.glitter-graphics.net/pub/434/434520u0hx81g10p.png
luv bullet 3		http://dl3.glitter-graphics.net/pub/921/921553ezyhld4d7f.gif
luv bullet 4		http://dl.glitter-graphics.net/pub/942/942601i2emejlzrv.gif
luv bullet 5		http://dl10.glitter-graphics.net/pub/434/434520u0hx81g10p.png
luv bullet 6		http://dl10.glitter-graphics.net/pub/311/311620ed183pbu8b.gif
luv bullet 7		http://dl.glitter-graphics.net/pub/1528/1528021wvultr4btn.gif
luv bullet 8		http://dl5.glitter-graphics.net/pub/1281/1281315y84n7e99f3.gif
luv bullet 9		http://dl8.glitter-graphics.net/pub/322/322178y1bgrri674.gif
luv bullet 10		http://dl7.glitter-graphics.net/pub/1347/1347757en4jm82dwo.gif
luv bullet 11		http://dl8.glitter-graphics.net/pub/865/865668er2b5jgwti.gif
luv bullet 12		http://dl.glitter-graphics.net/pub/1185/1185501mzi0a601xi.gif
luv bullet 13		http://dl8.glitter-graphics.net/pub/1418/1418018ownjqo85x0.gif

LAGI BENDA GEDIX-GEDIX YANG COMEL....

gambar 1		http://dl7.glitter-graphics.net/pub/731/731567wek0cgjsyt.gif
gambar 2		http://dl3.glitter-graphics.net/pub/921/921853fp1vr9j9l9.gif
gambar 3		http://dl9.glitter-graphics.net/pub/1191/1191899uxarpwdwi1.gif
gambar 4		http://dl6.glitter-graphics.net/pub/334/334066ifqllayirj.gif
gambar5		http://dl.glitter-graphics.net/pub/1028/1028781fmiybjte15.gif
urgent		http://dl9.glitter-graphics.net/pub/2046/2046519sm1sb6udtj.gif
rama2 hitam pink		http://dl8.glitter-graphics.net/pub/2498/2498578l7wvqv4kkl.gif
luv frame		http://dl10.glitter-graphics.net/pub/1454/1454220o35484qsda.gif
spinning buble		http://dl.glitter-graphics.net/pub/781/781011csusz7xcvc.gif
gerak @ gedix		http://dl.glitter-graphics.net/pub/1200/1200101mpycere7jz.gif
pensil		http://dl2.glitter-graphics.net/pub/1263/1263522s9hlwacmv6.gif
good		http://dl8.glitter-graphics.net/pub/1296/1296868t7bv8f4abz.gif
tapak kittie		http://dl.glitter-graphics.net/pub/1409/1409801v5y59mw3tb.gif
2 luv		http://dl9.glitter-graphics.net/pub/943/943399yelx60jafi.gif
luv		http://dl6.glitter-graphics.net/pub/41/41556pb66jj8f07.gif
luv bulb		http://dl5.glitter-graphics.net/pub/805/805715nh9vgv5ai9.gif
static kiss		http://dl6.glitter-graphics.net/pub/487/487276u39qaohhu4.png
rama-rama		img src=http://dl2.glitter-graphics.net/pub/1413/1413342htmp0wwc48.gif
rama-rama		http://dl2.glitter-graphics.net/pub/706/706342jfe2lgtycg.gif
arrow		http://dl6.glitter-graphics.net/pub/638/638146kvkkfs33zm.gif

untuk masukkan ke post cuma perlu masukkan kod di bawah pada tempat yang anda mahu

<img src="url gambar"/>

tukarkan url gambar tu kepada url gambar yang anda mahukan jadi bullet tu....

contohnya cam kat bawah ni ha

<img src="http://dl.glitter-graphics.net/pub/1185/1185501mzi0a601xi.gif" /> saya sayang kamoo
<img src="http://dl.glitter-graphics.net/pub/1185/1185501mzi0a601xi.gif" /> saya rindu kamoo

akan nampak macam ni

saya sayang kamoo
saya rindu kamoo

kalau nak tukar saiz bullet ni boleh guna kod kat bawah ni plak...

<a href="http://www.glitter-graphics.com"><img src="http://dl.glitter-graphics.net/pub/1185/1185501mzi0a601xi.gif" width=50 height=50 border=0></a>

cuma perlu ubah pada width and height tu je nak kecil atau besarkan 

p/s: untuk rujukan : KLIK SINI ni adalah laman web nya

p/s: dan semalam da tanya sama satu tuan belog nama INTAN terima kasih ya bagitau mana nak cari bullet2 yang cumil tu

cara membuat scroll box

cara nak buat scroll box dalam post dan juga pada side bar...
boleh guna teknik yang sama.
contoh macam kat bawah ni
1.

SAYA SAYANG KAMU SEMUA

ADAKAH KAMU SAYANG SAYA JUGA?

SAYA BUKAN CARI POPULARITI DISINI

SAYA SEKADAR BERKONGSI RASA DAN CERITA

atau nak letak gambar?
pon boleh no hal lah
2.

cam kekwat je aku ni haha...
takder la...
ni cuma tutorial simple yang aku buat untuk peringatan aku juga...
sebab aku sekarang dah makin tua dan sikit-sikit nyanyuk hehe
oklah camana nak buat ? jom belajar dengan pnr0s .....


copy and paste jer kod kat bawah ni ja

<center><div style="background-color: black; border: 3px solid rgb(204, 204, 204); height: 400px; overflow: auto; padding: 5px; width: 450px;">

 AYAT ANDA DI SINI 

</div>

</center>

note: 

background-color: black; --> yang ni boleh tukar ke warna background yang korang nak
height: 400px; --> ni untuk ketinggian kotak scroll korang
width: 450px  --> ni pulak untuk kelebaran kotak

so pandai-pandai lah korang adjust ok  

note:

untuk gambar kena upload tau gunala image shark ke photobucket ke...

untuk masukkan ke dalam scroll box tu just tambah kod ni jer

<img src="kod url"/>  

contoh

<img src="http://i968.photobucket.com/albums/ae168/amiaija/170520101568.jpg"/>

kalau nak buat kat post/ entry
pilih HTML ya bukan compose.....
kalau compose nanti kat post akan keluar balik kod tu huhu....

kalau nak letak kat sidebar/ widget
pilih add gadget kemudian pilih javascript/HTML
kemudian cara yang sama copy paste je kod di atas tu.....

p/s: selamat mencuba.. try and error. tak salah tak belajar kan?