Click Unduh: TutorialBlog

Showing posts with label TutorialBlog. Show all posts

Thursday, September 8, 2016

Cara Membuat Kotak Komentar Disqus Dan Blogger Berdampingan

cook 2:35:00 PM 7

Cara Membuat Kotak Komentar Disqus Dan Blogger Berdampingan - Membuat kotak komentar Disqus dan Blogger secara berdampingan sangat efisien. Banyak blog besar yang memakai kotak komentar seperti ini. Dan kali ini kita akan membahas bagaimana cara membuatnya secara mudah dan jelas. Untuk demonya silahkan lihat kotak komentar di blog ini. Langsung aja cek caranya di bawah.

Cara Membuat Kotak Komentar Disqus Dan Blogger Berdampingan

1.) Hapus Kode CSS Komentar Blogger Sebelumnya.
Jika kalian menggunakan template buatan Arlina biasanya CSS nya akan seperti ini.

2.) Setelah Hapus CSS Lama, Ganti Dengan CSS Berikut.

 <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/AVvXsEhGdCqwNUAcWR-PjTiR30PQSU9UZjdeTaj4wmKOIKbpTd4HDaju0kw1gmRC4YvZFlXB72xrZhv44OFDnxPB9uGBFI1XJD_wpCZtZOktH6wMykRdyV9BviRtE0CWjEKwuMEU7FPApIU1m8E/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>

3.) Cari Kode Seperti Ini Atau Seperti Di gambar

 <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>

4.) Kemudian Ganti Semua Kode Tadi Dengan Kode 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='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://cdn.rawgit.com/KompiAjaib/js/master/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>

5.) Cari Lagi Kode Seperti Ini Atau Di Gambar

 <b:includable id='threaded-comment-form' var='post'>...</b:includable>
    <b:includable id='threaded_comment_js' var='post'>...</b:includable>

6.) Ganti Semua Kode Diatas Dengan Kode Di Bawah 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://cdn.rawgit.com/KompiAjaib/js/master/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>

7.) Selanjutnya Cukup Ribet Yaitu Hosting Terlebih Dahulu Script Di Bawah Ini Di Google Drive.
Jika Tidak Tahu, Silahkan Baca Tutorialnya Di Link Berikut Cara Hosting File Ke Google Drive.
Ganti Tulisan Merah Dengan ID Disqus Kalian

  var disqus_shortname="USERNAME DISQUS";
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");
});

8.) Setelah Selesai Di Hosting, Simpan Kode Berikut Di Atas </body>
Ganti Tulisan Merah Dengan URL Hosting JavaScript Yang Sudah Kalian Buat

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING JAVASCRPT DI SINI",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Nah Itulah Dia Cara Membuat Kotak Komentar Disqus Dan Blogger Berdampingan. Memang cukup ribet tapi akan mudah jika kalian mengikuti tutorial diatas dengan benar. Kesulitan Dalam Hosting File JavaScriptnya ? Baca Dulu Arikel Berikut Biar Gampang Cara Mudah Hosting File Ke Google Drive

CSS kotak komentar blogger yang saya sediakan masih versi lama

TutorialBlog Read more

Wednesday, September 7, 2016

Cara Mudah Hosting File CSS Dan JavaScript Di Google Drive

cook 4:39:00 PM 1

Cara Mudah Hosting File CSS Dan JavaScript Ke Google Drive - Google Drive merupakan tempat untuk melakukan upload file dengan berbagai jenis seperti CSS, JS (JavaScript), HTML, jQuery, dan sebagainya. Kita bisa dengan mudah mengupload kode CSS ataupun JavaScript pada web kita. Caranya adalah dengan memanfaatkan fasilitas Google Drive.Menggunakan Google Drive sebagai Hosting sangat diperlukan agar tidak memperlambat loading dari blog kita. Hal ini sangat diperlukan, Salah satu contohnya kita hatus mengHosting Javascript kita untuk Membuat Kotak Komentar Disqus Dan Blogger Berdampingan. Langsung saja cek caranya dibawah.

Cara Mudah Hosting File CSS Dan JavaScript Ke Google Drive

1.) Buka atau Kunjungi Google Drive
2.) Buat Folder Baru, Dan Berikan Nama Seperti Di Gambar. ( Contoh Folder Saya ClickUnduh )

3.) Kemudian Klik Folder Tersebut > Klik Kanan Pada Mouse > Dan Pilih Bagikan

4.) Selanjutnya Pilih Lanjutan

5.)Klik Ubah > Dan Lakukan Setting Seperti Di Gambar > Simpan

6.) Setelah Itu Double Klik Pada Folder Tadi > Dan Unggah File Dengan Cara Di Gambar

7.) Pilih File Yang Ingin Di Unggah

Setelah Selesai Di Unggah Tugas Kita Sudah Selesai. Yang Kita Butuhkan Hanya Tinggal URL nya Saja untuk kita letakkan di Javascript,CSS, DLL. Cara Mendapatkan Link Uploadnya Adalah Sebagai Berikut.

Cara Mendapatkan Link Upload Di Google Drive

1.) Buka Folder Yang Tadi > Copy URL Nya (Yang Diakhir Saja. Seperti Di Gambar)

2.) Selanjutnya Edit Link Tersebut Sehingga Menjadi Seperti Ini Dan Ganti Yang Diberi Warna Merah Dengan Link Kalian

 https://googledrive.com/host/0B7XHcgJDeR7_Z05kMEdrQ3FqNFE

3.) Setelah Kalian Ganti, Tambahkan Nama File Yang Kita Upload Tadi Di Ujungnya Sehingga Menjadi Seperti Ini

 https://googledrive.com/host/0B7XHcgJDeR7_Z05kMEdrQ3FqNFE/123.txt

Nah Selesai. Itulah Cara Mudah Hosting File CSS Dan JavaScript Ke Google Drive. Sangat Mudah Kan ?

TutorialBlog Read more

Wednesday, July 20, 2016

Cara Mudah Membuat Tabel Keren Di Postingan Blog

cook 6:13:00 PM 31

Cara Gampang Membuat Tabel Keren Di Postingan Blog - Saya kali ini akan membagikan tutorial yang sebenarnya tidak terlalu bagus, namun saya yakin semua blogger pasti akan membutuhkannya. Saya oprek oprek google dengan judul post ini, dan yang saya temukan hanyalah tabel sederhana dan tidak ada keren kerennya sama sekali. Karena itu saya akan membagikan tutorial mengenai Cara Gampang Membuat Tabel Keren Di Postingan Blog.

Dan Tabel ini, akan saya bagi menjadi dua macam. Yaitu Zebra Cool Tabel, Dan juga Dark Styling Tabel. Tanpa Basa basi langsung aja simak caranya di bawah ini :

1.) Tabel Zebra Cool

Caranya Sebagai Berikut :

1.) Buka Template > Edit HTML > Dan masukkan CSS berikut ini tepat di atas </style> :

 
/* CSS for Zebra Table in index.html */
.zebra-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.zebra-table th,.zebra-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.zebra-table tbody tr:nth-child(odd) { /* Make table like zebra */
background:#eee;
}/* End CSS for Zebra Table in index.html */

2.) Klik Simpan Template, Eitss.. Caranya belum selesai

3.) Klik Tulis Post > Pilih TAB HTML > Dan Copy kan kode HTML di bawah ini di tempat yang kalian inginkan. Dan Voila akan menjadi seperti gambar diatas .

 
<table class="zebra-table">
<thead>
<tr>
<th>No</th>
<th>Spesifikasi</th>
<th>Infinix Note 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Layar</td>
<td>IPS 5.9 Inch HD 720p</td>
</tr>
<tr>
<td>2</td>
<td>Chipset</td>
<td>MediaTek MT6753 Octa-Core 1.3GHz Cortex A53</td>
</tr>
<tr>
<td>3</td>
<td>GPU</td>
<td>Mali T720MP3</td>
</tr>
<tr>
<td>4</td>
<td>Operatyng System</td>
<td>Android 5.1 Lollipop</td>
</tr>
<tr>
<td>5</td>
<td>Memori&nbsp;</td>
<td>RAM 2GB/16GB</td>
</tr>
<tr>
<td>6</td>
<td>Kamera</td>
<td>13 MP &amp; 2Mp</td>
</tr>
<tr>
<td>7</td>
<td>Baterai</td>
<td>4040 mAh</td>
<td><br /></td></tr>
</tbody></table>
<div>
<br />
<div>

2.) Tabel Dark Styling

Caranya Sebagai Berikut :

1.) Buka Template > Edit HTML > Dan Letakkan CSS Berikut tepat diatas kode </style>

 
.costum-table-dark .table th {
    padding: 15px 10px !important;
    background-color: #212121;
    color: #EC7149;
    border-top: 0 !important;
    border-bottom: 2px solid #505050 !important;
}
.costum-table-dark .table tr:hover {
    background-color: #3A3A3A;
}
.costum-table-dark .table {
    background: #434242;
    color: #000;
}
.costum-table-dark {
    border: 0;
}
.costum-table-dark .table> tbody> tr> td, .costum-table-dark .table> tbody> tr> th, .costum-table-dark .table> tfoot> tr> td, .costum-table-dark .table> tfoot> tr> th, .costum-table-dark .table> thead> tr> td, .costum-table-dark .table> thead> tr> th {
    border-top: 1px solid #505050;
    text-align: left;
}

2.) Klik Simpan Template. Dan Seperti Cara Sebelumnya, Selanjutnya Pilih Menu Tulis Post > Pilih TAB HTML > Dan letakkan kode HTML berikut di tempat yang kalian inginkan. Setelah itu akan menjadi seperti gambar diatas.

 
<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="table-responsive costum-table-dark">
            <table class="table">
                <thead>
                    <tr>
                        <th width="2%">
                            No
                        </th>
                        <th>
                            ClickUnduh
                        </th>
                        <th>
                            ClickUnduh
                        </th>
                        <th>
                            ClickUnduh

                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            ClickUnduh

                        </td>
                        <td>
                            ClickUnduh

                        </td>
                        <td>
                            Otto
                        </td>
                        <td>
                            @mdo
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Jacob
                        </td>
                        <td>
                            Thornton
                        </td>
                        <td>
                            @fat
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Larry
                        </td>
                        <td>
                            the Bird
                        </td>
                        <td>
                            @twitter
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Mark
                        </td>
                        <td>
                            Otto
                        </td>
                        <td>
                            @mdo
                        </td>
                    </tr>
                    <tr>
                        <td>
                            5
                        </td>
                        <td>
                            Jacob
                        </td>
                        <td>
                            Thornton
                        </td>
                        <td>
                            @fat
                        </td>
                    </tr>
                    <tr>
                        <td>
                            6
                        </td>
                        <td>
                            Larry
                        </td>
                        <td>
                            the Bird
                        </td>
                        <td>
                            @twitter
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Note : Sebelum kalian membuat 2 tabel diatas, letakkan terlebih dahulu script CSS berikut di atas </head> :

 
"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css")

Nah Itulah Cara Mudah Membuat Tabel Keren Di Postingan Blog. Saya harap postingan kali ini dapat bermanfaat bagi kalian semua. Jika ada pertanyaan yang menyertai gambar, lebih baik ditanyakan di FansPage Facebook blog ini :) .

Baca Juga Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event

TutorialBlog Read more

Tuesday, July 19, 2016

Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event

cook 6:00:00 PM 23

Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event - Lagi lagi hari ini kita akan bahas mengenai tutorial blogging. Jika kemarin kita sudah bahas mengenai Cara Merubah Blog Nofollow Menjadi Dofollow, Kali ini kita akan bahas mengenai Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event.

Tujuan menggunakan fungsi ini adalah untuk meringankan loading blog kita. Cara kerja script ini cukup sederhana, yaitu konten komentar akan tertutup sampai kalian menekan tombol show comments. Langsung aja simak dibawah ini mengenai Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event :

1.) Buka Blogger > Template > Edit HTML > Cari Markup Komentar Seperti ini :

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

2.) Ganti Semua Markup Diatas Dengan Kode Dibawah Ini :

 
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

3.) Tambahkan Kode berikut Tepat Sebelum ]]></b:skin> atau </style>

 
/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

4.) Tambahkan Kode Di bawah Ini Sebelum </body>

 
<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

5.) Simpan Template

Silahkan Lihat Tampilannya Sekarang. Butuh Demo ? Lihat Gambar Ini

Nah Itulah Cara Membuat Show and Hide Kotak Komentar Blogger Dengan Onclick Event. Jika ada Kesulitan Sekali lagi saya tegaskan untuk bertanya di FansPage Facebook saja. Karena Komentar Blogger tidak dapat memuat gambar.

TutorialBlog Read more

Saturday, July 16, 2016

Cara Mudah Merubah Blog Dari NoFollow Menjadi DoFollow

cook 4:17:00 PM 17

Cara Mudah Merubah Blog Dari NoFollow Menjadi DoFollow - Sebelum kalian merubah blog kalian menjadi Dofollow sebaiknya kalian lebih memahami pengertian Dofollow dengan baik. Oke bagi kalian yang belum memahami apa itu Dofollow, kita akan membahasnya sedikit saja. Dari katanya saja Dofollow merupakan blog yang jika kita memberikan komentar di blog Dofollow berarti kita telah menaruh link ke blog tersebut dan dihitung sebagai backlink.

Dan tentu saja blog Dofollow maupun Nofollow memiliki keuntungan dan kerugiannya tersendiri, saya tidak akan membahas apa keuntungan dan kerugian Dofollow dan Nofollow. Tapi bagi kalian yang masih tidak paham mengenai Dofollow dan Nofollow bisa klik link berikut Pelajari Lebih Lanjut

Sebelum kita lanjutkan mengenai Cara Mudah Merubah Blog Dari NoFollow Menjadi DoFollow akan lebih baik jika kalian lebih memahami mengenai hal Dofollow dan Nofollow, dan saya sarankan untuk mengunjungi situs bangblogger.com terlebih dahulu.

Oke setelah kalian memahami Apa Itu Dofollow Dan NoFollow mari kita lanjutkan mengenai Cara Mudah Merubah Blog Dari NoFollow Menjadi DoFollow :

1.) Buka Blogger > Klik Template > Edit HTML
2.) Silahkan cari kode dibawah ini (Tekan CTRL + F untuk mempermudah pencarian) :


<a expr:href='data:backlink.url' rel='nofollow'>

3.) Selanjutnya hapus atribut rel='nofollow' . Sehingga akan menjadi seperti ini :

 
<a expr:href='data:backlink.url'>

4.) Simpan Template

Jika kalian tidak menemukan kode diatas, Silahkan ikuti cara ini :

1.)Silahkan cari kode seperti ini :


<a expr:href='data:comment.authorUrl' rel='nofollow'>

2.) Hapus Atribut rel='nofollow' Atau Ubah Menjadi rel='dofollow' seperti di bawah ini :

 
<a expr:href='data:comment.authorUrl' rel='dofollow'>

3.) Sesudah itu, Cari Kode dibawah ini :

 
<a expr:href='data:comment.url' rel='nofollow'>

4.) Hapus Atribut rel='nofollow' Atau Ubah Menjadi rel='dofollow' seperti di bawah ini :

 
<a expr:href='data:comment.url' rel='dofollow'>

5.) Klik Simpan Template

Nah begitulah Cara Mudah Merubah Blog Dari NoFollow Menjadi DoFollow. Semoga aritkel ini dapat bermanfaat bagi kalian semua.

Baca Juga Cara Membuat Kotak Script Keren Syntax Highlighter

TutorialBlog Read more

Friday, July 15, 2016

Cara Membuat Kotak Script Prism Syntax Highlighter Di Blogger

cook 7:32:00 PM 21

Cara Membuat Kotak Script Prism Syntax Highlighter Di Blogger - Bagi Kalian para blogger lama pasti sudah tidak asing lagi dengan istilah Syntax Highlighter. Saya sendiri pertama kali melihat Syntax Highlighter di blog arlinadzgn.com. Sedangkan Arlina sendiri mengatakan dia pertama kali melihat Syntax Highlighter di blog kang Ismet.
Kemudian saya membuat post ini berdasarkan tutorial blog arlinadzgn.com hanya saja warna nya sedikit saya rubah sesuai selera saya.

Oke langsung aja, berikut adalah Cara Membuat Kotak Script Prism Syntax Highlighter Di Blogger

1.) Silahkan buka blogger > Template > Edit HTML > Salin kode CSS dibawah ini dan paste kan tepat sebelum </style>

 
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #3cc888;
}

pre[data-codetype='HTMLku']:before {
    background-color: #e5b460;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='JQueryku']:before {
    background-color: #75d6d0;
}

2.) Letakkan 3 kode berikut ini tepat di atas </body> atau sebelum </head>

 
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>

 
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>


<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

3.) Sesudah selesai, klik Simpan Tamplate

Selanjutnya kalian copy salah satu code pemanggil dibawah ini.

 
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Cara Meletakkan kode pemanggil diatas adalah sebagai berikut :

1.) Masuk ke blogger > Buat Post Baru > Isi post tersebut > masuk ke TAB HTML

2.) Letkkan salah satu kode pemanggil yang ada diatas. Saya ambil contoh HTML.

3.) Setelah kalian meletakkan salah satu kode pemanggil diatas, klik pratinjau untuk melihat hasilnya. Maka hasilnya akan jadi seperti ini.

Nah Begitulah Cara Membuat Kotak Script Prism Syntax Highlighter Di Blogger. Mudah bukan ? semoga artikel yang saya buat ini dapat bermanfaat bagi kalian semua :)

Baca Juga Artikel Cara Mengatasi Kolom Komentar Yang Tidak Muncul Pada Versi Mobile

Referensi : http://www.arlinadzgn.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html

TutorialBlog Read more

Thursday, July 14, 2016

Cara Mengatasi Kolom Komentar Yang Tidak Tampil Pada Versi Mobile (HP)

cook 4:57:00 PM 30

Cara Mengatasi Kolom Komentar Yang Tidak Tampil Pada Versi Mobile (HP) - Saya dapat keluhan dari visitor blog ini yang mengatakan bahwa kolom komentar di blog ini tidak tampil saat dia melihat blog ini dari SmartPhonenya. Dan itulah alasan kenapa saya membuat post ini :v . Dan saya juga sangat yakin pasti ada juga blog yang bermasalah seperti blog saya. Terutama blog yang menggunakan tamplate gratisan (termaksud saya :v). Maka pada kesempatan kali ini saya akan membagikan mengenai Cara Mengatasi Kolom Komentar Yang Tidak Tampil Pada Versi Mobile (HP).

Cara Pertama :

Menurut Analisa, Pengalaman, dan Survei saya, hal tersebut dapat terjadi karena editor komentar yang dirubah lebarnya kurang menjadi 100%. Jadi menurut saya jangan mengganti lebar comment editor kurang dari 100%. Biasanya kode CSS komen editor kurang lebih seperti ini :

 
#comment-editor{width:100%!important;}

Dengan merubah lebarnya komen editor menjadi kurang dari 100% dapat membuat kotak komentar tidak muncul. Jika sudah kalian ganti menjadi 100% silahkan lihat kembali blog kalian dengan SmartPhone kalian.

Cara Kedua :

Berikut adalah cara saya menangani kasus ini
1.) Buka Menu Tamplate > Edit HTML
Salin kode berikut ini


 .blogger-iframe-colorize {display: block !important; }

2.) Letakkan kode diatas tepat diatas </style>. Berikut gambar tampilan blog saya sebelum saya pasang CSS diatas. Lihatkan tampilan kolom komentarnya tidak ada ? :v

3.) Setelah kalian meletakkan kode CSS diatas tepat diatas </style>. Kemudian Klik Simpan Tamplate. Dan voila. akan jadi seperti ini :)

Nah Begitulah Cara Mengatasi Kolom Komentar Yang Tidak Tampil Pada Versi Mobile (HP). Jika bagi kalian tidak work, mungkin setiap tamplate semua beda. Tapi menurut pengalaman saya cara pada kasus saya lebih banyak saya jumpai.
Semoga Tutorial diatas cukup bermanfaat bagi kalian semua terutama saya :v . Jika masih ada yang tidak berhasil silahkan bertanya di kolom komentar :).

Baca Juga Cara Mengetahui Blog Yang Copy Paste Artikel Dari Blog Kita

TutorialBlog Read more

Monday, July 11, 2016

Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina

cook 5:08:00 PM 12

Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina - Jika Sebelumnya saya pernah membahas mengenai Cara Membuat Widget Subsribe Form Keren Dan Responsive . Maka Kali ini saya akan membuat tutorial mengenai Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina.
Memang Soal design blog arlina adalah yang terbaik menurut saya. Saya penasaran bagaimana cara Arlina membuat kotak subscribe form nya, hingga saya tahu walaupun memiliki warna yang berbeda dari yang dimiliki oleh arlinadesign. Jika kotak subscribe form arlina berwarna biru gelap, kotak subscribe form yang saya berikan ini berwarna hitam. Tapi Saya rasa kalian dapat menyesuaikan warnanya.

Cara Mudah Mengatasi HP Android Bootlop Atau Mati Total

Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina

1.) Buka Blogger > Tamplate > Edit HTML

2.) Letakkan Kode dibawah ini tepat di atas atau sebelum kode ]]></b:skin> atau </style>

 
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#ff675c;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#ea5a50;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3.) Kemudian Letakkan Kode dibawah ini di tempat yang kalian inginkan

 
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=ClickUnduh/blog' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=ClickUnduh/blog&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ClickUnduh'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

4.) Ganti Tulisan ClickUnduh nya Dengan ID Feed Burner kalian. Setelah Itu klik Simpan Tamplate

Itulah Tutorial Mengenai Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina. Silahkan Kalian ikuti tutorialnya jika kalian tertarik dengan tutorial diatas. Semoga Bermanfaat.
Baca Juga Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive

TutorialBlog Read more

Friday, June 17, 2016

Cara Membuat Widget Search Box Super Keren Dan Responsive

cook 4:29:00 PM 20

Cara Membuat Widget Search Box Super Keren Dan Responsive - Search Box adalah salah satu unsur alami dari sebuah situs web yang cukup penting, memiliki fungsi yang hampir sama seperti mesin pencari, yaitu untuk mencari kata kunci atau konten tertentu di website maupun blog. Setelah Saya Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive Kali Saya akan Memberikan Tutorial Cara Membuat Widget Search Box Super Keren Dan Responsiv.
Pada Kali ini Search Box nya akan saya bagi menjadi 4 type Search Box. Dan Cara Memasang nya Adalah Sebagai Berikut :

Klik Menu Layout ( Tata Letak )

Pilih Add a Gadget

Pilih HTML/JavaScript

Dan Copy Script nya

Oke dan dibawah ini adalah script dari keempat seacrh box yang telah saya buat :

1. Simple search

<style>

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */

[class*="fontawesome-"]:before {

  font-family: 'FontAwesome', sans-serif;

}

body{

  text-align:center;



  background-color:#ebebeb;

}

.cf:before, .cf:after{

    content:"";

    display:table;

}



.cf:after{

    clear:both;

}



.cf{

    zoom:1;

}   

 /* Form wrapper styling */

.search-wrapper {

width: 240px;

margin: 45px auto 50px auto;

  border: 1px solid #ccc;

border-radius: 5px;

  

}



/* Form text input */



.search-wrapper input {

width: 160px;

height: 20px;

padding: 10px 15px;

float: left;

font: normal 16px 'Arial', 'Tahoma';

border:0;

background: #fff;

border-radius: 5px 0 0 5px;

}

.search-wrapper input:hover + .search-wrapper button {

    background: #ccc

}



.search-wrapper input:focus {

    outline: 0;

    background: #FFF;

}



.search-wrapper input::-webkit-input-placeholder {

   color: #c6c7c6;

   font-weight: normal;

}



.search-wrapper input:-moz-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}



.search-wrapper input:-ms-input-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}   



/* Form submit button */

.search-wrapper button {

overflow: visible;

position: relative;

float: right;

border:0;

padding: 0;

cursor: pointer;

height: 40px;

width: 50px;

font: bold 18px 'Arial', 'Tahoma';

color: white;

background: #3498db;

border-radius: 0 5px 5px 0;

transition: all 2.0s linear;

    -webkit-transition: all 0.2s linear;

    -moz-transition: all 0.2s linear;

    -ms-transition: all 0.2s linear;

    -o-transition: all 0.2s linear;

}

  

.search-wrapper button:hover{   

    background: #2980b9;

    transition: all 2.0s linear;

    -webkit-transition: all 0.2s linear;

    -moz-transition: all 0.2s linear;

    -ms-transition: all 0.2s linear;

    -o-transition: all 0.2s linear;

} 

  

.search-wrapper button:active,

.search-wrapper button:focus{ 

    background: #329400;

    outline: 0; 

    transition: all 0s linear;

    -webkit-transition: all 0s linear;

    -moz-transition: all 0s linear;

    -ms-transition: all 0s linear;

    -o-transition: all 0s linear;



}





.search-wrapper button:hover:before{

    border-right-color: #e54040;



}



.search-wrapper button:focus:before,

.search-wrapper button:active:before{

        border-right-color: #c42f2f;

}     



.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */

    border: 0;

    padding: 0;

}   

</style>

<form id="searchbox" method="get" action="/search" autocomplete="off"  class="search-wrapper cf">

        <input name="q" type="text" placeholder="Search" required="" />

        <button type="submit" id="button-submit"> <span class="fontawesome-search"></span>

        </button>

    </form>

2. Corner shape style

<style>

.cf:before, .cf:after{

    content:"";

    display:table;

}



.cf:after{

    clear:both;

}



.cf{

    zoom:1;

}   

 /* Form wrapper styling */

.search-wrapper {

width: 252px;

margin: 15px auto;

box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);

}



/* Form text input */



.search-wrapper input {

width: 150px;

height: 20px;

padding: 10px 15px;

float: left;

font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';

border: 0;

background: #EEE;

border-radius: 3px 0 0 3px;

}



.search-wrapper input:focus {

    outline: 0;

    background: #fff;

    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

}



.search-wrapper input::-webkit-input-placeholder {

   color: #999;

   font-weight: normal;

   font-style: italic;

}



.search-wrapper input:-moz-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}



.search-wrapper input:-ms-input-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}   



/* Form submit button */

.search-wrapper button {

overflow: visible;

position: relative;

float: right;

border: 0;

padding: 0;

cursor: pointer;

height: 40px;

width: 72px;

font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';

color: white;

text-transform: uppercase;

background: #D83C3C;

border-radius: 0 3px 3px 0;

text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);

}

  

.search-wrapper button:hover{   

    background: #e54040;

} 

  

.search-wrapper button:active,

.search-wrapper button:focus{ 

    background: #c42f2f;

    outline: 0; 

}



.search-wrapper button:before { /* left arrow */

    content: '';

    position: absolute;

    border-width: 8px 8px 8px 0;

    border-style: solid solid solid none;

    border-color: transparent #d83c3c transparent;

    top: 12px;

    left: -6px;

}



.search-wrapper button:hover:before{

    border-right-color: #e54040;

}



.search-wrapper button:focus:before,

.search-wrapper button:active:before{

        border-right-color: #c42f2f;

}     



.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */

    border: 0;

    padding: 0;

}   

</style>

<form id="searchbox" method="get" action="/search" autocomplete="off" class="search-wrapper cf">

        <input type="text" name="q" placeholder="Search here..." required="" />

        <button type="submit" id="button-submit" >Search</button>

    </form>

3. Style With Icon

<style>

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.search {

  width: 100%;

  position: relative;

}

.search:before {

  position: absolute;

  top: 0;

  right: 0;

  width: 40px;

  height: 40px;

  line-height: 40px;

  font-family: 'FontAwesome';

  content: '\f002';

  background: #34495e;

  text-align: center;

  color: #fff;

  border-radius: 5px;

  -webkit-font-smoothing: subpixel-antialiased;

  font-smooth: always;

}

.searchTerm {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  width: 100%;

  border: 5px solid #34495e;

  padding: 5px;

  height: 40px;

  border-radius: 5px;

  outline: none;

}

.searchButton {

  position: absolute;

  top: 0;

  right: 0;

  width: 40px;

  height: 40px;

  opacity: 0;

  cursor: pointer;

}

</style>

<form id="searchbox" method="get" action="/search" autocomplete="off" class="search">

  <input class="searchTerm" type="search"  name="q"   
placeholder="Enter your search term ..." /><input 
class="searchButton" id="button-submit" type="submit" />

</form>

4. Basic Style

<style>

.is-vishidden {

  position: absolute;

  overflow: hidden;

  width: 1px;

  height: 1px;

  padding: 0;

  border: 0;

  clip: rect(1px, 1px, 1px, 1px);

}

.pattern {

  padding: 1em;

  line-height: 1;

}

.f {

   position: relative;

}

input {

  display: block;

  border: 1px solid #000;

}

input[type=search] {

    width: 100%;

    padding: 1em;

    padding-right: 7em;

    position: relative;

   top: 0;

}

#button-submit {

  position: absolute;

  right: 0.75em;

  top: 0.5em;

  bottom: 0.5em;

  z-index: 1;

  width: 6em;

  padding: 0;

  cursor: pointer;

}

</style>

<div id="pattern" class="pattern">

  <form id="searchbox" method="get" action="/search" autocomplete="off" class="f">

      <label class="is-vishidden">Search the site</label>   

    <input type="search"  name="q" placeholder="Enter your keywords..."/>

      <input id="button-submit" type="submit" class="btn search-submit" value="Search" />

</form>

</div>

Widget Read more

Thursday, September 8, 2016

Cara Membuat Kotak Komentar Disqus Dan Blogger Berdampingan

Wednesday, September 7, 2016

Cara Mudah Hosting File CSS Dan JavaScript Ke Google Drive

Cara Mendapatkan Link Upload Di Google Drive

Wednesday, July 20, 2016

1.) Tabel Zebra Cool

2.) Tabel Dark Styling

Tuesday, July 19, 2016

Saturday, July 16, 2016

Jika kalian tidak menemukan kode diatas, Silahkan ikuti cara ini :

Friday, July 15, 2016

Cara Meletakkan kode pemanggil diatas adalah sebagai berikut :

Thursday, July 14, 2016

Cara Pertama :

Cara Kedua :

Monday, July 11, 2016

Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina

Friday, June 17, 2016

Klik Menu Layout ( Tata Letak )

Pilih Add a Gadget

Pilih HTML/JavaScript

Dan Copy Script nya

1. Simple search

2. Corner shape style

3. Style With Icon

4. Basic Style

Contact Me

About Me

Facebook

Follow Us

Popular Posts

Tags

@Way2themes