26 Bilangan Komen dan Icon Sebelah Tajuk Entri

Jika ingin menambahkan dekorasi pada setiap Tajuk Entri Post dan Page untuk blog anda iaitu meletakkan bilangan komen dengan icon disebelah bagi tiap-tiap Tajuk Entri post dan page, di sini CK akan menunjukkan cara-cara bagaimana untuk menambahkannya.

Jika ingin menambahkan dekorasi pada setiap Tajuk Entri Post dan Page untuk blog anda iaitu meletakkan bilangan komen dengan icon disebelah bagi tiap-tiap Tajuk Entri post dan page, di sini CK akan menunjukkan cara-cara bagaimana untuk menambahkannya:

1. Pilih "More options"

2. "Template"



3. Klik butang "Edit HTML"



4. "Copy" kod di bawah:

]]></b:skin>

Klik sekali mana-mana bahagian pada Template dalam kotak yang bertanda merah dan pada keyboard, tekan butang "Ctrl+F" (untuk terbitkan kotak Search)


5. Dalam kotak Search, "paste" kod No. 4 tadi dan tekan enter

6. Kemudian "copy" kod ini pula dan "paste" hanya sebelum/di atas kod No. 4 tadi:

.comment-bubble {
float:right;
z-index:2;
position:relative;
width:36px;
height:36px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSKzNoGKV2nqybPjB9p43Xu8lns740PKpxGNHOYBjFEdYBGFq8pZCZI261BcXXuiHqZTv1b-JYRxcrAKWxKYM87K4rb2pCSCoYChZepTCeuJKfTt_vV8XXaClMxGvmSSfvkFh-oKP_q-3/s1600/CK-Bubble4a.png) no-repeat;
font-size:16px;
padding-left:0px;
padding-top:2px;
margin-top:-15px;
margin-right:2px;
text-align:center;
}

Nota:

• Kod warna merah:
  Link gambar background icon. Anda boleh gantikan dengan link gambar anda sendiri atau copy saja link gambar bagi background icon yang CK sediakan;
  *jika menggunakan gambar background icon anda sendiri, pastikan icon tersebut bersaiz 36px X 36px
**klik sini untuk dapatkan link gambar untuk background icon
• Jika anda tidak memerlukan gambar background icon dan hendak membuangnya, delete saja semua kod yang berwarna biru dan merah

Ia akan kelihatan seperti ini selepas kod dimasukkan:


7. Seterusnya cari kod ini didalam kotak Search (seperti langkah No. 4 dan No. 5) kemudian enter:

<h3 class='post-title entry-title' itemprop='name'>

*Langkah ini perlu dilakukan berhati-hati kerana terdapat lebih daripada satu (1) kod yang sama. (Dalam Template CK terdapat dua (2) kod yang sama dan CK memilih kod yang kedua!)

8. Kemudian "copy" kod ini pula dan "paste" hanya selepas/di bawah kod No. 7 tadi:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color:#000000; font-family:mistral; font-size:21px;'><data:post.numComments/></a>
</b:if>

Nota:

• Kod warna ungu:
  Untuk menukar jenis font
• Kod warna aqua/cyan:
  Untuk menukar saiz font
• Kod warna hijau:
  Untuk menukar warna bagi bilangan komen pada sebelah Tajuk Entri
*klik untuk mendapatkan kod-kod warna lain

Beginilah keadaannya setelah kod dimasukkan:


*Setelah kod No. 8 dimasukkan, "Save template" dahulu dan tanpa menutup 'window' template ini, "View blog" ("right click" pada button "View blog" -->>> "Open Link in New Tab")...



Kemudian lihat samada Bilangan Komen dan Icon telah terpapar di sebelah setiap Tajuk Entri blog anda atau belum. Jika ia muncul terus pergi ke langkah 9. Manakala jika tidak, kod No. 8 perlu dimasukkan selepas/di bawah kod No. 7 yang satu lagi

9. "Save template" dan selesai!

Untuk menukar gambar background icon, pilih icon mana yang diminati, copy kod dan gantikan dengan kod merah:

	*Copy kod di bawah dan gantikan dengan kod merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99xDIfZRL4tOJRyIVxjpeYceiRc0IPyAAlmYOydMimjkkxWltN3VJ0h1pMwBwfqMksg4PEBwjBPFSSZCCyShb_DIFfZwXAz_QJM803zX8M33qypZTCV-puodgDpgrgia31pV1cfVoNgCH/s1600/CK-Bubble.png		*Copy kod di bawah dan gantikan dengan kod merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9gAP5r4Z4lG7aems5Un2Kr73SXj9uEix7PwLKjS0fIc63wfLViwzJGCtRHjvK1CHbgc0J-cuGCB1tSNvBWdToXzO6HMkCGwwJ2s_R1mSk4_QEcwcQ6wrI2_YaHkRBRnou12pdHBrK74lE/s1600/CK-Bubble2.png		*Copy kod di bawah dan gantikan dengan kod merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01_XiZGKw-OUXnU6CJ4LJbskO2St1-H74Ph_IedLWF8B9LmjoDC0U54v4240RwF4IpSRPO_kZPoVlpnfdIQNIAJ6cLA7bsBJcFGe0RzhRkdne6oc2Oc9OZvl2gtyyKxRTLD8PvWnOF4m7/s1600/CK-Bubble3.png
	*Copy kod di bawah dan gantikan dengan kod merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaT04In09hhyphenhyphenFITVKhwjQR-CvA4GjpzPIv-n7UAsjs_E_gPb3F2Q2wX0cYKuF2AtDDlRUFz1hjpvMoL4uEOUy1-5PO5AFv43IobGlytC5JTuxt0kjNqGw0LXDqUeLHLLfKaFPgDV3sEuuE/s1600/CK-Bubble4.png		*Copy kod di bawah dan gantikan dengan kod merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8dJd6WPlGDmzcj6cxaKlXRPtQXPxwkUA_usib55zyEuY8rQDmMYdisz9TJGSTYnRqdL6dqXFQMrab3zxDgLmpnW7Dfj4sm96KPgN5pwF0gkFIWGVateKs84aUr5mcAQ8URo6k9PFiCbp6/s1600/CK-Bubble5.png		*Copy kod di bawah dan gantikan dengan kod merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFJ66RlC3jZSx0dHrx5ZtLTSg0JiJp1AutkJPQ0CTEnYXaQRAsaKu8nHSGM_kTKxN8ADm9nWyw4EYUVESSXqWeYLhqM1QVPPCLOeSt7lNDlhQCF5UyRVbagR-bQz2cHFgzRcztvKb6OP8/s1600/CK-Bubble7.png

Jika ada sebarang pertanyaan, sila tinggalkan komen di bawah.

Sila Share Post CK Ini Sekiranya Anda Suka

• @Facebook
• @Twitter
• @Google+

​Dapatkan Widget Ini!