Show And Hide Konversi Tool Dan Emoticon Threaded Comment Hack

Show And Hide Konversi Tool Dan Emoticon Threaded Comment Hack

Bola Hero Gawai

Show And Hide Konversi Tool Dan Emoticon Threaded Comment Hack

Show And Hide Konversi Tool Dan Emoticon
Kali ini masih berbicara dengan show and hide atau dalam bahasa Indonesia berarti menampilkan dan menyembunyikan yaitu show and hide konversi tool dan emoticon di atas editor komentar pada threaded comment hack.

Beberapa waktu yang lalu saya telah men-share show and hide emoticon dan show and hide konversi tool di atas editor komentar.


Namun jika Anda gabungkan kedua trik di atas, maka ada yang tidak berfungsi biasanya show and hide emoticon tidak bisa dibuka karena script yang digunakan bentrok. Untuk mengatasinya kita hanya merubah script show and hide emoticon dengan show and hide konversi tool namun kita meggunakan class baru untuk emoticon-nya agar bisa berfungsi.

Nah bagi Anda yang ingin menggunakan keduanya silahkan copy dan pelajari kode-kodenya di bawah ini.

Langkah Pertama
Jika Anda sebelumnya sudah menyembunyikan emoticon-nya, silahkan hapus kode CSS yang menyembunyikan emoticon-nya seperti di bawah ini.

.comment_emo_list {display:none}

Jika sudah tidak ada kode tersebut di edit HTML blog Anda silahkan lanjut ke langkah kedua di bawah ini.

Langkah Kedua
Silahkan hapus kode pemanggil emoticon-nya yang ada di Comment_Form seperti ini <div class='comment_emo_list'/>

Silahkan cari kelompok kode seperti di bawah ini kemudian hapus kode di atas.

<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>

Bagi yang sudah menggunakan trik untuk show and hide emoticon sebelumnya pasti sudah melakukan kedua langkah di atas, silahkan lewati kedua langkah di atas tersebut.

Langkah Ketiga
Silahkan copy kode CSS di bawah ini


a.konversi-button,a.emo-button{border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin-bottom:10px;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}
#konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:1px solid #333;width:98%;height:200px;display:block;background-color:#ccc;border-radius:3px;font:normal 12px &#39;Courier New&#39;,Monospace;margin:7px 0 10px;padding:5px}
#codes:focus{background-color:#fff;color:#000;border:1px solid #333}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{font-size:12px;font-family:Arial;font-weight:normal;border-radius:3px;border:1px solid #49a5bf;padding:3px 10px;text-decoration:none;background:linear-gradient(to bottom, #93cede 0%, #75bdd1 41%, #49a5bf 100%);color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #528ecc;box-shadow:inset 1px 1px 0px 0px #bbdaf7;cursor:pointer}
button:hover{color:#000}
button:active{color:#000}
button[disabled],button[disabled]:active{color:#000;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}

Untuk yang sudah menggunakan trik untuk membuat konversi kode di atas editor komentar pada postingan sebelumnya hanya tinggal menambahkan class untuk emoticon-nya saja pada CSS konversi tool sebelumnya. Silahkan tambahkan class dan id yang menggunakan kode emo sesuai dengan kode di atas seperti a.emo-button, #emo-box, dan #hide-emo

Langkah Keempat
Simpan kode HTML di bawah ini persis di bawah kode

<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
         </p>

Biasanya kode di atas ada 2 buah, simpan kode HTML-nya di bawah kedua kode tersebut di atas.


<div id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></div><div id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;block&apos;'>Hide Konversi Kode</a></div>
<div id='konversi-box'>
    <textarea id='codes' placeholder='Tulis/paste kode di sini lalu klik &apos;Konversi&apos;' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Konversi</button>
<button onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
</div>

<div id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></div><div id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;block&apos;'>Hide Emoticon</a></div>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>

Bagi yang sudah menggunakan show and hide konversi tool seperti pada postingan sebelumnya, silahkan tambahkan hanya kode HTML untuk emoticon-nya saja dan taruh di bawah kode html konversi kode. Kode HTML untuk emoticon yaitu 

<div id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></div><div id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;block&apos;'>Hide Emoticon</a></div>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>

Bagi yang sudah menggunakan show and hide emoticon seperti pada postingan sebelumnya silahkan hapus kode HTML untuk emoticon sebelumnya.

Untuk javascript konversi kodenya silahkan copy dari postingan Membuat Tool Konversi Kode Di Atas Editor Komentar Threaded Comment Hack pada link di atas.

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

54 Comments Add Comment

Pertamax na di mamanken hela kang :)

Balas

Menarik nih Kang Adhy dua element di jadikan satu lebih simple
Dan dinamis tentunya perlu di coba dan langsung praktek terima kasih Kang :)

Balas

waaah gagal max deh :( hemm

oh iyaa supaya kotak komentar seperti ini gimana kang ardy?

Balas

Wah Pertamax na sudah di ambil Kang Heri gak apa-apa
Yang penting saya tetep hadir di artikel nya Kang Adhy ini :D

Balas

hehe tinggal ganti saja ya, mau coba pasang konversi nih mas :)

Balas

Hehehehe iya kang Saud, Kang Heri postingan baru 2 detik sudah disambar heheehe =D

Balas

Cuma beda beberapa detik saja Kang Saud :)

Balas

Silahkan kang Saud semoga bisa dimengerti :D

Balas

Ini pakai threaded comment hack sis, silahkan cari di kang Ismet :)

Balas

Hee... baru dua detik di posting ya Kang :)
Kalo ngak ngetik mungkin bisa satu detik jaraknya Kang :)

Balas

Ssilahkan sis Leony... :D

Balas

Emang didunia misteri ada konversi kode juga ya sis hehe ...

Balas

kang saya punya masalah sama kode yang ini :(

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

bisa bantu gak kang disini : kodesaja.blogspot.com

Balas

sayangnya ditempat saya tanpa emotion mas.

Balas

Coba cari kode ini
<b:includable id='comment-form' var='post'>
kemudian geser ke bawah dikit temukan kode
<data:blogTeamBlogMessage/>
Biasanya ada 2 nah silahkan simpan di atas kode yang kedua tersebut.

kemudian temukan kode
<b:includable id='threaded-comment-form' var='post'>
geser ke bawah sedikit dan temukan kode ke-2 seperti di atas dan simpan di atasnya.

Balas

Kang Ruly belum tau ya, Mbak Leony kan punya blog tutorial blogger juga :)

Balas

Ada kang buat mengkonversi pocong jadi kunti wkwkww...

Balas

saya kan ada blog tutorial mas ruly heheh :p

Balas

sebetulnya gampang kang supaya ga bentrok.. ga usah terlalu panjang spt di atas.. caranya seperti biasa laporin RT aja, pasti ga bentrok lagi wkwkwkkw

Balas

Wkwkwwkw itu mah bentrok pasutri kang =D

Balas

kayanya kang saud n kang heri lagi lomba pertamax nih, sponsornya Pom bensin terdekat wkwkwk

Balas

makasih kang udah bisa :D

tapi kenapa tombol inputnya gak ada tulisannya ya ?

Balas

Javascript untuk konversi kode-nya udah di pasang belum?

Balas

Makasih mas :D

Balas

maksudnya tombol input yang ada pojok kiri bawah konversinya kang, yang ada tanda centang itu loh, itu emang gak ada tulisannya ya ?

Balas

Oh iya itu saya buang karena tidak valid html5

Balas

oo gitu ya @@,

terima kasih kang :D , maaf merepotkan :-d

Balas

keren banget nih mas Adhy, tapi sayangnya blog saya gak pakai treaded comment hack jadi gak bisa praktek, hmmm sayang sekali :)
mau pakai treaded comment hack gak pantes karena blognya kecil banget, hihihi :P

Balas

Kapan2 dicoba nih, emang kang Adhy master blogger :D

Balas

Wah keren Kang Adhy, izin comot :D

Balas

perbaikan ya..... dari dl pengen masang show and hide emot gabisa mas :D
mungkin harus pasang komen h4ck thread dulu baru bisa dipasang emot show and hide ya mas?

Balas

wahh yg ini gabungan ... makin ganteng aja nih

Balas

tak cobain dulu ya mas broo
mksh banyak ya

Balas

berhasil tampil mas tapi kode buat pasang emot nya tidak ada muncul ..

Balas

Sudah berhasil saya terapkan kang, oh ya cara merubah warna tombolnya gimana ya kang..??

Balas

modif pada kode css ini
a.konversi-button,a.emo-button{border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin-bottom:10px;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}

Balas

Silahkan dicoba mas Emil :D

Balas

Silahkan mas ;)

Balas

Iya dicoba aja sis :D

Balas

Iya digabung sekalian :D

Balas

Sama-sama bang :D

Balas

Itu pakai kode emot yang lama, coba pakai iini semuanya ;)

Balas

Terima kasih kang, maaf nih kang banyak nanya. Ko tombolnya ada 4 ya. Show sama hide emoticon terus show sama hide konversi kode. Itu gimana kang kalau cuma ingin tampil 2 tapi show hide.

Balas
This comment has been removed by the author.

Coba periksa kode ininya terpasang enggak
#konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}

Balas

Berhasil kang. Terima kasih banyak ya kang

Balas

kang di blog saya memang sudah sukses terpasang
tapi ketika saya mengecek posting yang ''gak'' ada komentar nya emoticon nya malah ilang
gimana yah solusi nya
*kendala
di blog saya cuma ada 3 kode seperti ini
<p><data:blogCommentMessage/></p>

Balas

Hadir lagi akh di artikelna Kang Adhy
Untuk mempelajari show and hide konversi :ng

Balas

Gak Mas Intan cuma saya keduluan Kang Heri aja
Karena agak kerenan Kang Heri sih hhh =D

Balas

ini juga sekalian ane ambil sepaket hehe
ijin ya mas adhi.. hihi

Balas

Mau dicoba dulu kang :-bd

Balas

Berhasil kang, sudah dipraktekkan.

Oh iya kenapa ya kang kalo menulis tag pre di komentar emoticon selalu ikut di dalam kodenya?

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!

×
×
×