8/10/13

Modifikasi Komentar Blogger 6 in 1

Modifikasi Komentar Blogger 6 in 1 Mungkin untuk pertama kalinya saya share tutorial di blog ini. Kali ini adalah hasil kecil dari saya browsing-browsingan dari blog lain untuk modifikasi wajah baru blog saya untuk bagian 'komentar'. Trik ini sebenarnya banyak juga yang sudah membuat postingan semacam ini. Tapi saya gabung saja beberapa sehingga menjadi Modifikasi Komentar Blogger 6 in 1. Diantaranya:

Membuat dan Modifikasi Pesan Formulir Komentar
Memasukkan Tombol ke dalam Pesan Formulir Komentar
Memasukkan Emoticon ke dalam Komentar
Mempercepat Loading Form Komentar
Mempercepat Loading Komentar dengan Memperkecil Avatar
Menghilangkan Link Aktif/Live Link pada Komentar

Jika Anda berniat untuk mencobanya silahkan ikuti langkah-langkah berikut ini dan tidak lupa mem-backup template terlebih dahulu untuk meminimalisir terjadinya kesalahan.

Langkah 1: Simpan kode CSS ini di atas ]]></b:skin>

/*Pesan Form Koment*/
#threaded-comment-form p {position:relative;background:#16a085;padding:10px;font-size:13px;line-height:1.6em;color:#34495e;margin-top:30px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;font:13px/20px Arial,sans-serif;}
#threaded-comment-form p::before {top:100%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-top-color:#16a085;border-width:13px;left:55px;margin-left:-34px}
/*Emoticon*/
img.emo {display:inline-block;vertical-align:middle}
span.emo {background-color:#1abc9c;padding:1px 3px;font:bold 12px/20px Arial,sans-serif;}
/*Tombol*/
.buttonkomen {background-color:#16a085;color:#fff;margin-right:10px;padding:1px 10px;font-size:13px;font-family:Arial,Tahoma,sans-serif;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:2px solid #fff}
.buttonkomen a {color:#fff!important;}
.buttonkomen a:hover {text-decoration:none;}
.buttonkomen:hover {background-color:#1abc9c;}

Langkah 2: Simpan kode JAVASCRIPT ini di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Blogger Comments Emoticon
a = document.getElementById('comment-holder');
if (a) {
    zx = a.getElementsByTagName("p");
    for (i = 0; i < zx.length; i++) {
        if (zx.item(i).getAttribute('CLASS') == 'comment-content') {
            a_emo = zx.item(i).innerHTML.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLOqZ_hcpWK-B1TV0w2CmujrcMW-NUbg5oG-Aj3kmojQkUGlMAlIWAkNkJzVdjchXAluIYrZy4SDsCdwYZ4FBtzBcYw5fTCJ5RPkfaSgz_XiV7vzI4hnUkYwE4CBcQ09eak-I-VrmkXY/s1600/smile1.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZPZCmekAtrq2bQ4kXU9SwlhxJCtWqXeJpg3TooutQ6VuFLj2-cLCXv5XUo7IBdvksqJni34m20r33SM9OeCthde0Mp36A3Ui4mRHwkScwRO_3O9pRgY8M0DIbQJpUy8ve_89Vsce42E/s1600/sad.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga365hPKW10pDKKqMETjcjn5xlcwSwCIFG2bjbbtHh1Nf_a8DThhveScBKtGfJfTU96CfQRaFDieeUOMNavSVSyvQ9ayNnaPmK3MYJUGaG9bFQwUuQhL86Dxe6CiN3nUssn_BXdtW7Z2s/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4__0zEOh_WrrC8t-R_v_jn8EwZ0WDOe2bKU-fa89cdHMSqjqjMGNa43Y2NWZSQjseIy5U0CRhduFfafOPaw39Kk8essRHK3Io_Ih3LJhVrn229CIO8-h5BFpimUikt8CSA-GypUqu4l9/s1600/icon_smile.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQgTGywbmBHnBHYRUF__L_n56dFyQT-iblOPqvgz9AMFMjlZEb6mFx5rDF1PWXS-cEHzvZWjaSrUIQ5GiyxRNM3i7EFuuh22U2CEcLK2mgQ-Rl_M0THKpEqRoqleyCtNcZYGN0yQ9ezc/s1600/smile.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj53-tYNk_p1yLm5WAx5V0WzpEHCevVH5YmC4lGRoJ3o8ImqPe-4Fh_R99MIOWPmpZnK5iD_omI9-il26y6fzvrmNCkbZyq1oxnbxHmnXVlqzxD2fYlzD2DEEx2ICcZSpXGKvdqLYPuGss/s1600/hihi.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijj_9GPQQT0b1haMfMB3LGjTTREImX7lCAuLXU8WtbLmKr3Ai4Y57kWI60ZJA013G1ANIgHN27yXr8ELI_o6Evzrpzw9px54BdzRocTBW439pZ0p4nt1XSNBo-s7FZMvIxoliKj0nJN1A/s1600/wink.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Q0mKSZg5rSUtdxRtptEajxqrLhgOW-OEQgplPLaFBDv23c64-orvGJ5VSUItmXEkqbNgwhXBM0j66m8B91HmTqVKbC7q2eJgsg0iYAoZzbK4H0kVZtZ78MR96uVLd4w1q8mZNd7CRbw/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCD_lSBJta76dxCRpuV9yE1C7unIydeNDJaRStDQKPLHupytPMP7I3E2tUxqGt7uSQxut6F79amdG4bFwR8aTHF4OyVjGCnVyoGsytwKiEIGSuaEc2yn4N2lO8Qnd75s8oqOkjJubqeGQ/s1600/wee.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCD_lSBJta76dxCRpuV9yE1C7unIydeNDJaRStDQKPLHupytPMP7I3E2tUxqGt7uSQxut6F79amdG4bFwR8aTHF4OyVjGCnVyoGsytwKiEIGSuaEc2yn4N2lO8Qnd75s8oqOkjJubqeGQ/s1600/wee.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jDvVaTKx8bUOhZPezdVKMCKgLsriFNFiYoA7Psp7darKzRMKkAOeJcnEsb7MIG8vXDB2hkVlMgMDfA-UtgBp4cmctBoag8R4RHGZPUZGQtvlAJi-w-RwwyuggV5p0Njry2aGqALf-m0/s1600/applause.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBv9EtYnCWDc-IKhNfSoah6GbErTBFc7DGq14r3k-jJOMR8j8VH-wx-GrtQsuNa-Ry5b1RJZ6Bmxu436oQE2pGorBEsr1HXG4FemQkYENGyzOLZ5j6g9fgHtnz_iDoyyVYmedp2A6t-24/s1600/thumb.gif' alt='' class='comment_emo'/>");
            a_emo = a_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMwd_GND-0DnQfDg57Mq8zEJV27Wdb-aZfYNE0hhbd-gHSZ8fejBpzfpESXgUCXNVwMgkMTi4gGbc1BoKnbHSMrtC3u6AldLGoTMpHa_NJsxxsmtnA9rADyk5Ky5YsZ3KG83OFuu15prA/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = a_emo;
        }
    }
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
//Perkecil Avatar Koment
var avatar=$("#comments");
avatar.find('.avatar-image-container img').each(function() {
        var ava = $(this).attr('longdesc') ? $(this).attr('longdesc') : $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s100-c/")).removeAttr('longdesc width height');
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
//No Live Link
$(function(){$('p.comment-content').find('a').contents().unwrap();});
//]]>
</script>
</b:if>

Ukuran asli avatar komentar yaitu 512x512px. Anda boleh memperkecilnya lagi menjadi s100 yang berarti ukurannya menjadi 100x100px. Anda boleh mengganti angkanya sesuai keinginan Anda.

Untuk No Live Link, kode p.comment-content sebenarnya khusus untuk blog dengan threaded komentar bawaan blogger. Untuk yang umum, bisa menggunakan kode #comments p, akan tetapi tombol 'buttonkomen' yang ada di pesan formulir komentar, link tidak berfungsi nantinya [link mati].

Langkah 3: Cari kode seperti ini

<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>

INGAT kode yang di-mark biasa nya ada 2 atau lebih. Tapi Anda cukup cari kode yang berada di bawah kode <b:else/> seperti di atas.

Dan ganti dengan kode dibawah ini

<b:else/>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
<br/>Emoticon: 
 <span class='emo'> :)</span>
 <span class='emo'> :(</span>
 <span class='emo'> =(</span>
 <span class='emo'> :D</span>
 <span class='emo'> ^_^</span>
 <span class='emo'> =D</span>
 <span class='emo'> ;)</span>
 <span class='emo'> @@,</span>
 <span class='emo'> :p</span>
 <span class='emo'> \o/</span>
 <span class='emo'> :-bd</span>
 <span class='emo'> :-d</span>
<br/><br/><a href='#' class='buttonkomen'>Tombol Disini</a></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='430' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>
</div>

Untuk tombolnya sesuaikan dengan kebutuhan. Dan pilihan kode Emoticon nya

 :)  :(  =(  :D  ^_^  =D  ;)  @@,  :p  \o/  :-bd  :-d

Langkah 4: Cari kode seperti ini

document.getElementById(domId).insertBefore(replybox, null);

Dan ganti dengan kode dibawah ini

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 5: Simpan template.

Langkah 6: Silahkan Anda isi pesan formulir komentar nya, dengan cara: masuk ke Setelan / Setting, Klik Pos dan komentar, Scroll ke bawah, lihat Pesan Formulir Komentar, Isi kolomnya dengan pesan Anda lalu Simpan Setelan / Save Setting.

Semoga bermanfaat dan Semoga tidak memberatkan blognya. Dan beberapa kebanyakan saya menggunakan tutorial ini di blogku.