logo blog

Memasang Tombol Konversi Dan Emoticon Di Atas Komentar Blog

Memasang Tombol Konversi Dan Emoticon Di Atas Komentar Blog

Memasang Tombol Konversi Emoticon Komentar Blog

Membuat Tombol Konversi Dan Emoticon Komentar Blog

Cara Memasng Tombol Konversi Dan Emoticon Show Hide Di Blog

Bagi kalian yang ingin memasng tombol konversi dan emoticon bisa juga out of topic show hide di atas komentar blog dan dibawah pesan formulir komentar blog kalian bisa gunakan cara ini untuk menerapkannya di blog.

Gunanya apa Tools konversi pada komentar blog? Gunanya untuk mengkonversi kode html / javascript agar bisa dimasukan dalam from komentar. Soalnya kalau tidak di konversi biasanya kode html yang langsung dimasukan ke from komentar tidak bisa dipublikasikan.

Kalo emoticon pasti sudah tau lah :3 untuk mengungkapkan perasaan bisa :v
Tombol konversi ini sudah saya coba di blog ini, sudah di coba juga pada blog yang menggunakan Komentar Threaded Comment Hack!!

Nah bagi kalian yang ingin memasang tool konversi dan tombol emoticon ini, silahkan ikuti tutorialnya di blog ini.

Tapi jangan lupa juga untuk membaca tutorial lainnya.



Tutorial Cara Pemasangan.

Tombol Konversi Dan Emoticon Pada Komentar Thered Comment.

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> Atau </style>
  • Lalu masukan CSS dibawah ini tepat di salah satu code yang kalian cari tadi


/*KONVERSI*/
a.emo-button,a.konversi-button{border-bottom:2px solid #D26B64;color:#FFF;font-size:13px;font-family:Roboto;font-weight:300;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:1px;display:inline-block;background-color:#F97E76;padding:4px 10px;cursor:pointer}
#konversi-box, #hide-konversi, #hide-emo, #emo-box {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 &#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{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}


  • Masukan Javascript Berikut Diatas Kode </body>


<script type='text/javascript'>
//<![CDATA[
 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();
};
//]]>
</script>

  • Lalu cari kode <div id='threaded-comment-form'> atau <p><data:blogCommentMessage/>
  • Tampilannya kurang lebih seperti ini.

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

  • Kalau sudah ketemu, silahkan ganti kode <p><data:blogCommentMessage/></p>, Dengan Script dibawah 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' style='display: none;'><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>

  • Kurang lebih hasilnya seperti ini.
<div id='threaded-comment-form'>
<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' style='display: none;'><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>

  • Save template dan lihat hasilnya, semoga bermanfaat.

Sukup sekian dan terimakasih sudah membaca artikel tentang cara memasang tombol tools konversi dan emoticon di blog mas tamvan ini, kurang lebihnya saya minta maaf.
Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar.

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Memasang Tombol Konversi Dan Emoticon Di Atas Komentar Blog. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Memasang Tombol Konversi Dan Emoticon Di Atas Komentar Blog. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Comment Loading