Smiley And Show Hide Smiley List Threaded Comment Blogger

Smiley And Show Hide Smiley List Threaded Comment Blogger

Bola Hero Gawai

Smiley And Show Hide Smiley List Threaded Comment Blogger

Beberapa waktu yang lalu saya sudah memposting cara membuat show hide smiley atau emoticon untuk threaded comment hack. Namun tentunya tidak semua blog menggunakan sistem komentar dengan threaded comment hack, banyak juga blog yang menggunakan threaded comment default Blogger. 


Nah bagi Anda yang menggunakan threaded comment Blogger dan kesulitan untuk memasang smiley atau emoticon pada komentarnya dan kesulitan memasang show hide untuk smiley list-nya, kini saya share cara memasang emoticon dan membuat show hide emoticon list pada threaded comment Blogger dengan menggunakan tombol onclick event seperti pada gambar animasi gif di bawah ini.

Cara Membuat Smiley And Show Hide Smiley List Threaded Comment Blogger


Jika Anda tertarik untuk mencobanya silahkan ikuti langkah-langkah di bawah ini.

Langkah Pertama
Untuk memunculkan atau memasang smiley atau emoticon pada threaded comment Blogger, silahkan simpan kode di bawah ini di atas kode </body>


<script type='text/javascript'>
//<![CDATA[
a=document.getElementById('comments');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(/:\)\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\)\]/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>");
_str=_str.replace(/;\)\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' alt='' class='smiley'/>");
_str=_str.replace(/;\;\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='smiley'/>");
_str=_str.replace(/:d/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str=_str.replace(/\;\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
_str=_str.replace(/:p/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\(\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\)/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
_str=_str.replace(/:x/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>");
_str=_str.replace(/=\(\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\-\o/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\//gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\*/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='smiley'/>");
_str=_str.replace(/:\|/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='smiley'/>");
_str=_str.replace(/8-\}/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='smiley'/>");
_str=_str.replace(/~x\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-t/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>");
_str=_str.replace(/b-\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\L/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' alt='' class='smiley'/>");
_str=_str.replace(/x\(/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='smiley'/>");
_str=_str.replace(/:-\q/gi,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif' alt='' class='smiley'/>");
_str=_str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>")
b.item(i).innerHTML=_str;}}}
//]]>
</script>

Langkah Kedua
Kemudian silahkan cari kode di bawah ini


<b:includable id='threaded-comment-form' var='post'>

Geser ke bawah sedikit dan temukan kode 


<p><data:blogCommentMessage/></p>

Kode di atas ada 2 buah, nah silahkan simpan kode di bawah ini di bawah kode yang kedua.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="Button">
<input type="button" onclick="document.getElementById('emoticons').style.display='block';Button.style.display='none';Button2.style.display='block';" value="Show Emoticon" />
</div>
<div id="Button2" style="display: none;">
<input type="button" onclick="document.getElementById('emoticons').style.display='none';Button.style.display='block';Button2.style.display='none';" value="Hide Emoticon" />
</div>
<div id='emoticons' style='display: none;margin:10px 0'>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/><span class='codesmiley'>:))</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/><span class='codesmiley'>:)]</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/><span class='codesmiley'>;))</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/><span class='codesmiley'>;;)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/><span class='codesmiley'>:d</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/><span class='codesmiley'>;)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/><span class='codesmiley'>:p</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/><span class='codesmiley'>:((</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/><span class='codesmiley'>:)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/><span class='codesmiley'>:(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/><span class='codesmiley'>:x</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/><span class='codesmiley'>=((</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/><span class='codesmiley'>:-o</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/><span class='codesmiley'>:-/</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/><span class='codesmiley'>:-*</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/><span class='codesmiley'>:|</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/><span class='codesmiley'>8-}</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/><span class='codesmiley'>~x(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/><span class='codesmiley'>:-t</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/><span class='codesmiley'>b-(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/><span class='codesmiley'>:-L</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/><span class='codesmiley'>x(</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/><span class='codesmiley'>w-)</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/><span class='codesmiley'>:-q</span></span>
<span class='iconsmiley'><img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/><span class='codesmiley'>=))</span></span>
</div></b:if>

Langkah Ketiga
Dan silahkan simpan kode CSS ini di atas kode ]]></b:skin> atau </style>


#emoticons .iconsmiley{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
#emoticons .codesmiley{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}

Kemudian silahkan save template Anda dan silahkan coba masuk ke salah satu postingan untuk mencoba smiley pada komentarnya.

Dengan langkah-langkah di atas maka emoticon sudah berhasil di pasang di threaded comment Blogger, begitu pun dengan show hide emoticon list atau smiley list. 

Namun jika Anda memiliki masalah ketika me-reply komentar namun tombol show and hide smiley list-nya tidak ikut naik ke atas, maka Anda perlu melakukan beberapa langkah lagi agar tombol show hide smiley-nya tetap berada di atas form komentar ketika Anda me-reply komentar.

Silahkan cari kode di bawah ini 


<b:includable id='threaded-comment-form' var='post'>

Kemudian geser ke bawah sedikit dan temukan kode di bawah ini


<b:if cond='data:mobile'>

Silahkan simpan kode di bawah ini di atas kode tadi


<div id='form-wrapper'>

Dan kemudian silahkan geser lagi ke bawah dan temukan penutup </b:if> yang ada di atas kode <data:post.friendConnectJs/> kemudian simpan penutup </div> di bawah kode </b:if> tadi.

Kemudian cari dengan CTRL + F kode di bawah ini pada id='threaded_comment_js'


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


Setelah ketemu silahkan ganti dengan kode di bawah ini.


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

Setelah itu silahkan save templatenya dan selesai.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

20 Comments Add Comment

Pertamax Kang .. :D Ijin Nyimak dulu , nanti baru saya pelajari =D

Balas

Lumayan banyak scriptnya ya Kang :)

Saya juga pengen menerapkannya soalnya punya saya agak sedikit masalah :)

Balas

Silahkan mas Aldhi :)

Balas

Iya kang karena emoticonnya lumayan banyak :D

Balas

Haduh emoticonnya banyak dan pasti jadi banyak pilihan untuk berkomentar menggunakan emoticon :-bd

Balas

Hehehee iya mas emotnya banyak :)

Balas

maaf kang klo OOT dan di luar topik artikel akang, gini kang adhy saya mau tanya, dulu pertama kali buat blog jumlah postingan di homepage defaultnya ada 7 terus saya ganti jadi 5, nah sekarang saya pengen rubah lagi jadi 7, tapi ttp tidak bisa, walaupun sudah saya setting di setelah menu blogger angka 7 jumlah postingan ttp 5, apa mungkin gra2 efek sering edit pos? ada yang bilang cara mengatasinya dengan menghapus semua postingan dan mempublish ulang, masalahnya artikel saya jumlahnya banyak bgt dan udah masuk serp semua, sayang klo di hapus, takutnya malah turun serp klo di publish ulang, mohon solusinya kang

Balas

kang adhy apa smiley and show hide smiley thread comment blogger ini bisa diterapkan di template droidplusnya kang ismed kang...???
saya selalu gagal ingin membuat show hide smiley emoticon di template droidplusnya kang ismed mohon pencerahan kang...
terima kasih sebelumnya :)

Balas

maaf ya kang adhy kalau merepotkan terus..... :)

Balas

Kang banyak yang berubah pada template kalau dilihat dari 1024 x 768
http://prntscr.com/3oncty mangga kang hehe

Balas

masuk ke setelan (setting) >> pos dan komentar >> lihat diatas itu ada tulisan (Tampilkan sebanyak mungkin) stel dansimpan, hal ini juga pernah terjadi pada saya dan kang ismet, setelah stel dan tunggu beberapa hari nanti juga normal kembali :)

Balas

jadi enteng ya mas bagi pengguna threaded comment default, :-bd

Balas

Untuk tmplate droidplus menggunakan threaded comment hack mas, jadi coba pakai yang untuk threaded comment hack.

Balas

Enggak apa-apa mas Ade :)

Balas

Hatur nuhun koreksina kang hehehe :) kamari teh teu acan sempet ngoprek responsivena :D

Balas

Iya sis tombolnya hanya menggunakan onclick :)

Balas

ijin copy mas, buat blog saya yang satunya.

Balas

mantapp mas.. langsung dicoba dehh

Balas

Terimakasih Mas :) Sudah saya terapkan di blog saya ... :)

Balas

makasih masss!!! |o|

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×