Letak kesan salji dalam blog (Snow effect)

Terasa blog anda begitu panas.?
Apa kata kalau sejukkan sedikit blog anda dengan meletakkan salji yang berterusan jatuh dari atas blog anda.:)



Untuk tutorial ini akan diletakkan 2 kod iaitu untuk salji putih dan salji hitam(ada juga salji hitam ye.:)

Demo untuk salji bewarna hitam boleh dilihat disini. DEMO

Cara untuk meletakkan salji dalam blog adalah seperti berikut.

1. Login akaun blogger, dari dashboard>layout>add a gadget>html/javascript

2. Copy salah satu kod berikut kemudian paste dalam ruangan html/javascript

Kod untuk salji putih (sesuai untuk background hitam)

<script type="text/javascript" src="http://www.yourjavascript.com/14104214083/snow-white.js"></script>

Kod untuk salji hitam (sesuai untuk background putih)

<script type="text/javascript" src="http://www.yourjavascript.com/03441140321/snow-black.js"></script>

3. Save dan lihat hasilnya.:)

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)

<marquee>Contoh scrolling text</marquee>

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

<marquee direction="right" >Contoh scrolling text</marquee>

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,

<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>

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.

<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>

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.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>

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.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>

output untuk trick ini.
Contoh scrolling text

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.

<a expr:href='data:post.url'><data:post.title/></a>

3. Letakkan kod dibawah antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>

<img src="url gambar"/>

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.:)

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

<data:post.body/>

3. Dibawah kod <data:post.body/> , 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 </a>

<data:post.title/>

Lihat contoh dibawah untuk memudahkan.



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

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 <blockquote> APA² PETIKAN</blockquote>. 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

Letak Website Lain Dalam Entri

Sebelum ini sudah terdapat tutorial yang menerangkan bagaimana untuk meletakkan website dalam blog. Untuk tutorial tersebut memerlukan anda untuk copy paste code dalam ruangan html/javascript. Tutorial tersebut sesuai untuk meletakkan website lain secara kekal di dalam blog yang akan dilihat setiap masa walau page mana yang dibuka dalam blog tersebut.

Bagaimana pula untuk meletakkan website hanya di dalam sesebuah entri.?

Tutorial ini pula akan menunjukkan cara untuk meletakkan website lain dalam entri blog dengan cara paling mudah..


Apabila anda menaip dalam blog anda, cuma tambahkan code ini untuk meletakkan website lain dalam entri blog anda.

<iframe src="LINK DISINI" width="98%" height="400" border="1"></iframe>

Link Disini : Masukkan url website yang anda kehendaki, contoh http://www.google.com
(pastikan anda tidak tertinggal http:// )

Contoh meletakkan youtube dalam entri blog adalah seperti berikut.



Jadi, jika anda membuat entri yang memerlukan pengunjung blog anda membuka website lain(mungkin sebagai bukti atau apa), biarkan pengunjung anda mencari terus di dalam entri yang anda post.:)

Cara Buat Dropdown Menu

Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link rujukan, link tips dan pelbagai lagi.

Contoh dropdown menu adalah seperti berikut


Tutorial untuk membuat dropdown menu ini adalah seperti berikut.

1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript

2. Copy code berikut ke dalam ruangan html/javascript. (jika tidak faham rujuk sini)

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
</select>

penerangan :
Link 1: Masukkan link untuk dibuka
Text 1: Masukkan perkataan/ayat untuk link

Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select>
3. Apabila selesai, save hasil kerja anda.:)


TAMBAHAN:
Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, sila tukarkan kod:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

kepada kod ini.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Mudah bukan.
Selamat mencuba.:)