Cara Membuat Thread Comment Cantik dan Responsive

Bagaimana agan ?? kepengen membuat thread comment sperti gambar diatas. Langsung saja sesuai judul pstingan di atas kali ini saya akan berbagi pengaaman mempercantik thread comment.

Perlu agan ketahui, thread comment merupakan salah satu daya tarik tersendiri bagi para pengunjung blog untuk meninggalkan komentarnya.


Berikut CSS yang perlu agan tambahkan :

/* komentar */
.pesan-emo {display:none;position:fixed;top:35%;margin-left:-285px;padding:10px;background-color:#0099cc;font-size:12px;width:150px;height:60px;border-radius:5px;border:2px solid #009999;color:#bbb;font-family:Arial, Sans-Serif;}
blockquote {padding:.5em 1em;margin:1em 0;background-color:teal;border-left:3px solid #800000;border-right:1px solid #c8c8c8;border-top:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;font-size:12px;color:#ccc;font:normal 12px Monaco,"Courier New",Monospace;line-height:1.1em;position:relative;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;}
.blockquote.rounded, b[rel="quote"].rounded {-webkit-border-radius:5px 0 5px 5px;-moz-border-radius:5px 0 5px 5px;border-radius:5px 0 5px 5px;}
.blockquote.rounded, b[rel="quote"].rounded {border-width:8px;border-color:#fff #fff transparent transparent;-webkit-border-bottom-left-radius:5px;-moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;}
#comments {line-height:1.4em;margin: 60px 0 0 0;position:relative;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP03z_laAioD6E8ZPyatQQi9RaFetAIfbehoJd18yJCIwl2laNe_cHjSqZysdQzAnqZ0AfwBdS4NTcrfPAN5Btzz2emYcSGueav0szhZ1Z-bdoLEDeaFO-V5eMX1-X3NOvI_MkvozluD8Y/w371-h5/line.png') center bottom repeat-x scroll #fff;border-radius:4px;padding:10px 10px 0px 10px;color: black;}#comments a {color: #1abc9c;text-decoration: none;}#comments a:focus, a:hover {color: #5886A7;text-decoration: underline;}
#comments h3 {font-size:14px;font-family:"Exo 2",Arial,Sans-Serif;text-transform:uppercase;font-weight:normal;left:0;top:-53px;background:#309296;color:#fff;width:100%;padding:13px 20px 13px 85px;position:absolute;border-radius:4px 4px 0 0;}
#comments h3:before {content:"f0e6";font-family:fontAwesome;font-size:22px;font-style: normal;background-color:#65AE83;color:#fff;top:0;left:0;padding:13px 20px;position:absolute;}
.comment_avatar_wrap{width:42px;height:42px;background:rgba(0, 0, 0, 0.4);padding:5px;text-align:center;margin-bottom:20px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);}
#comments .avatar-image-container {float: left;margin: 0 10px 0 0;width: 42px;height: 42px;max-width:42px;max-height:42px;padding: 0;margin-bottom:10px;}
#comments .avatar-image-container img {width: 42px;height: 42px;max-width: 42px;max-height: 42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6Bgmm_8ZP8td7bSjz7kpI6wJRk6x0qSFwndziDeJCb0NLTWPpsYwvOrZQzk44QUJGJM8YZuTLp9QvfOZgmiQCdJx_RhqwQqnp7zXXdA9wOTEANh3gKqSv_Bpvz980KBcGqi-unAUWJae/s1600/anon.jpg) no-repeat;}
.comment_name a {font-family: Arial, Sans-serif;padding-bottom:10px;font-size:13px;}
.comment_admin .comment_name  {font-family:"Exo 2", Arial, Sans-serif;padding-bottom:10px;font-size:14px;text-decoration: none;}
.comment_admin .comment_name {
  position:relative;
}
.comment_admin .comment_name:after {
  position:absolute;
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  text-decoration:inherit;
  -webkit-font-smoothing:antialiased;
}
.comment_admin .comment_name:after {
  content:"f007";
  top:0;
  padding-left:7px;
  font-size:16px;
  color:$(first.background.color);
}
.comment_admin .comment_date  {font-weight: normal;font-size:11px;}
.comment_name {font-family:"Exo 2", Arial, Sans-serif;padding-bottom:10px;font-size:14px;font-weight:normal;position:relative;}
.comment_service{margin-top:5px;}
.comment_date {color: #333;float:right;font-size:11px;font-weight:normal;}
.comment_date a{color: #a9a9a9;float:right;font-size:11px;font-weight:normal;}
.comment_date a:hover{color: #a9a9a9;text-decoration:none;}
.comment_body{margin-top:-72px;margin-left:65px;border-width: 1px;border:#bdc3c7 solid 1px;border-image: none;background:#fff;padding:15px;}

div.comment_inner.comment_admin{background:#2ecc71 !important;}
.comment_body p {line-height: 1.5em;margin: 5px 0 0 0;font-size: 13px;word-wrap:break-word;padding-bottom:10px;}
.comment_inner {padding: 15px;margin: 5px 0 5px 0;background-color:#77cc55;}
.comment_child .comment_wrap {padding-left:5%;}
.comment_reply {display: block;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
color: #fff !important;
font: 11px/18px Arial;
text-align: center;
margin: 4px -5px 4px -5px;
padding: 1px 0;
border-radius: 2px;
transition: background-color 1s 0s ease-out;
}
.comment_reply:hover {text-decoration: none !important;;background: #333;}
.unneeded-paging-control {display: none;}
#comment-editor {width:100% !important;background:#d9d9d9;border-radius:4px;margin-bottom:20px;position:relative;}
.comment-form {max-width: 100% !important;}
.comment_form a {text-decoration: none;text-transform: uppercase;font-weight: bold;font-family: Arial, Helvetica, Garuda, sans-serif;font-size: 15px;}
.comment_form a:hover {text-decoration: underline;}.comment_reply_form {padding: 0 0 0 70px;}.comment_reply_form .comment-form {width: 100%;}
img.comment_emo {margin:0;padding:0;vertical-align:middle;cursor:pointer;}
.comment_emo_list{display:none;clear:both;width:100%;}.emo-rapper-ll {background:#fff;border-radius:5px;margin-bottom:5px;}
.comment_emo_list .item {float: left;text-align: center;margin: 10px 5px 10px 0;height: 40px;width:30px;color:#999;}
.comment_emo_list span {color:bbb;display: block;font-weight: normal;font-size: 11px;letter-spacing: 1px;}.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto;}
.comment_img {max-width:100%!important;}
.comment_header{width:50px;}#respond {overflow: hidden;padding-left: 10px;clear: both;}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6Bgmm_8ZP8td7bSjz7kpI6wJRk6x0qSFwndziDeJCb0NLTWPpsYwvOrZQzk44QUJGJM8YZuTLp9QvfOZgmiQCdJx_RhqwQqnp7zXXdA9wOTEANh3gKqSv_Bpvz980KBcGqi-unAUWJae/s1600/anon.jpg) no-repeat;}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;}

.comment_author_flag {display:none;}iframe{border:none;overflow:hidden;}.deleted-comment {background:#daabab url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3gsnV-wwYYM8A2HL6Po1UOgq5TRHuZOZOemjGuWZNxHqI_8OI0yC6fNVke4s_M4zE36-RfPNCrNViGJ9gF_QFi9pDj9ytNNHKire31OSz5DA4gEuko17ekVIXAtB5jfBOuDuhmyBxKxg/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#fff;line-height: 22px;padding:10px 15px 10px 45px;margin:5px 0;display: block;font-size:13px;}.comment-form p { background: white;padding: 10px 10px 14px 10px;margin: 5px 0 5px 0;color: #e5eff0;font-size: 13.6px;line-height: 20px;width:97,8%;border-radius:5px;position:relative;}div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMPqZKTpycxkcDQa7szcJu8vwDvgbXajRxkYljpURSxhqJ23TOcmgL_VfUMvEXb3AKwJ5CqMF1jXIgv8DSxQ9TymW1JEEOjVpHPnzxVJDU9F7l4hhZSNj5bW91OduDkR8KdEGVRyqDx8/s45-c/gravatar.png);}div:target .comment_inner{background:#77cc55;transition:all 15s ease-out;}div:target .comment_child .comment_wrap .comment_inner{background:#0099cc;}.center {text-align:center;}img.cm-prev {max-width:400px;margin:10px auto;page-break-after:always;display:block;text-align:center !important;}

.comment_admin .comment_author_flag {display:inline;background:#466276;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#C4DEF0;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}.ll-comment-thanks {font-family:Arial, sans-serif;font-size:12px;right:25px;margin-top:-73px;padding:6px 12px;background:#f8f8f8;color:#999;border:1px solid #c9cacb;border-radius:3px;position:absolute;}

Setelah agan copy CSSnya tinggal copy HTML dibawah ini. Tapi jangan sampai ada doble code ya CSSnya :). Berikut code HTML yang harus agan ganti mulai dari <b:includable id='comments' var='post'> Sampai </b:includable>. Ganti dengan code berikut :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
 <b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>

  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <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>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
  </b:if>

  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
 <!--blacklist-->
<b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/07892426638502951005&quot;'>
<b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/06475674612387335141&quot;'>
<!--blacklist-->
   <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>                                <b:if cond='data:comment.isDeleted'>
<b:else/>
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>

    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
       <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>

<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
     </div>
<script>
$(document).ready(function() {
    $(&#39;.comment_reply&#39;).click(function() {
        $(&#39;.cancel&#39;).show();
    });
});
</script>
     <div class='clear'/>
    </div>

    <div class='comment_body'>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
     <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>

                  <span class='comment_service'>
      <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpq7JrDxvM3Kow5ZGrH89zU6XK9uvSw2cFcNKZgR3otGpjMgfCvWEu8P00QiQjD8Iee0cdM4vPaKTB-ikCMwx8u6rDdHeuNp5WgfjMO9BODKoaz2FqJj3w1Mn4rdMqEWl0MR2SzbpLDo/s1600/delete4_o.png' title='Hapus Komentar'/>
</a>
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
        </a></span>
  </span></div>

   <p><data:comment.body/></p>

    </div>
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>

    <div class='comment_child'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>
     </b:if>
<b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/> - <data:comment.timestamp/></span>

                        <div class='clear'/>

     </b:if>
    </div>
<!--blacklist-->
  </b:if></b:if>
<!--blacklist-->
   </b:loop>
   </div>
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
       &#160;
       <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>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form'>
 <h3 id='comment-post-message'>
 <b:if cond='data:post.allowComments'>
              <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if>
              </a>
           </b:if>

</h3>
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>

       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></scr" + "ipt>");
}
       //]]>
       </script>

       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>

         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
                                Config.maxThreadDepth = 4;//How threaded level that you want
                                Display_Emo = true;//Display emoticon or not? set "false" to no display
                                Replace_Youtube_Link = false;//Auto replace youtube link to iframe embedded, choose "false" to disable
                                Replace_Image_Link = false;//Auto replace an image link  choose "false" to disable.
                                Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
                                Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true

                                //Config emoticons declare
                                Emo_List = [
                                ':)'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-tHA0kk_4jl1jEQByz95xtNYE97q4yCO-uYaKkETaOEId0t1LPFHkAGA6ZasMfC8ZsIcTD93FQL3BO5aRGcGkEcc9LCCUcJCbXwB5nDHnC3ySzS_p3oym7BvCp2T4Gfd2Qgxppg6CPg/s1600/smile1.gif',
                                ':('        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLv3VHdcdBepnDHNCA3vr4oS4zA-UZ80D8s_1-ehlJUaXAAyUF6X07uJ2A8KvzD2DhoYK7D_IjkFbbLrUpo4oP4st5POuMnI7lUjE-5TJIs01VkF_GaJ3PnzfITTve45wawZwjjnKtoc/s1600/sad.gif',
                                '=('        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-c6z02FacqY4_cwH_hKZ-Uvp3nth-TaRfPcyhXs7tbbuDwq07yYA0hmJPQhbSvSkBTTB_VJo3Nad8fmNQefBclnp1eIPnDqvfzK5LSb3Nk4lmXvyOQdc1n6Ow-kil5couRJnueoo4sY/s1600/sadanimated.gif',
                                '^_^'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdZ8j2exZ4ODxT-R5RYInAm21nVi25DgOnTpP3PvFA0NAlrWhyphenhyphentMYiuGSIp5XjaCVUNktP5hktDZQAVppAJJa7rI3cZu9tz9qCXOxu4JAn0XYap30SnB1BWt507CwkdPhsCGW2uh6T_w/s1600/smile.gif',
                                ':D'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTxVwMsKltOUr5p7_gOrQKgH_dHTrGJ4G8zHp9yegGIEyTq710I7lWhhvVRoqkIamuojZ5xQBwcu-9hNHa0DyRfIV1GT43vq6eJ25zWFrOg8usbcXH3XQf1pNkkGm_1Xq6e-3E_v4tZ0/s1600/icon_smile.gif',
                                '=D'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZutyg49DbD5IHkh2s2AKr8Zi8nnWq06dyplenqth3CDyUYEru9_Ok2sGt0hrhXJSHdjIO3WM0ArLUs1dSAn4Cxu3ohpNvV2bVGPxTGQZi87kw7fxlNsuDo5cTeIhc8uVL4wRDxrj7B_Y/s1600/hihi.gif',
                       '|o|'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbIV0zkAMn7ratNPMqp9WDjVwKNd9t8l56Ar86BAJ_czz0rzny2AUT8smTSVmbQXeEV4ui6rWHxzKkeOxc28JHCAF_JAondCAAvMKZMpwELKRNirtZaTqLPakgx9RVpGYVs7JgPsJStXs/s1600/applause.gif',
                                '@@,'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNT6u6X18rLgFT0RokmUGJM8eX9VqorHT4WTdGS2BdEz8l19hmOoa22yCcCxZQUy_QNZV8FA1co0RTP8UNOs5cC47zWIHcBYwdvEpDZN6ZSzcjUoG1wggYJP4XdBW-mlfIQGUuE14I43Y/s1600/rolleyes.gif',
                                ' ;)'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjssLC0tV_QyRLUWb03mHamdkZZA1H1JpAZUmLU2nFg_XeAuVLmZ_IsHITO6o3OB2LKFioxbf-um9QqGQSgqEtsTDjpmwkw2qhycDRICT6LHoMAwETBHBBp1FT1RaZ_Khoxx4cXICenGm4/s1600/wink.gif',
                                ':-bd'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCr_j0EZMXiTnj-G3CK43PE2c6XMCkAsCMJoIOppEEpCj4WyQaNLIwaYPzO7Z1h4tQnAv74w_QTqNJ1bSfFb1snjmaZl5cN6is5wUAOHiM7HlecKgrvSYwpTznjwGhTP5a0d5d81ZRnI/s1600/thumb.gif',
                                ':-d'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-s0Qc3I3QgelocrhDeQhXvU_bETQ7tQdHhZbOkaeu951LONZKJEEQpyLAflBvmcdxudQSYw_hCIMUe1uxR8rz54FIUE3xAE5nNDJZ_SFlJf5pMkZFDX25skZWM1stfNy4jXFVzj4CpU/s1600/thumbsup.gif',
                                                  ':P'        ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDara2jXf0hLQSh7zffvwa75CbftzWfyGMOlf6YR-hvok3uS0sVAgavlI78Pg3N1OhA7Ho56i5rk1KXUqPXSZlzk6qUSrTe4qDrd8hGM48vp9oMHpTVjmoWC1Atq85hkmJ6nLj__S9MAs/s1600/wee.gif',
                       ':hah:'        ,'http://www.freesmileys.org/smileys/smiley-laughing021.gif',
                                ];


                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c]);return p}('3 q='.X';3 Z=$('#J-W').D('y');w 1E(F){3 1G=' nrtf1V1W1X292a2c2i2n2q2r2t2v2C2D2I2J1L1N1O1P1Q1S1T';G(3 i=0;i<F.5;i++){b(1G.g(F.28(i))!=-1){F=F.d(0,i);1e}}C F}$('#2l .1y p').k(w(B,8){b(2B){3 m='1f://13.11.10/1h?v=';3 7=8.g(m);H(7!=-1){1u=8.d(7);K=1E(1u);3 Y=K.g('&');3 P='';b(Y==-1){P=K.d(m.5)}15{P=K.d(m.5,Y)}3 1A='<1r E="1Y" y="1f://13.11.10/1Z/'+P+'?21=1" 22="0" 23></1r>';8=8.d(0,7)+1A+8.d(7+K.5);7=8.g(m);b(7==-1){m='24://13.11.10/1h?v=';7=8.g(m)}}}b(27){3 18='';3 u=8;G(3 i=0;i<1i.5;i++){3 m='.'+1i[i];3 o=u.I();3 7=o.g(m);H(7!=-1){l=u.d(0,7+m.5);o=l.I();3 x='2o://';3 z=o.g(x);3 M='';H(z!=-1){M=x.V();l=l.d(z+x.5);o=l.I();z=o.g(x)}x='2L://';o=l.I();z=o.g(x);H(z!=-1){M=x.V();l=l.d(z+x.5);o=l.I();z=o.g(x)}b(M==''||l.5<6){1e}l=M+l;18+=u.d(0,7+m.5-l.5)+'<U y="'+l+'" E="2x"/>';u=u.d(7+m.5);o=u.I();7=o.g(m)}}8=18+u}b(1g){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 R='<U y="'+A[i+1]+'" E="1k"/>';7=8.g(A[i]);H(7!=-1){8=8.d(0,7)+R+8.d(7+A[i].5);7=8.g(A[i])}}}b(1K){3 5=Q.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){H(1){3 u=8.V();7=u.g(Q[i]);b(7!=-1){8=8.d(0,7)+Q[i+1]+8.d(7+Q[i].5)}15{1e}}}}C 8});$('.1M').k(w(B,8){b(1g){3 5=A.5;b(5%2==1){5--}3 12='';G(3 i=0;i<5;i+=2){3 1v='<1w>'+A[i]+'</1w>';3 R='<U y="'+A[i+1]+'" E="1k"/>';12+='<O E="1R">'+R+1v+'</O>'}C 12}});$('.1B .1y p').k(w(i,h){14=h.V();B=14.g('@<a 16="#c');b(B!=-1){17=14.g('</a>',B);b(17!=-1){h=h.d(0,B)+h.d(17+4)}}C h});w 1j(j){r=j.g('c');b(r!=-1)j=j.d(r+1);C j}w 1l(j){j='&20='+j+'#%1m';1n=Z.1o(/#%1m/,j);C 1n}w 1p(){k=$(q).k();$(q).k('');q='.X';$(q).k(k);$('#J-W').D('y',Z);$('.25').26()}w 1q(e){j=$(e).D('19');j=1j(j);k=$(q).k();b(q=='.X'){1s='<a E="2b-J" 16="#1t" 2d="1p()">'+2e.2f+'</a><a 2g="1t"/>';$(q).k(1s)}15{$(q).k('')}q='#2h'+j;$(q).k(k);$('#J-W').D('y',1l(j))}1a=2j.2k.16;1b='#J-2m';1c=1a.g(1b);b(1c!=-1){1x=1a.d(1c+1b.5);1q('#2p'+1x)}G(3 i=0;i<T.5;i++){b('1z'2s T[i]){3 j=T[i].1z;3 1d=2u($('#c'+j+':N').D('1C-1D'));$('#c'+j+' .2w:N').k(w(B,8){3 L=T[i].19;b(1d>=2y.2z){$('#c'+L+':N .2A').1F()}3 S=$('#c'+L+':N').k();S='<O E="1B" 19="c'+L+'" 1C-1D="'+(1d+1)+'">'+S+'</O>';$('#c'+L).1F();C(8+S)})}}3 1H=$("#2E");1H.2F('.2G U').2H(w(){3 1I=$(1J).D('y');$(1J).2K().D('y',1I.1o(//s[0-9]+(-c)?//,"/1U-c/"))});',62,172,'|||var||length||check_index|oldhtml|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||temp_html||function|http_search|src|find_http|Emo_List|index|return|attr|class|str|for|while|toUpperCase|comment|yt_link|child_id|save_http|first|div|yt_code|Force_Tag|img_html|child_html|Items|img|toLowerCase|editor|comment_form|yt_code_index|Cur_Cform_Url|com|youtube|newhtml|www|temp|else|href|index_tail|save_html|id|cur_url|search_formid|search_index|par_level|break|http|Display_Emo|watch|Replace_Image_Ext|Valid_Par_Id|comment_emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|iframe|reset_html|origin_cform|ht|img_code|span|ret_id|comment_body|parentId|yt_video|comment_wrap|data|level|trim|remove|whitespace|avatar|ava|this|Replace_Force_Tag|u2008|comment_emo_list|u2009|u200a|u200b|u2028|item|u2029|u3000|s45|x5b|x5d|x7c|comment_youtube|embed|parentID|autohide|frameborder|allowfullscreen|https|cancel|hide|Replace_Image_Link|charAt|x7d|x3c|add|x3e|onclick|Msgs|addComment|name|r_f_c|x0b|window|location|comment_block|form_|xa0|HTTP|rc|u2000|u2001|in|u2002|parseInt|u2003|comment_child|comment_img|Config|maxThreadDepth|comment_reply|Replace_Youtube_Link|u2004|u2005|comments|find|comment_avatar|each|u2006|u2007|show|HTTPS'.split('|'),0,{}))

                            //]]>
                              </script>

</b:includable>

Sekian semoga bermanfaat dan selamat berkreasi with blogger.