Memasukan Item Video, Gambar, Emoticon, Kode Pada Komentar Blogspot

Putra Kefa
Putra Kefa
Memasukan Item Video, Gambar, Emoticon, Kode Pada Komentar Blogspot
Memasukan Item Video, Gambar, Emoticon, Kode Pada Komentar Blogspot, Anaktimor17 Blog - sobat kotak komentar di blog kita bisa di modifikasi sesuai keinginan kita. Salah satunya dengan menambahkan script css yang bisa membuat komentar menjadi lebih interaktif.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.

Pemasangan:

1. Login ke akun Anda >> Edit HTML 
2. cari kode ini </head>
3. salin kode di bawah ini dan pastekan tepat DIATAS kode </head>


<style type='text/css'>
/* Add More Features to the Blogger Comments by Anaktimor17 Blog */
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>

 

4. 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">                         :&gt;)                                                  <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/AVvXsEi7N-RiRVBtQjn8a1Y7kHn1MgUIq5QLl2Oyj4Kb7iQBV70aguB24CmhO14vOlDOr7qNMjX9J_MX7idnGeb6q6GC3C8vMmPVLAqftwPk9gSVwWxX-Oz10UI885pNNwBvdoj_VwkI00sJXvg/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWmMUkAuRC0PqX6y82vsuqa58tx5OlWZhoViojinfwmVtX-RhLRc-jJviZTPrE-0AYjyrn3HZS4bBGpocsjpGnK6Hv5cyY0KCb6EmYpIKMnAJTtIrOx-1DwCRf3xr4k1QKJektDe1qfx8/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhapcdazcFLei4XTAzy32-wyWWtH-bXUWvDWfucb4Q44Gx_vFbcoroELXJheziG_xqSELmenhNG-iwTeWCac4E9KotVa6Ur2Wat23ysajGLCWfXuPFNuks5waN6hGTBhQa8P77bJVkm0Xw/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgthBlFABcGDcV6p1evyiCFrgx_fcdUHDVrHDE6hqRKWCQhAprVKodyNYYGgSfoaFp6JhJqi4fuv7mwaL6cbWISjeU9A-87krXGQYMh-YE9jIjpOJIKtIrJyz_vyOW80Fgki8gmNkl2MDA/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LfraS-PFAKrxWk1LzyeMbcM1oZKjzs4_GQF2_T62b5MJgbO9-ljRtieC_8s2zMhvsql4ueFGxSOi3c0Q92V3QenMg5nwgMUHCnsSdULeuGIQd9Aazz5UiOV-ilCq0mW_wptL_P27i0o/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJFutNqUym2tbkgDOzRtIRf8NXi_CKr7uD-GVAnn1m0OZLR3um65MFFwuFTUVwaLZIOk3deIqp7YKftOFCMgm3SYhBIcOQufWb8TLcN7LeGq56x-hrBlcfW98hI4_ha4nKp7iZLt1l7I/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5eiJY4lszMhu3EOnbXjnZYNjQn8MtgZzP_x7TME4-TA5LPGPMoykHk6kkBh3PnbQYUifgkzOBh1S875NAUPFfiqu1MXYJfT2qUdSE9tab8zM79Zx3cNeH6InSCu6_cIxUCf4ZI9HPHQ/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2Ih3MwTMBTgp0SshX3CyOqbFZPAYNgHrjuyGEmBFVAd45B_IJT7swz3rVoXIcVezrgIO6-A0ExAs4KCmGVTS7TCE-QvCFLSJ2iLNtaklDZTc_RyzwcpCsQhaWEhrUxEnbM593RU2I9w/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivOjM6lOi9APXzId8wXjfnJeyZaeeqTlYWWefr7CLiUpPXxbDouZIb6D73oXN9KFsaUkqIynHI-XWOKScCGk1USX3CQB4oowT1I4_c4ZdBMSW8_uV_XhDrBR1tVG-11uJVrGJ9mlMymYM/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYrDnwwWbFYkkxIebzmyeKzjV4s4wPjzT0ljcB8V7OnbHZwOCe6jUzK1akQaoBXFgWUc905eYRstMsKxyCtM-6DrOoIeV4d_t5qQEYuH5WFHGg2EDEOfGXD6xTqZBKq5QrTfsVbGvwdbo/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6aCD5VIPkGtGXPIH204O96uO4AmRvqo9IRkKZ8_YaVwiggeR5PYgsrX2jnkY2SDUI_4udXFjPzlukQJfJS8REzJSpqTbjSFKF_AAxz5nT9E1cucwcaPgdMWV-5bn_eXjNYu40bp2l_I/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgO6DTU0FFgujKweN7q593w9D0OWF6lp724aTRhdfvhIwdkEnyFALpYd7IPXLuBNjk12NiPPSAE4HOeli3IzMNxnQmpljEg5oUvaIF348LMTODEtJqzDrzDVPYGX83BlXxulTsrOnQYns/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbhqMqYlh4hxjGtBQPqQhWSjVtaongTtrxXsnmvzLW64vh-qCuk_Wa9S0Jv-Rj1vdnLG8TpxnwW8kwg8Tdtr3C5qNMHgiZXnVJFaQvJUfKymnnypoXgWF35nVsFNKX41b2KBQ8_gDzfQ/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfON3LCa2-LutnvB9Mk19HBhhjgmyx9dXB0Sfsjhylm-_DuyWbScEpoyk4USgSLSm_zFY_4jHXJb8tvMM8sg-ZquOcaS35aTOnD86sPLIzSih45VXuBBMjVIntlESnNlmhT13FreUMel4/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwr-tQtaYR0P8J-9aq7ma_ZjAdxI_99y371DaJobV9nIOsSq49dJT0U4vMXXk6mTJkNtOsKrpFz0WPcABvWqXM7QqWcbIFqqbG2ey4DueFcjym5-rHPz3p7a1LAF5DwWlVPeRIVgx670/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguzt0u5BAS9d7gKwu6M2EN1HEZJhFtI48m0njHWPEXENNy3fp7K7GIcBFElEjDE64NTyCYtuT9nC37ITQ0zSLOL_NKJcWQGtZRvz5zn3wMvRHs_rqGq4V41q46JNi0reyUCFfcnQFc6-g/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfx9R2nczqa2317KfEhz40DOICL2W82rJ9_F4H_ZJKIlS9Rzd1K3rHO-WODHkCPXX-Z2qsS7Ua2aVXggfGgVWVjVsn0YzP5DjtEfXxgzM57ZtLkuhGLIz537VrnqS9E2qfWaDM7u0dyA/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpHyrIEvwTnxXC5mo03MqtqcjL4kzWA3_OpKY2U5rhQEQf-raCCBYLZUZr-v0rHIUt1UYtwVupWowK-vVU1pBMyt29cAysYrVhyphenhyphen4o2OMCe0L1-mGTRTs-1q1U5bjU7EmkI9GHAAyLV-U/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePWQxZ6ZUfLz3siP5ppagEhNos3DKHqaU347ePwzspwekV83vzpL9dIcUyQu2GD33CzL_INQYiLx4btdlmaNrPf1KGcrHZ5zHxkKzIFvdZCorM_oFZis0-e0lTq6wtvbY0OpujNHTT9c/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCA_c4cXwy9qFPO14ASzAgEPk7IT6ESbkQdMy5oI7aDB10B3_lsFsj3ijh2E4f-yYziIqev4HBpW_vfzIFfYYZjDJxbdUEuSrkpxFUetoNyphcgpYCY_YxpQUuzSyiqwUn7MamOGTTT6I/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGBg6wJojQRc6jK58cYK-7mDfq2bBEGaiB586esNKZg7nDTvQsnikVRaFS3wmTuoXdEshH86X-ym7x6NziFfHlJkGb7hwqEzL17__XBV68eGUCeTORh00_BmGEAB5EccaARSOcai3yQw/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdlzWRckJKzTnB7tsm-U4hntb9Od0NCv_ftS-5TtF4E6Weqy2H8c07C-0Nm4CkjZ38w2ddpGStyjsWTYLExAgnKLJNIi4soNuGEt0GHveZ6odbo57P0lNI8oaimtysad04CHHxHGwUio/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfIO8p-IWc8jwKi0CKQrSzaH9hSH1-dpjeR9dvcV1WBrIDPs1VvuRFtejCUMc2J4OCiLkYaQlXtCs-KatXOMsdvbNsrHKthDJhRi-VZfJTsFFS0XIkSEEQXtekgGxrye81UTxKxetbdz0/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmJLcEi_m9HxZ8_ITBbukqaT16-gL5BL1LYrEZ_Gbx-ASfLgdkCKUFZ-RcnPRchKm8r1_blZ4aaW0qrm_hZqHgwGn6rXCpcXZhL-GtEazP1m9cGEBuZttjP5lFHTa6j5F_ecuAmWWIF8/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5iwJ_cjcaYhFe8sJSPzn0TpS3NyDUv_Y4YaekOLNWKrC2xVotIUQsQbBHEZT284SvEUsF8S_y2Gn1G1z02Ffqj_F1kK4tKqcfy2Nph7NhrpfZ2XRYWWPnfWtR0eqeHgHjIjD5VJrAAs8/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCc-pw46MflBVFymYGgPMQotDOxt8Om3usEgqIoYIKSwfquTnk8rorPSSGa9p13kYLwvawVW3px803RGy6ZIDlDG5TXXJV01ZMobUcKfPV4kn-4W_Utz5yNOVJBfCnrF4n9V2xPCVmWIQ/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5DMJDLwWZlgam-1kI_rEXv_pL_nuByIb0iHOWFM8aeYRkpj_nL6dWJpBj0TbvcppM95etv5PmEJ_YtBtqDjh_Wkxqqck4MCL1S0T90Op9M_qmTrSC6hNBLJvjxRrwKA_uxGbdDTRiLLg/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWArD-lTVo2p63BE_Bq3ddsIMy5sAKCW-hyV_WPAjudNs94sDE0-tn9NVlRr4DrznRK8pPxmC4K8O8pKYnWUv8c7tV6bWafyS8bKIi0ChBbZdI6bLOcR7GSoKcOPUM15Pg_CSJDjhaDg/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNUAqbhyopcuzpLCujjtcbNea-mpvsYkpp6zNhj6t4jwV_LQfmpf2-IF44mByY1xPoGyBWSTsrt4kKWv31xYmbqI9aW3XSM-hTZi3W8AqejiDez1T3lV8puN74UtnjzdJaNcMbqyGqSg/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz5SiMy5CP5Pct6pOmci4gBOwKgZWCQgabaHh8p__GXLxQ3JoNTFa1IRcFehu2CccryqmUALh_FEktEpsFtobR7Lu4b31efjlbzzngaatrWnhLm-0Nn87eNyg5UA4CXWHs92R330rPHrU/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK30D3eoi5rrnrvggc5ane8Gzsb7aaRmUSZHpaUk3Xiy3xgjF26kEhkIacr27KljYybLeZRymNZCwcJND8zp0Y3r46Vpp2vi8JYd8-aUtFJ_EwWyZNhDcfTeGAck_WOqifbjMQMA3Syw8/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBatGyUvEKjx99SVhKgourRcg-fqQYD2oqwANCagzHJVSB1TzqxgDW-16BaQELrWGoTYTEvfvHMeUVFlspmSAkvuB2BzHoCo9hb97dduYoSMp1tg0eUyVD9eHpSdrkhBJwQf-mlp8MIdA/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMGFTkzoaPTd7JfJFFv9NtpqFBANr1lU2k_K6AX7jn7RgklHoTwYPB8p-5b8xOdMrWelLoJopJ29q1G4FUylaCqI9eeV_235r-aep3YDk8qiRhgj1lK6exAemzTYYA_eO-KS9oXOnkhyphenhyphenY/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>
 




5. Simpan template Anda

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
Selamat mencoba, semoga berhasil. Happy Blogging !!
css tips dan trik blogger blogspot Widget
1 comment
  1. Anonymous
    Keren Bro, saya sudah coba dan berhasil .
    visit back yah :D
    Reply