Menyimpan Tombol Konversi Kode Dan Emoticon Di Kotak Pesan Komentar

Menyimpan Tombol Konversi Kode Dan Emoticon Di Kotak Pesan Komentar

Bola Hero Gawai

Menyimpan Tombol Konversi Kode Dan Emoticon Di Kotak Pesan Komentar

Tombol Konversi Kode Dan Emoticon Di Kotak Pesan Komentar
Postingan ini dibuat untuk menambah variasi penempatan tombol konversi kode dan tombol emoticon pada threaded comment hack. Pada postingan sebelumnya kita menempatkan tombol konversi kode dan tombol emoticon tepat di atas editor komentar dengan bentuk tombol melebar dan berjejer ke bawah. Nah kali ini kita akan menempatkan tombol konversi kode dan tombol emoticon ini di dalam kotak pesan komentar dengan posisi berjejer ke samping.

Untuk membuat tombol konversi kode dan tombol emoticon ini pada dasarnya sama dengan cara membuat show and hide konversi tool dan emoticon threaded comment hack yang kemarin saya share. Disini kita hanya merubah sedikit pada kode onclick event dan memindahkannya ke dalam kotak pesan komentar. Untuk pemasangannya silahkan lihat lagi postingan show and hide konversi tool dan emoticon threaded comment hack di link di bawah ini.


Nah untuk memindahkan tombol konversi kode dan tombol emoticon dari atas editor komentar ke dalam kotak pesan komentar, kita hanya merubah kode display:block menjadi display:inline-block pada CSS tombolnya dan pada script onclick event-nya. Ini dilakukan agar ketika tombol diaktifkan tidak menjadi berjejer ke bawah tapi tetap berjejer ke samping.

Silahkan lakukan perubahan pada CSS tombolnya seperti 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}

Menjadi seperti ini ( merubah kode display:block menjadi display:inline-block )

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:inline-block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center}

Kemudian merubah kode display:block menjadi display:inline-block pada script onclick event untuk show and hide konversi kode dan show and hide emoticon-nya dan kode div menjadi span agar tidak error pada validasi html5 karena ini akan disimpan di dalam kode <p> seperti di bawah ini.

Kode onclick event untuk konversi kode sebelumnya seperti di bawah ini.

<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>
Dan setelah dirubah menjadi seperti ini ( kode div menjadi span dan kode display=&apos;block&apos; menjadi display=&apos;inline-block&apos; )

<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></span><span 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;inline-block&apos;'>Hide Konversi Kode</a></span>
Lakukan hal yang sama untuk script onclick event untuk emoticonnya.

Kemudian pindahkan (hanya kode script onclick event untuk konversi dan emoticon saja, untuk kode pemanggil konversi dan emoticon tetap pada posisi semula) posisinya dari bawah kotak pesan komentar ke dalam kotak pesan komentar. Kode kotak pesan komentar ini adalah <p><data:blogCommentMessage/></p> maka simpanlah di atas penutupnya ( </p> ) seperti tampak di bawah ini.

Sebelumnya tampak seperti di bawah ini

<p><data:blogCommentMessage/>
  </p>
<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>

Setelah dirubah dan dipindahkan seperti di bawah ini

<p><data:blogCommentMessage/>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></span><span 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;inline-block&apos;'>Hide Konversi Kode</a></span>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></span><span 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;inline-block&apos;'>Hide Emoticon</a></span>
  </p>
<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='emo-box'> 
  <div class='comment_emo_list'/>
</div>

Lakukan perubahan ini pada kelompok kode kedua juga.

Silahkan baca dengan teliti dan pelajari... 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

71 Comments Add Comment

Wah dijadikan satu paket nih kang .... ??

Balas

saya mau ngasih ucapan selamat juga deh karena agan pertamax. waw kodenya banyak banget harus belajar saya hehehe belum paham yang ginian

Balas

@ kang Ruly: Iya kang dijadiin satu di pesan komentar :D

Balas

Hehehe silahkan mas :D

Balas

Hehehehe iya masih sepi, postingannya baru meluncur...
Salam blogger juga :D

Balas

Nah ini lebih simple Kang...
Oya Kang ini sudah termasuk kotak pesan komentarnya belum ya..

Balas

Kotak komentarnya nginduk sama kotak komentar threaded comment hack kang ismet kang :)

Balas

wah yg ini perkembangannya yaa

Balas

Jadi banyak perkembangannya gini :D
TOP :-d

Balas

emoticonnya bisa ditambahkan sendiri ya mas bro :-d

Balas

Silahkan mas :)

Balas

Iya mas yang ini pengembangan dari postingan kemarin :D

Balas

Iya mas untuk memberikan pilihan pada yang mau menggunakannya :D

Balas

Untuk emoticon threaded comment hack bisa dirubah sendiri atau ditambahkan dengan mengganti atau menambah gambar emo-nya pada scriptnya :D

Balas

Mantap kang.. di coba dulu.. :)

Balas

hohoho jadi tiga tombol ya hehe :D keren2 kang, tapi sayamah udah lah yang kemarin atas dan bawah, dua saja cukup :D

Balas

Banyak sekali koding nya sob
-_-
salam kenal ....


follow blog saya ya sob
http://infoejaman.blogspot.com
:)

Balas

simpen dulu kang :-d

modem lagi bermaslah nih @@,

Balas

belajarlah jadi blogger sejati dan tidak menyimpan link pada komentar, itu namanya memaksa orang untuk berkunjung saja. tidak ada artinya dengan geragat ini, banyak blogger tidak suka dengan cara ini dan termasuk saya @@,

Balas

dari semlm sudah saya terapkan mas :)

Balas

Betul kata sista Leony... mari kita belajar untuk menjadi lebih baik :)

Balas

Iya mas... pusing kalau modem udah bermasalah :D

Balas

Siipp sudah saya lihat OK :-d

Balas

Silahkan mas :D mudah-mudahan bisa dimengerti :D

Balas

iya kang jadi berjejer tombolnya hehehehe =D

Balas

kok punya saya jadinya berantakan ya?

[img]http://1.bp.blogspot.com/-ndwhokBGoew/Usj_s1C33sI/AAAAAAAAAlM/InBw_c3zt0U/s1600/Untitled-1.png[/img]

Balas

scripnya lumayan panjang yaa mas, hehehee
tanpa basi-basi lg saya izin sedoot mas
:)

Balas

Sepertinya ada kesalahan penerapannya, barusan saya coba pada blog dummy saya tidak ada masalah. Coba lihat di sini...
http://kompiside.blogspot.com/2013/05/template-modifikasi-johny-wusss-kompiana.html

Balas

Iya kalau dilihat di postingan kodenya lumayan banyak, tapi kalau di simpan di edit html sedikit :D Silahkan dicoba mas...

Balas

di template saya ada 5 buah
kira2 ditaruh dimana ya @@,

Balas

Izin Nyimak Aja Dehh Mass :D

- Blogwalking Ballxcode -

Balas

Biasanya kode <data:blogCommentMessage/> ada 4 buah dalam 1 blog, 2 buah di <b:includable id='comment-form' var='post'> dan 2 buah lagi di <b:includable id='threaded-comment-form' var='post'> Silahkan simpan di kode ke 2 dari masing-masing kelompok.

Balas

Silahkan mas :D

Balas

Makasih mas sudah berbagi dan Alhamdulillah sudah dipasang di blog saya

Balas

Sama-sama mas Fian :) udah saya cek barusan :-d

Balas

sip kang :-bd , ternyata selain <div diganti <span selain biar valid kalo gak diganti malah tetep berjejer kebawah bukan disamping , =DD

Balas

Wow Berhasil saya terapkan kang.

Balas

Mas Adhi ada saran, konversi kode kan ada tombol checklist, ada 5 kan ? tapi kok gak ada penjelasannya apa dan kegunaannya apa ? bisa diberi, jadi checklistnya jadi horizontal, disampingnya nanti ada teks penjelasannya

Balas

Cekbox tersebut berhubungan dengan javascriptnya jadi harus ada, perhatika javascriptnya pada bagian ini
if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
if (opt4.checked) cv = cv.replace(/</g, "&lt;");
if (opt5.checked) cv = cv.replace(/>/g, "&gt;");


Sedangkan teks disampingnya hanya penjelasan dari cekbox-nya dan tidak berpengaruh pda konversi kodenya. Sengaja saya hilangkan teks tersebut karena mengandung kode yang menyebabkan error pada validasi html5.

Balas

Ternyata perlu membaca dengan sangat teliti kalo belajar di blog mas adhy ini :D

Balas

nah ini dia yang ane cari,. hihi thanks mas Adhi,. hihi

Balas

mas sblumnya mksih sya sudah brhsil nerapin ke blog sya, tp ps wktu tombol emoticonnya di klik kok malah geser ke bawah ya?? apa krna kode <div nya dgnti sma kode <span ??

Balas

Coba tambahkan kode <br/> pada akhir pesan komentarnya. masuk ke dashboard >> Setting >> Posts and comments >> Comment Form Message kemudian tambahkan kode tadi di akhir pesannya.

Balas

Aneh ya... @@, terus kalau dicoba balas komentar, tombolnya jadi kecil sekali. Coba pakai CSS ini.
.small-button a{border:1px solid #333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:inline-block;background-color:#444;padding:3px 10px}
.small-button:hover a{color:#111;text-shadow:none;border:1px solid #333;border-radius:2px;display:inline-block;background-color:#777}
#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}

Balas

Dan HTML-nya pakai yang ini
<p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;'>Show Konversi Kode</a></span><span 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;inline-block&apos;'>Hide Konversi Kode</a></span>
</span>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;'>Show Emoticon</a></span><span 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;inline-block&apos;'>Hide Emoticon</a></span>
</span>
</p>
<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='emo-box'>
<div class='comment_emo_list'/>
</div>

Balas

nah itu bru brhsil mas :-bd kykny dri html onclick nya tuh ya *CMIIW :p
thanks bnget mas ^_^ sukses trus :-bd

Balas

mas tnya skali lg bleh kn yah?? hehe =D
itu tombol konversi kode sma emoticon nya kok kebaca sebagai link aktif yah??

Balas

Jika tidak ingin sebagai link coba rubah pada kode html semua kode <a menjadi <span begitu juga penutupnya /a menjadi /span.

Dan pada CSS-nya hapus kode a pada .small-button dan .small-button:hover dan tambahkan kode cursor:pointer pada .small-button

Balas

gk bsa mas, msh ke baca sbgai link :s

Balas

oh sorry2 mas, trnyata sdah bsa.. cma saya kurang teliti hehe =D
thanks bnget loh mas, dah nyusahin :-bd

Balas

Mas, kalau cara buat tombol yang isinya link gimana? kayak OOT gitu.

Balas

Coba pakai kode ini
Kode CSS:
.link-button a{border:1px solid #333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:inline-block;background-color:#444;padding:3px 10px}
.link-button:hover a{color:#111;text-shadow:none;border:1px solid #333;border-radius:2px;display:inline-block;background-color:#777}


Kemudian temukan kode ini <p><data:blogCommentMessage/> biasanya ada 4 lalu tambahkan kode di bawah ini tepat di bawah kode tadi yang ke-2 dan ke-4
<span class='small-button'>
<a class='small-button' href='URL TUJUAN' target='_blank' title='Out Of Topic'>Out Of Topic</a>
</span>

Balas

Maaf kode yang paling bawah salah, ganti dengan ini:
<span class='link-button'>
<a href='URL TUJUAN' target='_blank' title='Out Of Topic'>Out Of Topic</a>
</span>

Balas

agak rumit kang. Tapi berhasil hehe :D tapi kang punya saya kok mlenceng kekiri ya? Gabisa lurus gitu

Balas

Coba simak komentar ini http://www.kompiajaib.com/2014/01/menyimpan-tombol-konversi-kode-dan.html?showComment=1391504893101#c8658779386091073082

Balas

Mas, kenapa tombol saya berbeda saat membalas dan berkomentar? link : mas-hafiz(.)blogspot(.)com/2014/02/menambah-emoticon-whatsapp-di-threaded-comments-hack.html

Balas

waduh, saya bener gak paham itu kode"nya dipasang di edit HTML dimana narohnya....mohon maklumnya ya mas, saya pendatang baru....mohon bimbingannya mas, tentang tutorial diatas !!!!

:-bd :-bd :-bd

Balas

kok punya saya pas diklik gak muncul yah kang,,

Balas

kang saya cuma ingin pasang yang show emoticon tapi ketika saya pasang kok emoticonnya tidak muncul ya kang kurang apa ya kang...???
maaf selalu repotin kang adhy

Balas

nanya kang, kenapa template seperti droidpluss tidak bisa dipasangi spt itu :o

Balas

Lieur kang t ngartos =(

Balas

maaf mas nanya lagi, kok konversi kodenya gak berfungsi ya di blog saya ? :/

blogsiryan.blogspot.com

Balas

public static void main(String[] args) {
galaxyS4 s4=new galaxyS4();
galaxyNote note =new galaxyNote();
// samsung a= new samsung();
interfacepasse a=new interfacepasse();
a.passe(note);
a.passe(s4);

}
}

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!

×
×
×