Cara menambahkan fungsi avatar dan “read more” pada blogspot

Salam kepada pembaca2 jomphp! Minggu ini blog JomPHP.com akan menyambut ulangtahun pertama, jadi sepanjang minggu ini kami akan publish beberapa artikel berkualiti khas untuk pembaca semua.

JomPHP juga pada awalnya bermula dengan blogspot jadi sekali sekala perlu juga tutorial untuk pengguna blogspot kerana saya yakin masih ramai yang setia menggunakan blogspot. Entri ini adalah mengenai tutorial menggunakan fungsi read more dan menambah avatar ke dalam bahagian komen blog anda.

1. Menambah fungsi read more

Serius, blog nampak lebih professional dan kemas jika anda guna fungsi read more. Cuba bayangkan post2 yang berjela penuh gambar, text dan video di muka hadapan blog anda pasti jenuh orang nak scroll ke atas dan ke bawah untuk navigasi blog anda. Jika anda menggunakan fungsi read more anda boleh jadikan front page blog anda lebih mesra pelawat, dan jika anda ada meletakkan iklan seperti nuffnang lagi untung kerana meningkatkan pageviews dan ads impression anda.

Kini, fungsi “read more” di blogspot lebih menyerupai fungsi read more di blog wordpress. Anda boleh tambah kod read more didalam post editor lagi tanpa perlu memasukkan kod2 yang pelik2 lagi.

Cara2 menggunakan fungsi read more;

Pertama sekali masuk dashboard > settings > basic. Pada bahagian post editor, pilih updated post editor.

Selepas itu masuk bahagian edit html dan check pada bahagian expand widget templates. Backup dulu template anda untuk tujuan berjaga2.

Control + f, cari kod ini dalam template anda;

<data:post.body/>

Kemudian, copy dan paste code ini dibawah line kod <data:post.body/>

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></div></b:if >

Kemudian save atau preview dulu template anda.

Untuk menggunakan fungsi read more ini, ketika menaip entri baru menggunakan blogger editor, anda boleh tekan butang “insert jump break” seperti di bawah ini;

Anda akan nampak satu line panjang selepas menekan butang insert jump break. Text atau gambar dibawah line tersebut hanya akan boleh dilihat setelah pengunjung tekan butang read more pada post di front page anda.

2. Menambah avatar kepada blog comment

Oh, ianya tidak berkaitan dengan budak botak yang sedang tersengih di atas ya! Maksud saya avatar iaitu ialah image kepada id commentator. Di blog wordpress lebih dikenali sebagai gravatar. Kini pengguna blogspot pun boleh tambah avatar di bahagian komen barulah nampak lebih stylo.

Cara menambah avatar di komen blogspot;

Pertama sekali pergi dashboard > settings > comments. Cari show image profiles on comments dan pilih yes.

Selepas itu masuk bahagian edit html dan check pada bahagian expand widget templates. Backup dulu template anda untuk tujuan berjaga2.

Control + f, cari kod ini dalam template anda;

<dl id='comments-block'>

Copy dan paste code dibawah dan replace/gantikan/tindih kod diatas.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Kemudian cari kod ini pula;

<a expr:name='data:comment.anchorName'/>

Sebelum kod tersebut, copy dan paste beberapa baris kod ini. Maknanya, anda paste kod ini satu baris diatas line kod <a expr:name='data:comment.anchorName'/>.

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

Kemudian preview atau save template anda. Cuba check bahagian komen, ada keluar avatar tak?

Saya harap anda berjaya, selamat mencuba! :)

Related posts:

1. cara mematikan fungsi grouping pada taskbar
2. Memasang embed comment ala wordpress dalam blogger!
3. Blogger in Draft: Dashboard baru untuk Blogspot !!!
4. Pindah follower blogspot kepada wordpress
5. Tutorial menggunakan domain percuma dari zonestraits untuk blogspot