Rabu, 25 Mei 2011

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


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




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

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

Letak Kod Nuffnang Sini

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.

Ai, takkan tengok je.:)Letak Kod Nuffnang Sini


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

Teknik "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.




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

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

Teknik "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.



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

Teknik 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

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.


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

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

Teknik Buat Read More Dalam Blog:Cara 1

Mempunyai fungsi 'read more' adalah antara perkara yang perlu diaplikasikan pada sesebuah blog. Ini kerana rata-rata pemilik blog akan menaip entri yang boleh dikategorikan sebagai 'panjang'. Dengan mempunyai fungsi read more, keseluruhan entri dapat diringkaskan supaya ianya lebih memudahkan.

Cara Buat Read More pada blog


Berikut merupakan langkah yang perlu dilakukan untuk menggunakan fungsi 'read more' pada blog.


1. Login, daripada dashboard klik layout > edit html.

Cara Buat Read More pada blog



2. Pastikan anda backup template dahulu dengan klik 'Download Full Template' kemudian klik pada 'expand widget templates'.

3. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian taip

Cara Buat Read More pada blog


4. Letakkan kod ini di atas

5. Kemudian letakkan kod ini di bawah



Nota: kod anda sepatutnya kelihatan seperti ini.

Cara Buat Read More pada blog


6. Selepas selesai letak code, Save Template.

7. Kemudian, daripada paparan dashboard, klik pada Setting > Formatting kemudian scroll ke bawah sehingga jumpa Post Template.

8. Copy code berikut ke dalam Post Template



9. Save Setting

10. Pergi kepada paparan untuk post entri, dalam ruangan post entri klik pada 'edit html' dan akan anda jumpa code tadi. Kandungan yang ingin diletakkan dalam ruanagn read more perlu terletak antara dan


11. Apabila siap menaip, klik publish..

Teknik Buat Read More Dalam Blog : Cara 2

Tutorial ini akan menunjukkan lagi cara untuk buat read more bagi sesebuah blog.
Sebenarnya kaedah ini sudahpun agak lama wujud dalam blogger.com, tetapi mungkin pengguna blogspot tidak perasan. Dan bagi blogger yang menggunakan template asal daripada blogger.com, kaedah ini amat mudah untuk diaplikasikan.



Berikut tutorial ringkas untuk buat read more yang sudah tersedia dalam blogger.com


1. Login ke akaun blogger anda, kemudian daripada dashboard klik new post.



2. Kemudian taipkan beberapa patah perkataan, kemudian diselangi oleh kod berikut. (Ini untuk test template anda sudah tersedia dengan kod penuh atau belum)

Teknik Letak Signature Dalam Blog

Mempunyai signature dapat menambahkan lagi trademark bagi seseorang blogger. Signature terletak pada bahagian akhir untuk sesuatu entri yang di post oleh blogger.

Letak Signature Dalam Blog


Signature boleh jadi apa sahaja samada gambar, icon, dan juga nama anda dengan font yang dirasakan sesuai untuk signature.

Tutorial ini akan menerangkan cara-cara meletakkan signature pada blog dengan menggunakan signature yang di'generate' daripada kaedah online.

Laman web yang paling sesuai untuk create signature online adalahhttp://www.mylivesignature.com/.Laman web ini dicadangkan kerana ianya dapat menghasilkan signature yang anda mahu dengan lebih senang. Masa anda pun jimat.:)


CREATE SIGNATURE.

1.Buka web http://www.mylivesignature.com/ untuk create signature anda.


Letak Signature Dalam Blog


Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'.


tutorial Letak Signature Dalam Blog


2.Setelah selesai signature anda, uploadkan untuk dapat url, (boleh guna imageshack.us atau upload pada blog anda sendiri)
contoh url:http://2.bp.blogspot.com/_CEj8AwvwSNM/S4PotCOwq7I/AAAAAAAAD9A/jC8qDqdmR78/signature.png


CARA LETAK DALAM BLOG.

1. Login kepada blog anda, kemudian dari dashboard, Layout > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)

2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah


Cara Letak Signature Dalam Blog


3. Copy code ini dan paste di bawah kod tadi.


left">URL gambar/signature anda"/>


kod anda sepatutnya kelihatan seperti ini.(contoh)


Cara Letak Signature Dalam Blog


Penerangan :
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature


4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)

Teknik Letak Linkwithin Dalam Blog

Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.

Contoh:


Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.

Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.

1. Buka web www.linkwithin.com

2. Pada paparan yang muncul, masukkan maklumat yang berkaitan.

Cara Letak linkwithin Dalam Blog

Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.

3. Klik pada install widget

Cara Letak Linkwithin Dalam Blog


4. Pilih blog anda ingin masukkan linkwithin (pilih jika anda ada lebih dari 1 blog, kemudian klik add widget

Cara Letak Linkwithin Dalam Blog


5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)
Cara Letak Linkwithin Dalam Blog

Teknik Ketahui Bilangan Pengunjung Online Dalam Blog

Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.?

Mungkin amat sukar untuk anda menjangkakannya (tidak boleh rasanya.:)

Kalau anda mempunyai statistik blog, mungkin anda tahu mengikut hari ataupun jam,tetapi anda tidak tahu berapa bilangan pengunjung dalam keadaan masa sebenar.

Bilangan Pengunjung Online Dalam Blog


whous.amung.us menawarkan widget yang dapat menunjukkan bilangan pengunjung yang online pada masa sebenar.
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.

Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.




2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.

Bilangan Pengunjung Online Dalam Blog


3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.
Dashboard > layout > page element > add a gadget > html/javascript.

Bilangan Pengunjung Online Dalam Blog

Jika masih tidak faham, sila rujuk disini.

4. Save, dan lihat hasilnya..:)
Related Posts Plugin for WordPress, Blogger...