Status di Bagian Komentar ala Mas Doyok

Banyak yang bertanya kepada saya cara membuat tulisan di bagian atas daftar komentar seperti di blog ini. Dilengkapi dengan foto profil pemilik blog. Ide muncul ketika saya berkeputusan membuang facebook comment dari blog ini (baca: Facebook Comment dengan Reply Untuk Setiap Halaman). Karena alasan-alasan tertentu saya akhirnya memilih untuk menampilkan satu jenis cara komen saja, yakni komentar bawaan blogger. Agar mewakili keduanya, saya setting CSS sedimikian rupa agar komentar blogger mirip dengan komentar facebook. Karena rasanya aneh, jika hanya ada daftar komentar saja akhirnya saya tambahkan semacam status otomatis yang memuat judul artikel dan jumlah artikel di atas daftar komentar masuk.

Seperti Anda lihat, di bagian atas daftar komentar blog ini akan ada tulisan yang berbunyi:
Syukur Alhamdulillah berhasil menyelesaikan postingan yang berjudul (Judul Artikel Otomatis). Semoga bermanfaat untuk sahabat blogger... Jadilah Yang Pertama Memberikan Tanggapan

dan ketika sudah ada komentar masuk otomatis berubah:
Syukur Alhamdulillah berhasil menyelesaikan postingan yang berjudul (Judul Artikel Otomatis). Semoga bermanfaat untuk sahabat blogger... (penghitung komentar otomatis) tanggapan sampai saat ini. Silahkan tambahkan tanggapan Anda...

Untuk membuatnya sebenarnya sangat mudah. Kali ini kita akan membuat status yang berbeda ketika tidak ada komentar, ada satu komentar, dan ketika komentar berjumlah dua ke atas. Nah, langsung saja bagi Anda yang ingin membuatnya silahkan Anda masuk ke bagian edit html (jangan lupa centang expand template widget). Tambahkan kode CSS berikut ini, di atas ]]></b:skin>

#entryMeta {font-size:13px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;margin-bottom:20px;}
#entryMeta img {float:left;padding:2px;margin-top:1px;margin-right:5px;}
#isistatus {margin-left:65px; margin-bottom:3px;}

Kemudian tambahkan kode berikut ini setelah <b:includable id='comments' var='post'>

<div id='entryMeta'><img class='avatar avatar-39 photo' height='50' width='50' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/273608_1200922518_7802975_q.jpg' /><div id='isistatus'>Syukur Alhamdulillah berhasil menyelesaikan postingan yang berjudul <b><data:post.title/></b>. Semoga bermanfaat untuk sahabat blogger... <b:if cond='data:post.numComments == 1'><b>1 komentar...</b> Terima Kasih Menjadi Pengkomentar Pertama<b:else/><b:if cond='data:post.numComments == 0'><b>Jadilah Yang Pertama Komen</b><b:else/><b><data:post.numComments/> komentar</b> sampai saat ini. Silahkan tambahkan tanggapan Anda...</b:if></b:if></div></div>

- Jangan ganti kode yang berwarna biru
- Angka 50 silahkan ganti untuk menentukan lebar dan tinggi foto profil Anda
- http://profile.ak.fbcdn.net/hprofile-ak-snc4/273608_1200922518_7802975_q.jpg adalah alamat foto profil saya, silahkan ganti dengan alamat foto profil Anda sendiri.
- Kalimat yang berwarna hijau tipis adalah kalimat awalan status sebagai pelengkap judul otomatis.
- Yang berwarna hijau tebal (Jadi Yang pertama Komen) adalah kata-kata ketika komentar masih kosong. Silahkan rubah sesuai kebutuhan Anda.
- Yang berwarna ungu tebal (komentar - dilanjutkan kode -  Terima Kasih Menjadi Pengkomentar Pertama adalah kata-kata setelah ada satu komentar masuk.
- Yang berwarna hitam tebal adalah kata-kata ketika komentar yang masuk berjumlah 2 ke atas.

Untuk menghapus penghitung komentar asli bawaan, silahkan hapus kode (letaknya di bawah dekat tempat kita memasukkan kode di atas)

<h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

Simpan Template Anda dan insyaAlloh jadi... Semoga bermanfaat, besok kita akan melakukan modifikasi dengan lebih unik lagi...