CARA PASANG EMOJI KOMENTAR BLOGSPOT TEMPLATE CONTEMPO

Biar seru dan blog menjadi lebih interaktif  terkadang kita memang harus berusaha menarik perhatian dengan cara apapun, salah satunya misalnya anda bisa memasang opsi emoji pada tema blog anda jika sebelumnya saya sudah memberikan tips memasang emoji ini pada tema blogger klasik biasa kali ini saya mencoba trik memasangnya ke tema atau template Contempo, untuk sementara saya cobakan saja memasang di tema Contempo Hybrid ciptaan saya sendiri.

Langkah pertama: 

Pada tema contempo:

1. Masuk ke dasbor pengaturan blogger
2. Pilih tema
3. Pilih opsi editHTML

Jika sudah masuk ke halaman pengeditan HTML blogger cari kode berikut:

<h4 id='comment-post-message'><data:messages.postAComment/></h4>

(Pada tema klasik tertulis sbb: = <h4 id='comment-post-message'><data:postCommentMsg/></h4>)

Perhatikan perbedaannya tidak akan berdampak apa apa pada efek kode yang akan kita pasang.

Langkah kedua: 

copy kode dibawah ini dan pastekan diatas kode yang telah kita temukan diatas:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
 <div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '> 
 <img border='0' src='http://1.bp.blogspot.com/-zY65UBxSl6w/T67AajI_U6I/AAAAAAAACIc/fCV19C1627Q/s1600/helplogger.blogspot.com(1).gif'/> :a 
 &#160;  
 <img border='0' src='http://4.bp.blogspot.com/-M8aBZtLjGqY/T67Ai2d8eAI/AAAAAAAACIk/PrDerObloAw/s1600/helplogger.blogspot.com+(2).gif'/> :b 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-HfIjCWOuxwo/T67Ar7HZiHI/AAAAAAAACIs/RgwvdPP4JSc/s1600/helplogger.blogspot.com(3).gif'/> :c 
 &#160;  
 <img border='0' src='http://4.bp.blogspot.com/-98YuuiC8MIc/T67AzJ3Xf0I/AAAAAAAACI0/UtaFpgTb_PM/s1600/helplogger.blogspot.com(4).gif'/> :d 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-ikCFMFesIrE/T67BAtTQGhI/AAAAAAAACI8/AisqU7R--Yc/s1600/helplogger.blogspot.com(5).gif'/> :e 
 &#160;  
 <img border='0' src='http://2.bp.blogspot.com/-VSY5nbsSEIs/T67BK3G-B6I/AAAAAAAACJE/n_fhk-2Ihqc/s1600/helplogger.blogspot.com(6).gif'/> :f 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-e9hytPNLXeY/T67BSj27JJI/AAAAAAAACJM/Rwonrid9oiQ/s1600/helplogger.blogspot.com(7).gif'/> :g 
 &#160;  
 <img border='0' src='http://4.bp.blogspot.com/-mT-nqGFvXec/T67BZDPxvxI/AAAAAAAACJU/fgTPtQNxMK8/s1600/helplogger.blogspot.com(8).gif'/> :h 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-xcMDAiCizIE/T67BfnBeWSI/AAAAAAAACJc/_OqmXLGhjLg/s1600/helplogger.blogspot.com(9).gif'/> :i 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-XJUn74vJTwo/T67BrafHO3I/AAAAAAAACJk/B40nJjxUxNE/s1600/helplogger.blogspot.com(10).gif'/> :j 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-JgARtAx7IHo/T67B2Db6LjI/AAAAAAAACJs/U1EWgczqOYY/s1600/helplogger.blogspot.com(11).gif'/> :k 
 &#160;  
 <img border='0' src='http://2.bp.blogspot.com/--K1Z6RvN57w/T67CCzlaGcI/AAAAAAAACJ0/iF2-osmFALE/s1600/helplogger.blogspot.com(12).gif'/> :l 
 &#160;  
 <img border='0' src='http://4.bp.blogspot.com/-c0DJDg4M2n4/T67CTf-xShI/AAAAAAAACJ8/BqUmJYoDBLI/s1600/helplogger.blogspot.com(13).gif'/> :m 
 &#160;  
 <img border='0' src='http://1.bp.blogspot.com/-zrvYy6caFXM/T67CZi7etnI/AAAAAAAACKE/iPJsX_duWjE/s1600/helplogger.blogspot.com(15).gif'/> :n 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-F2LUTd1hG_o/T67CfNLnIlI/AAAAAAAACKM/UHuPyigCX24/s1600/helplogger.blogspot.com(16).gif'/> :o 
 &#160;  
 <img border='0' src='http://3.bp.blogspot.com/-Vd6U_2eq_Gk/T67CosaWm8I/AAAAAAAACKU/JgnYMS4AJOc/s1600/helplogger.blogspot.com(14).gif'/> :p 
 &#160;  
 <img border='0' src='http://1.bp.blogspot.com/-faDYi6E_d6E/T67CybEuj1I/AAAAAAAACKc/nHxSH7KMSwY/s1600/helplogger.blogspot.com(17).gif'/> :q 
 &#160;  
 <img border='0' src='http://2.bp.blogspot.com/-2QiwXpJ7gxk/T67C41ItlCI/AAAAAAAACKk/8sba1I9fZOY/s1600/helplogger.blogspot.com(18).gif'/> :r 
 &#160;  
 <img border='0' src='http://2.bp.blogspot.com/-KUlSaDVWqW8/T67C_4ITH-I/AAAAAAAACKs/e6N7K2jJvl8/s1600/helplogger.blogspot.com(19).gif'/> :s 
 &#160;  
 <img border='0' src='http://2.bp.blogspot.com/-UC_5gE8LgaQ/T67DGU12FBI/AAAAAAAACK0/oHA628PaDhk/s1600/helplogger.blogspot.com(20).gif'/> :t   <a href='http://https://www.editblogtema.net/2018/12/cara-menambahkan-emoticon-ke-dalam.html' style='color: rgb(30, 122, 183); font-size: x-small;'/> 
 </div></b:if> 

Langkah ke tiga: 

Cari kode </body> lalu letakan kode dibawah ini diatasnya:

<script type='text/javascript'>
//<![CDATA[ 
a = document.getElementById('comment-holder');
if (a) {
b = a.getElementsByTagName("p");
for (i = 0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') { 
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='http://3.bp.blogspot.com/-XJUn74vJTwo/T67BrafHO3I/AAAAAAAACJk/B40nJjxUxNE/s1600/helplogger.blogspot.com(10).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:k/gi, "<img src='http://3.bp.blogspot.com/-JgARtAx7IHo/T67B2Db6LjI/AAAAAAAACJs/U1EWgczqOYY/s1600/helplogger.blogspot.com(11).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:l/gi, "<img src='http://2.bp.blogspot.com/--K1Z6RvN57w/T67CCzlaGcI/AAAAAAAACJ0/iF2-osmFALE/s1600/helplogger.blogspot.com(12).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:m/gi, "<img src='http://4.bp.blogspot.com/-c0DJDg4M2n4/T67CTf-xShI/AAAAAAAACJ8/BqUmJYoDBLI/s1600/helplogger.blogspot.com(13).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:n/gi, "<img src='http://1.bp.blogspot.com/-zrvYy6caFXM/T67CZi7etnI/AAAAAAAACKE/iPJsX_duWjE/s1600/helplogger.blogspot.com(15).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:o/gi, "<img src='http://3.bp.blogspot.com/-F2LUTd1hG_o/T67CfNLnIlI/AAAAAAAACKM/UHuPyigCX24/s1600/helplogger.blogspot.com(16).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:p/gi, "<img src='http://3.bp.blogspot.com/-Vd6U_2eq_Gk/T67CosaWm8I/AAAAAAAACKU/JgnYMS4AJOc/s1600/helplogger.blogspot.com(14).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:q/gi, "<img src='http://1.bp.blogspot.com/-faDYi6E_d6E/T67CybEuj1I/AAAAAAAACKc/nHxSH7KMSwY/s1600/helplogger.blogspot.com(17).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:r/gi, "<img src='http://2.bp.blogspot.com/-2QiwXpJ7gxk/T67C41ItlCI/AAAAAAAACKk/8sba1I9fZOY/s1600/helplogger.blogspot.com(18).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:s/gi, "<img src='http://2.bp.blogspot.com/-KUlSaDVWqW8/T67C_4ITH-I/AAAAAAAACKs/e6N7K2jJvl8/s1600/helplogger.blogspot.com(19).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:t/gi, "<img src='http://2.bp.blogspot.com/-UC_5gE8LgaQ/T67DGU12FBI/AAAAAAAACK0/oHA628PaDhk/s1600/helplogger.blogspot.com(20).gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='http://1.bp.blogspot.com/-zY65UBxSl6w/T67AajI_U6I/AAAAAAAACIc/fCV19C1627Q/s1600/helplogger.blogspot.com(1).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:b/gi, "<img src='http://4.bp.blogspot.com/-M8aBZtLjGqY/T67Ai2d8eAI/AAAAAAAACIk/PrDerObloAw/s1600/helplogger.blogspot.com+(2).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:c/gi, "<img src='http://3.bp.blogspot.com/-HfIjCWOuxwo/T67Ar7HZiHI/AAAAAAAACIs/RgwvdPP4JSc/s1600/helplogger.blogspot.com(3).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:d/gi, "<img src='http://4.bp.blogspot.com/-98YuuiC8MIc/T67AzJ3Xf0I/AAAAAAAACI0/UtaFpgTb_PM/s1600/helplogger.blogspot.com(4).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:e/gi, "<img src='http://3.bp.blogspot.com/-ikCFMFesIrE/T67BAtTQGhI/AAAAAAAACI8/AisqU7R--Yc/s1600/helplogger.blogspot.com(5).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:f/gi, "<img src='http://2.bp.blogspot.com/-VSY5nbsSEIs/T67BK3G-B6I/AAAAAAAACJE/n_fhk-2Ihqc/s1600/helplogger.blogspot.com(6).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:g/gi, "<img src='http://3.bp.blogspot.com/-e9hytPNLXeY/T67BSj27JJI/AAAAAAAACJM/Rwonrid9oiQ/s1600/helplogger.blogspot.com(7).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:h/gi, "<img src='http://4.bp.blogspot.com/-mT-nqGFvXec/T67BZDPxvxI/AAAAAAAACJU/fgTPtQNxMK8/s1600/helplogger.blogspot.com(8).gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:i/ig,"<img src='http://3.bp.blogspot.com/-xcMDAiCizIE/T67BfnBeWSI/AAAAAAAACJc/_OqmXLGhjLg/s1600/helplogger.blogspot.com(9).gif' alt='' class='smiley'/>") 
b.item(i).innerHTML = _str; 
} 
} 
}
//]]>
</script> 

Save template. 

Kalian hanya perlu mengetikan kode kode berikut setiap kali ingin menampilkan emoji, contoh : :b, :c :a setiap abjad dengan diawali titik dua dibelakangnya. Hanya saja harus diperhatikan, emoticon ini membuat Contempo Hybrid menjadi kurang responsive pada saat di buka melalui ponsel.

SHARE YA:

CARA MEMASANG TOMBOL REACTIONS SHARETHIS TERBARU UNTUK BLOGGER

Tombol ini adalah tombol reaksi pembaca terhadap postingan dan bisa lebih meningkatkan keterlibatan pengunjung dan pembaca postingan kita.

Langkah pertama: Masuk kepengaturan blog terlebih dahulu.

1. Tataletak
2. Pilih Blog posts atau Postingan
3. Pada bagian bawah Kotak Blog Posts klik "edit"
4. Akan muncul Pilihan yang harus di centang, dari tanggal, pengarang, tombol berbagi dan tombol reactions, centang tombol reaction:
   
5. Save template.

Langkah kedua: 

Masuk ke ShareThis untuk mengambil kode reactionsnya anda akan diminta mendaftar dan log ini ke situs ini:

Jika telah masuk anda akan diminta memverifikasi site atau alamat blog anda maka akan muncul "get code" pencet saja tombol persegi panjang warna merah itu maka akan muncul kode  sharethis yang harus di copy dan meletakannya diatas kode </head>

Kode di bawah ini id-nya untuk salah satu situs saya yang lain kalau anda mau ikuti saja step demi step:

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5bf232a5d741e40011ae95ff&product=inline-reaction-buttons' async='async'></script>

Karena mungkin anda menggunakan kode template yang telah di kustom sebaiknya sebelum di paste ke atas </head> di parse saja kode tersebut ke BLOCROWDS untuk menghindari error pada saat kode Js dierapkan. Ini penting karena terdapat keluhan dari pembaca, saya tidak menjelaskan apa penyebabnya karena cukup panjang uraiannya. Dan ingat pakai kode anda sendiri hasil mendaftar ke sharethis sesuai petunjuk blog ini.

dan setelah itu baru di paste-kan ke atas kode </head> tadi.

Langkah ketiga: 

Cari kode: 

<span class='reaction-buttons'>

        <b:if cond='data:top.showReactions'>  

Letakan kode dari INLINE SHARE BUTTON dibawa ini tepat dibawah kedua kode diatas:

<div class="sharethis-inline-share-buttons"></div>

Save template

Catatan: Anda tidak bisa menambahkan kode reaction ini ke dalam template terbaru blogger seperti Contempo, Emporio dst.

SHARE YA: