PERHATIAN (!!!!) SEMUA TUTORIAL INI SAYA HANYA SHARE DARI LAMAN WEB YANG LAIN YE. SHARING IS CARING. TAK SALAH KAN??? PEACE ^_^
Website untuk download template blog
Sebelum menukar template sesebuah blog, perkara yang diperlukan adalah template yang hendak ditukar. Seseorang pemilik blog mesti mengetahu template bagaimana yang hendak digunakan untuk blognya.
Jika anda seorang pemilik blog dan masih belum lagi mempunyai template yang hendak digunakan, anda boleh mendapatkan pelbagai jenis template secara percuma dan pelbagai jenis yang dirasakan sesuai untuk blog anda.
Template sesebuah blog adalah dalam format .xml (oleh itu pastikan jika anda download file dalam bentuk zip/rar, anda extract dahulu file tersebut.)
Berikut adalah antara laman web yang menyediakan pelbagai jenis template untuk blogger secara percuma.
http://btemplates.com/
http://www.ourblogtemplates.com/
http://www.deluxetemplates.net/
http://blogtemplate4u.com/
http://www.bloggertemplatesfree.com/
http://www.btheme.info/
http://www.blogspottemplate.com/
http://www.freebloggertemplate.org/
http://www.bloggertemplateplace.com/
Anda juga boleh mendapatkan pelbagai lagi template untuk blog dengan hanya menggunakan fungsi search pada google.
Tips: Anda tidak perlu risau jika anda gunakan banyak masa untuk memilih template yang sesuai untuk anda. Kerana itu adalah perkara biasa. Pastikan template yang anda pilih betul-betul memenuhi citarasa anda.:)
Tutorial tukar template blog
Menukar template blog dapat mengubah rupa blog asal kepada paparan yang lebih menarik.
Adalah biasa bagi seseorang pemilik blog inginkan blognya tampil menarik berbanding template asal.
Adalah biasa bagi seseorang pemilik blog inginkan blognya tampil menarik berbanding template asal.
Tutorial ini akan menerangkan dengan ringkas cara-cara untuk menukar template sesebuah blog.
Sebelum menukar template blog, pastikan anda sudah mempunyai template yang dikehendaki.
Jika anda masih belum lagi mempunyai template, sila rujuk kepada entri ini.
website untuk mencari template blog.
Berikut adalah langkah-langkah untuk menukar template blog.
1. Login akaun kemudian daripada dashboard klik layout > edit html
2. Baca penerangan berdasarkan gambar di bawah.
- 1. Klik browse 2. Pilih template yang anda telah download 3. Klik open 4. Klik upload
3. Apabila klik upload, paparan berikut akan keluar, klik pada 'keep widget'
4. Setelah selesai anda boleh view blog anda.:)
Letak Button Like Untuk Blog
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
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
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>
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.:)
Tutorial Gerakkan Title Blog
Title blog secara default adalah dalam keadaan statik. Anda boleh tukarkan title blog anda dengan mudah dan juga anda boleh membuatkan ianya bergerak dari kanan ke kiri.
Contoh title bergerak di test blog.
Tutorial untuk buatkan title blog bergerak adalah seperti berikut.
1. Dari dashboard > Design > Add a gadget > Html/Javascript
2. Copy dan paste code berikut dalam ruangan HTML/Javascript
<script language=javascript>
msg = "Title Blog Anda";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>
Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu.
3. Save dan lihat hasilnya.:)
Update:
Mahu lebih banyak gerakan untuk title blog ini.? rujuk entrihttp://tutorialuntukblog.blogspot.com/2011/05/title-bar-maker.html
Letak Facebook Share Button dalam Blog
Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.
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
Code untuk Compact
2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)
3. Menggunakan fungsi find (ctrl + F), cari kod ini.
jika tidak jumpa, cari kod ini.
4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3)
5. Save template dan lihat hasilnya.
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
<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>
Code untuk Compact
<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>
2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)
3. Menggunakan fungsi find (ctrl + F), cari kod ini.
<div class='post-header-line-1'/>
jika tidak jumpa, cari kod ini.
<div class='post-header-line-1'>
4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3)
5. Save template dan lihat hasilnya.
Letak Facebok Button 'Like' Dalam Blog
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.
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.
contoh:
4. Save dan lihat hasilnya.:)
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.
<data:post.body/>
3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
contoh:
4. Save dan lihat hasilnya.:)
Popular Post Dalam Blog (berdasarkan page view)
Sebelum ini sudah ada tutorial untuk widget popular post berdasarkan komen terbanyak yang terdapat dalam sesebuah entri. Untuk kali ini, tutorial adalah untuk memasukkan popular post berdasarkan kepada jumlah bilangan page view bagi sesebuah entri.
Widget ini agak simple, diambil dari foxrecord.com. Widget ini akan berfungsi serta merta sebaik sahaja kod diletakkan di blog.
Tutorial untuk meletakkan widget ini adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Masukkan kod berikut ke ruangan HTML/javascript(tidak perlu ubah apa-apa)
3. Save dan lihat hasilnya. (anda mungkin perlu klik pada 3/4 link dalam blog anda untuk ianya terus berfungsi)
Note:
1:Jumlah popular post yang ditetapkan hanya 5.
2:Post terus diletakkan berdasarkan ranking tanpa memaparkan bilangan page view.
Selamat mencuba.:)
Widget ini agak simple, diambil dari foxrecord.com. Widget ini akan berfungsi serta merta sebaik sahaja kod diletakkan di blog.
Tutorial untuk meletakkan widget ini adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Masukkan kod berikut ke ruangan HTML/javascript(tidak perlu ubah apa-apa)
<script src="https://sites.google.com/site/unwanted86/javascript/toppostpageview.js" type="text/javascript"></script>
3. Save dan lihat hasilnya. (anda mungkin perlu klik pada 3/4 link dalam blog anda untuk ianya terus berfungsi)
Note:
1:Jumlah popular post yang ditetapkan hanya 5.
2:Post terus diletakkan berdasarkan ranking tanpa memaparkan bilangan page view.
Selamat mencuba.:)
Letak Widget Popular Post Dalam Blog
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.
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..:)
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.
<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://URL BLOG.blogspot.com/";
</script>
<script src='https://sites.google.com/site/unwanted86/javascript/unwanted86-popularpost.js' type='text/javascript'></script>
</ul><br/><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small>
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..:)
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)
Output untuk kod ini seperti berikut:
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
Output untuk kod ini adalah
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,
Output untuk kod ini adalah
4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.
behavior="alternate"
contoh kod yang diletakkan trick ini.
Output untuk kod ini
5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut
scrollamount="2"
Contoh kod dengan trick ini.
Output:
Scrollamount :2
Scrollamount :4
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.
output untuk trick ini.
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:
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
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
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
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
Scrollamount :4
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.
Tukar Cursor Untuk Blog Anda
Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.
Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.
1. Buka website http://www.cursors-4u.com/
2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)
3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah
4. Kod akhir sepatutnya kelihatan seperti ini sahaja.
5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.
6. Save dan lihat hasilnya.
Mudah bukan.:)
Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.
1. Buka website http://www.cursors-4u.com/
2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)
3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
4. Kod akhir sepatutnya kelihatan seperti ini sahaja.
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>
5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.
6. Save dan lihat hasilnya.
Mudah bukan.:)
Letak Button Back To Top
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
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.:)
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
<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>
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.:)
