Efek Thread Comment Bertingkat Hanya dengan CSS Efek Thread Comment Bertingkat Hanya dengan CSS

salin kode ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* Efek thread-comment bertingkat hanya dengan CSS
 * Level tingkatan dibuat dengan cara menuliskan margin-left dengan nilai yang berbeda
 */
.comments .thread-toggle {
  margin-bottom:10px;
}

.comments .comment-thread.inline-thread .comment .comment-block {
  margin-left:52px;
}

.comments .comment-thread.inline-thread .comment {
  margin:0px 0px 5px 30%; /* Level 6+ */
  background-color:#222;
  border:1px solid #333;
  padding:10px 15px;
  color:#ccc;
}

.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; } /* Level 1 */

Klik Simpan Template.




emoticon otomatis with jquery emoticon otomatis with jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

letakkan code diatas sebelum code </head>
kalo di template anda sudah ada jangan di dipasang lagi...

lalu masukkan code yang dibawah ini sebelum code </body>
 

<script type='text/javascript'>

    window.setTimeout(function() {

        document.body.className = document.body.className.replace('loading', '');

      }, 10);

  </script>

  <b:include data='blog' name='google-analytics'/>

<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.";



// 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, "http://devilzc0de.org/forum/images/smilies/wawa.gif", ":))");

    emo(/\s;\(\(+/g, "http://devilzc0de.org/forum/images/smilies/ngambek.gif", ";((");

 emo(/\s:\)+/g, "http://devilzc0de.org/forum/images/smilies/top.gif", ":)");

 emo(/\s:-\)+/g, "http://devilzc0de.org/forum/images/smilies/ngakak.gif", ":-)");

    emo(/\s=\)\)+/g, "http://devilzc0de.org/forum/images/smilies/muntah.gif", "=))");

    emo(/\s;\(+/g, "http://devilzc0de.org/forum/images/smilies/mewek.gif", ";(");

    emo(/\s;-\(+/g, "http://devilzc0de.org/forum/images/smilies/nangis.gif", ";-(");

    emo(/\s:d/ig, "http://devilzc0de.org/forum/images/smilies/curiga.gif", ":d");

    emo(/\s:-d/ig, "http://devilzc0de.org/forum/images/smilies/cuteboy.gif", ":-d");

    emo(/\s@-\)+/g, "http://devilzc0de.org/forum/images/smilies/pusing.gif", "@-)");

    emo(/\s:p/ig, "http://devilzc0de.org/forum/images/smilies/camb.gif", ":p");

    emo(/\s:o/ig, "http://devilzc0de.org/forum/images/smilies/hah.gif", ":o");

    emo(/\s:&gt;\)+/g, "http://devilzc0de.org/forum/images/smilies/bodo.gif", ":&gt;)");

    emo(/\s\(o\)+/ig, "http://devilzc0de.org/forum/images/smilies/angel1.gif", "(o)");

    emo(/\s\[-\(+/g, "http://devilzc0de.org/forum/images/smilies/siapinpisau.gif", "[-(");

    emo(/\s:-\?/g, "http://devilzc0de.org/forum/images/smilies/bingung.gif", ":-?");

    emo(/\s\(p\)+/ig, "http://devilzc0de.org/forum/images/smilies/mohon.gif", "(p)");

    emo(/\s:-s/ig, "http://devilzc0de.org/forum/images/smilies/bangga.gif", ":-s");

    emo(/\s\(m\)+/ig, "http://devilzc0de.org/forum/images/smilies/capedeh.gif", "(m)");

    emo(/\s8-\)+/ig, "http://devilzc0de.org/forum/images/smilies/ngasep.gif", "8-)");

    emo(/\s:-t/ig, "http://devilzc0de.org/forum/images/smilies/siul.gif", ":-t");

    emo(/\s:-b/ig, "http://devilzc0de.org/forum/images/smilies/gengster.gif", ":-b");

    emo(/\sb-\(+/ig, "http://devilzc0de.org/forum/images/smilies/cium.gif", "b-(");

    emo(/\s:-#/ig, "http://devilzc0de.org/forum/images/smilies/dingin.gif", ":-#");

    emo(/\s=p~/ig, "http://devilzc0de.org/forum/images/smilies/cheer.gif", "=p~");

    emo(/\s\$-\)+/ig, "http://devilzc0de.org/forum/images/smilies/relax.gif", "$-)");

    emo(/\s\(b\)+/ig, "http://devilzc0de.org/forum/images/smilies/bacit.gif", "(b)");

    emo(/\s\(f\)+/ig, "http://devilzc0de.org/forum/images/smilies/rocker.gif'", "(f)");

    emo(/\sx-\)+/ig, "http://devilzc0de.org/forum/images/smilies/wow.gif", "x-)");

    emo(/\s\(k\)+/ig, "http://devilzc0de.org/forum/images/smilies/tolong.gif", "(k)");

    emo(/\s\(h\)+/ig, "http://devilzc0de.org/forum/images/smilies/tagih.gif", "(h)");

    emo(/\s\(c\)+/ig, "http://devilzc0de.org/forum/images/smilies/batuk.gif", "(c)");

    emo(/\scheer/ig, "http://devilzc0de.org/forum/images/smilies/chaer.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();

    });



});

//]]>

</script>

pesan emoticon nya tidak tampil diatas kotak komentar..
masukkan code di bawah ini di:
setting -->>post and comment -->>Comment Form Message -->taruh kode nya di kotak yg tersedia....

:)   :))  ;((  :-)  =))   ;(   ;-(  :d   :-d   
@-)  :p  :o  :>)  (o)  [-(  :-?  (p)  :-s  (m)  8-)  :-t  :-b  b-(  :-#  =p~  $-)  (b)  (f)  x-)  (k)  (h)  (c)  cheer.....

Click to see the code!

To insert emoticon you must added at least one space before the code.

demo nya seperti punya saya.....

Mengganti gambar anonim di blogger Mengganti gambar anonim di blogger

Dengan kode ini sobat dapat mengganti gambar anonim di blog sobat

letakan kode javascript ini di atas kode:
</body>

<script type='text/javascript'>
//<![CDATA[
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'url gambar anda')
.ssyby('blank')
//]]>
</script>

Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli

Mengaktifkan Modifikasi Fitur Komentar Bersarang pada Blogger

Pertama-tama buka editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
]]></b:skin>
Salin kode CSS ini dan letakkan di atasnya:

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

.clearfix {*zoom:1}

.pull-left {
  display:block;
  float:left;
}

.pull-right {
  display:block;
  float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
  margin:3em 0 0;
  font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
  letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
  color:#2143B4;
  text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
  margin:0 0 1em;
  padding:0 0 .7em 0;
  border-bottom:1px solid #eee;
  position:relative;
}

/* comment header */
.custom-comments .comment-header {
  overflow:hidden;
  margin:0 0 1em 0;
}

/* avatar area */
.custom-comments .avatar-box {
  width:65px;
  margin:0 0 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
  border:none;
  padding:0 0;
  margin:0 0;
  float:none;
  display:block;
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
}

.custom-comments .avatar-image-container img {
  border:1px solid #ddd;
  padding:4px;
  background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin:0 0 2em 75px}

/* comment reply */
.custom-comments .comment-reply {
  margin:1em 0 0 75px;
  padding:1em 1.2em;
  background-color:#FFF7D1;
  position:relative;
  font-size:11px;
}

.custom-comments .comment-reply:after {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:0;
  left:0;
  border:10px solid transparent;
  border-color:white #F5F2D8 #F5F2D8 white;
}

.custom-comments .comment-reply .user {margin-left:15px}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
  border-color:#EAE5C4;
  background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
  display:block;
  clear:both;
  margin:1em 0 .5em 75px;
  text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
  border:1px solid #ddd;
  outline:none;
  padding:2px .7em 3px .5em;
  margin:0 0 0 4px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
  border-color:#bbb;
  text-decoration:none;
}

.custom-comments .comment-bottom-line a:active,
.custom-comments .comment-bottom-line a:focus,
.custom-comments .cancel-reply-btn:active,
.custom-comments .cancel-reply-btn:focus {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
  margin:1em 0 2em;
  clear:both;
}

.custom-comments .comment-item .custom-comment-form {
  border:1px solid #eee;
  padding:1em .2em 2em 1.5em;
  margin-left:75px;
}

.custom-comments #comment-editor {
  max-width:none;
  width:100%;
  height:250px;
  border:none;
  background:none;
}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
  font-style:italic;
  color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
  font-size:100%;
  display:block;
  float:none;
  width:auto;
  clear:both;
  border:1px solid #eee;
  padding:.5em 1em;
  overflow:hidden;
}

/* Author Comments Style: Do whatever you want with this! */
.author-comment .comment-item {}
.author-comment .comment-header {}
.author-comment .avatar-box {}
.author-comment .comment-body {}

Kemudian cari kode ini:
<b:includable id='comments' var='post'>
Salin kode ini, dan letakkan di atasnya:

<b:includable id='custom-comments' var='post'>
  <section class='custom-comments' id='custom-comments'>
    <b:if cond='data:post.allowComments'>

    <h4>
      <b:if cond='data:post.numComments == 1'>
        <span>1</span>&amp;nbsp;<data:commentLabel/>
      <b:else/>
        <span><data:post.numComments/></span>&amp;nbsp;<data:commentLabelPlural/>
      </b:if>
    </h4>

    <b:if cond='data:post.commentPagingRequired'>
      <nav class='paging-control-container'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
        <data:post.commentRangeText/>&#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
      </nav>
    </b:if>

    <div id='comments-area'>
      <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.inReplyTo'><b:else/>
          <b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
          <div class='comment-item clearfix' expr:id='data:comment.anchorName'>
            <div class='comment-header clearfix'>
              <strong class='user pull-left'>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if> <data:commentPostedByMsg/>
              </strong>
              <a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
            </div> <!-- comment-header -->
            <div class='avatar-box pull-left'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
            </div> <!-- avatar-box -->
            <div class='comment-body'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <data:comment.body/>
              </b:if>
            </div> <!-- comment-body -->
            <b:loop values='data:post.comments' var='replies'>
              <b:if cond='data:replies.inReplyTo == data:comment.id'>
                <b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
                <div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
                  <div class='comment-header clearfix'>
                    <strong class='user pull-left'>
                    <b:if cond='data:replies.authorUrl'>
                      <a expr:href='data:replies.authorUrl' rel='nofollow'><data:replies.author/></a>
                    <b:else/>
                      <data:replies.author/>
                    </b:if> <data:commentPostedByMsg/>
                    </strong>
                    <a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
                  </div> <!-- reply comment-header -->
                  <div class='avatar-box pull-left'>
                    <b:if cond='data:replies.favicon'>
                      <img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                    </b:if>
                    <b:if cond='data:blog.enabledCommentProfileImages'>
                      <data:replies.authorAvatarImage/>
                    </b:if>
                  </div> <!-- reply avatar-box -->
                  <div class='comment-body'>
                    <b:if cond='data:replies.isDeleted'>
                      <span class='deleted-comment'><data:replies.body/></span>
                    <b:else/>
                      <data:replies.body/>
                    </b:if>
                  </div> <!-- reply comment-body -->
                  <span class='comment-bottom-line'>
                    &lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:replies.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;
                  </span>
                </div> <!-- reply comment-reply -->
                <b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
              </b:if> <!-- replies.inReplyTo -->
            </b:loop>
            <span class='comment-bottom-line'>
              <b:if cond='data:comment.isDeleted != &quot;true&quot;'>&lt;a class=&#39;reply-btn&#39; data-icon=&#39;&amp;dArr;&#39; href=&#39;javascript:replyTo(&quot;<data:comment.id/>&quot;);&#39;&gt;Reply&lt;/a&gt;</b:if>&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:comment.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;
            </span>
            <div expr:id='&quot;form-container-&quot; + data:comment.id'/>
          </div> <!-- comment-item -->
          <b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
        </b:if> <!-- comment.inReplyTo -->
      </b:loop>
    </div>

    <b:if cond='data:post.commentPagingRequired'>
      <nav class='paging-control-container'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
        <data:post.commentRangeText/>&#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
      </nav>
    </b:if>

    <div class='custom-comment-form' id='custom-comment-form'>
      <h4><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <div class='custom-comment-editor-wrapper'>
        <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
      </div>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
      <a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Reply</a>
    </div>

<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
    var frame = document.getElementById('comment-editor'),
        form = document.getElementById('custom-comment-form'),
        container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
        part = originalSource;
    frame.style.height = "50px";
    frame.style.visibility = "hidden";
    frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
    container.insertBefore(form, null);
    frame.onload = function() {
        this.style.height = "250px";
        this.style.visibility = "visible";
    };
}
//]]>
</script>

    </b:if>
  </section>
</b:includable>

Terakhir tinggal mengaktifkan fitur komentar kita. Cari semua kode yang tampak seperti ini:
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:

<b:include data='post' name='custom-comments'/>

Klik Simpan Template.

Konfigurasi

Kode-kode yang Saya beri tanda adalah label-label tombol dan bisa Anda ganti teksnya sesuka hati, sesuai dengan bahasa pada negara dimana Anda tinggal (Beberapa teksnya ada yang terletak jauh di sebelah kanan, mohon gulung kontainer kodenya ke kanan sekali-kali).
Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .author-comment untuk menandai komentar penulis. Sebagai contoh, Saya akan memberikan border warna merah dan latar warna kuning pada komentar administrator, maka yang harus Anda lakukan adalah seperti ini:

.custom-comments .author-comment .comment-item {
  border:5px solid #900;
  background-color:#ff0;
}

Mengizinkan elemen terlarang masuk ke dalam komentar Mengizinkan elemen terlarang masuk ke dalam komentar

Cara Memasang Fitur Ini

Pertama-tama masuklah ke halaman editor HTML blog Anda. Klik Edit HTML dan klik Lanjutkan:

Mengedit HTML

Temukan kode ini:
</head>
Salin kode CSS ini dan letakkan di atasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}

#comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",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="quote"] {
  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="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}

#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  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="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}
</style>
</b:if>

setelah itu temukan kode ini:
</body>
Salin kode ini dan letakkan di atasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
// Add More Features to the Blogger Comments
// Fix some bugs that I got from some similar code out here :)
// Date: 21 May 2012
// Time: 22:50 WIB
// Author: Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
function repText(id) {
    var a = (document.getElementById(id)) ? document.getElementById(id) : "",
        b = (a !== "") ? a.innerHTML : a,
        c = "http://reader-download.googlecode.com/svn/trunk/images/emo/";
        // 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>");
        // Code & text block
        b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
        b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
        b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
        b = b.replace(/\[code\](.*?)\[\/code\]/ig, "<code>$1<\/code>");
        b = b.replace(/\[pre\](.*?)\[\/pre\]/ig, "<pre>$1<\/pre>");
        b = b.replace(/\[blockquote\](.*?)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
        // Finishing YouTube and Reduce filesize from images that uploaded by Blogger
        b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
        b = b.replace(/\/s(640|1600)/g, "/s400");
        // Emoticons
        b = b.replace(/\s:\)+/g, " <img class='emo' alt='emo' src='" + c + "smile.gif'\/>");
        b = b.replace(/\s;\)+/g, " <img class='emo' alt='emo' src='" + c + "wink.gif'\/>");
        b = b.replace(/\s:\(/g, " <img class='emo' alt='emo' src='" + c + "sad.gif'\/>");
        b = b.replace(/\s=\(/g, " <img class='emo' alt='emo' src='" + c + "sadanimated.gif'\/>");
        b = b.replace(/\s@@,/g, " <img class='emo' alt='emo' src='" + c + "rolleyes.gif'\/>");
        b = b.replace(/\s:s/ig, " <img class='emo' alt='emo' src='" + c + "sullen.gif'\/>");
        b = b.replace(/\s:(\\|\/)/g, " <img class='emo' alt='emo' src='" + c + "memble.gif'\/>");
        b = b.replace(/\s:D/g, " <img class='emo' alt='emo' src='" + c + "haha.gif'\/>");
        b = b.replace(/\s=D/g, " <img class='emo' alt='emo' src='" + c + "hihi.gif'\/>");
        b = b.replace(/\s\^:D/g, " <img class='emo' alt='emo' src='" + c + "abovemehaha.gif'\/>");
        b = b.replace(/\s\^(\_|)\^/g, " <img class='emo' alt='emo' src='" + c + "senyum-tulus.gif'\/>");
        b = b.replace(/\s:'\(/g, " <img class='emo' alt='emo' src='" + c + "cry.gif'\/>");
        b = b.replace(/\sT_T/ig, " <img class='emo' alt='emo' src='" + c + "tears.gif'\/>");
        b = b.replace(/\sB\)/g, " <img class='emo' alt='emo' src='" + c + "cool.gif'\/>");
        b = b.replace(/\s:Q/ig, " <img class='emo' alt='emo' src='" + c + "smoking.gif'\/>");
        b = b.replace(/\s7:\(/g, " <img class='emo' alt='emo' src='" + c + "conf.gif'\/>");
        b = b.replace(/\s:p/ig, " <img class='emo' alt='emo' src='" + c + "wee.gif'\/>");
        b = b.replace(/\s:Oz+/ig, " <img class='emo' alt='emo' src='" + c + "sleep.gif'\/>");
        b = b.replace(/\s7:O/ig, " <img class='emo' alt='emo' src='" + c + "angry.gif'\/>");
        b = b.replace(/\s\\o\//ig, " <img class='emo' alt='emo' src='" + c + "applause.gif'\/>");
        b = b.replace(/\s\\m\//ig, " <img class='emo' alt='emo' src='" + c + "metal.gif'\/>");
        b = b.replace(/\s(&lt;3|:\*)/ig, " <img class='emo' alt='emo' src='" + c + "love.gif'\/>");
        b = b.replace(/\s0:\)+/ig, " <img class='emo' alt='emo' src='" + c + "angelgreen.gif'\/>");
        b = b.replace(/\s\^o\^/ig, " <img class='emo' alt='emo' src='" + c + "angelwhite.gif'\/>");
        b = b.replace(/\s:-a/ig, " <img class='emo' alt='emo' src='" + c + "vomit.gif'\/>");
        b = b.replace(/\s\*fck\*/ig, " <img class='emo' alt='emo' src='" + c + "fuck.gif'\/>");
        b = b.replace(/\sxV/ig, " <img class='emo' alt='emo' src='" + c + "demo.gif'\/>");
        b = b.replace(/\sx\@/g, " <img class='emo' alt='emo' src='" + c + "marahbesar.gif'\/>");
        b = b.replace(/\s\X\@/g, " <img class='emo' alt='emo' src='" + c + "arrgh.gif'\/>");
        b = b.replace(/\s:-d/ig, " <img class='emo' alt='emo' src='" + c + "top.gif'\/>");
        b = b.replace(/\s:-bd/ig, " <img class='emo' alt='emo' src='" + c + "topmarkotop.gif'\/>");
        b = b.replace(/\s\~x\(+/ig, " <img class='emo' alt='emo' src='" + c + "ugh.gif'\/>");
        b = b.replace(/\s:W/g, " <img class='emo' alt='emo' src='" + c + "explain.gif'\/>");
        b = b.replace(/\s\'\'J/ig, " <img class='emo' alt='emo' src='" + c + "call.gif'\/>");
    if (document.getElementById(id)) {
        document.getElementById(id).innerHTML = b;
    }
} repText('comment-holder');
//]]>
</script>
</b:if>

Klik Simpan Template.

Pembaharuan: Mengganti pola /(.[^>]*)<\/tag>/ig dan /\[bracket\](.[^\]]*)\[\/bracket\]/ig menjadi /(.*?)<\/tag>/ig dan /\[bracket\](.*?)\[\/bracket\]/ig untuk meloloskan tag
di dalam tag manipulasi.

Penerapan Kode-Kode Manipulasi

Saya memberikan dua pilihan, yaitu menggunakan tag HTML dengan target manipulasi yang diambil berdasarkan atribut rel dan menggunakan kata-kata kunci yang dimasukkan ke dalam braket kotak sebagai penggambaran tag HTML. Saya merekomendasikan Anda untuk menggunakan tag HTML karena mereka masih bisa bekerja tanpa JavaScript (ini juga merupakan standar manipulasi komponen komentar di blog Saya):

Perintah	Format
Memasukkan gambar	<i rel="image">URL Gambar</i>
	[img]URL Gambar[/img]
Memasukkan video YouTube	<i rel="youtube">URL YouTube</i>
	[youtube]URL YouTube[/youtube]
Memasukkan tag <code>	<i rel="code">Kode Anda</i>
	[code]Kode Anda[/code]
Memasukkan tag <pre>	<i rel="pre">Kode Anda</i>
	[pre]Kode Anda[/pre]
Memasukkan kuota	<b rel="quote">Kata-kata Anda</b>
	[blockquote]Kata-kata Anda[/blockquote]
Memasukkan emotikon	Beberapa kode yang bisa digunakan: :) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ &lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada

<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):

<div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>

    Seluruh konten di bagian ini akan menghilang jika
    Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung
    menuliskan komentar baru.

  </b:if>
</div>

Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.
Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:

Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.

Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kekuasaan kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:

<div class='comments' id='comments'>
  ...
</div>

Kemudian cari elemen ini:

<b:include data='post' name='comment-form'/>

Ganti dengan ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='comment-form'/>
</b:if>

Temukan juga kode ini:

<b:include data='post' name='threaded-comment-form'/>

Ganti dengan kode ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='threaded-comment-form'/>
</b:if>

Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan mobile.

JavaScript Recent Comment/Komentar Terbaru dengan CSS JavaScript Recent Comment/Komentar Terbaru dengan CSS

Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<style type="text/css">
#komentar {
  font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  background-color:#597624;
  margin:0px 0px;
  padding:10px 10px;
  color:#000;
  border:4px solid #597624;
  -webkit-box-shadow:inset 0px 0px 2px #000;
  -moz-box-shadow:inset 0px 0px 2px #000;
  box-shadow:inset 0px 0px 2px #000;
}

#komentar ul {
  margin:0px 0px;
  padding:0px 0px;
  border-top:1px solid #455F20;
  border-bottom:1px solid #799D1A;
}

#komentar ul li {
  border-top:1px solid #799D1A;
  border-bottom:1px solid #455F20;
  padding:3px 0px;
  list-style:none;
}

#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
  color:#D7E5FD;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
}

#komentar ul li b:before {
  content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
  margin:0px 4px 0px 0px;
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 14,
    jmlkarakter = 200,
    home_page   = "http://logcyber.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-rc-comments.js" type="text/javascript"></script>

Tentukan jumlah komentar yang akan ditampilkan pada var jmlkomentar dan jumlah karakter pada var jmlkarakter. Ganti kode yang Saya beri warna merah dengan alamat blogmu sendiri.
Klik Simpan dan lihat hasilnya:

demo