Cara Buat Perkataan Bergerak (Scrolling/Marquee Text)

Membuat perkataan yang bergerak dapat menarik minat pengunjung terhadap pergerakan tersebut seterusnya menarik minat pengunjung apa yang ingin disampaikan oleh pemilik blog. Selain dikenali sebagai scrolling text, ianya juga dikenali sebagai marquee text.

Walaupun pergerakan ini menarik minat, tetapi tidak digalakkan untuk diletakkan terlalu banyak di dalam blog kerana dibimbangi keadaan 'menarik' bertukar 'menyerabutkan'.:)

Berikut adalah tutorial untuk membuat perkataan bergerak.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.

1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)

Contoh scrolling text

Output untuk kod ini seperti berikut:
Contoh scrolling text

2. Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.
direction="left"
direction="right"
direction="up"
direction="down"


Berikut contoh kod untuk pegerakan dari kanan ke kiri

Contoh scrolling text

Output untuk kod ini adalah
Contoh scrolling text

3.Ubah warna background
Untuk ubah background, perlu diletakkan kod berikut
bgcolor="#kod warna"

Senarai kod warna boleh didapati disini.

Contoh kod yang diletakkan background,

Contoh scrolling text

Output untuk kod ini adalah
Contoh scrolling text

4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.
behavior="alternate"

contoh kod yang diletakkan trick ini.

Contoh scrolling text

Output untuk kod ini
Contoh scrolling text

5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut
scrollamount="2"

Contoh kod dengan trick ini.

Contoh scrolling text

Output:
Scrollamount :2
Contoh scrolling text

Scrollamount :4
Contoh scrolling text

6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

Penambahan kod yang perlu dilakukan adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kod dengan trick ini.

Contoh scrolling text

output untuk trick ini.

Read More

Letak Tajuk Entri Pada Read More

Kebiasaannya, apabila sesebuah blog menggunakan fungsi readmore, perkataan yang keluar adalah samada 'read more', 'baca lagi', 'klik untuk teruskan pembacaan' dan lain-lain tanpa melibatkan tajuk sesebuah entri.

Tutorial ini akan menerangkan bagaimana untuk menambah sedikit kod daripada tutorial readmore sebelum ini untuk membolehkan tajuk entri keluar secara automatic selepas perkataan 'readmore' (atau perkataan lain berkaitan'.

Sebelum


Selepas


Cara-cara untuk meletakkan kod untuk trick ini adalah seperti berikut.

1. Login akaun blogger dari dashboard > layout > edit HTML > expand widget templates

2. Klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut

3. Dibawah kod , ada beberapa kod yang berkaitan dengan readmore, dan buat penambahan kod dibawah selepas perkataan 'readmore'(atau perkataan lain yang berkaitan)
-pastikan kod ini terletak sebelum

Lihat contoh dibawah untuk memudahkan.



4.Apabila selesai anda boleh save dan lihat hasilnya.:)

Read More

Letak Gambar Sebelah Tajuk Entri

Tajuk entri adalah antara perkara yang pertama dinilai oleh seseorang pengunjung yang mengunjungi sesebuah blog. Disamping mempunyai tajuk-tajuk entri yang gempak², kehadiran penghias juga dapat menambahkan lagi seri pada entri tersebut.

Antara salah satu perkara untuk menambahkan seri tajuk entri adalah dengan meletakkan gambar disebelah tajuk entri.

Contoh:


Berikut adalah langkah-langkah yang perlu dilakukan.


1.Login akaun blogger, dari dashboard >layout > edit html > expand widget templates

2.Tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian cari kod berikut.

3. Letakkan kod dibawah antara kod dan kod

Contoh kod sepatutnya kelihatan seperti ini

Nota:
a. Tukarkan 'url gambar' dengan url gambar yang anda kehendaki
b. Saiz gambar yang biasa digunakan adalah dalam lingkungan 20x20 hingga 30x30.


4. Preview, dan jika anda berpuas hati klik save template.:)

Read More

Letak Background Gambar Pada Blockquote

Sebelum ini sudah ada tutorial untuk menukar warna background bagi blockquote. tetapi untuk kali ini, tutorial ini akan menunjukkan pula bagaimana untuk meletakkan background bergambar bagi blockquote.

Contoh blockquote dengan background warna biasa


Contoh background dengan background bergambar




Kelebihan letak gambar sebagai background untuk blockquote adalah untuk menjadikan blockquote lebih cantik dan menarik. semestinya anda ingin berbeza berbanding hanya meletakkan background berwarna yang biasa bukan.:)

Untuk menukar kepada background bergambar, tutorialnya adalah mudah sahaja.

Cuma sebelum itu, anda hendaklah tahu gambar apa yang anda mahu letak sebagai background blockquote anda. Ini kerana pemilihan gambar bersaiz besar adalah kurang sesuai. Gambar yang paling sesuai untuk dijadikan background untuk adalah background blockquote adalah jenis seamless tile.

Anda boleh google untuk pelbagai jenis background jenis ini, selain itu disini ada 2 web yang nawarkan seamless tile background. Boleh pilih gambar yang dirasakan bersesuaian dengan warna tulisan pada blog anda.

Free Seamless Tiles 1
Free Seamless Tiles 2

Tutorial untuk menukar background blockquote ini adalah seperti berikut.

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3.Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kemudian di bawah kod tersebut, letakkan kod ini.

background-image:url(url gambar);

url gambar: tukarkan dengan url gambar yang anda hendak jadikan background. ( Tutorial url gambar : click here)

p/s: contoh kod adalah seperti berikut


5. Apabila selesai, save template dan lihat hasilnya.:)

Read More

Tukar Warna Background Blockquote

Blockquote bagi sesebuah blog/website biasanya digunakan untuk menunjukkan satu petikan yang melibatkan kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog.

Bagi blog, kod yang digunakan untuk blockquote adalah

APA² PETIKAN

. Selain untuk menunjukkan petikan kata, blockquote juga digunakan untuk tujuan lain seperti mempamerkan kod (seperti yang dilakukan dalam blog ini)

Tutorial ini akan menunjukkan cara untuk menukar warna background bagi blockquote mengikut citarasa seseorang blogger.

Contoh blockquote yang telah ditukar warna background.



Cara untuk tukar warna background adalah seperti berikut.

1. Login akaun blogger, dari dashboard >layout > edit html >

2. Gunakan ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut.

.post blockquote {

3. Dibawah kod ini, masukkan kod berikut.

background:#KOD WARNA ;

KOD WARNA: boleh dapatkan merujuk kepada kod dibawah.

contoh:kod sepatutnya kelihatan seperti ini.


4. Save dan lihat hasilnya.

---------------
Sila rujuk web dibawah untuk kod gambar. Jika mahu dalam paparan windows berlainan, sila KLIK SINI

Read More