HTML Color Codes

Kod warna adalah penting untuk memasukkan warna background ke dalam sesuatu kod samada untuk pengubahsuaian layout atau penambahan gadget tertentu.


Berikut adalah kod warna yang ada untuk memudahkan semua sebagai rujukan.

Letak 'Recent Comments' dalam Blog

Meletakkan 'recent comments' adalah cara yang paling mudah untuk mengetahui entri manakah yang paling latest menerima komen samada dari pengunjung blog ataupun tuan punya blog.



Walaupun terdapat pelbagai cara untuk meletakkan 'recent comments' ini, tetapi cara yang akan ditunjukkan ini merupakan antara cara paling ringkas untuk meletakkan widget ini.

Tutorialnya adalah seperti berikut.

1. Login akaun blogger, kemudian dari dashboard > Design > add a gadget >HTML/javascript

2. Kemudian masukkan kod di bawah ke dalam HTML/javascript

<script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc1blogger.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://URL blog anda/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-recent-comments-dalam-blog.html" target="_blank"/>Get widget here </a></small>

Nota: tukarkan URL blog anda dalam kod di atas dengan url blog anda.

3. Save dan tengok hasilnya..:)


TAMBAHAN:Ubahsuai juga boleh dilakukan seperti berikut.

1. Jumlah komen yang ditetapkan untuk dipapar adalah 5. Anda boleh mengubah bilangan komen yang dipaparkan. Lihat kod dibawah sebagai rujukan. Bilangan yang dicadangkan adalah antara 4 - 8

....a_rc=5;var m_rc=false...

2.Jumlah perkataan yang ditetapkan untuk satu comment adalah termasuk nama pengomen adalah 100. Anda boleh menukar jumlah tersebut mengikut keselesaan anda.

var o_rc=100;

3. Tarikh untuk komen juga boleh ditambah. Caranya tukar perkataan dalam kod berikut daripada false kepada true.

var m_rc=false;var n_rc=true;var o_rc=100

Selamat mencuba..:)

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

Cara dapatkan url gambar

Apabila menguruskan sesebuah blog, tidak akan terlepas untuk meletakkan gambar. Mungkin tujuan untuk meletakkan gambar adalah pelbagai, tetapi perkara penting untuk diketahui adalah url gambar. Url gambar boleh dikatakan sebagai 'alamat' kepada sesebuah gambar.

Sebagai contoh, untuk gambar ini, urlnya adalah ini http://3.bp.blogspot.com/_CEj8AwvwSNM/S7jQoxh5CBI/AAAAAAAAENA/UZiN0WCeDpE/blog+tutorial+bahasa+melayu.PNG

Walaupun anda boleh mengupload gambar menggunakan kaedah yang sudah tersedia, tetapi ada kalanya anda memerlukan url bagi sesebuah gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog.

Persoalan asas, bagaimana untuk mengetahui url bagi sesebuah gambar yang sudah tersedia dalam laman web.

Sebagai contoh gambar tadi, bagaimana untuk mendapatkan urlnya.
Disini diletakkan cara yang digunakan untuk beberapa browser yang berbeza.

Caranya mudah, pada gambar yang anda kehendaki dalam sesebuah laman web, right click pada gambar tersebut dan pilihan ada berbeza seperti yang ditunjukkan di bawah.

FIREFOX

GOOGLE CHROME

OPERA

SAFARI

INTERENT EXPLORER
(agak leceh sedikit kerana ada dua step)




-----------------------------
anda boleh cuba samada berjaya dengan masukkan url gambar dalam kod ini kemudian test pada ruangan post entri anda.

<img src="Masukkan URL gambar disini" />

p/s: perlu diberi perhatian ada sesetengah laman web yang anda tidak boleh copy gambar-gambar mereka seperti fotography dan lain². Tetapi rasanya kebanyakan tiada masalah asalkan mendapat kebenaran daripada empunya.

Letak sistem rating pada blog

Adakah anda rasakan pengunjung blog anda menyukai entri yang anda post dalam blog anda.?
Bagaimana anda menentukan samada mereka suka atau tidak entri pada blog.? Adakah semata² melalui komen yang di hantar.?

Kini dengan menggunakan sistem rating, anda dapat menilai tahap 'kesukaan' pengunjung blog anda terhadapa entri yang anda taip dengan lebih stylo.:)


Contoh sistem ini telah diletakkan di test blog

Cara untuk letak sistem ini agak senang kerana tidak memerlukan anda untuk ubah code html anda, semuanya tersedia dan anda hanya perlu ikuti beberapa langkah berikut.


1. Login akaun blogger anda.

2. Buka web http://www.outbrain.com

3. Pada paparan pilih option yang anda.

-->Digalakkan untuk mendaftar untuk mendapatkan maklumat rating dan juga (paling penting bagi aku) untuk membuang 'related post' yang didatangkan secara automatic dalam sistem ini.


4. Klik install dan paparan baru akan muncul


5. Pada paparan, pilih blog anda kemudian klik 'add widget'.


6. Selesai. (Anda boleh buat pengubahsuaianan daripada akaun yang anda telah buat sebelum ini)

Youtube : Video Player kepada MP3 Player

Youtube memainkan peranan penting untuk seseorang blogger untuk memaparkan video yang tertentu. Bagi kategori muzik, video dapat menambahkan lagi seri sesebuah lagu. Walau bagaimanapun, ada ketikanya paparan videonya tidak diperlukan, samada disebabkan video tersebut memaparkan gambar statik atau mungkin juga pemilik blog hanya ingin mempersembahkan 'lagu' sahaja kepada pengunjung.

Tutorial ini akan menerangkan bagaimana untuk menjadikan video dari youtube kepada bentuk mp3 player.


Contoh anda ingin menukarkan video ini dalam bentuk mp3 player.


kepada


-----------
Tutorial untuk menukarkan keadaan ini adalah:

1. Dapatkan link video (URL) dari youtube.

Contoh untuk lagu di atas:
http://www.youtube.com/watch?v=_eYj0B5LwOo

2. Buang 'watch?' dan gantikan '=' kepada '/'

Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo kepada
http://www.youtube.com/v/_eYj0B5LwOo

3.Masukkan link yang anda telah ubah ke dalam kod berikut.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="LINK DISINI"></embed>

contoh untuk kod di atas.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/_eYj0B5LwOo"></embed>

4.Dan hasilnya.



Senang bukan.?.:)

Letak Ruangan Komen Di Bawah Entri.

Meletakkan ruangan komen di bawah entri dapat memudahkan pengunjung sesebuah blog untuk menghantar komen pada entri yang ditaip.


Secara asasnya, blogger sudah menyediakan cara mudah untuk membolehkan sistem komen dalam blog anda muncul seperti ini.

Apa yang perlu dilakukan adalah enablekan sistem komen ini cara berikut.

1. Login akaun blogger anda, dari dashboard> settings>comments
Pada comments form placement, pilih 'embedded below post'


2. Save setting dan lihat hasilnya..

JIKA tidak berjaya.

3. Klik pada layout>edit html>Expand widget templates

4. Backup template anda dengan klik 'download full template'.

5. Tekan ctrl + F untuk mencari kod dibawah.

<b:include data='post' name='comments'/>

6. Letakkan kod ini dibawah kod yang anda jumpa pada langkah 5.

<b:include data='post' name='comment-form'/>

7. Save template anda dan lihat hasilnya.