Cara Terbaru Membuat Kotak Komentar Blog Keren Banget

Bagaimana Cara Mengubah dan Membuat Komentar di Blog Menjadi Keren ? Untuk merubah dan mendesign kotak komentar pada blogger agar nantinya lebih keren itu bukan hal yang sangat sulit , sobat cuman perlu mengetahui sedikit tentang css dan html . dan kemudian memasangkan html dan css sebagai pemanggil html tersebut pada halaman editor html blog anda. Namun bagi yang masih minim pengetahuanya tentang bahasa coding ini , sulit rasanya membuat kotak komentar blog jadi lebih keren , nah dari pada pusing liat kode alien , lebih baik contoh nih komentar blog dibawah ini yang keren pisan.

Tak hanya kotak komentar yang keren , akan tetapi comments box ini fast loading dan valid html5 serta css3 , sehingga tidak membuat blog anda lelet ketika di buka , dan tentunya membuat pengunjung betah lama - lama jagongan di blog sobat. komentar ini di modifikasi menjadi valid oleh master blogger indonesia yaitu " Kang Ismet " yang memberi nama komentar ini dengan komentar hack versi 3

Menurut saya komentar Blog ini Keren dan sangat enak di pandang , sehingga saya menggunakanya pada blog saya yang jelek ini , karena kemaren ada yang bertanya , mas gimana sih cara buat komentar blog yang keren seperti blognya masyadi ini ? untuk itu saya akan jawab melalui tutorial kali ini.

Cara Terbaru Membuat Kotak Komentar Blog Keren Banget

Cara Merubah Komentar Blog Menjadi lebih Keren

  1. Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode dibawah ini :
    <b:include data='post' name='threaded_comments'/>
  4. Lalu Ganti kode diatas dengan kode seperti ini
    <b:include data='post' name='comments'/>
  5. Simpan kode ini di atas ]]></b:skin>
    #comments {}
    #comments h3 {margin-bottom:15px;font-size:18px;}
    .comment_avatar_wrap{
    width:42px;
    height:42px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    background:#fcfcfc;
    padding:4px;
    border-radius: 2px;
    text-align:center;
    margin-bottom:20px;
    }
    #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(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtGgVu4vQEijqQRvj7J1IXZazmsYYfcx3jxtkFT7Gg3FYqZr_tczjRYJ1YWh34R_iiw9f08wuhzQ71KzPVSFxmku45qWr3gf-0r8AStXimIsZ2ExScmo-n017hQiGB6gS_HsHVqZpcrQ5/s1600/anon.jpg) no-repeat;
    }
    .comment_name a {
    font-weight: bold;
    padding: 5px 0 0 0;
    font-size: 13px;
    text-decoration: none;
    }
    .comment_admin .comment_name  {
    font-weight: bold;
    padding: 10px;
    font-size: 13px;
    text-decoration: none;
    background:#eee;
    }
    .comment_admin .comment_date  {
    font-weight: normal;
    font-size:11px;
    }
    .comment_name {
    background:#eee;
    padding:10px;
    font-size:13px;
    font-weight:bold;
    position:relative;
    }
    .comment_service{
    margin-top:5px
    }
    .comment_date {
    color: #a9a9a9;
    float:right;
    font-size:11px;
    font-weight:normal;
    margin-top:-3px;
    }
    .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-left:66px;
    margin-top: -72px;
    background:#fcfcfc;
    border:1px solid #d1d1d1;
    padding:10px;
    border-radius: 2px;
    }
    .comment_body p {
    line-height: 1.5em;
    margin: 5px 0 0 0;
    color: #666;
    border:1px solid #eee;
    font-size: 13px;
    word-wrap:break-word;
    background:#fff;
    padding:10px;
    }
    .comment_inner {
    padding-bottom: 5px;
    margin: 5px 0 5px 0;
    }
    .comment_child .comment_wrap {padding-left: 7%;}
    .comment_reply {
    display: inline-block;
    margin-top:8px;
    margin-left:-5px;
    padding: 1px 12px;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    background: #bababa;
    font: 11px/18px sans-serif;
    transition: background-color 1s ease-out 0s;
    }
    .comment_reply:hover {
    text-decoration: none !important;;
    background: #056b95;
    }
    .unneeded-paging-control {display: none;}
    .comment-form {max-width: 100%;!important;}
    #comment-editor {width:103%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}}
    .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-form p {
    background: #666;
    padding: 10px;
    margin: 5px 0 5px 0;
    color: #eee;
    font-size: 13px;
    line-height: 20px;
    width:97%;
    border-radius:3px;
    position:relative;
    }
    .comment-form p:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    bottom:-16px;
    left:15px;
    border:8px solid transparent;
    border-color:#666 transparent transparent;
    }
    .comment_reply_form {
    padding: 0 0 0 70px;
    }
    .comment_reply_form .comment-form {width: 99%;}
    .comment_emo_list{
    display:none;
    }
    .comment_emo_list .item {
    float: left;
    text-align: center;
    margin: 10px 10px 0 0;
    height: 40px;
    width:41px;
    }
    .comment_emo_list span {
    display: block;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 1px;
    }
    .comment_emo_list span {
    display: block;
    font-weight: bold;
    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;}
    .deleted-comment {
    padding: 10px 10px 10px 10px;
    display: block;
    color: #CCC;
    }
    .comment_arrow {
    display: block;
    width: 9px;
    height: 18px;
    background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRoOyojG7wzGpMTKyTtIc8Lhk0gtQMlrMpDQ4zqXEReHF9YMqWHuTrL0nTbpkpXrL3Aeg2ZOWa4G5Z5dCRzFqFB1yo-KVBvathzNXyxF6MQODjVpqfjdISRvQ8bdhcPdW9eH3-e9aep8Q/s1600/comment-arrow.gif) no-repeat;
    position: absolute;
    margin-left: -19px;
    }
    .comment_header{width:50px}
    #respond {
    overflow: hidden;
    padding-left: 10px;
    clear: both;
    }
    .comment_avatar img{width:42px;height:42px;background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtGgVu4vQEijqQRvj7J1IXZazmsYYfcx3jxtkFT7Gg3FYqZr_tczjRYJ1YWh34R_iiw9f08wuhzQ71KzPVSFxmku45qWr3gf-0r8AStXimIsZ2ExScmo-n017hQiGB6gS_HsHVqZpcrQ5/s1600/anon.jpg) no-repeat}
    .comment-delete img{float:right;margin-left:15px;margin-top:3px;margin-right:10px}
    .comment_author_flag {display:none}
    .comment_admin .comment_author_flag {display:inline;background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbKfm4xgJPLYbPpTiZdUGJJyaZL3gbRKrj2cEakJpex71aKsVLDauAcMQdPRNdNrKX3yMS67Ek63BxzdoOApCt2FrXVQN8FPsw98toHYlESgCjMsFQObKFlq5AeH2Cnb7vh7j6HDJTfg/s1600/author.png)no-repeat;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
    iframe{border:none;overflow:hidden}
  6. Kemudian ganti kode :
    <b:includable id='comments' var='post'>...</b:includable>
    dengan yang ini :
    <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'>
                                                                                 
       <div class='data:comment.adminClass' expr:id='data:comment.anchorName'>                                                                                     
          <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>
                             
         <div class='clear'/>
        </div>
             
        <div class='comment_body'>
                                          <span class='comment_arrow'/>
         <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>
           <b:if cond='data:comment.author == data:post.author'>
             <span class='comment_author_flag'>Admin</span>
           </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/AVvXsEiOm6kWZsT22fZkDOCUjE4kDNNTN-unvBDbTAkqgkmR4f-H9RQ_vozDIRDtJZeJl43hfF2uIh8xRG8xWXMbFIntrR17K2wGg7kx-CmUhDz4BcDAE8m9iCXlBWVFr2-ZeiqV5nfwidFY6Ng/s1600/delete4.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>
         <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'><data:comment.body/></span>
          <b:else/>
          <p><data:comment.body/></p>
                            <div class='clear'/>
                          
         </b:if>
                                                          
        </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'/>              
        </div>
       </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'>         
             
       <b:if cond='data:post.embedCommentForm'>
        <b:if cond='data:post.allowNewComments'>   
          <div class='comment_emo_list'/>
         <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 = 6;//Kedalaman tingkat threaded comment
            Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
            Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
            Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
                                    Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
            Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
          
            //Pengaturan Emoticon
            Emo_List = [
            ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHBiM2iXADiI1x3HhV3iFUBQdZuaCpI-xt5fnBfwgO-_nsM5Cmq-Qx4db7zDKwtiA4hq38thWWDy3tlyaxXknqjZmYk_FskHYoaSjuLRum3MlslPGfL9moVzVbqHnZU3XnguQRPz1o6Y/s1600/smile1.gif',
            ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4A6dnJ0k7JyuhVAoSpfP35G_ypLkvUgl1eDZu9oIv0WgiXTxRsf1ejr-P_6_SPY6qcjK8e-ibYcABvP4vHPqCWtTkhl-lPLP1y5zDfdum5VVQjKELfgFZJW22jL_BZ1OgxJQzPhRXb8/s1600/sad.gif',
            '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-h6tIqjyQfOsvpSV7qnelk4ujfVojqyvSUWFLYROspC3rPDjoQP5xge7pitD5wk7Q4SMyf2lc_x3poy0HNk8uWvQ-Vy-8ijykgB8R_70RVGmaj1a49P6gMs01xcqnAKlrVPPVfwso3uw/s1600/sadanimated.gif',
            '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBpUBZsGGbKmUOuHljZ9yiNyp1KwZbm9OcgIqj4jsTBe69_EJsDn9N5CUAz3KKURSflerrb2I4oCPZPb6vE01a3iyn2Q2oRWTGedhdUtjbQxTFI1pcn745x88tpf5zP91GS97D3dkqQGQ/s1600/smile.gif',
            ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8hNKpzNs1wcxazcyOlzo3MK4QcSAWqmUAe4apuxFkOgS1Uy2QYll0NuDi8YdlIYOYaxo03An0_4MJW3APbBhc0lOpQWnbDMeZEZ_qXU7Rp46O2XIxfHAxb3cmU7axqRolYF70Rj2hjRs/s1600/icon_smile.gif',
            '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOlRS9JFE9CCAaDS2-SRqBoPcjma4hLnjx9QECB6z9hZVYoD3EUZYQDjH5vjvOAYUoQFmlsoOcm1LK60IFh_xF_6wPj-90j45slBZS7F-l0cipCFSLZCNdVygQQU_YtdnMEXs2qjhYvQ/s1600/hihi.gif',
            '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4bSalnBrI6VP-DhnYjVnTipTrKMtCYLzun0fffM8y6Sb9ruYM2oCSGb3cpuez0LDxF05gjnLnO_isLN1nUtlD1oUQxO_c6Mn3XXQ4G9yglF8yBLzmGZbnYNh8NBERcN9woP7NiBV0oM/s1600/applause.gif',
            '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf399ieK9gXj2aUl83LeBswGlUo2cYXTbmuGAJV76Hvo0bORfrj4sNCMkMI-6Zh4D8WCXg0RqF1l9FhgoYOwwGYDAiW7eI5BzM8buxvKPn56-6sev5VtByGxlbjAEIbWMQLFHqaWwsD6o/s1600/rolleyes.gif',
            ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq4tP6HrvExaWpdb2B7IUTHkxdVgL-Lwn-jmuBNlGwyOkGQ8_t2t_SaRnqxEh7NqvLcUOd6u0MdHZFgzoITPlAFEuwJ0mq3Fm32Acstsg9dWv6fnTG2Oby1app08I5pRJbba1KTsLWffM/s1600/wink.gif',
            ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawIvHMBCM94iD1gXixrjHLbOC7fgJ0SH71yLoBxnt0lG-MSfJzXKpjz0yo3sL4UUmldb2AuULkOnNVGXEuJZw5KnxaQO_Jtgj7w5AMODhIYiwjnVxpN3vEZbBgXRvuZOssROg2d2AC-s/s1600/thumb.gif',
            ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPg59kdh-RWupwdUZjnxYHKX_hiTkigpSuHOw0XL5jakDUx7gg77ufWNoKFknzwlb6wX_-Meia4t8cFLgd5y6UK4CnbS8m9sv0-ItjNpagBbz0NyAMZ_zLIzNLDa4zjYnRuXttNDTOkk/s1600/thumbsup.gif',
            ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9geeiLlZUTerLbKHIWW_KBxE5HMd5xOJTW8MbfjMT5FLzc6kYmZmw6wQfOWAXNGmGGT_2rTudEM5YrXRlFSauoTcMs-k8bvW9JqWgA3vJgAW3fRnKSGMkcdq7gMlLv4Z4kqIa0Z-ZYM/s1600/wee.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=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
        //]]>
    </script>
    </b:includable>
  7. Terakhir baca bismillah dan berdoa semoga bisa , kemudian klik save
Gimana tutorial buat dan memasang kotak Komentar Blog Keren Banget pisan ? sangatlah mudah bukan ? atau bahkan sobat pusing melihat kode alien tersebut ? kalau pusing itu wajar sekali , karena saya waktu awal obrak - abrik template juga mengalamai hal yang sama , pokoknya tetap semangat dan jangan mudah menyerah , kalau masih gagal ya dicoba lagi sampai bisa , selamat memodifikasi komentar blog yang paling keren
 
sumber. http://www.masyadi.com

Kode warna Html




Cyan #00ffff
Blue #0000ff
Skyblue #abcdef
Darkcyan #008686
Cadetblue #5f9ea0
Midnightblue #191970
Mediumslateblue #7b68ee
Cornflowerblue #6495ed
Lightsteelblue #b0c4de
Lightskyblue #87cefa
Powderblue #bde0e6
Aquamarine #7fffda
Dodgerblue #1e90ff
Royalblue #4169e1
Blueviolet #8a2be2
Indigo #460082
Lavender #e6e6fa
Lightblue #add8e6
Deepskyblue #00bfff
Darkslateblue #483080
Mediumvioletred #071585
Mediumturquoise #4801cc
Mediumorchid #ba55d3
Darkturquoise #00ccd1
Paleturquoise #afeeee
Darkorchid #9932cc
Slateblue #6454cd
Aqua #00ffff
Red #ff0000
Darkred #860000
Indianred #cd5c5c
Firebrick #622222
Lightsalmon #ffa07a
Lightcoral #f08080
Maroon #800000
Crimson #dc143c
Tomato #ff6347
Salmon #fa8072
Coral #ff7f50
Pink #ffc0cb
Hotpink #ff69ba
Deeppink #ff1493
Lightpink #ffb6c1
Mistyrose #ffe4e1
Moccasin #ffe4b5
Peachpuff #ffdab9
Mintcream #f5fffa
Floralwhite #fffaf0
Oldlace #fdf5e6
Thistle #d8bfd8
White #ffffff
Linen #faf0e6
Navy #000080
Snow #fffafa
Orange #ffd000
Orangered #ff4500
Burlywood #deb887
Darkorange #ff8c00
Palevioletred #db7093
Sandybrown #f4a460
Rosybrown #bc8f8e
Brown #a52a2a
Peru #cd853f
 Gold #ffd700
Yellow #ffff00
Lightyellow #ffffe0
Yellowgreen #9acd32
Palegoldenrod #eee8aa
Goldenrod #daa520
Lime #00ff00
Green #008000
Seagreen #f4a460
Palegreen #98f698
Lightseagreen #20b2aa
Forestgreen #228622
Lightgreen #90ee90
Olive #808000
Tan #d2b48c
Teal #008080
Olivedrab #6b8e23
Greenyellow #adff2f
Darkslategray #2f4f45
Darkolivegreen #55662f
Mediumspringgreen #00fa9a
Darkgoldenrod #688606
Darkkhaki #606766
Orchid #da70d6
Fuchsia #ff00ff
Darkmagenta #860086
Darkviolet #940003
Mediumpurple #9370db
Violet #ee82ee
Purple #800080
Plum #dda0dd
Gray #808080
Dimgray #696969
Gainsboro #dcdcdc
Lightslategray #778899
Lightgray #d3d3d3
Slategray #708090
Darkgray #a9a9a9
Silver #c0c0c0
Springgreen #00ff7f
Lightpink #ffb6c1
Navojowhite #ffdead
Darksalmon
Khaki #f0e68c
Aquamarine
Chocolate #d2691e
Chartreuse
Limegreen
Slateblue
Saddlebrow
Aliceblue
Wheat
Bisque
Sienna

Cara Memasang Menu Bar dan Sub Menu Bar di Halaman Blog

menu+bar

Langkah Pemasangan

- Klik  Desain 
- Pilih  Template lalu pilih  Edit HTML 
- Pilih/klik  Lanjutkan
- Pilih/klik  Expand Template Widget
Cari scrift berikut :
<div class='main-outer'>  atau
<div id='main-wrapper'> atau 

<div id='main'>
Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :
div class='main-outer'>
Bisa jadi beda dengan template yang lain…
Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi



<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>


PENJELASAN :
1. Cara memasukkan alamat URL:
Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
2. Cara menuliskan judul menu atau judul postingan: 
Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.
3. Cara merubah lebar menu: silakan  cari kode:
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi :
#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;} 
Angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.
4. Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau. 
5. Untuk tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.
6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>   
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........    
A. Mengganti warna background menu: Silakan ganti warna pada baris ketiga yang saya beri warna merah, dengan warna yang anda sukai, silakan klik daftar kode warna.
B. Mengganti warna tulisan/huruf, silakan ganti warina pada baris ke-4 yang saya beri warna hijau dengan warna yang anda sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarna ungu dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-
- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . 
- Lalu simpanlah/save.

Cara membuat gambar header berganti ganti / random header



Cara membuat gambar header berganti ganti  / random header
Tips Cara membuat gambar header berganti ganti  / random header pernah tak gunakan untuk mengutak atik blog saya yang  memakai blogspot.com, saya pilih  yang templatnya ada fasilitas untuk memasang gambar untuk header, sehingga bisa berkreasi gambar untuk identitas blog.
Namun dengan penggunaan header random memang bikin blog kita sedikit lelet, karena memerlukan loading ganda pada halaman header, ini tipsya.
>> Masuk/ login
>> Buka Template -> Edit HTML
>> Cari kode <b:skin><![CDATA[
( untuk memudahkan pencarian klik ctrl +F biar langsung ketemu)
Kemudian Copy kode dibawah ini, letakan/ di paste di bawahnya. (kode yang kita cari tadi diatas)
</script>
<script type='text/javascript'>
var gambar= new Array()
gambar[0]=http://alamat_url_gambar1
gambar[1]=http://alamat_url_gambar2
gambar[2]=http://alamat_url_gambar3
var acak=Math.floor( 2 *Math.acak());
document.write(“<style>”);
document.write(“#header {“);
document.write(‘ background:url(“’ + gambar[acak] + ‘”) no-repeat top left ;’);
document.write(” }”);
document.write(“</style>”);
</script>

keterangan :  dalam jumlah header bisa  ditambah tinggal nambah gambar dan link url nya. Untuk mengambil link url kita bisa memanfaatkan pihak ketiga, untuik menitip/ menyimpan  gambar kita misalnya di………….., nanti kita ambil link url nya.
Demikian tips sederhana, Cara membuat gambar header berganti ganti  / random header semoga bermanfaat.

Cara Mengganti Background Blog dengan Gambar

Cara Mengganti Background  Blog dengan Gambar -
Berikut ini Cara Mengganti Background Blog dengan Gambar :
1. Anda harus login di blogger.com
2. Kemudian masuk di bagian Template dan pilih Edit HTML
Cara Mengganti Background  Blog dengan Gambar3. Cari kode .body atau #body (selalu di bagian atas), untuk memudahkan dalam pencarian gunakan Ctrl + F
4. Setelah ketemu cari yang mirip dengan kode dibawah ini
.body-fauxcolumn-outer{
background-color:#f8f8f8;
margin-top:20px; color:#333;
color:#222; text-align:center;
font-family:Arial; font-size:14px}
5. Setelah itu anda tinggal tambahkan kode di bawah ini tepat di dibawah atau di samping kode background-color:#f8f8f8;
background-image:url(Url Gambar yang ingin dijadikan background);
6. Kemudian anda preview untuk melihat hasilnya. Jika sudah bagus anda tinggal save dan nikmati background baru anda.

Untuk sahabat blogger yang ingin punya background yang sama seperti yang saya gunakan, pakai url gambar di bawah ini
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrH8xZ1kxkJ0gYZJgdOnKyeLiKTTlVbtIHSmL2pNy7AKmIAtX862IFs73-rroHUc-MnESK7TmZu9olTLZIv9bk3U17ZhuZOPTl0CVLWvj9uj1WIUgm9Ie3U0tm-XavEbG81TQ-R7J_UynH/s1600/background.png
Jadi jika ingin pasang mengganti background blog anda sama dengan yang saya pakai maka hasilnya seperti kode di bawah ini
.body-fauxcolumn-outer{
background-color:#f8f8f8;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrH8xZ1kxkJ0gYZJgdOnKyeLiKTTlVbtIHSmL2pNy7AKmIAtX862IFs73-rroHUc-MnESK7TmZu9olTLZIv9bk3U17ZhuZOPTl0CVLWvj9uj1WIUgm9Ie3U0tm-XavEbG81TQ-R7J_UynH/s1600/background.png);
margin-top:20px; color:#333;
color:#222; text-align:center;
font-family:Arial; font-size:14px}

CARA MERUBAH UKURAN HEADER


Langsung saja, Berikut ini CARA MERUBAH UKURAN HEADER
1. Anda harus login di blogger.com
2. Kemudian pilih template --> Edit HTML
3. Cari kode #header, gunakan Ctrl+F untuk mempermudah pencariannya.
4. Setelah ketemu biasanya akan seperti ini :


#header-wrapper{background:#fff; margin:0 auto; width:970px; overflow:hidden}
#header-inner{background-position:center; margin-top:25px; margin-left:auto; margin-right:auto}
#header{padding-left:10px; font-family:arial; width:900px; text-align:left; float:left; height:70px; color:#000}
#header h1{font:25px "Segoe UI",Arial; font-weight:bold; color:#000; text-align:left; margin-top:5px; padding:6px 0 8px}
#header a{text-decoration:none; color:#000; border:0}
#header .description{font-size:1em}
#header img{text-align:left}
(Ingat !! Kode setiap template berbeda, jadi cari yang hampir sama)
5. Perhatikan warna Merah diatas. disana kita bisa liat widht:900px dan height:70px. Dari sini kita bisa tahu bahwa header blog kita berukuran 900px X 70px.
6. Nah, tinggal kita ubah saja ukurannya sesuai keinginginan anda.

Cara Membuat Popular Post yang Simple tapi Keren di Blog


Popular Post yang saya maksud gimana sih ? Nah, untuk melihat yang saya maksud Simple tapi keren anda bisa liat contohnya dibawah ini :
Cara Membuat Popular Post yang Simple tapi Keren di Blog
Cara Membuat Popular Post yang Simple tapi Keren di Blog
Bagaimana ? Keren kan mba bro ? :D
Nah untuk membuat seperti itu, silahkan ikuti tutorial di bawah ini :
1. Anda harus login di akun blogger anda
2. Masuk di bagian Edit HTML
3. Copy kode berikut dan paste di atas kode ]]></b:skin>
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}
4. Kemudian save dan lihat hasilnya :)


SUMBER  : http://micvoster.blogspot.com