Minggu, 04 April 2010

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
Cara dapatkan url gambar

GOOGLE CHROME
Cara dapatkan url gambar

OPERA
Cara dapatkan url gambar

SAFARI
Cara dapatkan url gambar

INTERENT EXPLORER
(agak leceh sedikit kerana ada dua step)
Cara dapatkan url gambar


Cara dapatkan url gambar


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

Selasa, 30 Maret 2010

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.:)
Letak sistem rating pada blog


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.
Letak sistem rating pada blog


4. Klik install dan paparan baru akan muncul
Letak sistem rating pada blog

5. Pada paparan, pilih blog anda kemudian klik 'add widget'.
Letak sistem rating pada blog


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

Rabu, 24 Maret 2010

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

Minggu, 21 Maret 2010

Letak Ruangan Komen Di Bawah Entri.

Meletakkan ruangan komen di bawah entri dapat memudahkan pengunjung sesebuah blog untuk menghantar komen pada entri yang ditaip.
Letak Ruangan Komen Di Bawah Entri.


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.

Minggu, 14 Maret 2010

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

Letak kesan salji dalam blog (Snow effect)


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

Sabtu, 13 Maret 2010

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.
Cara Buat Perkataan Bergerak

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

Kamis, 11 Maret 2010

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.
Letak Gambar Sebelah Tajuk Entri

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

Contoh:
Letak Gambar Sebelah Tajuk Entri


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
Letak Gambar Sebelah Tajuk Entri

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