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 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 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 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 '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 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('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 kode di sini lalu 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 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('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 kode di sini lalu 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 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.
cara masang selain itu gimana gan ? selain dari Emoticon dan Konversi ,, bisa dibuat sendiri kah ?
ReplyDeletegan, emoticonnya kenapa gk ada ya?
ReplyDeleteMungkin blog agan belum terpasang emoticonnya.
Delete|o|
ReplyDeletekog saya cba erorrrrr ya mas,, :v
ReplyDelete12^2
ReplyDeletegan cara buat pesan formulir nya biar kaya blog mas ada gak?
ReplyDelete:)
ReplyDelete