Best Blogger Hacks: Blogger Hack: Create a message in Blogger Comment Box

24 Jul 2012

Blogger Hack: Create a message in Blogger Comment BoxClick here to get more tutorials!

Selain memanfaatkan fitur yang telah disediakan oleh blogger, untuk membuat pesan di kotak komentar blogger dapat juga dilakukan dengan cara yang lain. Sebuah cara yang lazim dikenal sebagai hack. Pembuatan pesan dilakukan dengan menambah kode html yang terletak dibagian body diantara tag pembuka (<body>) dan tag penutupnya (</body>). Jika hanya menggunakan fitur yang telah disediakan blogger, tampilan pesan hanya akan terlihat sesuai kode default blogger, sedang jika melakukan perubahan dan penambahan kode html (hack) maka tampilan pesan dapat dibuat sesuai selera. Anda dapat merubah ukuran font, warna teks, memilih jenis font, membuat link yang "open in new tab" dengan kode "target="_blank" atau bahkan jika dikehendaki anda dapat menampilkan background atau pesan dalam bentuk image.

Cara membuat pesan di blogger comment box

Login ke BloggerAnda bisa klik disini untuk login ke blogger!
Dasbor (Dasboard)
Template
Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
Edit HTML
Template › Edit HTML
- Procced (Lanjutkan)
- Cari Kode : ]]></b:skin>
  Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
- Copy dan paste-kan kode css (Kode CSS Pesan di Comment Box) tepat di atas kode ]]></b:skin>.
- Simpan Template/Save Template
- Expand Template Widget
- Cari Kode : <p><data:blogCommentMessage/></p>
  Kode seperti ini ada 4 (empat). Ganti semua kode dengan dengan kode yang baru yang tersedia di bawah (xHTML Pesan di Comment Box)
- Simpan Template/Save Template
Selesai...
Buka blog dan lihat hasilnya di halaman posting pada box komentar.

Kode CSS Pesan di Comment Box

p.cbm{
    font-size:16px;
    font-family:Serif;
    display:block;
    text-align:center; 
}
p.cbm a{
    color:#3FF;
    text-shadow:1px 1px 1px #000;
}
p.cbm:hover a{
    color:#F00;
}

xHTML Pesan di Comment Box

<p class='cbm'><a href='http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com' target='_blank' title='Sekali lagi kami ucapkan terimakasih atas kunjungan dan komentarnya. Semoga posting yang kami sajikan bermanfaat bagi anda!'><data:blogCommentMessage/>Terima kasih atas kunjungan dan komentar anda!</a></p>

Catatan/Keterangan:

Sebaiknya anda juga membuka panduan cara membuat pesan di comment box yang menggunakan fitur blogger. Silahkan buka tutorialnya melalui link di bawah ini:
Cara membuat pesan di kotak komentar melalui fitur bloggerKlik untuk membuka tutorial cara membuat atau menampilkan pesan/kalimat pribadi di blogger comment box dengan memanfaatkan fitur blogger.
Anda dapat menggabungkan tutorial yang ada dalam posting ini dengan tutorial yang terdapat dalam link di atas (membuat pesan melalui fitur blogger). Teks/pesan Terima kasih atas kunjungan dan komentar anda! dapat dibuat dengan memanfaatkan fitur blogger, sehingga teks tersebut tidak perlu dituliskan lagi di kode html. Anda cukup memanfaatkan data teks pesan yang sudah dibuat dan terdapat dalam <data:blogCommentMessage/>, sehingga kode hasil penggabungan dua cara (fitur & hack) menjadi seperti kode xHTML fitur plus hack (lihat di bawah).
Jika ingin membuat pesan dalam bentuk image, anda dapat menggunakan kode xHTML pesan dalam bentuk image (lihat di bawh).

xHTML fitur plus hack

<p class='cbm'><a href='http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com' target='_blank' title='Sekali lagi kami ucapkan terimakasih atas kunjungan dan komentarnya. Semoga posting yang kami sajikan bermanfaat bagi anda!'><data:blogCommentMessage/></a></p>

xHTML pesan dalam bentuk image

<p class='cbm'><a href='http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com' target='_blank' title='Sekali lagi kami ucapkan terimakasih atas kunjungan dan komentarnya. Semoga posting yang kami sajikan bermanfaat bagi anda!'><img src="http://...image-pesan.jpg" /></a></p>

- Atur penggunaan ukuran image dengan sebaik-baiknya.
- Anda bisa menggunakan image statis atau animasi gif.
- Jika menggunakan pesan dalam bentuk image anda bisa merubah kode css-nya menjadi seperti berikut (kode css ini merupakan kode dasar. Lakukan beberapa perubahan sesuai kebutuhan).

Kode CSS (kode dasar) untuk pesan dalam bentuk image

p.cbm{
    display:block;
    width:100%;
    margin:10px 0; 
    background:red;
}
p.cbm a img{
    width:..px; /* ..px sesuai dengan lebar image yg akan digunakan */
    height:..px; /* ..px sesuai dengan tinggi image yg akan digunakan */
    display:block;
    margin:0 auto;
    padding:0;
    border:none;
}

Pages