Membuat Tool Konversi Kode Di Atas Editor Komentar Threaded Comment Hack

Membuat Tool Konversi Kode Di Atas Editor Komentar Threaded Comment Hack

Bola Hero Gawai

Membuat Tool Konversi Kode Di Atas Editor Komentar Threaded Comment Hack

Tool Konversi Kode
Tool Konversi Kode di sini berfungsi untuk mengkonversi kode-kode terlarang untuk komentar blog. Ini biasanya digunakan oleh blog-blog yang menyajikan tutorial blogger, sehingga penjelasan-penjelasan tutorial pada komentarnya bisa menyertakan kode-kodenya. 

Nah kali ini mari kita belajar membuat tool konversi kode ini dan disimpan di atas editor komentar.

Sebenarnya Kompi Ajaib telah menggunakan tool konersi kode ini, namun menggunakan trik pop up sehingga penggunaannya kurang nyaman karena halaman blog terganggu dengan pop up tool ini. Nah dengan menggunakan trik ini, penggunaan tool konversi ini saya rasa lebih nyaman karena bisa langsung dibuka di halaman yang sama tepatnya di atas editor komentar.

Berbeda dengan trik pop up yang menggunakan link eksternal hosting file xml tool konversi-nya, pada kali ini kita akan langsung menyimpan css dan javascript-nya serta HTML-nya di edit HTML blog. Namun ada sedikit perubahan agar bisa valid HTML5 dan CSS3. Dan kita gunakan onclick event pada tombolnya untuk menampilkan dan menyembunyikan tool-nya.

Untuk demonya silahkan lihat pada konversi kode di blog ini, dan untuk validasi HTML5 dan CSS3 silahkan test halaman ini.

Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini. Untuk modifikasi tampilannya silahkan atur pada kode CSS-nya.

1. Kode CSS

a.konversi-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 {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:15px;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 'Courier New',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{background-color:#464646;font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;color:#fff;border:none;border-radius:3px;cursor:pointer;padding:5px 10px}
button:hover{background-color:#A8A8A8;color:#000}
button:active{background-color:#A8A8A8;color:#000}
button[disabled],button[disabled]:active{background-color:#A8A8A8;color:#000;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}

2. Kode Javascript
Simpan javascriptnya di atas kode </body>

function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    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;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};

3. Kode HTML
Simpan kode HTML ini persis di bawah kode ini.

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

Biasanya kode di atas ada dua buah, simpan di bawah kedua kode tersebut.


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

Inspirasi ini saya dapat dari blog +Kang Ismet  namun saya coba dengan trik berbeda. Selamat mencoba....

Inspirasi: http://blog.kangismet.net/

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

78 Comments Add Comment

ijin mendalami dulu kang, biar gak maen copas aja :) hehe klo dicopas doang mah gak dapat ilmu :)

Balas

Betul sista... saya senang dengan niatnya :D seharusnya memang itu yang kita lakukan... terus belajar untuk menambah ilmu baru :)

Balas

kebetulan saya belum pasang yang beginian kang, yah namanya juga jarang share tutorial hehe

Balas

rada' takut otak atik template kang :D pelan-pelan aja deh saya pelajari hehehe :D

Balas

Pertmax udah sekrang perduax
ijin untuk mempelajari mas brooo
agar ilmu bertambah
mksh banyak mas broo

Balas

gening error kang pas nyimpen js na? gimana kang?

Balas

Pakai kode ini kang nyimpen javascriptnya
<script type='text/javascript'>
//<![CDATA[
JAVASCRIPT DI SINI..........
//]]>
</script>

Balas

Belajar pelan-pelan aja, lama-lama juga pasti bisa :)

Balas

Silahkan mas Ronny... semoga bisa dimengerti :D

Balas

oh ternyata scriptnya kurang lengkap kang :D

izin intip yang ada di blog, boleh ya kang hehe :D

Balas

Sangat cocok nih buat blog tutorial blogger. Kebetulan saya juga punya... Nanti saya coba terapkan Kang :)

Balas

Silahkan dicoba kang Heri :D

Balas

Mantap nih tutorial nya... :-d langsung dicoba dongs

Balas

Bagus sekali kang :D
Inspirasinya dari kangismet, memang kang adhy sama kang ismet ini inspirasi semua blogger

Balas

Nah ini yang saya cari-cari, lebih efektif dari button kang.. Nuhun kang.. :-d

Balas

ijin copy mas! (pisang gorengnya nyusul besok pagi) dan saya masukin gudang dulu biar aman! soalnya saya lagi pobia kena jewer mbah.... (visitor lagi drop!)

Balas

ijin mencobanya kang :-d

Balas

Mantap kang dan gak kalah keren nih .... saya suka karena simple tampilannya

Balas

Silahkan mas Rezky :)

Balas

Ah bisa aja mas Muhammad :) Sama saya hanya blogger biasa yang masih harus banyak belajar :D

Balas

Iya mas... jadi lebih efektif :D

Balas

Iya mas, mbah terus melakukan razia :(

Balas

Silahkan mas Mawan :D

Balas

Hehehehe... kalau cewek pasti cantik ya.... :D

Balas

Heheheehe makasih kang :D

Balas

maduh mbak dwi ... hehe mantap sist ..

Balas

terpecahkan disaya tulisannya gini kang Kesalahan saat mengurai XML, baris 4902, kolom 41: The entity name must immediately follow the '&' in the entity reference

Balas

Iya jika penyimpanannya tidak menggunakan
//<![CDATA[
..............
//]]>

biasanya akan error sis :D

Balas

baik kang sudah berhasil dan semuanya done sip kang ..hehe

Balas

lumayan banyak ya scriptnya mas :D tapi penting banget tuh alat konversi di dekat kolom komentar, terutama bagi blog bertema tutorial blogger :)
makasih sharingnya mas Adhy

Balas

mau dicoba mas, tapi jaringan lagi remot, males baget mau utak katik template mas hehehe :)

Balas

Uda pasang yg kayak gini kang cuman bntuk scrip js nya agak beda. Cuman saya pasang bukan diatas komentar. Tapi idenya boleh jga kang. Buat blog tutorial, ini sangt cocok lebih memudahkan pengunjung :-bd

Balas

ane nyimak sambil ngiler aja deh gan.. hehee

Balas

Iya mbak lumayan banyak juga hehhehe tapi menurut saya tidak terlalu memberatkan loading... :D

Balas

Iya sis kalau lagi lemot emang gitu :D suka serba males... :D

Balas

Iya mas Agri banyak jalan menuju ke Roma... :D

Balas

Hehehehe awan netes ke laptop... tar laptopnya meledugg... hehehee =D

Balas

|o| bagus-bagus. Tapi aku masih males buat otak-atik template lagi mas, :(

Balas

Keren banget mas Adhi, bisa tambah mantab ni blog saya kalo dikasi konversi kode seperti diatas.
Salam Kenal mas

Balas

hehe tepat sekali mas, oh ya mas, saya melihat menu navigasi nya kok tidak dikasih font PT san Narrow saja sekalian, biar lebih cantik mas :)

Balas

Hehehehe...jangan dipaksaan mas, nanti kalau mood-nya lagi bagus baru nyoba utak-atik lagi :)

Balas

Iya silahkan dicoba mas...
Salam kenal juga mas :D

Balas

OK nanti saya coba sarannya sis :D

Balas

nah.. tuh kan lebih keren liatnya hehehe |o|

Balas

Waw Makin keren aja ni juragan kompi :P

Balas

bagus juga nih mas,apakah tampilan nya sama seperti kompi ada show hide nya?

Balas

Kalau inspirasi dari kang ismet memang selalu yahoot mas adhy......

Balas

tulisan di kotak cek lis nya ko ga ada bang? Sengaja dihilangkan?

Balas

Hehehehe lumayan mas :D

Balas

Iya mbak sama seperti yang saya pakai, jika ingin beda tinggal merubah CSS-nya.

Balas

Iya mas... kang Ismet emang yahoot :D

Balas

Nah itu dia mas, pada tulisan itu ada kode yang bikin error validasi html5, susah ngaturnya. Jadi saya buang saja.

Balas

Saya amankan dulu kang :D

Balas

Silahkan mas Firman :D

Balas

Kemarin sempet make tutor kangismet yang menggunakan tag pre, tapi ga tau kenapa saya terapkan di threaded comment hack ga work. But makasih atas infonya mas :)

Balas

Ini dia tutorial yang saya cari2 akhirnya di share juga :)

Balas

Kalo gak ada kode <div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
</p>
Gimana tuh kang ?

Balas

Jika menggunakan threaded comment biasanya ada kode itu, itu adalah tempat untuk menampilkan pesan komentar. coba carinya hanya menggunakan kode
<div id='threaded-comment-form'>

Balas

Sama-sama mas :)

Balas

Mantap Kang Adhy, izin coba ah :D

Balas

silahkan mas intan.. asal jangan ngintip adminnya saja ya...? ntr mas adhy marah kalau di intipin hehehehe

Balas

wah terimakasih mas adhy tutorialnya.. kebetulan di tempat saya masih kosong mas.. nggak ada pesan.smile dan konversi kode nya hehehe.. sip deh mas, bisa di coba tutornya....hehe

Balas

sudah siap pasang mas hehehe... :)

Balas

belum pernah coba mengkonversi kode-kode terlarang :D

Balas

Silahkan mas Fajri :)

Balas

Silahkan dicoba mas Nadi :D

Balas

Nah sekarang mumpung sudah ada konversi kodenya silahkan dicoba :D

Balas

nah yang ini satu lagi,. hihi jadi pas,. hehe

Thanks mas adhi

Balas

wah mantap gan thanks yah infonya :-d

Balas

Aku mau tanya nih mas, aku coba praktekin di template kompi males kok gak jadi2 ya? mohon pencerahannya. terima kasih =D

Balas

kode yang ini dimana ya? hehe
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
</p>

Balas

keren pisan kang, kira-kira kalau mau pasang kayak akang gimana caranya ya, ada OOT, show konversi kode sama show emoticon nya...mohon pencerahannya. Terimakasih.

Balas

Sekedar memberikan opsi kang, kali kali templatenya gak support, ini ada cara lain... maaf
http://www.rumahno48.com/2014/06/membuat-tombol-konversi-kode-dan-emoticon-pada-threaded-komentar.html

Balas
This comment has been removed by the author.
This comment has been removed by the author.
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!

×
×
×