Tips Cara Memasang Tombol Konversi Dan Emoticon Di Atas Komentar Blog
Membuat Tombol Konversi Dan Emoticon Komentar Blog Cara Memasng Tombol Konversi Dan Emoticon Show Hide Di Blog Bagi kalian yang in...
https://tutorialcarapintar.blogspot.com/2019/07/tips-cara-memasang-tombol-konversi-dan.html?hl=in
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 dapat juga out of topic show hide di atas komentar blog dan dibawah pesan formulir komentar blog kalian dapat gunakan cara ini untuk menerapkannya di blog.Gunanya apa Tools konversi pada komentar blog? Gunanya untuk mengkonversi instruksi html / javascript semoga dapat dimasukan dalam from komentar. Soalnya jikalau tidak di konversi biasanya instruksi html yang pribadi dimasukan ke from komentar tidak dapat dipublikasikan.
Kalo emoticon niscaya sudah tau lah :3 untuk mengungkapkan perasaan dapat :v
Tombol konversi ini sudah aku coba di blog ini, sudah di coba juga pada blog yang memakai 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 Blogger 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 sempurna 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 '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} - 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, "&"); if (opt2.checked) cv = cv.replace(/'/g, "'"); if (opt3.checked) cv = cv.replace(/"/g, """); if (opt4.checked) cv = cv.replace(/</g, "<"); if (opt5.checked) cv = cv.replace(/>/g, ">"); 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 instruksi <div id='threaded-comment-form'> atau <p><data:blogCommentMessage/>
- Tampilannya kurang lebih menyerupai ini.
<div id='threaded-comment-form'> <p><data:blogCommentMessage/> </p>
- Kalau sudah ketemu, silahkan ganti instruksi <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('konversi-box').style.display='inline-block';document.getElementById('hide-konversi').style.display='inline-block';document.getElementById('show-konversi').style.display='none''>Show Konversi Kode</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='inline-block''>Hide Konversi Kode</a></span> <span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none''>Show Emoticon</a></span> <span id='hide-emo' style='display: none;'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block''>Hide Emoticon</a></span> </p> <div id='konversi-box'> <textarea id='codes' placeholder='Tulis/paste instruksi di sini kemudian klik 'Konversi'' 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 risikonya menyerupai ini.
<div id='threaded-comment-form'> <p><data:blogCommentMessage/> <span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='inline-block';document.getElementById('hide-konversi').style.display='inline-block';document.getElementById('show-konversi').style.display='none''>Show Konversi Kode</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='inline-block''>Hide Konversi Kode</a></span> <span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none''>Show Emoticon</a></span> <span id='hide-emo' style='display: none;'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block''>Hide Emoticon</a></span> </p> <div id='konversi-box'> <textarea id='codes' placeholder='Tulis/paste instruksi di sini kemudian klik 'Konversi'' 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 wacana cara memasang tombol tools konversi dan emoticon di blog mas tamvan ini, kurang lebihnya aku minta maaf.
Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar.
