Show And Hide Emoticon On Threaded Comment Hack

Show And Hide Emoticon On Threaded Comment Hack

Bola Hero Gawai

Show And Hide Emoticon On Threaded Comment Hack

Emoticon On Threaded Comment Hack
Sharing kali ini adalah membuat show and hide emoticon pada threaded comment hack bagi Anda yang sedang menggunakannya. Bagi Anda yang sedang mencoba untuk validasi HTML5, saya sarankan untuk menggunakan threaded comment hack untuk mengurangi error validasi HTML5 di daerah postingan. Karena kita tahu bahwa threaded comment bawaan blogger menyumbangkan lumayan banyak error pada validasi HTML5. 

Untuk tutorial pemasangan threaded comment hack ini bisa Anda kunjungi blognya Kang Ismet. Nah bagi Anda yang sudah memasangnya tentu sudah tahu bahwa threaded comment hack ini sudah dilengkapi dengan emoticon atau smiley. Namun kebanyakan pengguna akhirnya menyembunyikan icon emoticon-nya, mungkin alasannya sama dengan saya yaitu tampilan icon emoticon ini mengganggu pemandangan hehehehe...

Sebenarnya icon emoticon ini sangat berguna bagi mereka yang berkomentar dan belum paham kode-kode emoticon-nya. Untuk kita kita bisa menambahkan tombol show and hide untuk icon emoticon ini agar tidak mengganggu pemandangan namun bisa dimunculkan untuk melihat kode-kodenya.


Nah bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Bagi Anda yang sudah menyembunyikan icon emoticon, silahkan hapus kode CSS yang menyembunyikan emoticonnya. Biasanya seperti ini:


.comment_emo_list {display:none}

Langkah Kedua

Silahkan hapus juga kode html pemanggilnya yang berada di Comment_form. Silahkan cari kode di bawah ini dan hapus kode <div class='comment_emo_list'/>


  <div class='comment_form'>                    
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>    
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>

Langkah Ketiga

Tambahkan kode di bawah ini pada daerah Comment-form. Cari kode <b:includable id='comment-form' var='post'> kemudian scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan kode di bawah ini DI ATASNYA.


<div style='margin-bottom:10px'>
<input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide Smiley&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Show Smiley&apos;; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
  <div class='comment_emo_list'/>
</div>
</div>
</div>
</div>

Langkah Keempat

Tambahkan kode di bawah ini pada daerah threaded-comment-form. Cari kode <b:includable id='threaded-comment-form' var='post'> kemudian scroll ke bawah sedikit dan temukan kode <data:blogTeamBlogMessage/> yang paling bawah dan simpan kode di bawah ini DI ATASNYA.


<div style='margin-bottom:10px'>
<input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide Smiley&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Show Smiley&apos;; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
<div class='alt1'>
<div style='display: none;'>
<br/>
<div style='text-align: center;'>
  <div class='comment_emo_list'/>
</div>
</div>
</div>
</div>

Langkah Kelima

Silahkan save template Anda dan lihat penampakannya pada postingan blog Anda.

Selamat mencoba...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

83 Comments Add Comment

Selamat Malam Kang Adhy nyimak dulu ehh koment dulu amankan Pertamax baru
Simak dengan seksama tentang emotion ini kebetulan saya perlu pisan Kang :d

Balas

Seperti janji saya setelah simak dengan seksama saya koment lagi
Menarik yah Kang emotionya bisa di sembunyikan namun tetep tampil

Balas

Wah sangat bermanfaat Kang Adhy :D

Balas

Keren kang kreatif :-bd, tapi saya memilih jQuery sesuai mottonya 'write less, do more', tambihan we sugan ka anggo :

$('.button').click(function() {
$('.comment_emo_list').toggle('slow');
});

Balas

Bener2 ajaib sesuai nama nya

Balas

Bisa di tampilin, bisa di sembunyiin ...
:) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :p

Balas

Walah keren pisan atuh ieu mah kang ... :-d

Balas

Saya masih yang ori dari bengkelnya kang ismet, sederhana sajalah, yang penting masih bisa diisi ma komentar udah cukup :D

Balas

Saya sudah pasang, cuman caranya berbeda Kang.
Ternyata ada cara lain ya :)

Balas

kalau desainnya gunakan cara pop up kan keliatannya lebih keren mas :)

Balas

iya bener kalau pakai pop up lebih keyen.. =D

Balas

Mantap betul mas :D jadi tahu kodenya :D :)

:(

=(

^_^

:D

=D

|o|

@@,

;)

:-bd

:-d

:p

Balas

Mas saya mau tanya, kalau mau memberi title tag pada judul blog gimana ? :)

Balas

Hehehehe nyambar pertamax dulu ya kang :D

Balas

Iya kang biar yang mau pakai ga kesulitan :D

Balas

Hehehehe banyak jalan ke Roma nya kang....
Siipp bade dicobain hehhe =D

Balas

Kayak petak umpet ^_^

Balas

Mayan kang hehehehe =D

Balas

Siipp mas biar tidak banyak penambahan kode =D biar langsing :D

Balas

Muhun kang banyak jalan menuju ke Roma :D

Balas

Iya sih biar pakai cara lain hehehe jadi banyak pilihan :D

Balas

Kang Heri saya sudah coba pakai cara seperti akang, tapi hanya jalan 1x, dicoba klik balas komen lainnya ga bisa buka tutup lagi. Harus refresh halaman bau bisa buka tutup lagi.

Balas

Cari kode <b:includable id='title'> nah di bawahnya ada link untuk homepagenya, silahkan tambahkan title tag pda link tersebut.

Balas

ada 3 berarti tiga tiganya ya mas ?

Balas

Trimakasih mas adhy ... :) Sangat keren sekali ...

saya mau taya mas juga tentang comment .. Bagaimana ya mas cara agar postingan dengan komentar tidak menyatu .. Soalnya punya saya komentar dengan postingan menyatu ( tidak ada jarak mas .. ) trimakasih :)

Balas

gunakan margin untuk melebarkan jarak mas

Balas

Itu biasanya main-wrapper atau outer-wrapper nya pakai background, coba hilangkan backgroundnya. Jadi yang pakai backgroundnya post sama comment

Balas

Iya kang seperti itu lah maklum cuman sekedar cobi cobi :)

Ke mah di gentos nyobian nganggo nu Kang Adhi :)

Balas

Jika ketiganya terdapat link, silahkan tambahkan title tag ke semua linknya :D

Balas

saya ambil premium saja deh yang rada murah he he

Balas

wah boleh dicoba nih mas jadi lebih kelihatan simpel ya mas

Balas

alternatif yang cukup baik, soalnya saya cm hafal kode :) dan :D aja hehe...... top deh |o|

Balas

Silahkan mas =D

Balas

Hehehehe ... kebanyakan saya juga pakai smiley itu =D karena itu yang paling hafal :D

Balas

Kalau saya paling suka Emoticon |o| dan =D ...

|o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o| |o|

Balas

Hadeueuhh mas Nazar komennya pake bawa tetangga segala hehehe :D jdi banyak tepuk tangannya hehehe =D

Balas

sekedar masukan kang.. gimana kalau manipulasi tag pre pada komentarnya diaktifkan? soalnya kalau miring gitu jadi ga jelas... :)

Balas

keren mas istilah jowone singitan :) kode ini juga pernah saya gunakan di http://goo.gl/T23wmo :)

Balas

Heheheh :D jadi pegel nya kang leherna =D saya terima masukannya kang tar diaktifin deh =D

Balas

Iya mbak jika kreatif bisa diaplikasikan di mana aja semau kita =D

Balas

blog saya gk pake yang begituan kang hehe :D
tapi saya jadi katarik kataji pengen nyobian hehe

Balas

Mas adhy saya mau tanya, cara buat page seperti page previiew, atau redirect seperti link dibawah ini di blogspot gimanya ya, misal http://www.templateism.com/p/preview.html?url=http://pram-software.com (blogspot) atau yang ada intervalnya seperti http://www.soppeng.com/download/?url=http://www.soppeng.com/gratis/soppeng.com_smadav.exe (wordpress)

Cara buatnya gimanya ya mas di blogspot, kalau bisa di share ya mas, dan jika menggunaknan ini kira-kira berpengaruh dengan seo/ kesehatan blog tidak?

Makasih :D

Balas

met malem kang Adhy keren |o| :-bd :-d kang cm ane nyimk aja udh ada bawaannya lagi males bongkar tempe

Balas

Habis sholat shubuh ada yang lagi sembunyi...bangunin show smileynya ahh.......
lebih seru lagi kalau pake ginian kang
$("#tombol").click(function(){
$(".comment_emo_list").toggle();
});

Balas

Sama mas saya juga abis mengahadap dulu .. sambil nyiapin kopi + bandros wehehe mantapzz ... hoyong te kang adhy hehe :D

Balas

Mangga dicobi atuh kang meh tambih berwarna komenna hehehe =D

Balas

Di blogspot juga bisa, gunakan blog dummy khusus untuk ruang bagi2 artikel. Gunakan rel nofollow pada linknya agar lebih aman. :D

Balas

Hehehehe bikin rontok rambut mas @@

Balas

Iya mas sudah saya coba sebelumnya pakai itu tapi toggle hanya bisa dibuka sekali, untuk balas komentar lainnya ga bisa harus refresh halaman dulu baru aktif lagi togglenya.

@kang Ruly bandrozz na we kang hehehe ^_^ seueuran parudan kalapana =D

Balas

Mantab kang,, bookmark dulu |o|

Balas

benar juga mas sudah saya coba dan memang gak fungsi saat Replay Comment

Balas

met siang kang Adhy...
waduh jadi malu,lama gak berkunjung di mari nih =(

sayah sekarang kurang ngutak-atik template kang,rupanya banyak yg mesti dibenahi lagi ya.
makasih ilmunya kang,nanti tak cobain malem pulang nguli....=D

Balas

Hehehe =D silahkan mas Reo dicoba :D

Balas

Saya dulu pernah pasang thread comment dan emoticon di blog. Tapi gagal semua. Hehehe :D
Iya udah sekarang sudah pusing mau edit-edit template lagi, soalnya nanti malah eror lagi blog nya hehehe :D

Balas

kalau cara buat pege seperti diatas caranya gimana mas :D

Balas

Kunjungan pertama ane
komen dulu baru baaca |o|

Balas

Hehehehe iya mbak sekarang aja udah bagus :D

Balas

Silahkan mas =D

Balas

Emotion dalam komentar memang diperlukan dalam komentar, hal ini sangat berguna untuk menyampaikan (mengekspresikan) perasaan kita saat berkomentar. Terlebih jika emotion ini dimodifikasi dengan sangat menarik, thanks kang Adhi sudah berbagi ilmu yang sangat bermanfaat...

Balas

Emotion dalam komentar memang diperlukan dalam komentar, hal ini sangat berguna untuk menyampaikan (mengekspresikan) perasaan kita saat berkomentar. Terlebih jika emotion ini dimodifikasi dengan sangat menarik, thanks kang Adhi sudah berbagi ilmu yang sangat bermanfaat...

Balas

saya msh menggunakan threaded comment bawaan blogger mas, ntar saya cobanya rubah versi kang ismet :)
tips ini akan saya coba nanti klu sdh siap semuanya, biar perlahan2 bisa keren seperti blog ini, hehehe :)
makasih infonya ^_^

Balas

sdh diterapkan, tp punya saya kok gak muncul emotnya mas :( ? cek : http://goo.gl/jCQjTc
tapi kalo belum ada komennya muncul, cek : http://goo.gl/jIJnjY

gimana caranya agar emotnya bs muncul trs..
punteun nyimpen link :D , mhn bantuannya..trims.

Balas

Sama-sama mas Adjie :D

Balas

Sama-sama mbak Indri, silahkan dicoba aja :D

Balas

Itu comment formnya juga jatuh ke bawah ya, coba perbaiki itu dulu. Tutorialnya banyak di Google, memperbaiki comment form yang jatuh ke bawah. Sepertinya itu pengaruh juga.

Balas

ok mas sy cari dl, thanks :)

Balas

Kok ada kata2 seperti ini ??? Kesalahan saat mengurai XML, baris 1228, kolom 3: The element type "div" must be terminated by the matching end-tag "</div>".

Balas

Berarti ada yang kelewat penutupnya </div>

Balas

Mas kok di blog saya emo nya gak muncul ya mas?

Balas

Mungkin emonya masih disembunyikan, coba lihat langkah pertama :D

Balas

Sudah saya baca dengan bener mas tutor dari mas.Tapi tetep gak bisa :( :'(

Balas

sipp tapi malah waktu dklik gak mau kebuka boxnya mas :(

Balas

mas bantu check deh
http://infotuntas.blogspot.com/2013/12/honda-cb150r-streetfire-canggih-irit.html

kenapa emoticonnya ngga mau muncul yah ???

Balas

Ohhh jika menggunakan show hide konversi tool, maka trik yang ini tidak akan fungsi harus menggunakan trik yang sama dengan konversi tool namun dengan class berbeda. Nanti saya share gabungan emoticon dan konversi tool.

Balas

Masih teu tiasa kang, rada bingung ieu teh :p

Balas

Ehh, tos tiasa :D
Hatur nuhun..

Balas

klo nambah kode di bawah emoticonnya gmna y mas??

Balas

mas...emoticonnya gk muncul di blog saya
http://kompione.blogspot.com/2014/04/dfx-audio-enhancer-v1111300-full-keygen.html
pencerahannya dong
thanks yaaa :-d

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!

×
×
×