Memasukan Item Pada Komentar (Video, Gambar, Emoticon, Kode)

Kali ini saya akan membahas cara memasukan Emoticon, Gambar, Video dan kode kedalam komentar, tujuannya untuk mempermudah para komentator menanyakan masalah dengan menyertakan Screenshot atau video pada komentar tersebut, sehingga yang menjawab menjadi lebih mengerti masalah yang akan di tanyakan, kalau Emoticon jelas untuk mengexpresikan komentator dan menjadikan suasana dalam berkomentar menjadi lebih hidup.. 
Untuk Script dan kodenya saya dapatkan dari blog DT:] dan MKR-Site untuk emoticon.
Berikut langkah pemasangannya.
1. Masuk ke Template  »  Edit HTML
Letakan kode berikut ini diatas kode </head>
<style type='text/css'>
/* Add More Features to the Blogger Comments by Taufik Nurrohman */
img.emo {
display:inline-block;
vertical-align:middle;
}
#comment-holder .cm-youtube {
display:block;
border:none !important;
background-color:#333;
width:370px;
height:218px;
margin:0 auto 30px;
}
#comment-holder .cm-image {
display:block;
margin:0 auto 15px;
outline:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
padding:5px;
max-width:96%;
height:auto;
width:auto\9;
}
#comment-holder code,
#comment-holder i[rel=&quot;code&quot;] {
font:normal 12px Monaco,&quot;Courier New&quot;,Monospace;
color:blue;
}
#comment-holder pre,
#comment-holder i[rel=&quot;pre&quot;] {
display:block;
font:normal 12px Monaco,&quot;Courier New&quot;,Monospace;
background-color:#333;
color:white;
padding:0.5em 1em;
word-wrap:normal;
white-space:pre;
overflow:auto;
}
#comment-holder blockquote,
#comment-holder b[rel=&quot;quote&quot;] {
margin:0 2%;
background-color:#eee;
padding:1em 1.2em;
border-left:4px solid #7498AD;
display:block;
font-weight:bold;
font-style:italic;
}
#comment-holder i[rel=&quot;image&quot;],
#comment-holder i[rel=&quot;youtube&quot;] {
display:block;
overflow:hidden;
border:2px solid black;
position:relative;
width:170px;
height:100px;
margin:0 auto 30px;
}
#comment-holder i[rel=&quot;image&quot;]:before,
#comment-holder i[rel=&quot;youtube&quot;]:before {
content:&quot;Please enable your JavaScript to see this image!&quot;;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:red;
color:white;
font-weight:bold;
text-align:center;
padding:15px 0;
}
#comment-holder i[rel=&quot;youtube&quot;]:before {
content:&quot;Please enable your JavaScript to watch this video!&quot;;
}
</style>
2. Kemudian Letakan kode berikut ini diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Emoticon bar before comment-form
$(function() {
$(putEmoAbove)
.before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer <br/><b>Click to see the code!</b><br/>To insert emoticon you must added at least one space before the code.</div>');
var emo = function(emo, imgRep, emoKey) {
$(emoRange)
.each(function() {
$(this)
.html($(this)
.html()
.replace(/<br>:/g, "<br> :")
.replace(/<br>;/g, "<br> ;")
.replace(/<br>=/g, "<br> =")
.replace(/<br>\^/g, "<br> ^")
.replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
});
};
emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwCeghz0Ehb3SC0tdKnthdJ2THHKlkCjunsKdg93K2JMKcH3svlmM0jJpGo3GArVAWTj9c_7GIWvtNYDpF0Q8_ETXiWc9MkV_wQBfrmMH3zBw23HW9Jp6bAqv3oyaiBuWzwiRwFa5Mq4/s36/03.gif", ":))");
emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs698u1qWa6C7TOqKDSFr47MXPXPWU7Q7Zr7dfwDAiFhCF_Bc0JT_yfy4ILlTn8WTfKK8t5-bQu5ClqXaBOrRdxNGJZ2fYq9MHqdhPoLObAuixpEKUS65-4ua2o6oNo68wwBbBo6uJGnI/s47/06.gif", ";((");
emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukPjMd3O_a6FiN-v9v7sOJN4ElDRfPrEcgNlzLCrW7qp2scXebJayAbqevZMHgzybmQ2Xq13HaQ7c3bF7h_JqhLtuc97bupLxWtlXbbFvzWL5hGs05nhc3OkYDuypZUmSUiu28xMqYeI/s36/01.gif", ":)");
emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6i_zJCGnLAObJozdQ6ufnkeEhvCHI2K5M7x9yLa6-uSIdAj8OT1DwsE5W_gPhd_RG7HN3Fknb9Qru0p8qQ3G2OqppGwNiccsxnELfFvaEifus_6ON4fN_jaHzNv-1lgyuD-Cdi7rEc7U/s36/02.gif", ":-)");
emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a9y1nznoT8f-CnsUK1SjdLPpF0LMiYPWIbTjwqMcoh2hrKK9-d0_r_8275bOTIGybhU8t00g8P1DH3Rya-Q7CBGjXAnx1kXY9NLLEqawo2aZubY7YjYw1u3K9tz8sPGX_SY4PsoiaI8/s36/03a.gif", "=))");
emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_CEvs7lbCqPtFnW3An7-AQbwbyQaYyHQl3ZHgwddlgfnAJyPn17WjqtZbfM3x279C34bn1RxU2WMjPlOUoyACS4en4-F0_PbvB6-HGnmaEiA2-5bbOy_zfoihKa5Xk6QHbr28lQqorc/s36/04.gif", ";(");
emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREl17jIdg3pJflrdNIcRhH4hCDQ3nHXqz3cIGiODFAnZI6q9yH0vjrP7vysRW_jY-AWKoKszpC0lxs70N7gaU_apgsf_YInNquk4Td9gr1IoTsSGxwagbQ9mmEcjQUfA4T5sLZWDyMPk/s36/05.gif", ";-(");
emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYaw4_pDVbPBdOg86plUj6Vsmes3MevnFL_jJT-Mt1MXMmwINK3Tu_PwNcNWbg_gthOflcxzQQNbjql9E2ww3eXz4n6LLBGoUD3YOvhyphenhyphenNLxNMGfqRyFlNQOGjiR4-Oc44uzvvRmfs2w0/s36/7.gif", ":d");
emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiW7xXVgF6VzBktedvWdepj9yhsIFVULyLQqz7vOIzKCgrOsBgvBMvgrc83jRzMe9lfUJhwDj4MpuVcqNW2HsO9bS0dXwuSrFLslmIXJdJVCxa3WH45m2MbotBCmtAGEib_a7TzfAxbsI/s36/8.gif", ":-d");
emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGjDUjh5NdY5yMyuQ4Ghu9GNiZTzJOdcEpmrItiaB_0S261RCjLz7yyqRWdD8LITSEcnBJX9CLAR4qloCSSgSyomkQzfMmg2ujxEjx9v4nSMs5FCeN1ooEs_G62mJSc5_Sf4nLCxQpNI/s36/09.gif", "@-)");
emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWluVpmLIQUEqZ_vQrQK51w6RYux5pEd_1D81bUIlwdRtNJjyynA1DpTzGNBlFZXbxA9KyrSL_RujY4fzh05v8NYZxm9VEWHlBG2OfiqnzhmtBHNRQGvZ5SX-Breq9P7Uw4q7cM7vFQQ/s36/10.gif", ":p");
emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljcEwohp-YCMPBVWpzBmSst3x42BK3M4bIbIbKfHXyjJsHYZUPFS-eSyksa0d-3Z87Lfm3hxWnSrjjwkPL9V9NLYI6wyWSTQx_NFOoN7y2y7b6cc_suQmiGTuTQ95mMI0qh8AQ-y6Nzk/s36/11.gif", ":o");
emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhY5aanjqYkoZTEdVsr5OhpCNY7Nyz4uxwPwt5HHPhq8GwCEk7YVqi3_pZkkevAjcoiFbuanaV5BPlOyZ6UkfwJsg_kCJz_1qwzNqH6Jj4ub7xTnrblODxmNqb8TRfRatfQVgHgyvGbEQ/s36/12.gif", ":&gt;)");
emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aGgE0ZVdQ-gFNfeFzS2wUTpAjEyEMz7b6l3Kk3wDlAX35u8o5zbaZRQes1BQDEeBiECkcbCulMUllA4czd1q9-wZGBHFoY6EsBDiaHb0nn7Q5VMSBdtwIJ-Q3kC68sXpJpaHtFIEx2g/s36/13.gif", "(o)");
emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-jGbMLLzgm3imfbKciwCGbBXZkdCNZAaapLsq4Q4M4DCCuSbTnVgJadyXxIp1O03oMH3gaHyFsfrGH0TxLek7sKWbvJXcHQL1aIB76eu8iuYPNLyRu4yApapBeHzgu8YvqnRHn5p3NnU/s36/14.gif", "[-(");
emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1P-o8Mf-MmQwIv0TwqPE3qU55QuZcB8zncF4awUUVzr3DgnvenEFEIvs_3e5WBKnc8fA3p735U65xCcFiB7eXHbf0xYGewOQUhCkA6Un0csf83upuE3lYSlyDG4oT8MgK5UYijLap7g/s36/15.gif", ":-?");
emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndlu_G-SzZWkqCEtDItxMWkjtZ3JaKB5BTbrpb6PZk-DBhqs25C083LaV31fr-I-PvTN3CZjbPVoMPu4Zw0lx1kcDaeRTidOBnsoT7o0jpaiz5jlZPnIe3O4Ot0pVdxMX-gGAc-0UkmA/s36/16.gif", "(p)");
emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_MZIaxkoqksY53kXeehvpbuznS7c10gmxILa5JM61rILFpQsrmAh8Pi_vuaY80UNH6XYbIjzcMEmmNXEHduMAnlqszUWBUdB4ZLRWLquaMclwCHxf3T-oxFWJEtFjfMktjETXlIgPCw/s36/17.gif", ":-s");
emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT73A_YQ9yCNVUgyowiT6Mw4sY7UNKq6VYjgmCQeYKT3stJdmVBPyBEYSJxiX9vEdkHKrQ3FvIQLgQW9DNFtshXR1sjpnzp1JXgOGYQQg84LA4btfxoh9wcX68jw55tgYqDz9KHyJTgRs/s36/18.gif", "(m)");
emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoyYgp1FZ4fqlPVEVyqybv2M_DxvrPtuNU759relKAtON_diC-XhzJwV3My4ElBai-PW0Ys3Lc_AK7czWpQNV0BQkYE5564dbGFLxhe7qBOeYTn-baYev8WEBg-GKzuBzVyDeu8em6DZQ/s36/19.gif", "8-)");
emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDibGGL5WArM_LKIBW-_gC6lr8_hdE68NIMo9l1QI1XPmOSaZ1N1xSUGU4QikcL5m56OuVGfnMTgvxavgqUlKofuVVnIcFKv3uLAI_oG1WQvOESN7mAjPYcLHUiZnbr7xPEpj1-d8Bjw/s36/20.gif", ":-t");
emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95rifuW207G9XH5a2pkfHzcpCsl2G75-ERHejvZv2Ck-gA8ueHuvScMKzedv1WA9vE3fIk7fenJOrjLdvJpBroetFFZooEaXpnkZs1zMFya5jis4uL59GonBoWnVvY2g4s_3-bXAuhh4/s36/21.gif", ":-b");
emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIWgEBne1xGgoLR6nkOdk8xGgbPBfa2RuwrV72owOf95bVs_DC7vy0t6f8j_AoqD_WetEUDdSdA76IupwrIJu5XlVwSlAWbuIMwhFOE6gg9zS2hybk8X_kTn6MzjzLAHJ78tsuxsG4dA/s35/22.gif", "b-(");
emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rWkHZN53XaAmL9wzXjwTNnsL9eG4dMjgOPoHBo1iaXgCyoCbQR0xvh8VI8P9msol_pe5A-mdd-Z5rsGQF4c6wp_fWn62JjU9LjDkAtWZ2mrLjAF6yWGhde_x9H9q4XW23fvMF3Epqq8/s36/23.gif", ":-#");
emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2laUvnNxHJjv083hn-Ge9KbVMjsUxgEyk9btOlCQsAbh6-yhnl3p4C6iZqFtrC015Ku9q-8G4ha-ximqRtGsdrkiSrbeg6lzPth5WPQs1VTdxz-LHtyOfm63Bnt6ypT7ibW5nKVBU7U/s36/24.gif", "=p~");
emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZn7mGJ3F9YH2XJGBTaHBxVAmu-elhZl5e1EL6qJhc8LTRyDxp4lwOxkk6A94oRN8tfXJ4PJ6IkQhxljv37pU7O4_7S9tjNIs6tn9f9ufIrmsGdMHNS41F3h_gHIIxX1U0dAFTohvivEQ/s36/25.gif", "$-)");
emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ML984UcG8CqT-Ksn-EfJzG2Op8YTKnPv7tXVVp3CK9Phx1IHnsZIBw_tAyVTWr2XsXdZ38uBWzBQ1ihEFtPmmnWsjnNOmV-XsEHEenpFa_PRn2H1gFmN6tl2nRuWYPwAGcXz-7W1Qhk/s36/26.gif", "(b)");
emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPMq9vI4gQHE-usmTuW_3jiXGotsRbYCoVAX7wVp1XiiA23fw17Zgz3Wagc_4pRWyDxCx3Lv0jKAcU6v-I59JkCp1B3tjV31yzKMzPr4n2ndThSX2V9pGsTo2qNrTy9xWxrcJUjAdYxw/s36/27.gif'", "(f)");
emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCfGErFX2FHLpEVUF8LJAHjnE7eF_nvF74nXw-wJZnLP6sKR0DRG07vkGevieuAdcW21H4UFRpHOxsboTNZr7LIMo2BeUJEbLpJXM_ERijxFan6akjOGrF6UHRS1wldEYfYM7TzWIcFfg/s36/28.gif", "x-)");
emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKymcaS5_uWobIqEmAZVuOQc0gLXGL-mRAKVv7pkwUiKMOfeAzVcSDC_dimEsMIE-EbtXgjO8Fiw5yryPkudK4uQb-wGIFzCW19Hib4M1pAOulXaeRxelZyED5En7LgaL91rWhpgR3ZVA/s36/29.gif", "(k)");
emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLS6insaASbWUAwaS599IDKGmMBHqpod6dpSLPX90ZP5C9YNvrIVuTV0KJeKNOzr30WYqux0IpIO0KDm5-Lhkm2SHW6VYoOIcst9V9nLoI91dLs-OBrlusvUGYrg6_RVztzWtGGFLaUaA/s36/30.gif", "(h)");
emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwinN0zaj_Zq4doHl_JVW_IlO3oPgQNdkmOUCqYJ0nckZA-yF7YZ6gYe7SkHb-xLbvF0_jZiELtrCagBsbuPTUSVgLIKd1MXeSwLueH0qK6XChmmvYP-73hVSFEjcTzBMWJSQk_z_f9U/s36/31.gif", "(c)");
emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWde6vr_QBlz7fx46EfpCVBK5NbH5ekEy7yyxr2EUoMhwX_oIMv0iCMHtfGAMnvgCO2H4Xf8mVfhL5y_7v8pYns9hK0DaxDtKR2QFMvdAQncKCTzh-BCa-M-W2G-FoamCxrhKMyXjdGU/s36/32.gif", "cheer");

// Show alert one times!
$('div.emoWrap')
.one("click", function() {
if (emoMessage) {
alert(emoMessage);
}
});
// Click to show the code!
$('.emo')
.css('cursor', 'pointer')
.live("click", function(e) {
$('.emoKey')
.remove();
$(this)
.after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
$('.emoKey')
.trigger("select");
e.stopPropagation();
});
$('.emoKey')
.live("click", function() {
$(this)
.focus()
.select();
});
});
function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML,
// Images
b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
// YouTube video
b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
document.getElementById(id).innerHTML = b;
} repText('comment-holder');
//]]>
</script>
3. Simpan template

Untuk cara memasukan gambar, video, kode dll kedalam komentar berikut caranya:
Simak baik-baik
  • Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA</i>
  • Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
  • Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
  • Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
  • Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
  • Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
  • Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
    Dan untuk memasukan emoticon anda bisa klik pada emoticon untuk melihat kodenya, dan jangan lupa untuk memberi spasi di awal simbol/kodenya agar emoticonya bisa tampil
      Demikian postingan kali ini semoga bermanfaat, dan selamat mencoba.. !!

      1 komentar:

      Balas

      Nice posting gan.... Mantap nih blognya... Terimakasih telah berbagi informasi bermanfaat

      Posting Komentar

      Catatan: (memasukan item pada komentar)
      Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
      Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
      Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

      Link aktif akan dimatikan secara otomatis.

      NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

      NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
      Back to Top