Cara Buat & Pasang Widget Emoticon di Blogdetik Lengkapi Kolom Komentar


Widget ini secara tak sengaja kutemukan ketika berkunjung ke blogdetik “bung yuswohady“. Sempat kaget ketika aku lihat sederet emoticon ada di bagian atas kolom komentar. Sebelumnya sempat terpikir barangkali saja widget spesial ini hasil “otak-atik” yang empunya blog, ee… setelah aku coba buka stock tema blogdetik, ternyata emoticon ini memang menjadi bawaan tema blogdetik “Falling Dream“. Berangkat dari rasa penasaran , akhirnya aku coba untuk memadukanya dengan beberapa kode CSS dan CSS3 dengan harapan bisa menjadi sebuah widget yang mampu diaplikasikan di semua tema blogdetik.

Cara pasang widget emoticon pelengkap comment box blogdetik

Sekalipun widget yang akan kita buat ini tak akan sama persis dengan yang ada pada tema blogdetik “Falling Dream“, namun fungsi dan kegunaan tak terkurangi sama sekali. Dengan sekali klik pada “gambar emoticon”, maka kode emoticon yang nantinya akan dimunculkan sebagai icon langsung tertuliskan di boks komentar. Yang membedakan widget yang aku buat dengan aslinya hanyalah pada letak/posisi deret emoticon. Jika di tema blogdetik “Falling Dream” terletak di kolom komentar bagian atas, maka di widget yang akan kita buat ini berada di sisi kiri halaman blog. Deret emoticon kita buat tersembunyi dengan menyisakan sebuah teks “Emoticon” yang berfungsi sebagai trigger nongolnya deret emoticon. Untuk membuatnya silahkan copy dan pastekan seluruh kode yang tersedia (kode CSS, javascript dan xHTML) ke dalam box Widgetize Any HTML.

Langkah Penyimpanan Widget

  1. Login di Blogdetik.
  2. Dasbor : Setelah halaman dasbor terbuka, arahkan cursor di atas link menu “Appearance“.
  3. Pilih dan klik Widget.
  4. Copy dan pastekan seluruh kode HTML pada box “Widgetize Any HTML“. Sebelumnya jangan lupa untuk mengganti URL Blog Anda(lihat xHTML widget emoticon di bagian bawah!) sesuai blogdetik yang sampeyan punya.
    Contoh:
    http://gubhugreyot.blogdetik.com/wp-images/smilies/icon_mrgreen.gif.
  5. Klik “Save Changes“.
  6. Lihat hasilnya dengan membuka blogdetik sampeyan dan coba gunakan dengan membuat komentar.

Kode CSS Widget Emoticon

<style type=”text/css”> #emo{ position:fixed;/* widget emoticon blogdetik */ background: rgb(0,0,0); background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(181,181,181,1) 72%,rgba(193,193,193,1) 86%,rgba(181,181,181,1) 88%,rgba(68,68,68,1) 100%); background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(181,181,181,1) 72%,rgba(193,193,193,1) 86%,rgba(181,181,181,1) 88%,rgba(68,68,68,1) 100%); background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(181,181,181,1) 72%, rgba(193,193,193,1) 86%, rgba(181,181,181,1) 88%, rgba(68,68,68,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(181,181,181,1) 72%,rgba(193,193,193,1) 86%,rgba(181,181,181,1) 88%,rgba(68,68,68,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#222222′, endColorstr=’#aaaaaa’,GradientType=0 ); background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(181,181,181,1) 72%,rgba(193,193,193,1) 86%,rgba(181,181,181,1) 88%,rgba(68,68,68,1) 100%); box-shadow:0 0 8px #555; border-radius:8px; bottom:10px; padding:5px 3px; left:0; /* Original css by: gubhugreyot.blogdetik.com */ width:443px; border:1px solid #000; margin-left:-361px; transition:1s 0.5s; -o-transition:1s 0.5s; -moz-transition:1s 0.5s; -webkit-transition:1s 0.5s; height:30px; overflow:hidden; opacity:0.7; filter:alpha(opacity=70); } #emo:hover{ height:auto; opacity:1.0;/* Original css by: gubhugreyot.blogspot.com */ filter:alpha(opacity=100); } #emo span{ font-size:14px; font-weight:bold; color:#eee; text-align:right; padding:5px; display:inline-block; float:right; background:#b5b5b5; background:linear-gradient(top, #b5b5b5 0%,#000000 100%); background:-o-linear-gradient(top, #b5b5b5 0%,#000000 100%); background:-moz-linear-gradient(top, #b5b5b5 0%, #000000 100%); background:-webkit-linear-gradient(top, #b5b5b5 0%,#000000 100%); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#b5b5b5′, endColorstr=’#000000′ ); background:-ms-linear-gradient(top, #b5b5b5 0%,#000000 100%); border-top-right-radius:6px; border-bottom-right-radius:6px; text-shadow:0 0 3px #000; border:1px solid rgba(0,0,0,0.6); box-shadow:0 0 12px #aaa; } #emo span:hover{ color:red; } #emo:hover{ margin-left:0; } .gambar_emo{ margin:2px 2px 2px 2px; background:rgba(255,255,255,0.6); border-radius:4px; padding:2px 5px; float:left;/* Original css by: gubhugreyot.blogdetik.com */ overflow:hidden; } #emo .gambar_emo img{ transition:1s 0.4s; -o-transition:1s 0.4s; -moz-transition:1s 0.4s; -webkit-transition:1s 0.4s; } #emo:hover .gambar_emo img{ cursor:pointer; margin-right:5px; } #emo:before{ position:absolute; bottom:15px; left:20px; text-align:center; font-size:14px; font-family:Times !important; color:#000; text-shadow:0 0 2px #aaa; content:”Klik gambar untuk pasang emoticon di comment box”; opacity:0; filter:alpha(opacity=0); } #emo:hover:before{ transition:1s 0.4s; -o-transition:1s 0.4s; -moz-transition:1s 1.4s; -webkit-transition:1s 0.4s; opacity:1.0; filter:alpha(opacity=100); } </style>

Javascript Widget Emoticon

<script type=”text/javascript”> function grin(a){var d;if(document.getElementById(“content”)&&document.getElementById(“content”).type==”textarea”){d=document.getElementById(“content”)}else{if(document.getElementById(“comment“)&&document.getElementById(“comment“).type==”textarea”){d=document.getElementById(“comment“)}else{return false}}if(document.selection){d.focus();sel=document.selection.createRange();sel.text=a;d.focus()}else{if(d.selectionStart||d.selectionStart==”0”){var c=d.selectionStart;var b=d.selectionEnd;var e=b;d.value=d.value.substring(0,c)+a+d.value.substring(b,d.value.length);e+=a.length;d.focus();d.selectionStart=e;d.selectionEnd=e}else{d.value+=a;d.focus()}}}; </script>

xHTML Widget Emoticon

<div id=”emo”> <div> <img src=”URL Blogdetik anda/wp-images/smilies/icon_mrgreen.gif” alt=”:mrgreen:” onclick=”grin(‘:mrgreen:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_neutral.gif” alt=”:neutral:” onclick=”grin(‘:neutral:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_twisted.gif” alt=”:twisted:” onclick=”grin(‘:twisted:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_eek.gif” alt=”:shock:” onclick=”grin(‘:shock:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_smile.gif” alt=”:smile:” onclick=”grin(‘:smile:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_confused.gif” alt=”:???:” onclick=”grin(‘:???:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_cool.gif” alt=”:cool:” onclick=”grin(‘:cool:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_evil.gif” alt=”:evil:” onclick=”grin(‘:evil:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_biggrin.gif” alt=”:grin:” onclick=”grin(‘:grin:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_redface.gif” alt=”:oops:” onclick=”grin(‘:oops:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_razz.gif” alt=”:razz:” onclick=”grin(‘:razz:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_rolleyes.gif” alt=”:roll:” onclick=”grin(‘:roll:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_wink.gif” alt=”:wink:” onclick=”grin(‘:wink:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_cry.gif” alt=”:cry:” onclick=”grin(‘:cry:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_surprised.gif” alt=”:eek:” onclick=”grin(‘:eek:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_lol.gif” alt=”:lol:” onclick=”grin(‘:lol:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_mad.gif” alt=”:mad:” onclick=”grin(‘:mad:’);”> <img src=”URL Blogdetik anda/wp-images/smilies/icon_sad.gif” alt=”:sad:” onclick=”grin(‘:sad:’);”> </div> <span>Emoticon</span> </div>

Keterangan/Catatan:

  1. Setelah penyimpanan kode HTML selesai, akam dijumpai sebuah teks dalam boks disebelah kiri halaman blogdetik sampeyan yang bertuliskan “Emoticon“. Arahkan cursor ke atasnya hingga seluruh bagian boks yang tersembunyi menjadi terlihat.
  2. Klik salah satu emoticon yang tersedia dalam boks.
  3. Perhatikan apakah kode berhasil ditampilkan. Jika, Ya, berarti sampeyan tidak perlu melakukan perubahan secara khusus pada javascript. Bagi yang belum berhasil menampilkan kode lanjutkan ke langkah berikutnya.
  4. Buka blogdetik sampeyan pada halaman posting dimana kolom komentar beserta box-nya terlihat.
  5. Klik kanan kemudian lanjutkan dengan klik “View Page Source” (untuk Mozilla), atau “Source” (Opera).
  6. Cari kode html berikut :
    <textarea name=”comment” .
  7. Yang kita perlukan adalah id dari textarea tersebut. Kode HTML selengkapnya dapat sampeyan lihat dan lanjutkan dengan meng-copy id textarea, yang bentuknya seperti berikut:
    <textarea name=”comment” id=”…..”.
  8. Tidak semua tema menggunakan id textarea yang sama. Sebagai contoh untuk tema “Blue Zinfandel 2.0” id yang digunakan s4, dengan bentuk kode HTML :
    <textarea name=”comment” id=”s4″.
  9. Gunakan id dari tema yang sampeyan gunakan untuk menggantikanid dalam javascript.
  10. Gunakan javascript yang telah diperbarui untuk menggantikan javascript sebelumnya.
  11. Lihat perubahan pada javascript pada contoh di bawah (id –> comment diganti dengan s4)!
  12. Bagi yang memerlukan panduan cara menggunakan Widgetize Any HTML, silahkan buka panduan berikut:
    Cara Menyimpan kode HTML melalui Widgetize Any HTML di Blogdetik

Javascript lama (asli-nya)

<script type=”text/javascript”> function grin(a){var d;if(document.getElementById(“content”)&&document.getElementById(“content”).type==”textarea”){d=document.getElementById(“content”)}else{if(document.getElementById(“comment“)&&document.getElementById(“comment“).type==”textarea”){d=document.getElementById(“comment“)}else{return false}}if(document.selection){d.focus();sel=document.selection.createRange();sel.text=a;d.focus()}else{if(d.selectionStart||d.selectionStart==”0”){var c=d.selectionStart;var b=d.selectionEnd;var e=b;d.value=d.value.substring(0,c)+a+d.value.substring(b,d.value.length);e+=a.length;d.focus();d.selectionStart=e;d.selectionEnd=e}else{d.value+=a;d.focus()}}}; </script>

Javascript baru (id telah disesuaikan)

<script type=”text/javascript”> function grin(a){var d;if(document.getElementById(“content”)&&document.getElementById(“content”).type==”textarea”){d=document.getElementById(“content”)}else{if(document.getElementById(“s4“)&&document.getElementById(“s4“).type==”textarea”){d=document.getElementById(“s4“)}else{return false}}if(document.selection){d.focus();sel=document.selection.createRange();sel.text=a;d.focus()}else{if(d.selectionStart||d.selectionStart==”0”){var c=d.selectionStart;var b=d.selectionEnd;var e=b;d.value=d.value.substring(0,c)+a+d.value.substring(b,d.value.length);e+=a.length;d.focus();d.selectionStart=e;d.selectionEnd=e}else{d.value+=a;d.focus()}}}; </script>

Selamat Mencoba……..!!!!!!!!!!

2 thoughts on “Cara Buat & Pasang Widget Emoticon di Blogdetik Lengkapi Kolom Komentar

  1. obviously like your website but you have to check the spelling on several of your posts. Several of them are rife with spelling problems and I find it very bothersome to tell the truth nevertheless Ill definitely come back again. ddkkbfdakkcf

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s