kali ini kita akan mencoba Memasang emoticon dikolom komentar Blogger. ternyataMemasang emoticon dikolom komentar Blogger mudah.
Emoticon yang akan kita buat ini, disamping tidak menyertakan teks disekitar gambar emoticon, yang kelihatannya justru bikin kacau, semrawut dan merusak tatanan, kita juga akan memanfaatkan gambar emoticon yang sudah coba aku padukan dari beberapa koleksi emoticon yang sempat kujumpai setelah coba browsing kesana-kemari.
Oke kita mulai saja membuat emoticonnya.
Panduan dan Tutorial BloGGeR cara memasang emoticon di blog :
Login to BloGGeR (Login ke BloGGeR) : Gunakan "User Name/Alamat Email" untuk login. Jangan lupa tulis "Passwordnya/Sandi"
Dasboard (Dasbor) : KLIK link "Tata Letak/Layout/Rancangan".
Layout/Tata Letak/Rancangan : KLIK link "Edit HTML".
Backup/Restore Template : Back-up Template/Amankan Template dengan cara KLIK link "Download Full Template/Download Template Lengkap".
Save/Simpan di Folder PC :.
Edit HTML : KLIK link "Expand Template Widget".
Kode CSS : Letakkan kode CSS di atas kode "]]></b:skin>".
xHTML : Letakkan xHTML di bawah kode "<p class='comment-footer'>" Kode seperti di atas ada dua. Silahkan pilih salah satu dan di coba saja. Paling-paling hasilnya cuma berbeda di posisi saja. Kalau yang satu emoticon di atas box komentar dan yang satunya di bawahnya. Jika pingin rubah posisi tinggal di pindah saja!
Javascript : Letakkan Javascript di atas kode "</body>".
Save Template/Simpan Template : KLIK link "Save Template/Simpan Template".
Open Blog/Buka Blog : Buka blog dan "lihat hasilnya".
Ctrl+F : Gunakan selalu "Ctrl+F" saat mencari kode html.
Kode CSS Emoticon Komentar BlogSPOT:
<style type="text/css"> img.bgs1GRemo{width:22px;height:22px;padding:2px;border:1px solid blue;background:#fff;} .bgsGRemo{width:320px;border:2px solid #0084ce;background:#222;padding:5px;} </style> Kode xHTML Emoticon Komentar BlogSPOT:
<div align="center" class="bgsGRemo"> <img class="bgs1GRemo" title="Tuliskan :a --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> <img class="bgs1GRemo" title="Tuliskan :b --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> <img class="bgs1GRemo" title="Tuliskan :c --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> <img class="bgs1GRemo" title="Tuliskan :d --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> <img class="bgs1GRemo" title="Tuliskan :e --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> <img class="bgs1GRemo" title="Tuliskan :f --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQ3zv1ajE_Cu63UeNrkNVUJWEImAdjnFhgyqzYu6Qp9UgHhR9mJii2mRKqcjqZ-cstQXPYe7pQf_R3P5WF7YLM_wpyQTac0YOG7rcPtNfUdDatnzf9ZvGbcRrH_0zByP4M61Y5MyWeyw/s800/emoticon-0106-crying.gif'/> <img class="bgs1GRemo" title="Tuliskan :g --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfI6MrfjNGYf2aqgeQOSK2EG4Wcy6oDQ8BJY8en0IEbXpC_8jvydn2i5WVZcPMJDlDjSOYW6ZFRUgAlFNusRo7a2dXI61lfCB8Sq77j-JCLFOnmBcj0pmSVoh-PkKBjVWSx9cYbVCY4mQ/s800/emoticon-0109-kiss.gif'/> <img class="bgs1GRemo" title="Tuliskan :h --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebc6eKclifrU6yEkXcbTs7e0zGW7gjB41wtVtewpRzHwnKWBUHj90eScj-5r7z2mhDkBQ98ZiioIcA6dYkgNWOooZwEZvwm80EX7rqPMYLBOU-Emriv59tvWBXvtqBJihM6roFqyrDek/s800/emoticon-0111-blush.gif'/> <img class="bgs1GRemo" title="Tuliskan :i --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-B2PkArRNdM46wgAjwffxphngSn3GQQ-7aqaZlIW3JgBKP2g785NBUsELfM9IqFZnyyjK_4GoVcmZTjGTqeScYfpj1wHjvzFsfKnHA0mn-7bPF3ky_6laQEXy4WiWQaG7KMPpFXeRsY/s800/emoticon-0110-tongueout.gif'/> <img class="bgs1GRemo" title="Tuliskan :j --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLMPSIRAuEQDMBJZHO36ngEqd1NLw_o51dChXnBoF-ZtoN9rXJHa4fsXs518cwARQZxXfyVoH7Z-V655eet0XIijypCWsm0r27wcF3Efx2TiOqo3Z1iH0k_yayzHAIfeZtN9EjTEswfc/s800/emoticon-0126-nerd.gif'/> <img class="bgs1GRemo" title="Tuliskan :k --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC1xjPlqtPV1ADgp6as9VdkjBokhm_jmALKMr6xWnpwvTs53MsGqEOD3fzFcWmn8chuY9A0T_yewIVCq_ifJWry4eq996OQUatOcoLrGDGzTHbfLsPkJ5PTVvMCPX81Q3HrEzmsXZtRWw/s800/emoticon-0103-cool.gif'/> <img class="bgs1GRemo" title="Tuliskan :l --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpp0T4DAwQeH0Sq_jwtcoLj05_VkF40dCZapLzpenjIWvUECcU2_EmFtF1NkuwJ8re6lHPWHo3oBT2g9VbgYtuFzjJm4A7L-l0MRsxumrrNNsU3-el3gZXTYjUxCi59NipRKgxyGde4bU/s800/emoticon-0130-devil.gif'/> <img class="bgs1GRemo" title="Tuliskan :m --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj748Iq8rVgTqZhYNe2-oODZoSd-169IKCEPJ0KMzeQEaNFQhIvj2XMoiBXlppxSsLr6Y7u4xKubry_hHKP9USCCzcc2ZytYma3GnOhsSnvvmX0VznaUDotOiXgEgkwV7q-VME1vpFYeWA/s800/emoticon-0133-wait.gif'/> <img class="bgs1GRemo" title="Tuliskan :n --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKsr84sshyzCrIMS1ZymNqMh4t1hwXmiYuBnctGiSWJjfz0OBUiIvGnyi3U9Oy5NlcuN2KnmVo_t7c7ySFuFITKpc_6cuglIpBN_hmXRnKvsoIL1yiB3WuiFJtX4tAUnRGA8rglj-ogD4/s800/emoticon-0137-clapping.gif'/> <img class="bgs1GRemo" title="Tuliskan :o --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6B9TIEojmIsWHhthpW8QF3_1_ixRNijfojoQY8dYF1gPjSXTUA7Z81KZLVwRTsln9d6tr5vs2PlSiBRp37T4z1pb5iQKUI8SoJY7q9-b7AMtlG_sMfoaZtlBcoO880YzY1n_urox2hwQ/s800/emoticon-0136-giggle.gif'/> <img class="bgs1GRemo" title="Tuliskan :p --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> <img class="bgs1GRemo" title="Tuliskan :q --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> <img class="bgs1GRemo" title="Tuliskan :r --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> <img class="bgs1GRemo" title="Tuliskan :s --> Untuk menggunakan gambar emoticon ini" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5sBHhBtFe4dt3xmCqkEA2u5ZdwmK59MFOkoIkXNmCpxZl_9SGcEL6Rt3ygJFLcr94uXjO88tLl00APwwy_C7752xqkS-_WpbEWaGKWIErN2dd_n2OsaATkViZa4QbddDf2k6VM24SwA/s800/emoticon-0178-rock.gif'/> <img class="bgs1GRemo" title="Tuliskan :t --> Untuk menggunakan gambar emoticon ini" src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> </div>
Javascript Emoticon Komentar BlogSPOT:
<script type='text/javascript'> //<![CDATA[ a = document.getElementById('comments'); if(a) { b = a.getElementsByTagName("DD"); for(i=0; i < b.length; i++) { if (b.item(i).getAttribute('CLASS') == 'comment-body') { _str = b.item(i).innerHTML.replace(/:a/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>"); _str = _str.replace(/:b/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>"); _str = _str.replace(/:c/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>"); _str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>"); _str = _str.replace(/:e/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>"); _str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQ3zv1ajE_Cu63UeNrkNVUJWEImAdjnFhgyqzYu6Qp9UgHhR9mJii2mRKqcjqZ-cstQXPYe7pQf_R3P5WF7YLM_wpyQTac0YOG7rcPtNfUdDatnzf9ZvGbcRrH_0zByP4M61Y5MyWeyw/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>"); _str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfI6MrfjNGYf2aqgeQOSK2EG4Wcy6oDQ8BJY8en0IEbXpC_8jvydn2i5WVZcPMJDlDjSOYW6ZFRUgAlFNusRo7a2dXI61lfCB8Sq77j-JCLFOnmBcj0pmSVoh-PkKBjVWSx9cYbVCY4mQ/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>"); _str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebc6eKclifrU6yEkXcbTs7e0zGW7gjB41wtVtewpRzHwnKWBUHj90eScj-5r7z2mhDkBQ98ZiioIcA6dYkgNWOooZwEZvwm80EX7rqPMYLBOU-Emriv59tvWBXvtqBJihM6roFqyrDek/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>"); _str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-B2PkArRNdM46wgAjwffxphngSn3GQQ-7aqaZlIW3JgBKP2g785NBUsELfM9IqFZnyyjK_4GoVcmZTjGTqeScYfpj1wHjvzFsfKnHA0mn-7bPF3ky_6laQEXy4WiWQaG7KMPpFXeRsY/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>"); _str = _str.replace(/:j/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLMPSIRAuEQDMBJZHO36ngEqd1NLw_o51dChXnBoF-ZtoN9rXJHa4fsXs518cwARQZxXfyVoH7Z-V655eet0XIijypCWsm0r27wcF3Efx2TiOqo3Z1iH0k_yayzHAIfeZtN9EjTEswfc/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>"); _str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC1xjPlqtPV1ADgp6as9VdkjBokhm_jmALKMr6xWnpwvTs53MsGqEOD3fzFcWmn8chuY9A0T_yewIVCq_ifJWry4eq996OQUatOcoLrGDGzTHbfLsPkJ5PTVvMCPX81Q3HrEzmsXZtRWw/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>"); _str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpp0T4DAwQeH0Sq_jwtcoLj05_VkF40dCZapLzpenjIWvUECcU2_EmFtF1NkuwJ8re6lHPWHo3oBT2g9VbgYtuFzjJm4A7L-l0MRsxumrrNNsU3-el3gZXTYjUxCi59NipRKgxyGde4bU/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>"); _str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj748Iq8rVgTqZhYNe2-oODZoSd-169IKCEPJ0KMzeQEaNFQhIvj2XMoiBXlppxSsLr6Y7u4xKubry_hHKP9USCCzcc2ZytYma3GnOhsSnvvmX0VznaUDotOiXgEgkwV7q-VME1vpFYeWA/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>"); _str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKsr84sshyzCrIMS1ZymNqMh4t1hwXmiYuBnctGiSWJjfz0OBUiIvGnyi3U9Oy5NlcuN2KnmVo_t7c7ySFuFITKpc_6cuglIpBN_hmXRnKvsoIL1yiB3WuiFJtX4tAUnRGA8rglj-ogD4/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>"); _str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6B9TIEojmIsWHhthpW8QF3_1_ixRNijfojoQY8dYF1gPjSXTUA7Z81KZLVwRTsln9d6tr5vs2PlSiBRp37T4z1pb5iQKUI8SoJY7q9-b7AMtlG_sMfoaZtlBcoO880YzY1n_urox2hwQ/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>"); _str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>"); _str = _str.replace(/:q/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>"); _str = _str.replace(/:r/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>"); _str = _str.replace(/:s/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt='' class='smiley'/>"); _str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5sBHhBtFe4dt3xmCqkEA2u5ZdwmK59MFOkoIkXNmCpxZl_9SGcEL6Rt3ygJFLcr94uXjO88tLl00APwwy_C7752xqkS-_WpbEWaGKWIErN2dd_n2OsaATkViZa4QbddDf2k6VM24SwA/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>") b.item(i).innerHTML = _str;}}} //]]> </script>demikian artikel mengenai "Memasang emoticon dikolom komentar Blogger"
semoga bermanfaat, Selamat mencoba,salam Blogger.
sumber : www.gubugreyot.blogspot.com
Tag :
Tutorial Blog
1 Komentar untuk "Memasang emoticon dikolom komentar Blogger"
bermanfaat..
"Thanks telah mampir dan Berkomentar Disini, yo kita saling vote dan comment"