Cara Mudah Membuat Dan Memasang Komentar Disqus, Blogger Dan Facebook Di Blog Anda

Cara Mudah Membuat Dan Memasang Komentar Disqus, Blogger, Facebook Di Blogger - Selamat pagi kawan, kali ini saya ingin membagikan tutorial memasang komentar disqus, blogger, facebook di blog karena pernah ada visitor yang request cara memasang 3 sistem komentar di blog seperti di blog ini. Sebelum lanjut ke tutor nya lebih baik kenalan dulu sama Kelebihan dan Kekurangan Memasang Komentar Disqus Di Blog. Yuk Yuk Jangan lupa bikin teh atau kopi biar bacanya makin enak.. :)

Langsung aja deh ke tutorialnya pemasangannya dan bisa langsung diterapkan di blog anda agar menjadi lebih menarik dan memuaskan visitor blog anda.

Sebelum Memulai Langkah-Langkahnya Diharapkan Anda Untuk TELITI! Agar Tidak Terdapat Kegagalan Pemasangan 3 Jenis Komentar ini.

Cara Memasang Komentar Disqus, Blogger, Dan Facebook Di Blog

1. Login ke akun Blogger anda.

2. Silahkan Backup dulu Template Blog anda. (Menghindari kegagalan dalam pemasangan).

3. Pilih Template >> Edit HTML.

4. Hapus semua kode Yg berhubungan dengan Komentar yang sudah ada pada blog anda.

5. Copy dan Paste kode CSS dibawah ini tepat diatas kode </head>

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style type="text/css">
/*<![CDATA[*/
#comments2{clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif}
#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd}
#comment_block{padding-top:25px}
.comment_header{margin-left:5px}
.comment_avatar{height:48px;width:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEKErf3ennD7U1Ancb1BS9EkAtx0mXj6jQTIqjpa9ttY7sd_l1QBvptVnB6mzRk4-t_nS6Vv_WB-ixPJ_xypFNfb-I1FW3t9WBCfFJu9ncbztk1RwFGkv0iQ3qihWweIQYQLXykoMyl6c/s48/anon48.gif) center center no-repeat #F0F0F0;float:left;margin-top:-1px;margin-right:10px;margin-left:-5px;overflow:hidden;border-radius:3px}
.comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px;text-decoration:none}
.comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px}
.comment_name a{text-decoration:none;font-weight:500}
.comment_name a:hover{color:#0088b2;text-decoration:none}
.comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em}
.comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0}
.comment_body p img{vertical-align:middle}
.comment_body{margin:-12px 0 10px 47px;padding:0 10px 10px;position:relative;z-index:1}
.comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px}
.comment-set{margin-bottom:30px}
.comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px}
.comment_child .comment_wrap{padding-left:50px}
.comment_reply{cursor:pointer;color:#f1f1f1!important;font-size:12px;font-weight:500;margin-top:5px;margin-right:10px;padding:3px 5px;float:left;background:#666}
.comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#888!important}
.unneeded-paging-control{display:none}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form{width:100%}
.comment_reply,.comment_service a{display:inline-block}
.comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-right:10px}
.comment-form,.comment_img,.comment_youtube{max-width:100%!important}
.comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:left;margin-right:10px}
.comment_form{margin-top:-20px}
.comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700}
.comment_form a:hover{color:#fff}
.comment_author_flag{display:none}
.comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;right:-51px}
a.comment-delete{color:#f1f1f1!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:left;background:#666}
#comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.comment-form{margin-top:25px!important}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:10px 0 0}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
.comment_youtube{width:400px;height:225px;display:block;margin:auto}
.comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-size:16px;font-family:Roboto,sans-serif;line-height:1.3em;width:100%;border-radius:3px;position:relative;box-sizing:border-box}
.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}
.deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#DB6161;padding:10px}
.blogger-bar,.comment-text,.disqus-bar,.facebook-bar{font-family:Roboto,Arial,sans-serif;font-weight:500;color:#555}
iframe.blogger-iframe-colorize{max-height:250px}
.small-button a{color:#f1f1f1!important}
.small-button a:hover{color:#fff!important}
.blogger-bar,.disqus-bar,.facebook-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#eee}
.blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.facebook-bar{margin:20px 20px 0 5px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}
.blogger-box,.disqus-box,.facebook-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box}
.blogger-box,.facebook-box{display:none}
.fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}
.comment-text{display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px}
.comment-text:after{content:'f061';font-family:FontAwesome;color:#555;margin-left:5px}
/*]]>*/
</style>
</b:if>

Kadang tampilannya akan berbeda karna masing2 template berbeda kodenya
jadi silahkan di edit dan sesuaikan menurut kreatifitas anda.

6. Pada tahap ini  khususnya Blogger Pemula seperti Saya ini diharuskan untuk lebih teliti untuk menghindari hal-hal yang tidak diinginkan.

7. Silahkan anda cari kode dibawah ini. Biar cepat gunakan CTRL+F.

<b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>...</b:includable>
<b:includable id='comment_count_picker' var='post'>...</b:includable>
<b:includable id='comment_picker' var='post'>...</b:includable>
<b:includable id='comments' var='post'>...</b:includable>

8. Kemudian anda ganti semua kode tersebut dengan kode HTML/Javascript dibawah ini.

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
  </p>
<div id='emo-box' style='display:none'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
      </div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
              <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' title='delete comment'><i class='fa fa-trash'/></a>
    </b:if>
  </span>
</b:includable>
              <b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
      </span>
    <b:else/>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.commentLabelFull/>:
      </a>
    </b:if>
  </b:if>
</b:includable>
              <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='comments'/>
      <b:else/>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>
              <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='facebook-bar commentbtn' onclick='toggleVisibility(&apos;facebook-box&apos;)'>
Facebook
</div>
<div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'>
Blogger
</div>
<div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility(&apos;disqus-box&apos;)'>
Disqus
</div>
<div class='comment-text'>
Pilih Sistem Komentar Yang Anda Sukai
</div>
<div class='clear'>
</div>
<div class='disqus-box' id='disqus-box'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>
</div>
<div class='blogger-box' id='blogger-box'>
<div class='comments' id='comments2'>
        <b:if cond='data:post.allowComments'>
         <h3 id='total-comments'><data:post.commentLabelFull/></h3>            
         <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 comment-set' data-level='0' 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_area'>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <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>
              </div>          
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>            
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
<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'><i class='fa fa-reply'/> Balas</a>            
               <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a>                                               <div class='clear'/>                                        
              </b:if>                                      
             </div>
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            </div>
            <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' id='comment-form'>        
       
          <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'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>            
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></scr" + "ipt>");}
       //]]>
       </script>    
       <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 = {&quot;maxThreadDepth&quot;:&quot;0&quot;};
        </b:if>
//<![CDATA[
function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/comment-hack.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;
//]]>
</script>
</div>
<div class='facebook-box' id='facebook-box'>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
       var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
       if (!disqus_blogger_current_url.length) {
       disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
}
       var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
       var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>
<b:includable id='fb-comments' var='post'>
<div class='fb-comments' data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>
</b:includable>

10. Kemudian ganti semua kode diatas dengan kode HTML/Javascript dibawah ini.

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
    <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>
</span>
  </p>
<div id='emo-box' style='display:none'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
        </b:if>
      </div>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
              <b:includable id='threaded_comment_js' var='post'>
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;
       //<![CDATA[
function downloadJSAtOnload3(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;
//]]>
</script>
</b:includable>

11. Kemudian Letakkan kode HTML/Javascript dibawah ini tepat Diatas kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname="bacalagi";
var disqus_url = disqus_blogger_current_url;

(function () {
    "use strict";
    var get_comment_block = function () {
        var block = document.getElementById('comments');
        if (!block) {
            block = document.getElementById('disqus-blogger-comment-block');
        }
        return block;
    };
    var comment_block = get_comment_block();
    if (!!comment_block) {
        var disqus_div = document.createElement('div');
        disqus_div.id = 'disqus_thread';
        comment_block.innerHTML = '';
        comment_block.appendChild(disqus_div);
        comment_block.style.display = 'block';
        var dsq = document.createElement('script');
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);
    }
})();

!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");

    var divs = ["disqus-box", "blogger-box", "facebook-box"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

$(".commentbtn").click(function (e) {
$(this).addClass("btncurrent").siblings().removeClass("btncurrent");
});
//]]>
</script>
</b:if>

12. Ganti Username/Shortname bacalagi (saya tandai dengan blok biru) dengan username atau Shortname disqus anda.

13. Simpan Template dan sampai disini seharusnya sudah berhasil dipasang dan tidak terjadi error. Silahkan anda lebih teliti dalam langkah-langkah pemasangannya dan jika terjadi error maka ulangi lagi dari awal.

Demikian ulasan tentang Cara Mudah Membuat Dan Memasang Komentar Disqus, Blogger Dan Facebook Di Blog Anda. Di lain waktu saya akan berbagi tutorial Cara memasang Komentar Disqus Valid HTML 5 yang tidak akan membuat Loading Blog anda menjadi berat. Jika ada pertanyaan atau ada yang belum dimengerti silahkan bertanya di kolom kementar yang tersedia dan Semoga Bermanfaat.

Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5

Cara Membuat Dan Memasang Widget PopUp Fanspage Facebook Like Box Dengan Efek Lightbox Valid HTML 5 - Seperti pada umumnya PopUp facebook like box dengan efek lightbox atau warna gelap yang mengelilingi widget poup ini. Cara memasang PopUp facebook like box ini pun sangat mudah, Anda hanya dengan menambahkan kode yang ada di bawah ini ke dalam Widget HTML/Javascript yang terdapat pada menu Layout atau Tata Letak di dashboard blog. Untuk lebih jelasnya berikut Tutorial Cara Memasang Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5 di Blog.

Sebelum memasang widget ini perlu Anda ketahui jika Widget PopUp ini murni menggunakan CSS, HTML dan tidak memakai Javascript atau Jquery alias Valid HTML 5. Jadi setelah anda memasang widget  ini kecepatan blog Anda tidak akan menjadi berat atau akan tetap seperti sebelum memasang popup ini.

Baca Juga: Cara Membuat Loading Blog Menjadi Sangat Cepat Dengan Jquery Lazy Load

LANGKAH-LANGKAH:

1. Silahkan Login ke akun Blogger Anda.

2. Pada Dashboard >> Pilih Layout/Tata Letak.

3. Klik Tambahkan Gadget (Terserah Mau Ditaruh Dimana Saja).

4. Kemudian Copy Kode CSS dibawah ini kemudian Klik dan Paste didalam kotak HTML/Javascript.

<style type='text/css'>
#PopUpBL {
position : absolute;
display : block;
top : 0;
left : 0;
width : 100%;
height : 100%;
position : fixed;
background-color : rgba(0, 0, 0, 0.8);
margin : 0;
overflow : hidden;
z-index : 999999;
}
#PopBookBL {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBookBL {
width : 290px;
height : 300px;
position : fixed;
top : 45%;
left : 50%;
margin-top : -200px;
margin-left : -200px;
border : #4791d2 solid 10px;
padding : 20px;
z-index : 999999;
border-radius : 4px;
}
#PopTitleBL {
background : #4791d2;
color : #fff;
font-size : 18px !important ;
font-weight : 700;
width : 324px;
margin : 0 -27px 10px -27px;
padding : 10px;
line-height : 25px;
text-align : center;
float : left;
}
.anarchyta {
width : 280px;
height : 200px;
position : relative;
background : #4791d2;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.anarchyta, .anarchyta:before, .anarchyta:after {
background : transparent;
border : #4791d2 solid 1px;
}
.anarchyta:before, .anarchyta:after {
position : absolute;
content : "";
bottom : -3px;
left : 2px;
right : 2px;
height : 1px;
border-top : none;
}
.anarchyta:after {
left : 4px;
right : 4px;
bottom : -5px;
box-shadow : 0 0 2px #4791d2;
}
.close {
background : #4791d2;
padding : 5px 5px 10px 5px;
font-size : 14px;
font-weight:bold;
color : #ecf0f1;
text-decoration : none;
border-radius : 4px 4px 0 0;
cursor:pointer;
}
</style>

5. Kemudian tambahkan Kode dibawah ini Tepat Dibawah Kode CSS diatas.

<div id='PopUpBL'>
<div class='PopBookBL' id='PopBookBL'>
<h3 id='PopTitleBL'>LIKE US ON FACEBOOK</h3>
<div class='anarchyta'>
<div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/bacalagiid' data-show-faces='true' data-stream='false' data-width='292'></div>
</div><br/>
<a class='close' onmouseup='document.getElementById(&#39;PopUpBL&#39;).style.display=&#39;none&#39;'>CLOSE</a>
</div>
</div>

Catatan : Silahkan anda ganti URL yang saya tandai dengan URL Fanspage Anda dan Silahkan juga anda atur CSS dan HTML nya sesuai keinginan Anda.

6. Langkah terakhir klik "Simpan".

Sampai disini Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5 Anda sudah terpasang ke dalam Blog Anda dan tidak akan membuat loading blog menjadi berat serta secara tidak langsung widget dapat meningkatkan trafik blog karena dengan blog yang loading nya cepat itu disukai oleh google dan visitor.

Baca Juga : Cara Ampuh Meningkatkan Trafik Blog Dengan Cepat

Sekian Tutorial Cara Memasang Widget PopUp Fanspage Like Box Dengan Efek Lightbox Valid HTML 5 Di Blog dan Semoga Fanspage anda semakin banyak yang ngeLike. Terima Kasih dan Semoga Bermanfaat.. :)

Cara Membuat Responsive Ads Box By Refresh Di Sidebar Blog

Cara Membuat Responsive Ads Box By Refresh Di Sidebar Blog - Selamat Sore dan kembali dengan BacaLagi, Kali ini BacaLagi saya berbagi Tips Blogging tentang Cara Membuat Widget Kotak Iklan Responsive yang mana Widget Kotak Iklan ini jelas berfungsi untuk memberi kesan menarik untuk tampilan iklan AdSense dan Iklan lainnya yang dipasang pada Blog anda.

Baca Selengkapnya »

Cara Memasang Widget Social Share Responsive Melayang Di Sidebar Blog

Cara Mudah Memasang Widget Social Share Responsive Melayang Di Sidebar Blog – Sosial Media hmm kalo ngomongin tentang sosial media di saat ini mungkin anda pasti akan berpikir bahwa sosial media merupakan tempatnya para manusia melakukan aktifitas online dengan berbagai jenis kegiatan dan kelakuan yang unik-unik.

Baca Selengkapnya »

Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru

Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru - Selamat malam sobat BacaLagi yang mungkin lagi duduk manis didepan TV atau PC atau Lepi dan sedang mencari Tutor ini hehe. Postingan saya kali ini berdasarkan request sohib dan beberapa orang lainnya yang membutuhkan PopUp Widget Subscribe Box. Enggak usah berlama-lama deh langsung masuk aja ke Langkah-langkahnya.

Baca Selengkapnya »

Cara Membuat Widget Subscribe Box Flat UI Di Sidebar Blogger

Cara Membuat Widget Subscribe Box Flat UI Di Sidebar – Selamat Pagi Sobat bagaimana liburan kemarinnya ? menyenangkan bukan ? Okeh, Kali ini saya akan membagikan widget subscribe box. kita harus mengetahui elemen yang ingin digunakan agar sebuah widget tersebut menjadi indah dan menarik. Pada kesempatan kali ini, saya akan mengulas secara jauh widget subscribe yang dimodifikasi menjadi Flat UI. Kesulitan disini yaitu menentukan warna Flat UI yang cocok agar box subcribe menjadi padu antara satu dengan yang lainnya. Oke sobat enggak usah lama-lama deh ya langsung aja ke langkah-langkah membuatnya.

Baca Selengkapnya »

Kumpulan Kode Tag HTML Beserta Fungsinya

Kumpulan kode atau tag HTML yang sangat sering digunakan beserta dengan penjelasan fungsinya akan sangat bermanfaat dan membantu kita dalam melakukan sesuatu yang berhubungan dengan HTML (Hypertext Markup Language). Mulai dari mendesain web, membuat template, mengedit tampilan blog atau web hingga untuk keperluan posting pada blog atau web.

Apa pengertian dari Tag HTML ?

Tag HTML

Sebelum melihat kumpulan tag HTML, sebelumnya mari kita ketahui dulu apa itu tag HTML secara ilmiah. Hyper Text Markup Language (HTML) sendiri adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web yang ditulis dalam berkas format ASCII. Sedangkan Tag HTML merupakan sebuah kode atau kunci dalam bahasa HTML yang umumnya terdiri dari tag pembuka dan tag penutup yang memiliki tanda kurung siku/sudut. Fungsi tag HTML sendiri untuk memberitahukan browser bagaimana sebuah objek ditampilkan.
Baca juga Cara membuat text area scroll di blog

Kumpulan Macam-macam TAG HTML dan Fungsinya

Tag HTML	Fungsi
<!-- -->	Membuat komentar atau keterangan yang tidak akan terlihat atau dijalankan oleh browser
<a href>	Membuat link ke halaman web atau url tertentu
<a name>	Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>	Sebagai awalan dari Java applets
<area>	Memberikan definisi pada daerah image map yang dapat diklik (link)
<b>	Menebalkan teks (Bold)
<basefont>	Membuat tek menjadi beratribut default (ukuran, jenis font, warna dll)
<bgsound>	Memberi background sound atau suara latar pada halaman web
<big>	Memperbesar ukuran teks sebesar satu point dari sebelumnya
<blink>	Membuat teks berkedip-kedip
<body>	Tag awal untuk memasukan dan membuat pengaturan terhadap text, warna link & lainnya
<br>	Pindah ke baris baru (fungsi enter)
<caption>	Memberi caption atau label pada tabel
<center>	Membuat rata tengah teks atau gambar
<comment>	Membuat komentar atau keterangan yang tidak akan terlihat atau dijalankan oleh browser
<dd>	Membuat teks kedalam atau indents
<div>	Membuat bagian atau section pada html
<embed>	Menyematkan file sound atau avi ke halaman web
<font>	Mengatur jenis, ukuran, dan warna huruf pada teks
<form>	Membuat form
<frame>	Mendefinisikan frame
<frameset>	Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6>	Membuat heading pada teks yang mengubah ukuran berdasarkan heading yang dipilih
<head>	Mendefinisikan head pada dokumen html
<hr>	Membuat garis horizontal
<html>	Definisi awal dokumen HTML
<i>	Membuat teks menjadi miring (italic)
<img>	Untuk memasukan dan mengatur image, imagemap atau an animation
<input>	Mendefinisikan input field pada form
<li>	Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map>	Mendefinisikan client-side map
<marquee>	Membuat teks berjalan
<nobr>	Mencegah ganti baris pada teks atau images
<noframes>	Menghilangkan frames jika browser tidak mendukung
<ol>	Definisi awal dan akhir sebuah Numbering
<p>	Ganti paragraph
<pre>	Membuat teks dengan ukuran huruf yg sama
<script>	Mendefinisikan awal script
<table>	Membuat tabel
<td>	Membuat kolom pada table
<title>	Mendefinisikan judul atau title
<tr>	Membuat baris pada table
<u>	Membuat garis bawah (undescore) pada teks
<ul>	Definisi awal dan akhir sebuah Bullets

Kumpulan tag HTML diatas merupakan tag yang umum dan paling banyak digunakan, tentunya masih ada banyak tag HTML yang lebih spesifik yang tidak saya tampilkan karena sangat jarang digunakan. Semoga kumpulan tag HTML tersebut dapat bermanfaat dalam membantu anda mengerjakan sesuatu.

Membuat Related Posts Di Sidebar Blogger

Sebenarnya ini adalah memindahkan widget related posts yang biasanya selalu berada di bawah postingan ke sidebar blog. Namun kita tidak akan menyentuh gadget sidebar di layout/tata letak, hanya melakukan pekerjaan ini di edit HTML. 

Dan related posts yang akan kita gunakan adalah related posts dari DTE. Cara memindahkan related posts ke sidebar ini sebenarnya sudah diberitahukan oleh mas Taufik pada komentar di postingannya, namun tidak terperinci.

Nah kali ini saya akan melengkapinya agar Anda lebih mudah memasang related posts ini pada sidebar blogger. Bagi yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Kode CSS

Silahkan gunakan kode css di bawah ini agar related posts tidak berjejer ke samping tapi ke bawah. Dan jika Anda ingin memodif tampilannya agar sesuai dengan tema blog, silahkan modif pada css ini.

.related-bottomposts,.related-post h4 {display:none}
.related-post{margin:5% 5% 0;padding:0;font-family:'Open Sans',sans-serif;text-align:left;width:100%;position:relative;color:#000}
.related-post a{font-weight:600;color:#000;font-size:16px!important;}
.related-post a:hover{color:red}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.related-post-style-3 .related-post-item{display:block;width:90%;max-width:300px;height:auto;padding:150px 0 10px;margin-bottom:20px!important}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 5px;width:99%;height:140px;max-width:none;max-height:none;background-color:transparent;padding:0;transition:all 400ms ease-in-out;border:1px solid #ddd}
.related-post-style-3 .related-post-item-thumbnail:hover{opacity:.7}
.related-post-style-3 .related-post-item:focus,.related-post-style-3 .related-post-item:active{outline:0}

Kode HTML

Kemudian silahkan copy kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-bottomposts'>
    <div class='related-post' id='related-post'/>
</div>
<script type='text/javascript'>
var labelArray=[<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];var relatedPostConfig={widgetStyle:3,callBack:function(){if(window.addEventListener){window.addEventListener(&quot;DOMContentLoaded&quot;,insertRelatedPostMarkupToSidebar,false);window.addEventListener(&quot;load&quot;,insertRelatedPostMarkupToSidebar,false)}else{if(window.attachEvent){window.attachEvent(&quot;onload&quot;,insertRelatedPostMarkupToSidebar)}else{window.onload=insertRelatedPostMarkupToSidebar}}}};
</script>
</b:if>

Dan simpan kode di atas tadi di bawah kode berikut atau yang mirip seperti ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

Kode Javascript

Simpan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function insertRelatedPostMarkupToSidebar(){var e=document.getElementById("related"),t=document.getElementById("related-post");if(e)e.insertBefore(t,e.firstChild)};
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.kompiajaib.com/",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:300,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-titleimg" href="'+v+'"'+b+' title="'+t+'"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

Silahkan ganti kode http://www.kompiajaib.com/ dengan URL blog Anda dan silahkan tentukan jumlah related posts yang ingin ditampilkan pada kode berikut numPosts:7

Menentukan Target Gadget Sidebar

Nah silahkan simak dengan teliti pada langkah ini, karena tiap blog kadang-kadang memiliki tag sidebar yang berbeda-beda, jadi Anda jangan terpaku pada tag sidebar pada kode ini, namun sesuaikan dengan template yang anda gunakan.

Silahkan tentukan tempat untuk memunculkan related posts, misalnya And ingin memunculkan sidebarnya di bawah popular posts, dan misalnya kode sidebar dengan popular posts seperti di bawah ini.

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
      <b:includable id='main'>
...............
...............
...............
</b:includable>
    </b:widget>
  </b:section>
</div>

Nah silahkan simpan kode di bawah ini tepat di bawah kode </b:widget> 

    <b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content' id='related'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>

Sehingga menjadi seperti berikut:

<div id='sidebar-wrapper'>
  <b:section class='sidebar3' id='sidebar3' preferred='yes'>
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
      <b:includable id='main'>
...............
...............
...............
</b:includable>
    </b:widget>
    <b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content' id='related'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>
  </b:section>
</div>

Kemudian silahkan SAVE template Anda. Jika ternyata template tidak dapat di-save karena ada double id dari HTML5 (perhatikan kode ini id='HTML5' pada gadget Related Posts), silahkan ganti angka 5 dengan berapapun agar tidak terjadi double id, misalnya menjadi id='HTML30'. Kuncinya adalah kode id='related' sebagai target peletakan html related posts oleh javascript.

Dan jika ingin merubah title gadget-nya, jangan dirubah melalui tata letak/layout karena akan error. Tapi rubah pada edit HTML pada kode ini title='Related Posts'.