Cara Bikin Tombol Emoticon Di Kolom Komentar Blogspot

Mungkin terasa tidak lengkap rasa nya bila suatu blog tidak mempunyai kolom komentar dan begitu juga tidak lengkap rasa nya bila kolom komentar tidak ada tombol emoticon atau tidak ada emoticon nya. Dan untuk kesempatan hari ini saya mau berbagi Cara Bikin Tombol Emoticon Di Kolom Komentar Blogspot. Cara nya lumayan cukup panjang karena banyak bagian code yang mesti di tambahkan di dalam template kalian nanti nya. Mungkin langsung kita mulai saja yaa sob. Berhubung saya kurang pandai dalam basa-basi so silakan kalian simak baik" tutorial yang akan saya berikan kali ini.

Cara Bikin Tombol Emoticon Di Kolom Komentar Blogspot

1. Silakan kalian Cari code seperti contoh di bawah ini. Di template kalian.

.comment-form p {position:relative;font-size:14px;background:#ffe4ad;margin:20px 0;padding:20px;color:#686050;box-shadow:inset 0 0 0 5px #ebd099;}

Lalu ganti dengan code di bawah ini.

.comment-form p{position:relative;background:#fdfdfd;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;line-height:1.5em;margin: 20px 0;padding:15px;border:1px solid #ddd}
.comment-form p:after, .comment-form p:before {top:100%;left:8%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.comment-form p:after {border-color:rgba(68,68,68,0);border-top-color:#fdfdfd;border-width:9px;margin-left:-9px;}
.comment-form p:before {border-color:rgba(221,221,221,0);border-top-color:#c3c3c3;border-width:10px;margin-left:-10px;transition:all .3s ease-out;}
#emo-box,#hide-emo {display:none}
.small-button1 a {font-size:12px;cursor:pointer;font-weight:400;margin:10px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#fff;padding:2px 10px;cursor:pointer;border-radius:2px;background-color:rgba(0,0,0,0.5);transition: all 0.3s ease-out;}
.small-button1:hover a{background-color:rgba(0,0,0,0.8);color:#fff;display:inline-block;}
span.small-button1 {text-align:left;display:inline-block;}

2. Lalu kalian cari lagi code seperti di bawah ini.

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

Lalu Silakan kalian ganti dengan code ini.

<div class='comment-form' id='comment-form'>
<p><data:blogCommentMessage/>
<span class='small-button1'>
<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;' title='Show Emoticon'>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;' title='Hide Emoticon'>Emoticon</a></span>
</span>
</p>
<div id='emo-box'>
<div class='comment_emo_list'/>
</div>

3. Dan yang terakhir silakan save template kalian dan lihat hasil nya.

Cara di atas itu untuk membuat tombol emoticon di kolom komentar kalian bila mana kolom komentar di template kalian tidak disertai tombol emoticon nya. Dalam arti pembuat template sebenar nya sudah memberi list script emoticon di dalam nya tapi dia tidak membuatkan tombol atau kotak untuk emoticon nya.

Nah beda lagi klo misal nya template kalian bener" tidak ada emoticon nya atau tidak di pasang. Klo untuk masalah seperti itu beda lagi urusan nya. Mesti banyak yang harus di rubah. Untuk tutorial ini sebenarnya cenderung lebih ke fokus untuk semua template dari template nya Arlinadzgn.com

Tapi tidak ada salahnya bila kalian ingin mencoba di luar dari template yang saya sebutkan di atas. Mungkin next time saya akan berikan tutorial full memasang emoticon di kolom komentar masing" template.

Mungkin itu saja yang bisa saya berikan di tutorial kali ini yaitu Cara Bikin Tombol Emoticon Di Kolom Komentar Blogspot. Semoga artikel ini bermanfaat buat sobat sekalian. Jangan lupa like dan share yaa sob. Salam blogger.

Share this post