Minggu, 21 Februari 2010

Cara Buat Read More pada blog

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
<data:post.body/>
Cara Buat Read More pada blog


4. Letakkan kod ini di atas <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>



5. Kemudian letakkan kod ini di bawah <data:post.body/>

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>



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

<span class="fullpost">
</span>



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 <span class="fullpost"> dan </span>


11. Apabila siap menaip, klik publish..

Sabtu, 20 Februari 2010

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

Kamis, 18 Februari 2010

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

Rabu, 17 Februari 2010

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
Ketahui Komen Pada Entri Melalui Email


2)Selepas itu klik pada comments
Ketahui Komen Pada Entri Melalui Email


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..:)
Ketahui Komen Pada Entri Melalui Email


Apabila ada seseorang yang komen pada entri anda, contoh yang keluar pada email yahoo adalah seperti berikut.,
Ketahui Komen Pada Entri Melalui Email


So senang untuk anda ketahui bila dan entri apakah yang mempunyai komen terbaru.

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

HAPPY BLOGGING..:)

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
Buka Link Baru Apabila Klik Pada Gambar


2)Gambar 2

Buka Link Baru Apabila Klik Pada Gambar


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

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.