Cikgu Kacamata


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

*Copy kod di bawah dan gantikan dengan kod merah:

*Copy kod di bawah dan gantikan dengan kod merah:

*Copy kod di bawah dan gantikan dengan kod merah:

*Copy kod di bawah dan gantikan dengan kod merah:

*Copy kod di bawah dan gantikan dengan kod merah:


Jika ada sebarang pertanyaan, sila tinggalkan komen di bawah.






Sila Share Post CK Ini Sekiranya Anda Suka
Dapatkan Widget Ini!

26 comments:

  1. nice tutorial, nnti nak cubalah..

    ReplyDelete
  2. baru tau ni...nice shraing :)

    ReplyDelete
  3. nak cuba juga la.. aiza menabung kate&save22 untuk CK..

    ReplyDelete
    Replies
    1. dah cuba.. tapi tak keluar nombor.. macam mana nak bagi dia berada dalam kotak entri ya?

      Delete
    2. Nombor tak keluar mungkin aiza tak tukar kod warna kot...sebab kod yang CK bagi tu warna putih. Icon yg aiza letak tu pun warna putih...cuba aiza tukar warna lain...
      Kalau ikut warna yg sesuai utk blog aiza kod warna ni: #f8e0f7;

      Tukar pada yg bold dalam kod ni:
      <b:if cond='data:post.allowComments'>
      <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color:#ffffff; font-family:mistral; font-size:21px;'><data:post.numComments/></a>
      </b:if>


      Untuk posisi tu pulak, aiza cari kod ni:

      margin-top:-15px;

      tukar -15 kepada 0 atau salah satu nilai antara -15 ke 0

      *Save22 & Drypers utk aiza ;)

      Delete
    3. terima kasih CK.. nanti aiza cuba buat balik.. semalam buat tak jadi, terus aiza buang dulu, hihi.. penuhkan tabung michelin&cocacola hotfm untuk CK..

      Delete
    4. Ok...kalau masih tak jd, roger jer CK anytime ;)

      Thanks ye aiza...CK pun akan selalu pegi kedai pak Nang kat umah aiza tu :)

      Delete
    5. alhamdulillah dah menjadi.. thanks CK.. tabungan kate&drypers untuk CK.. :D

      Delete
    6. Alhamdulillah...Thanks aiza ;)

      Delete
  4. Salam Ramadhan..done folo here

    ReplyDelete
    Replies
    1. Salam Ramadan...terima kasih. CK dah follow blog SM ;)

      Delete
  5. menarik ni =) in.shaa.Allah boleh cuba nnti

    ReplyDelete
  6. Panduan yang berguna. Terima kasih.

    ReplyDelete
  7. best dan useful. nanti dtg blog sye k ..www.azimahshukor.blogspot.com

    ReplyDelete
    Replies
    1. Terima kasih ima. Selalu dtg jenguk CK ye ;)

      *CK dah follow blog ima

      Delete
  8. walaweh.. nak try, tapi bab mencoding memang tak boleh blah..
    mama tak reti ... :(

    ReplyDelete
    Replies
    1. Try je mama. Kalu ada ape2 insyaAllah CK akan bantu ;)

      Delete
  9. salam..ada masalah ckit la.. bukan nk letak icon, tp nk delete icon.. mcm mana ye.. leh tunjukkan x?

    ReplyDelete
    Replies
    1. Salam Aidilfitri...insyaAllah CK akan bantu.

      Nak buang icon, cari baris kod ni:

      background:url(http://3.bp.blogspot.com/-u8AXHZR4d4U/UdrepM4dzzI/AAAAAAAABgQ/X-VygTuGSYY/s1600/CK-Bubble4a.png)
      no-repeat;


      Delete kesemua kod tersebut. Itu saja :)

      Delete
    2. *tambahan: yang dalam kurungan tu url bagi icon. URL tersebut bergantung pada URL icon yang dipilih

      Delete
  10. tq CK! semua tutorial yg awak bagi menjadi..halalkan yer :)

    ReplyDelete
  11. salam. sgt bermanfaat. nanti sy akan cuba buat. BTW, sy follow blog u. sir zuki...

    ReplyDelete