Daftar dan letak shoutbox pada blog

Meletakkan sesebuah shoutbox dalam menggalakkan interaksi antara pemilik blog dengan pengunjung sesebuah blog. Interaksi ini mudah kerana ianya tidak melibatkan komen pad aentri, tetapi pesanan yang ditinggalkan pada gadjet shoutbox yang di'pasang' oleh pemilik blog.

Terdapat pelbagai jenis shoutbox yang ada untuk diletakkan dalam sesebuah blog. Antara yang dicadangkan untuk diletakkan dalam sesebuah blog adalah shoutbox daripada shoutmix.com.

Tutorial ringkas ini akan menerangkan cara untuk mendaftar shoutmix, dapatkan kod html dan letakkan pada blog.

1. Buka web www.shoutmix.com

2. Klik pada create shoutbox


3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)


4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time.


5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes'


6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code berkenaan.


7. Setelah copy code, paste pada html/javascript dalam blog anda ( Dashboard>layout>add a gadget>html/javascript)
-Jika masih tidak faham dimana perlu paste code, sila rujuk disini.


Nota: setting untuk shoutbox boleh diubah bila-bila masa dengan login kembali ke dalam akaun shoutmix.
-----------
Contoh shoutbox yang diletakkan dalam blog.

Letak Icon Pada URL Blog

Mempunyai icon disebelah url sesebuah blog dapat menunjukkan treadmark sesebuah blog.
Pengunjung tetap juga biasanya akan dapat mengingati icon yang unik berbanding icon blogger yang biasa dilihat.

Ini kerana, default untuk icon bagi sesebuah blog adalah icon blogger yang berwarna jingga. Dan kini anda berpeluang untuk mengubahnya mengikut kesukaan anda dengan mengaplikasikan beberapa langkah di bawah.

Jika sebelum ini iconnya begini.

Apa kata kalau tukar menjadi seperti ini.

ataupun lain².:)

Sila pastikan anda mengikuti langkah yang diberi satu-persatu untuk memastikan semuanya berjalan lancar.:).


1) Cari Icon Kesukaan Anda.
Sebagai permulaan, pastikan anda mempunyai icon untuk dijadikan icon untuk blog anda.
Jika yang sudah ada, tiada masalah.
Jika masih mencari² icon yang sesuai, boleh juga lihat² dalam web berikut

http://www.freeiconsweb.com/index.html
http://www.gifanimations.com/
Atau jika masih tidak berkenan, cari je dalam google.:)

untuk icon ini, biasanya file gambar adalah format gif, jpg, jpeg, png. Anda boleh cari samada gambar yang static atau animated. Biasanya size (pixel) icon adalah 32x32 atau 34x34 atau 128x128. Untuk tutorial ini, jangan ambil file yang jenis .ico (sebab takut susah untuk upload nanti.)

Katakanlah, aku sudah ada icon, dan icon yang aku suka adalah ini.

2) Upload icon anda ke imageshack.us
Langkah seterusnya anda perlu uplaodkan gambar anda. Boleh gunakan apa² web hosting,imageshack atau photobucket atau lain². Tapi aku cadangkan imageshack sbb tak perlukan pendaftaran untuk upload.


Selepas upload sila pastikan anda ada direct link untuk gambar anda untuk dimasukkan dalam kod nanti.




Langkah seterusnya,adalah untuk letakkan code ke dalam blog anda. Oleh itu, pastikan anda login dahulu ke blog anda.

Langkah²nya adalah seperti berikut.

1)Dari dashboard blog, klik pada layout


2)Klik pada 'edit html' kemudian tick pada 'expand widget templates'


3)Seterusnya, anda hendaklah backup dahulu template anda dengan klik pada 'download full template'. Jika masih tidak faham bagaimana dan kenapa hendak buat backup ni, sila rujuk sinibackup template blog.

4)Daripada paparan skrin anda, klik edit, kemudian find. Dalam bahagian kotak dibawah, taipkan < /head>


5)Buka link dibawah untuk lihat code, selepas itu copy code yang diberi kemudian paste sebelum < /head>, selepas itu, gantikan dengan direct link icon anda dari imageshack yang anda upload.

KLIK SINI UNTUK PAPARKAN CODE

Seterusnya klik preview untuk lihat icon anda menjadi atau tidak, kalau menjadi, apa lagi, SAVE..:)


Diharapkan anda semua tidak menghadapi masalah untuk semua ini..
Pilihlah apa² icon yang cantik untuk blog anda.
Nanti bila tengok blog sendiri, baru bertambah semangat..:)

Background Dalam Sesebuah Entri

Background sesebuah post biasanya akan mengikut default yang telah ditetapkan dalam setting blogger. Tetapi ada satu trick yang boleh digunakan untuk menjadikan background yang berbeza untuk entri yang dikehendaki sahaja.

Contohnya entri ini yang menggunakan background bercorak bunga-bungaan, tidak seperti entri lain yang berlatar belakangkan warna putih sahaja.


Tutorial untuk membuat background untuk post adalah begitu senang.

Apa yang bagusnya adalah, anda boleh pilih gambar apa sahaja yang anda mahu untuk background, dan anda boleh pilih untuk hendak letakkan dalam post yang mana satu untuk blog anda.

Apabila anda login pada blog anda, letakkan kod ini dalam new post anda. (pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk mengelakkan code warna dicopy sekali.:)

<div style="background:url(Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.
</div>

- Letakkan link gambar pada tulisan biru (kalau anda upload dalam blog kemudian copy url gambar lagi bagus.:)
- jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat.
-Taip apa sahaja entri anda seperti biasa dalam kawasan merah. Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div>

Itu sahaja.
Apabila anda post anda akan lihat kesannya.

p/s:
-pastikan anda pilih backgdround yang bersesuainya agar pengunjung blog anda tidak pening membaca.

Disable Right Click

Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.?
Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam 'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:)

Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat² (copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang aku selalu baca adalah kerana ada orang yang copy entri mereka bulat².

Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click

Berikut adalah cara yang mudah untuk menggunakan fungsi ini.


1. Copy kod ini.

<script language=JavaScript>
<!--

//edit by unwanted


var message="Masukkan Mesej Anda Disini";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript. Kalau masih kurang jelas, klik sini.


Apabila sudah siap, save dan lihat kesannya pada blog anda.:)

Image Magnify

Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain.

Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test Mode

Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.

Berikut adalah tutorial untuk image magnify ini.


1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi, klik sini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">

/***********************************************
* Kod telah di'edit' oleh arpishz
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh arpishz
* -- Sharing Is Caring -- http://www.arpishz.blogspot.com --
***********************************************/
</script>

2) Apabila sudah letak code tu, save sahaja seperti biasa..

Siap untuk bahagian letakkan kod asas..

Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)

<img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

Keterangan :

• url gambar disini : Masukkan url gambar.
• 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5
• 200 : Masukkan lebar gambar yang anda rasakan bersesuaian
• 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian

Letak Iklan Nuffnang Statik

Adakah anda sudah mempunyai akaun Nuffnang.?.
Kalau ada, dimanakah anda letakkan iklan anda itu..(skyscraper)?

Memasang iklan secara statik adalah meletakkan iklan pada kedudukan yang tetap dalam sesebuah blog walaupun entri telah di'scroll' ke bawah

Anda scroll macam mana pun ianya tetap berada pada kedudukan itu. Kelebihan.? Nanti akan dicerita kat bawah, jom kita tengok cara yang yang perlu dilakukan untuk letak iklan nuffnang statik ini.


Owh, sebelum tu. Mungkin ada yang bertanya 'Letak iklan statik tidak menyalahi terma dan syarat Nuffang ke.?'

So ini jawapan dari nuffnang sendiri.

Yes, it is allowed for a blogger to place his ad unit static as shared by you. That position is no doubt desirable and advertisers would love to advertise on such placement.

However, bear in mind that the desirability for a Skyscraper ad unit is the same if it\'s placed;
- the top gadget of a sidebar
- visible upon loading of the page
- visible at all time (static ad)

As such, it doesn\'t really make a big difference, but nevertheless, advertisers will pay more attention to blogs which embed the ad units as a static ad.

Cheers,
Robb Chew
Blogger Relations Executive

Nuffnang Sdn Bhd

Cara-cara untuk letakkan iklan statik adalah seperti berikut.

1. Login akaun Nuffnang untuk pastikan kod iklan Nuffnang untuk Skyscraper



2. Copy kod di bawah, kemudian letakkan di HTML/javascript dalam blog anda
( Dashboard > Layout > Page elements > Add a gadget > HTML/javascript )
Kalau masih tak faham rujuk sini.

<div style='display:scroll; position:fixed; bottom:5px; right:5px;'>Letak Kod Nuffnang Sini</div>

Penerangan :
i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kod adalah untuk Skyscraper)


UPDATE: Jika anda hendak kod bersama tulisan kelip² "aik, takkan tengok je" kodnya adalah seperti dibawah.

<div style='display:scroll; position:fixed; bottom:5px; right:5px;'><blink>Ai, takkan tengok je.:)</blink>Letak Kod Nuffnang Sini</div>

3. Save, kemudian lihat kesannya dalam blog anda.:)

Bagaimana, senang bukan..:)

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

Kelebihan meletakkan iklan secara statik.

1. Kebarangkalian untuk pengunjung melihat iklan itu adalah sangat tinggi. Kerana ianya muncul sentiasa walaupun scroll ke bawah.

2. Kebarangkali untuk klik juga adalah tinggi.

3. Advertiser lebih berminat untuk beriklan di blog anda.

4. Berdasarkan kepada no1,2 dan 3, maka earning anda pun akan bertambah..:)


Selamat mencuba :)

Cara Buat Gambar Bergerak (Scrolling Image)

Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain.

Contoh scrolling image adalah berikut.

Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.


Contoh kod bagi scrolling image adalah seperti berikut.

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

Penerangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kod-kod ini dapat digunakan di dalam post entri ataupun pada bahagian gadget.


Selamat mencuba ::)

Link Dalam Blog Warna-Warni ( Rainbow Link )

Rainbow link merupakan salah satu trick yang diaplikasikan kepada link yang ada dalam sesebuah blog. asalkan cursor mouse dilalukan pada sesuatu link, link tersebut akan berubah menjadi warna-warni dengan warna yang tertentu.

Klik disini untuk lihat contoh blog unwanted86 yang menggunakan trick link warna warni ini.


Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti berikut.

1.) Copy code di bawah ini.

<script src="https://sites.google.com/site/unwanted86/javascript/rainbowlink.js" type="text/javascript">
</script>

2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget


3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ.


4) Siap dan save. Itu sahaja. Senang bukan.:)

Ketahui Komen Pada Entri Melalui Email

Mengetahui siapa yang komen pada sesebuah entri adalah penting bagi seseorang blogger samada untuk mengetahui respon daripada pengunjung ataupun memberi maklum balas jika ada perkara yang ditanya oleh pengunjung kepada pemilik.

Contohnya begini. Anda ada blog kan. dan sudah tentu anda ada entri yang banyak dalam blog anda. Katakan anda ada entri bertarikh 12 Februari 2009, bagaimana anda hendak tahu jika ada orang komen pada entri tersebut pada hari ini.? Takkan anda hendak periksa semua entri anda untuk pastikan samada ada komen baru atau tidak. Bukankah itu menyusahkan dan begitu membuang masa.:)

Oleh itu, terdapat cara mudah untuk para blogger untuk ketahui samada entri anda baru sahaja dikomen oleh seseorang.Dan anda akan dapat tahu melalui email.

1)Login akaun anda, dan dari dashboard, klik pada setting

2)Selepas itu klik pada comments


3)Apabila paparan sudah dibuka, scroll sampai bawah sehingga anda jumpa 'comment notification email'. Masukkan email anda. anda juga boleh masukkan lebih dari satu email, kemudian save.. siap..:)


Apabila ada seseorang yang komen pada entri anda, contoh yang keluar pada email yahoo adalah seperti berikut.,

Buka Link Baru Apabila Klik Pada Gambar

Apabila upload gambar menggunakan kaedah yang telah tersedia oleh blogger.com, secara default gambar tersebut akan dibuka pada page yang sama.

Ada ketikanya ianya bagus apabila merujuk kepada blog yang sama, tetapi kurang bagus apabila seorang blogger hendak merujuk kepada tempat lain. ini kerana apabila buka pada page yang sama, pengunjung terpaksa menekan button back untuk kembali kepada blog asal.

Tutorial ini akan menerangkan bagaimana untuk menjadikan gambar yang mempunyai link akan dibuka pada tab yang baru apabila diklik.

Perhatikan kedua-dua gambar ini, sila klik pada keduanya.

1)Gambar 1

2)Gambar 2



Gambar pertama tidak memberi kesan apa², tetapi gambar kedua membawa anda ke yahoo.com .(memang sengaja di'link'kan kepada yahoo).

Jangan terkejut jika tutorial ini sangat mudah.:)

<a href="Letakkan link untuk dibuka disini" target="_blank" >
<img src="Letakkan url gambar disini"/></a>

Sebagai contoh, untuk kod gambar kedua adalah seperti ini

<a href="http://www.yahoo.com" target="_blank" >
<img src="http://www.google.com.my/intl/en_com/images/logo_plain.png"/></a>

• Untuk gambar kedua, link akan dibuka pada tab baru. Jika anda ingin link dibuka pada page yang sama, buang target="_blank"
• Kaedah lain untuk buka link dalam page yang sama boleh guna terus aplikasi upload gambar dan letak link yang ada masa buat new post.:)

Selamat mencuba :)

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

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


Selamat mencuba :)

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


Selamat mencuba :)

Backup Template Blog

Template bagi sesebuah blog boleh diibaratkan sebagai tulang belakang blog kerana template yang menyimpan semua maklumat berkaitan rupa bentuk blog anda, fungsi blog dan juga kebanyakan trick untuk sesebuah blog akan dilakukan di template (edit html).

Anda letak background ke, ubah colour ke, letak fungsi 'read more' atau pape, kebanyakkannya adalah di template.
Oleh itu adalah perlu untuk seseorang blogger akan backup dahulu template blog sebelum melakukan sebarang pengubahsuaian ataupun sebelum menukar template baru.
Tujuan backup template adalah untuk backup jika sebarang perubahan kod yang diaplikasikan tidak menjadi.

Tutorial untuk backup template bagi blog adalah seperti berikut.


1)Login seperti biasa. Kemudian dari dashboard klik layout


2) Dari layout, klik edit html dan dibawah sedikit anda akan jumpa 'download full template'


3)Keluar paparan, klik save..Siap.:)


Tips: anda boleh rename template yang anda download dengan tarikh anda download. seperti 29julai2009.xml. Ini untuk memudahkan anda kenalpasti tarikh anda buat backup untuk template blog anda.:)

Selamat mencuba :)