Friday, April 1, 2011

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.
tutorial daftar dan letak shoutbox pada 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
tutorial daftar dan letak shoutbox pada blog


3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)
tutorial daftar dan letak shoutbox pada blog


4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time.
tutorial daftar dan letak shoutbox pada blog


5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes'
tutorial daftar dan letak shoutbox pada blog


6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code berkenaan.
tutorial daftar dan letak shoutbox pada blog


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.
tutorial daftar dan letak shoutbox pada 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².:)
Letak Icon Pada URL Blog


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.

Letak Icon Pada URL Blog

Selepas upload sila pastikan anda ada direct link untuk gambar anda untuk dimasukkan dalam kod nanti.
Letak Icon Pada URL Blog




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
Letak Icon Pada URL Blog


2)Klik pada 'edit html' kemudian tick pada 'expand widget templates'
Letak Icon Pada URL Blog


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>
Letak Icon Pada URL Blog


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..:)
Letak Icon Pada URL Blog


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
Disable Right Click dalam blog



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