UXDE dot Net Wordpress Themes

Cara menambahkan fungsi avatar dan “read more” pada blogspot

By

image

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.

image

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;

image

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

image 

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.

image

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

Incoming search terms:

Eins - penulis Jomphp, Eins.MY dan beberapa blog lagi. Suka benda kreatif, kuat main game dan hobi pada masa lapang ialah membaca komik serta bacaan berkaitan teknologi dan komputer. Follow twitter @einztrigger.

Discussion 20 Comments

  1. safar

    ”read more” lebih senangkan pembaca dan pengunjung blog.fungsi ni mesti kena ada.

    ingat wordpress je yang ada Gravatar.kini blogspot pun ada.

    PS : Selamat ulangtahun.tak tahun pula dah setahun rupanya jomphp.com
    .-= safar´s last blog ..Daftar Blogspot ringkas =-.

  2. Kreuger

    wow bagusnya. blogspot pon dah nak canggih macam WP la.. huhuhu… sangat teruja. aku masih jugak merindukan blog spot. hanya perkara yang buat JEM adalah ruangan komen. yang lain… aku cukup selesa sebab senang nak edit themes. pakai jari pon boleh *tetibe~

  3. mrdzy

    hehe..aku slh post..ak dah post balik soklan tu kt cute plugin tu..hehe…eins…pe kate ko bt review pasal mp3 hosting..aku buntu la mn nk cari source mp3 utk streaming mp3 kt web mp3player..
    .-= mrdzy´s last blog ..D.i.D??? =-.

  4. izra

    tutorial yang korang buat semua nya menjadi,,

    cume bile tukar update editor,,
    kod html agak specific sikit,,
    susah nak gabung ngan simple kod html…

    nak tanye la,,
    camne nak buat box yang leh taruk kod html tu,,
    kena guna kod jugak ker….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>