Monday, June 13, 2011

Scroll Box untuk Widget

| |
0 comments
Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.
cara buat scroll box


Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.:) Antara widget yang sesuai menggunakan scroll box ini adalah Mister Linky. Ini kerana jika jumlah pengunjung yang meletakkan url adalah banyak, ruang yang digunakan juga akan bertambah.

Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.

width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini


Note :
width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki


3. Apabila selesai, save dan lihat hasilnya..

Senang bukan..:)
Read More

Letak Button Like Untuk Blog

| |
0 comments
Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.

Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda



Tutorial untuk meletakkan button ini seperti di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript




note: Gantikan URL-ANDA dengan url blog anda

3. Save dan lihat hasilnya.:)

p/s: Apabila seseorang 'like', akan keluar di wall orang yang like tentang blog anda dan secara tidak langsung dapat meningkatkan trafik blog anda.:)

Read More

Letak Facebok Button 'Like' Dalam Blog

| |
0 comments
Meletakkan button 'like' dalam blog dapat memberi gambaran secara kasar samada penunjung anda menyukai entri yang ada di blog anda. Selain itu, penggunaan button 'like' ini juga sedikit sebanyak dapat meningkatkan trafik blog anda.
Letak Facebok Button 'Like' Dalam Blog

Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.

Cara-cara untuk meletakkan button like ini adalah seperti berikut.

1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod berikut.


3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
Read More

Letak Facebook Share Button dalam Blog

| |
0 comments
Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.
Letak Facebook Share Button pada Blog

Dengan hanya beberapa klik sahaja, ianya sudah siap sedia untuk dikongsi di profile facebook. selain itu penggunaan facebook share button ini dapat manarik lebih ramai pelawat ke sesebuah blog.

Contoh penggunaan facebook share button (selain blog ini) adalah di unwanted86 dan juga ohbest.

Cara untuk memasukkan facebook share button ini adalah seperti berikut.

1. Pilih jenis facebook share button yang anda kehendaki, kemudian copy code yang diberi.


Code untuk Full


Read More

Ketahui Jumlah Post dan Jumlah Komen dalam Blog

| |
0 comments
Berapakah bilangan post dan bilangan komen yang anda terima bagi keseluruhan selama anda berblogging.? Jika itu yang menjadi persoalan, jawapannya adalah mudah sekali.:)



Ikuti tutorial di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript
(masih tidak faham? rujuk sini )

2. Copy kod di bawah dan letakkan ke dalam ruangan HTML/javascript



get this


3. Save. Itu sahaja dan lihat hasilnya.:)
Read More

Misterlinky - cara mudah untuk pengunjung masukkan link di blog

| |
0 comments
Sesetengah pemilik blog akan memasukkan link pengunjung sebagai exchange. Cara ini bagus untuk meningkatkan trafik blog. Kebiasaanya, link pengunjung akan dimasukkan oleh pemilik blog.

Tetapi dengan misterlinky, pengunjung sendiri akan meninggalkan link blog mereka pada blog² yang meletakkan widget ini. Secara tidak langsung dapat memudahkan kedua-dua belah pihak, pemilik blog dan pengunjung blog.

Berikut contoh widget misterlinky ini.



Untuk mendapatkan widget ini, anda boleh dapatkan (daftar) di www.misterlinky.net/

Setelah selesai mendaftar dengan linkwinky, dapatkan kod HTML kemudian paste di bahagian page element blog anda.

Antara kelebihan menggunakan misterlink ini adalah widget yang simple dan mudah untuk memasukkan url blog. Pemilik blog juga senang untuk menguruskan widget ini(jika ada link yang tidak dikehendaki)
Read More

Recent Post dengan Thumbnail Widget

| |
0 comments
Penggunaan widget recent post adalah penting untuk menunjukkan kepada pengunjung apa entri-entri terbaru yang terdapat dalam blog. Lagi berguna jika pengunjung yang datang bukannya dari frontpage. Jadi widget recent post sangat penting ketika ini.

Sebelum ini sudah diletakakn Animated recent post widget,tetapi untuk kali ini, tutorial akan menunjukkan cara meletakkan recent post widget, tetapi jenis statik.

Contoh adalah seperti gambar ini.


Cara-cara untuk meletakkan widget ini adalah seperti berikut:

1. Dari dashoard > desin > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod berikut.





Note:

Anda boleh ubah beberapa kod mengikut kesesuaian blog anda.

boxwidth - lebar widget
cellspacing - jarak antara cell (default sudah ok)
borderColor - Warna background (untuk melihat senarai kod warna, RUJUK SINI)
thumbwidth & thumbheight - lebar dan tinggi thumbnail (default sudah ok)
fntsize - Size untuk tajuk
acolor - Warna tajuk.untuk melihat senarai kod warna, RUJUK SINI)
aBold - Mahu tajuk di'tebalkan' atau tidak (true or false)
numposts - Bilangan recent post yang dikehendak
home_page : http://URL ANDA.blogspot.com/ (Gantikal URL ANDA dengan url blog anda)


3. Save dan lihat hasilnya.:)

-----------------

-Bagi yang buat tetapi tidak menjadi, dari dashboard > settings > site feed
- Pada allow site feeds, pilih FULL


Read More

Letak Widget Popular Post Dalam Blog

| |
0 comments
Anda menaip blog, tetapi adakah anda tahu dalam banyak-banyak entri yang anda ada, entri manakah yang paling popular.? Entri manakah yang mempunyai komen paling tinggi.? Tentu sukar untuk menentukan apatah lagi jika anda sudahpun mempunyai entri sehingga mencapai ratusan.:)


Tutorial kali ini akan menunjukkan cara bagaimana untuk meletakkan popular post( atau anda boleh panggil dengan nama lain) pada blog anda. Widget popular post ini adalah berdasarkan bilangan komen yang ada pada entri, bukannya berdasarkan page view. Dan semestinya tutorial ini adalah mudah sahaja.:)

1. Login akaun anda, dari dashboard > design > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod di bawah.


Get this widget here


Note:
-tukarkan URL BLOG dengan nama blog yang anda guna
-maxshowresult=5; tukarkan 5 dengan bilangan popular post yang anda mahu

3. Save dan lihat hasilnya..:)
Read More

Letak Button Back To Top

| |
0 comments
Meletakkan button 'back to top' biasanya digunakan untuk blogger yang kebiasaannya mempunyai entri yang panjang, ataupun entri blog tersebut sentiasa mempunyai komen yang banyak atau mungkin juga sebagai penyeri agaknya.:)
anda boleh melihat contoh back to top button di blog demo ini.


Walaupun terdapat pelbagai cara yang agak advance dengan kesan yang lagi hebat-hebat, tetapi entri ini akan menunjukkan cara yang paling ringkas untuk meletakkan button back to top ini. Tidak perlu pening kepala kerana ia hanya menggunakan beberapa step sahaja.:)

Berikut adalah tutorial untuk meletakkan button back to top dalam blog.


1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript

2. Paste kod di bawah ke dalam ruangan html/javascript
Url gambar">


Masukkan url gambar dengan url gambar 'arrow back to top' anda.

Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.


http://img338.imageshack.us/img338/9871/2evyotw.gif


http://img132.imageshack.us/img132/5848/totopbutton.png


http://img175.imageshack.us/img175/7297/up3.png


http://img28.imageshack.us/img28/2494/30720265.png


http://img529.imageshack.us/img529/1986/96133335.png


http://img294.imageshack.us/img294/9831/14193731.gif


3. Apabila selesai save dan lihatlah hasilnya.:)
Read More

Letak 'Recent Comments' dalam Blog

| |
0 comments
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.
Letak 'Recent Comments' dalam 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
Get widget here


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 daripadafalse kepada true.
var m_rc=false;var n_rc=true;var o_rc=100


Selamat mencuba..:)


Read More

Letak sistem rating pada blog

| |
0 comments
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)


Read More

Youtube : Video Player kepada MP3 Player

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



contoh untuk kod di atas.


4.Dan hasilnya. 



Senang bukan.?.:)
Read More

Letak Ruangan Komen Di Bawah Entri

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


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


7. Save template anda dan lihat hasilnya.
Read More

Cara Buat Perkataan Bergerak (Scrolling/Marquee Text)

| |
0 comments
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)
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.
Contoh scrolling text
Read More

Letak Tajuk Entri Pada Read More

| |
0 comments
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

Letak Tajuk Entri Pada Read More


Selepas
Letak Tajuk Entri Pada Read More


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.

Letak Tajuk Entri Pada Read More


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

Letak Gambar Sebelah Tajuk Entri

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


3. Letakkan kod dibawah antara kod dan kod



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.:)
Read More
Related Posts Plugin for WordPress, Blogger...


Pesanan Hari Ini

“Perumpamaan persaudaraan kaum muslimin dalam cinta dan kasih sayang di antara mereka adalah seumpama satu tubuh. Apabila satu anggota tubuh sakit maka mengakibatkan seluruh tubuh menjadi demam dan tidak bisa tidur.”

(Hadis riwayat Muslim)

“Seorang Muslim adalah saudara muslim lainnya, ia tidak menzaliminya, merendahkannya, menyerahkan (kepada musuh) dan tidak menghinakannya.”

(Hadis riwayat Muslim)

“Teman yang paling baik adalah apabila kamu melihat wajahnya, kamu teringat akan Allah, mendengar kata-katanya menambahkan ilmu agama, melihat gerak-gerinya teringat mati.”

by Ahmad AlFateh