BLOG BUTTON

Tutorial untuk membuat 'Blog Button'

Blog button adalah salah satu cara nak bagi blog kite lebih di'notice' oleh pembaca blog-blog di luar sana. Imejnya bersaiz kecil sahaja dan diletakkan di side bar mana-mana blog. Functionnya, boleh letak link di bawah blog button tu so that pembaca blog anda boleh 'copy paste' codenya dan letak kat side bar blog dorang. So, once blog button tu kene 'click' terus page blog anda terbuka.. Senang kan? Contoh Blog Button Cip adalah seperti berikut:

Macam mana nak 'START'?

Okay, perkara paling basic ialah PC atau laptop anda kene ada graphic editing software seperti Photoshop. Tapi tak perlu risau. Tak dak photoshop, kite gune aje PIXLR. Free je. Online pulak tu. Tak perlu sign up or register ape-ape. Terus aje gune. Lebih kurang macam Photoshop jugak le.

(Tak perlu untuk download ape-ape untuk gunakan software PIXLR ni)

1. Click link nih http://pixlr.com. Click "Open Photo Editor".
2. Click "Create a New Image".
3. Akan ada pop up screen. Boleh pilih size imej untuk blog button tu. Terpulang la nak besar or kecik mana. Tapi Button yang Cip buat nih size dia 125x125 pixels.

*Click pada gambar untuk lihat lebih besar.

Click 'OK' dan akan terpampang lah imej yang kosong tu..

4(a) Click "File" (sebelah kiri dari atas) lepas tu click "Open Image" (Ctrl+O). Pilih gambar yang anda nak guna dan anda boleh ulang semula untuk gambar-gambar yang lain untuk menghasilkan blog button anda. Seperti yang dibawah ni:

4(b) Mula-mula Cip tukarkan layer yang pertama pada imej kosong tu. Cip nak jadikan layer tu berwarna. So, click dekat Paintbucket tool kemudian click pada imej yang kosong tu. Tadaa... dah ada warna kan??!!

Untuk pemilihan warna mengikut citarasa, adalah seperti di bawah:

4(c) Sekarang  anda hanya perlu transfer gambar-gambar yang anda pilih tadi ke dalam imej yang telah diwarnakan tadi. Setiap imej akan menjadi layer yang lain untuk button tersebut. Jangan risau. Dekat sebelah kiri tu ada layer box. Ia menunjukkan setiap layer yang anda buat.

Cip mulakan dengan imej porple polka dot. Select imej polka dot purple tu, click "Edit" kemudian "Select All" (or Ctrl+A). Akan keluar garis-gari putus menandakan gambar tu telah dipilih kemudian click "Edit" pastu "Copy" (or Ctrl+C).

 Pergi semula ke imej yang diwarnakan tadi click "Edit" pastu "Paste".

4(d) Disebabkan original imej tu lebih besar daripada imej button Cip, Cip perlu kecilkan sedikit mengikut saiz yang Cipp nak.  Nak kecilkan sedikit, click "Edit" pastu "Free Transform" (or Ctrl+T). Then mesti nampak macam ada line segiempat yang terkeluar dari kotak-kotak lain kan? Drag mouse dari atas corner sebelah kiri tu sampai nampak arrow kemudian tarikkan kebawah sampai boleh ikut exactly saiz kotak untuk button tu.

Untuk removekan imej bergaris putus-putus tu, click "Edit" and then "Deselect All" (or Ctrl+D).

4(f) Langkah yang sama perlu diulang bagi menambah lagi imej-imej yang diinginkan. Untuk membuatkan button anda tu kelihatan pop up atau mcm 3D la.. Click icon "Layer Style" dekat "Layer box".

Satu window akan pop up dan anda boleh menukar-nukar mengikut preferences anda..


Cip nak tambah wording pada button Cip nih. So apa yang Cip buat ialah Cip click pada "Wording" icon, pastu Cip tulis la ape yang Cip nak kat button tu.

YEAY!!! Dah siap.. Boleh save!

5.  Nak save gambar yang kkite dok buat tadi senang je. Click "Edit" kemudian click "Save". Boh la nama apa sekalipun dan anda boleh save kan dalam mana-mana folder. Jangan lupe nama folder tu kendian udah le..

6. Nak publish kan button nih dalam blog, kene upload dalam Photobucket dulu supaya kite buleh dapat code serta link button tu. Bila dah upload, click "Choose action" pastu pilih "Generate link codes for selected".

Satu window akan pop up. Click pada kotak "Direct link". Secara automatiknya link tersebut sudah di copy. tinggal nak paste aje pada blog.

 
7. Okay, sekarang pegi pada dashboard dalam blogger. Pilih Design page click "Add a Gadget"dari sidebar tu. Kemudian pilih "HTML/JavaScript".

Paste kan code dibawah ni.

<center><a href="Your Blog Address"><img src="Your Direct Link (the code you pasted from Photobucket)"/></a></center><br/>
<center><div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;"> &lt;center&gt;&lt;a href="Your Blog Address"/&gt;&lt;img src="Your Direct Link (the code you pasted from Photobucket)"&gt;&lt;/a&gt;&lt;/center&gt;</div></center>

 Tukar perkataan merah tu dengan blog button code anda.
Gini ler ghupenye dalam blog tutorial Cip.

Click "Save" pastu boleh la "View Blog".

Bila bukak blog nanti button tu akan appear lebih kurang gini ler.. So, mereka yang membaca blog anda yang inginkan link boleh copy paste je link yang disediakan tu. Senangkan?? So tunggu ape lagi.. Cube la yee!!!