Home Archives for Mei 2016

9 Mei 2016

Hatsune Miku PV Blogger Template v1.1

previously I've shared a tutorial How to Add a Progress Bar with Bootstrap. Today I will share a template for PV themed blue with pictures hatsune miku. this is my first template with the theme of PV. I hope you like it. by post grid design, custom post pv, defer videos and so forth. but I forgot to add the widget in footer maybe next version I will add the widget in footer.
Example Post i get from http://kara-tsuru.com and header image from konachan.net
Hatsune Miku PV Blogger Template v1.1
Cmonfrozen Share Template Anime Hatsune Miku PV Blogger Template v1.1
Description Template

Hatsune Miku PV Anime Blogger Template is a template for Share PV or video like a Blog PV or Blog AMV with Custom Post for PV, and defer video for optimize loading blog.

This template is responsive, 2 column and colored blue with pictures hatsune miku from konachan.

Note : Click Button "How To Configure Template" for setting this template

Fix Lightbox : Go to HTML Editor, Add this CSS .CSS_LIGHTBOX{z-index:200!important;} before */]]></b:skin>

Document (Only) Template (Only) Live Preview How to Configure Template
  • Responsive
  • 2 Column
  • PSD Header
  • Optimize
  • SEO
  • Custom Post PV
  • Pagination
  • Spetific Label
  • Genre Dropdown
  • Search Box
  • Document
  • Remove Footer credits
Read More

6 Mei 2016

How to Add a Progress Bar with Bootstrap

How to Add a Progress Bar with Bootstrap
How to Add a Bootstrap Progress Bar 3 - today i want share bootstrap progress bar, before i already share Progress bar. but this different progress bar this use bootstrap for make a progress bar. if your blog has been no bootstrap please read the tutorial Bootstrap 3 in Blogger

How to add bootstrap progress bar in blogger ?
  1. Go To Blogger > Yourblog > Layout > Add a Gadget > HTML/Javascript
  2. Choose Style Progress Bar
Do not forget to replace the value style="width: 45%" and the aria-valuenow="45" with the number you want

Basic Progress Bar
45% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="45"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>
you can add this selector for change color
progress-bar-success progress-bar-info progress-bar-warning progress-bar-danger
add after name "progress-bar"
example : "progress-bar progress-bar-danger"
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="45"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
    45%
  </div>
</div>;
45% Complete
Progress Bar With Label
45%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="45"
  aria-valuemin="0" aria-valuemax="100" style="width:45%">
    45%
  </div>
</div>;
Progress Bar Color With Label
if you want without label change 30% Complete (success) with <span class="sr-only">30% Complete (success)</span>
30% Complete (success)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (success)
  </div>
</div>
30% Complete (info)
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (info)
  </div>
</div>
30% Complete (warning)
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (warning)
  </div>
</div>
30% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (danger)
  </div>
</div>
Striped Progress Bars
30% Complete (success)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (success)
  </div>
</div>
30% Complete (info)
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (info)
  </div>
</div>
30% Complete (warning)
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (warning)
  </div>
</div>
30% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete (danger)
  </div>
</div>
Make Animated Progress Bar
Progress Bar Striped Animated
30% Complete
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30% Complete
  </div>
</div>
Read More

4 Mei 2016

Update Meta Tag Bootstrap Template

Update Meta Tag Bootstrap Template
Update Meta Tag Bootstrap Template because someone asked template now less SEO. then I decided to follow the old meta tag that I took from template mas sugeng which I think is also seo with slight modifications, for everyone who use my templates please follow the tutorial below to change the meta tags in the template, in order to get more traffic from previous.
  1. Go to blogger > Yourblog > Edit HTML > Find HTML <head> (CTRL + F).
    <!-- Meta Tag -->
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <title><data:blog.pageTitle/></title>
    <b:else/>
        <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
            <title>404: Page Not Found | <data:blog.title/></title>
        <b:else/>
            <title><data:blog.pageName/></title>
        </b:if>
    </b:if>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <script type='text/javascript'>
    //<![CDATA[
    (function() { (function(){function c(a){this.t={};this.tick=function(a,c,b){var d=void 0!=b?b:(new Date).getTime();this.t[a]=[d,c];if(void 0==b)try{window.console.timeStamp("CSI/"+a)}catch(e){}};this.tick("start",null,a)}var a;window.performance&&(a=window.performance.timing);var h=a?new c(a.responseStart):new c;window.jstiming={Timer:c,load:h};if(a){var b=a.navigationStart,e=a.responseStart;0<b&&e>=b&&(window.jstiming.srt=e-b)}if(a){var d=window.jstiming.load;0<b&&e>=b&&(d.tick("_wtsrt",void 0,b),d.tick("wtsrt_",
    "_wtsrt",e),d.tick("tbsd_","wtsrt_"))}try{a=null,window.chrome&&window.chrome.csi&&(a=Math.floor(window.chrome.csi().pageT),d&&0<b&&(d.tick("_tbnd",void 0,window.chrome.csi().startE),d.tick("tbnd_","_tbnd",b))),null==a&&window.gtbExternal&&(a=window.gtbExternal.pageT()),null==a&&window.external&&(a=window.external.pageT,d&&0<b&&(d.tick("_tbnd",void 0,window.external.startE),d.tick("tbnd_","_tbnd",b))),a&&(window.jstiming.pt=a)}catch(k){}})();window.tickAboveFold=function(c){var a=0;if(c.offsetParent){do a+=c.offsetTop;while(c=c.offsetParent)}c=a;750>=c&&window.jstiming.load.tick("aft")};var f=!1;function g(){f||(f=!0,window.jstiming.load.tick("firstScrollTime"))}window.addEventListener?window.addEventListener("scroll",g,!1):window.attachEvent("onscroll",g);
     })();
    //]]>
    </script>
    <meta content='blogger' name='generator'/>
    <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
    <link expr:href='data:blog.url' rel='canonical'/>
    <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
    <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
    <link expr:href='&quot;//www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
    <link href='//www.blogger.com/openid-server.g' rel='openid.server'/>
    <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
    <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
    <!-- Facebook Open Graph -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot;for watch and download anime.&quot;' property='og:description'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs04331aOCnqTguffC4iKHmdQPrJ2d0Ao0cnH5FK8jYKPfQ1OBTwvbRy5uvG_G_r4NPHflemH_29_6xBi_tC6YVLQzblozJU-MciwJAGv6A_FI-ivW_rYtglF7tkMzo24hqVY7MZr5BWY/s400/no-thumbnail.jpg' property='og:image'/>
    </b:if>
    </b:if>
    <meta content='XXXXXX' name='Author'/>
    <meta expr:content='data:blog.title' name='twitter:site'/>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@XXXXXX' name='twitter:creator'/>
  2. Replace the above code with this code
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
    <![endif]-->
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/> 
    <b:include data='blog' name='all-head-content'/>
    <meta content='XXXXXX' name='Author'/>
    <!-- Title Blogger -->
    <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><title><data:blog.pageTitle/></title><b:else/>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><title><data:blog.pageName/> - <data:blog.title/></title><b:else/>
    <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.pageName == &quot;&quot;'><title>All Posts - <data:blog.title/></title><b:else/>
    <b:if cond='data:blog.pageType in {&quot;error_page&quot;}'><title>Page Not Found - <data:blog.title/></title><b:else/><title><data:blog.pageName/></title></b:if></b:if></b:if></b:if>
    <!-- Meta Keyword -->
    <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
    <!-- Noindex -->
    <b:if cond='data:blog.pageType in {&quot;archive&quot;} or data:blog.searchLabel or data:blog.searchQuery'><meta content='noindex,nofollow' name='robots'/></b:if>
    <!-- Facebook Open Graph Tag -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta content='website' property='og:type'/>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgc4HOGmrg6XifhpXyGvunXfKDTXGMwOqbU8caXmYKxuf_6DMsOefIAGzKExG23Tlr5wjgBQdDx3v82iArj0aUAJ1lH9TqSv0L1BaVJ3HIt4kT15fzH93ZQosXk9FUy_0hfXuAtxSAbW-/s1600/no-image.png' property='og:image'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='en_US' property='og:locale'/>
    <meta content='en_GB' property='og:locale:alternate'/>
    <meta content='id_ID' property='og:locale:alternate'/>
    <meta content='summary' name='twitter:card'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='XXXXXX' name='twitter:site'/>
    <meta content='XXXXXX' name='twitter:creator'/>
    <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
  3. Then Save Template
Change this
<meta content='XXXXXX' name='Author'/>
.....
<meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
.....
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
....
<meta content='XXXXXX' name='twitter:site'/>
<meta content='XXXXXX' name='twitter:creator'/>

NOTE : This applies in my bootstrap template, such as Fanstrap, Fanbase v2, Ryotaku v2, and Sakura v2. for template Sparkling, Simple Fast. Please remove external links bootstrap
Update Meta Tag Bootstrap Template karena ada yang tanya templateku (mulai dari fanstrap serta keturunannya) kurang joss seonya. maka saya putuskan bukan ikut meta tag yang lama yang saya ambil dari template mas sugeng dengan sedikit modifikasi dari saya, untuk yang sedang menggunakan template saya silahkan ikuti tutorial dibawah ini untuk mengganti meta tagnya. moga trafiknya naik hehehe.

  1. Pergi ke Blogger > Blogmu > Edit HTML > Cari kode HTML <head> (CTRL + F).
    <!-- Meta Tag -->
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <title><data:blog.pageTitle/></title>
    <b:else/>
        <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
            <title>404: Page Not Found | <data:blog.title/></title>
        <b:else/>
            <title><data:blog.pageName/></title>
        </b:if>
    </b:if>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <script type='text/javascript'>
    //<![CDATA[
    (function() { (function(){function c(a){this.t={};this.tick=function(a,c,b){var d=void 0!=b?b:(new Date).getTime();this.t[a]=[d,c];if(void 0==b)try{window.console.timeStamp("CSI/"+a)}catch(e){}};this.tick("start",null,a)}var a;window.performance&&(a=window.performance.timing);var h=a?new c(a.responseStart):new c;window.jstiming={Timer:c,load:h};if(a){var b=a.navigationStart,e=a.responseStart;0<b&&e>=b&&(window.jstiming.srt=e-b)}if(a){var d=window.jstiming.load;0<b&&e>=b&&(d.tick("_wtsrt",void 0,b),d.tick("wtsrt_",
    "_wtsrt",e),d.tick("tbsd_","wtsrt_"))}try{a=null,window.chrome&&window.chrome.csi&&(a=Math.floor(window.chrome.csi().pageT),d&&0<b&&(d.tick("_tbnd",void 0,window.chrome.csi().startE),d.tick("tbnd_","_tbnd",b))),null==a&&window.gtbExternal&&(a=window.gtbExternal.pageT()),null==a&&window.external&&(a=window.external.pageT,d&&0<b&&(d.tick("_tbnd",void 0,window.external.startE),d.tick("tbnd_","_tbnd",b))),a&&(window.jstiming.pt=a)}catch(k){}})();window.tickAboveFold=function(c){var a=0;if(c.offsetParent){do a+=c.offsetTop;while(c=c.offsetParent)}c=a;750>=c&&window.jstiming.load.tick("aft")};var f=!1;function g(){f||(f=!0,window.jstiming.load.tick("firstScrollTime"))}window.addEventListener?window.addEventListener("scroll",g,!1):window.attachEvent("onscroll",g);
     })();
    //]]>
    </script>
    <meta content='blogger' name='generator'/>
    <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
    <link expr:href='data:blog.url' rel='canonical'/>
    <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
    <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
    <link expr:href='&quot;//www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
    <link href='//www.blogger.com/openid-server.g' rel='openid.server'/>
    <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
    <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
    <!-- Facebook Open Graph -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot;for watch and download anime.&quot;' property='og:description'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs04331aOCnqTguffC4iKHmdQPrJ2d0Ao0cnH5FK8jYKPfQ1OBTwvbRy5uvG_G_r4NPHflemH_29_6xBi_tC6YVLQzblozJU-MciwJAGv6A_FI-ivW_rYtglF7tkMzo24hqVY7MZr5BWY/s400/no-thumbnail.jpg' property='og:image'/>
    </b:if>
    </b:if>
    <meta content='XXXXXX' name='Author'/>
    <meta expr:content='data:blog.title' name='twitter:site'/>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@XXXXXX' name='twitter:creator'/>
  2. Ganti kode diatas dengan kode dibawah ini
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
    <![endif]-->
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/> 
    <b:include data='blog' name='all-head-content'/>
    <meta content='XXXXXX' name='Author'/>
    <!-- Title Blogger -->
    <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><title><data:blog.pageTitle/></title><b:else/>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><title><data:blog.pageName/> - <data:blog.title/></title><b:else/>
    <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.pageName == &quot;&quot;'><title>All Posts - <data:blog.title/></title><b:else/>
    <b:if cond='data:blog.pageType in {&quot;error_page&quot;}'><title>Page Not Found - <data:blog.title/></title><b:else/><title><data:blog.pageName/></title></b:if></b:if></b:if></b:if>
    <!-- Meta Keyword -->
    <b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
    <!-- Noindex -->
    <b:if cond='data:blog.pageType in {&quot;archive&quot;} or data:blog.searchLabel or data:blog.searchQuery'><meta content='noindex,nofollow' name='robots'/></b:if>
    <!-- Facebook Open Graph Tag -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta content='website' property='og:type'/>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgc4HOGmrg6XifhpXyGvunXfKDTXGMwOqbU8caXmYKxuf_6DMsOefIAGzKExG23Tlr5wjgBQdDx3v82iArj0aUAJ1lH9TqSv0L1BaVJ3HIt4kT15fzH93ZQosXk9FUy_0hfXuAtxSAbW-/s1600/no-image.png' property='og:image'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='en_US' property='og:locale'/>
    <meta content='en_GB' property='og:locale:alternate'/>
    <meta content='id_ID' property='og:locale:alternate'/>
    <meta content='summary' name='twitter:card'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='XXXXXX' name='twitter:site'/>
    <meta content='XXXXXX' name='twitter:creator'/>
    <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
  3. lalu Save Template
Silahkan ganti terlebih dahulu kode yg mirip kek dibawah ini ganti XXXX
<meta content='XXXXXX' name='Author'/>
.....
<meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot; for watch and download anime.&quot;' property='og:description'/>
.....
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'><meta content='XXXXXX' name='keywords'/></b:if>
....
<meta content='XXXXXX' name='twitter:site'/>
<meta content='XXXXXX' name='twitter:creator'/>

NOTE : Ini hanya untuk template bootstrap, seperti Fanstrap v2, Fanbase v2, Ryotaku v2, and Sakura v2. untuk template simple fast dan sparkling silahkan hapus meta tag bootstrap
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>



Read More

1 Mei 2016

How to Add a Facebook Comments in Blog

How to Add a Facebook Comments in Blog with defer loading
How to Add a Facebook Comments in Blog - because the template that I created does not use facebook comment box. so I made a tutorial how to add facebook comments were mild with the help setTimeout makes blogs is not heavy. please follow the instructions below.

Adding a Facebook Plugin Comment on the BlogAdding Javascript Facebook
javascript is not only useful on facebook comment, but other facebook plugin like fan page plugin, like button, the share button and more.
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <body (CTRL + F in editor)
  2. Add the code below after html <body
    <div id="fb-root"></div>
    <script type='text/javascript'>//<![CDATA[
    setTimeout( function () {
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    }, 2000);
    //]]></script>
  3. Then Save Template
NB : If this code already exists please replace the above code so that fast blog

Adding HTML Facebook Comments
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <b:include data='post' name='threaded_comments'/> (CTRL + F in editor)
  2. You will find 2 html the same as below
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  3. Then Replace with the code below
    <b:if cond='data:blog.pageType == "item"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  4. Save Template
Adding CSS Facebook Comments
because facebook comment unresponsive, then you need to add this css and also add spacing between the facebook comments and the comments box blogger.
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find */]]></b:skin> or </style>(CTRL + F in editor)
  2. Add css below after html */]]></b:skin> or </style>
    #fb-comments{display:block;margin:15px auto;}
    .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}
  3. Then Save Template
Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script
Cara menambahkan kotak komentar facebook di blog - karena template yang saya buat tidak menggunakan kotak komentar facebook. maka dari itu saya membuatkan tutorial cara menambahkan kotak komentar dengan bantuan "setTimetout" yaitu biar blog tetap ringan. bagi yang ingin membuatnya silahkan ikuti tutorial dibawah ini.

Menambahkan Plugin Kotak Komentar Facebook di BlogMenambahkan Javascript Facebook
javascript ini bukan hanya berguna pada kotak komentar facebook, tetapi plugin facebook lainnya seperti, tombol suka, tombol share, dan lainnya.
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari Kode <body (CTRL + F pada saat di editor)
  2. Tambahkan kode dibawah ini sesudah kode <body
    <div id="fb-root"></div>
    <script type='text/javascript'>//<![CDATA[
    setTimeout( function () {
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    }, 2000);
    //]]></script>
  3. Lalu Save Template
NB : bagi yang sudah punya kode yang mirip seperti diatas saya sarankan ganti kode yang ada di blog mu dengan kode diatas ini.

Menambahkan HTML Kotak Komentar Facebook
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <b:include data='post' name='threaded_comments'/> (CTRL + F pada saat di editormu)
  2. Kamu akan melihat 2 kode yang sama seperti contoh dibawah ini
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  3. kalau udah ketemu silahkan ganti sama kode dibawah ini
    <b:if cond='data:blog.pageType == "item"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
      <div id='fb-comments'><div class="fb-comments" expr:data-href="data:post.url" data-numposts="5"></div><div class='clear'/></div>
      <b:include data='post' name='threaded_comments'/>
    </b:if>
  4. Lalu Save Template
Menambahkan CSS Kotak Komentar Facebook
karena kotak komentar facebook tidak responsive, maka kamu harus menambahkan kode css dibawah ini dan juga membuat jarak bagi kotak komentar facebook dan kotak komentar google.
  1. Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode */]]></b:skin> atau </style>(CTRL + F pada saat di blog)
  2. Tambahkan css dibawah ini sebelum kode */]]></b:skin> atau </style>
    #fb-comments{display:block;margin:15px auto;}
    .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{min-width:100%!important;width:100%!important}
  3. Lalu Klik Save Template
Source Script Facebook : http://stackoverflow.com/questions/15349867/defer-loading-of-facebook-like-button-script

Read More
Langganan: Postingan (Atom)