2.17.2011

Memasang 'Heart Comment Count'.


1. Sign in akaun blogger.
2. Pilih LAYOUT --> EDIT HTML.
3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.
4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.


5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

.heart-comment-count{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiuaG9gHcBhkXJ5hEGEVTfBwTF1vl0NkAmgNB9AMmTu9nJrQzrauBhlJe6lC_OFiv6mr32YyksoPHT0A1puwmSDxRiGxAcmZQWeNBfooIoCnh33B09jdMx3Yti7vPBpwS2AuEuobd3abX/s400/heart-gold-icon.png) no-repeat;
float:right;top:0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
height:31px;
width:34px;
text-align:center;
margin-left:10px;
padding:6px 0 0 0;
}

Anda boleh memilih salah satu icon di bawah untuk digunakan.
Gantikan url icon yang berwarna merah.
01. Heart Pink.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj63zT00kdEytjK0LgOCl4E-HHx6bXomIN6bGwP9MTnQIX_F0yelIxw9vOfGTeLAS4uoz3PZo8JZmzvNcMbXtQ2MwAO2IBt2ohAiTxhfDj8lU8Ap34P-n5850UcXNd_wRIEPKf4rNWyDvEj/s400/heart-pink-icon.png
02. Heart Gold.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiuaG9gHcBhkXJ5hEGEVTfBwTF1vl0NkAmgNB9AMmTu9nJrQzrauBhlJe6lC_OFiv6mr32YyksoPHT0A1puwmSDxRiGxAcmZQWeNBfooIoCnh33B09jdMx3Yti7vPBpwS2AuEuobd3abX/s400/heart-gold-icon.png

7. Setelah selesai memilih icon.
8. Cari kod ini.

<b:if cond='data:post.link'>

9. Copy kod dibawah dan letakkan diatas kod tadi.

<span class='heart-comment-count'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
</span>

10. Pilih PREVIEW untuk melihat hasilnya.
11. Sekiranya berpuas hati SAVE TEMPLATE.
Perhatian !!! Anda boleh mengubah kepada Comment Bubble dengan menggantikan url icon berwarna merah dan kod dibawah.

padding:3px 0 0 0;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9PqaX8ahTOKYikf9Mb9Nn55GvOul9L1OrvamgCgtDNQHxfweQBzdLncF31mJdv78MbGstSjA264rZn9zgCYv1qVc62pXMyuR8fnJocoIdG-R0udak0hjJH4n86_hvk8MYr-Ig8WMFkES/s400/comment-icon+2.png

12. Selamat Mencuba.

No comments:

Post a Comment