Sentra Blogger

Panduan Blogger | Dunia Blogger | Solusi Blogger

Tombol Berbagi Media Sosial Responsif Ala Kompi Ajaib

Tombol Berbagi Media Sosial Responsif Ala Kompi Ajaib

Selama ini saya dipusingkan dengan tombol berbagi media sosial seperti Facebook dan Twitter yang tidak muncul di browser Mozilla Firefox jika opsi "Tracking Protection" aktif. Setelah mencari-cari di Google, saya menemukan artikel bagus di Kompi Ajaib berjudul "Responsive Social Sharing Buttons With Whatsapp Line And BBM", di mana tombol-tombol berbagi berbagai media sosial, lengkap dengan WhatsApp, Line, dan BBM, bisa muncul di blog meskipun browser Mozilla Firefox dengan "Tracking Protection" aktif. Semua ikon tombol berbagi media sosial yang responsif ini menggunakan format SVG, sehingga tidak memerlukan link ikon font seperti "Font Awesome" dan tentunya mendukung semua browser modern. Metode inilah yang saya terapkan di blog "Sentra Blogger" sekarang ini. Karena itu saya juga ingin berbagi metode ini kepada sobat-sobat Blogger.

Langkah-langkah untuk memasang tombol berbagi media sosial yang responsif ala Kompi Ajaib ini adalah sebagai berikut:
1. Backup dahulu template Blogger yang ada, untuk menghindari kesalahan dan pastikan blog Anda sudah menggunakan "jquery library" berapa pun versinya.
2. Simpan kode CSS Style berikut di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,
Arial,sans-serif;font-size:10px;height:36px;margin:0;padding:0;width:100%}
.rrssb-buttons:after{clear:both}
.rrssb-buttons:after,.rrssb-buttons:before{content:' ';display:table}
.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;
line-height:13px;list-style:none;margin:0;padding:0 2px}
.rrssb-buttons li.rrssb-line a{background-color:#00C300}
.rrssb-buttons li.rrssb-line a:hover{background-color:#00C300}
.rrssb-buttons li.rrssb-facebook a{background-color:#306199}
.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}
.rrssb-buttons li.rrssb-tumblr a{background-color:#32506d}
.rrssb-buttons li.rrssb-tumblr a:hover{background-color:#22364a}
.rrssb-buttons li.rrssb-linkedin a{background-color:#007bb6}
.rrssb-buttons li.rrssb-linkedin a:hover{background-color:#005983}
.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}
.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}
.rrssb-buttons li.rrssb-googleplus a{background-color:#e93f2e}
.rrssb-buttons li.rrssb-googleplus a:hover{background-color:#ce2616}
.rrssb-buttons li.rrssb-pinterest a{background-color:#b81621}
.rrssb-buttons li.rrssb-pinterest a:hover{background-color:#8a1119}
.rrssb-buttons li.rrssb-whatsapp a{background-color:#43d854}
.rrssb-buttons li.rrssb-whatsapp a:hover{background-color:#28c039}
.rrssb-buttons li.rrssb-bbm a{background-color:#000}
.rrssb-buttons li.rrssb-bbm a:hover{background-color:#000}
.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;
display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;
font-weight:400;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;
text-decoration:none;-webkit-transition:background-color .2s ease-in-out;
transition:background-color .2s ease-in-out;width:100%}
.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}
.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}
.rrssb-buttons li.rrssb-line a .rrssb-icon svg{height:36px;width:36px;}
.rrssb-buttons li.rrssb-bbm a .rrssb-icon svg{height:26px;width:26px;margin: 5px 0 0 0;}
.rrssb-buttons li.rrssb-line a,.rrssb-buttons li.rrssb-bbm a{padding:0}
.rrssb-buttons li.rrssb-line a .rrssb-icon,.rrssb-buttons li.rrssb-bbm a .rrssb-icon{padding-top:0}
.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}
.rrssb-buttons li a .rrssb-text{color:#fff}
.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
.rrssb-buttons li.small a{padding:0}
.rrssb-buttons li.small a .rrssb-icon{left:auto;margin:0 auto;
overflow:hidden;position:relative;top:auto;width:100%}
.rrssb-buttons li.small a .rrssb-text{visibility:hidden}
.rrssb-buttons.large-format,.rrssb-buttons.large-format li{height:auto}
.rrssb-buttons.large-format li a{-webkit-backface-visibility:hidden;
backface-visibility:hidden;border-radius:.2em;padding:8.5% 0 8.5% 12%}
.rrssb-buttons.large-format li a .rrssb-icon{height:100%;left:7%;padding-top:0;width:12%}
.rrssb-buttons.large-format li a .rrssb-icon svg{height:100%;position:absolute;top:0;width:100%}
.rrssb-buttons.large-format li a .rrssb-text{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rrssb-buttons.small-format{padding-top:5px}
.rrssb-buttons.small-format li{height:80%;padding:0 1px}
.rrssb-buttons.small-format li a .rrssb-icon{height:100%;padding-top:0}
.rrssb-buttons.small-format li a .rrssb-icon svg{height:48%;position:relative;top:6px;width:80%}
.rrssb-buttons.tiny-format{height:22px;position:relative}
.rrssb-buttons.tiny-format li{padding-right:7px}
.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}
.rrssb-buttons.tiny-format li a .rrssb-icon{height:100%}
.rrssb-buttons.tiny-format li a .rrssb-icon svg{height:70%;width:100%}
.rrssb-buttons.tiny-format li a:active,.rrssb-buttons.tiny-format li a:hover{background-color:transparent}
.rrssb-buttons.tiny-format li.rrssb-line a .rrssb-icon svg path{fill:#0a88ff}
.rrssb-buttons.tiny-format li.rrssb-line a .rrssb-icon:hover .rrssb-icon svg path{fill:#0a88ff}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path{fill:#306199}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path{fill:#18304b}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path{fill:#32506d}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path{fill:#121d27}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path{fill:#007bb6}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path{fill:#003650}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path{fill:#26c4f1}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path{fill:#0b84a6}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path{fill:#e93f2e}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path{fill:#a01e11}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path{fill:#b81621}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path{fill:#5d0b11}
.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon svg path{fill:#43d854}
.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon:hover .rrssb-icon svg path{fill:#1f962d}
.rrssb-buttons.tiny-format li.rrssb-bbm a .rrssb-icon svg path{fill:#000}
.rrssb-buttons.tiny-format li.rrssb-bbm a .rrssb-icon:hover .rrssb-icon svg path{fill:#000}
@media screen and (max-width:414px){
.rrssb-buttons.small-format li.rrssb-line a .rrssb-icon svg{height:24px;width:24px;margin: -5px 0 0;}
.rrssb-buttons.small-format li.rrssb-bbm a .rrssb-icon svg{height:18px;width:18px;margin: -2px 0 0;}
}
/*]]>*/
</style>
</b:if>

3. Simpan kode javascript berikut di atas kode </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
+function(t,e,r){"use strict";var i={calc:!1};e.fn.rrssb=function(t){var
i=e.extend({description:r,image:r,title:r,url:r},t);i.title||(i.description?i.description:"")+(i.url?"\n\n"+i.url:"");for(var
 s in 
i)i.hasOwnProperty(s)&&i[s]!==r&&(i[s]=a(i[s]));i.url!==r&&(e(this).find(".rrssb-facebook
a").attr("href","https://www.facebook.com/sharer/sharer.php?u="+i.url),e(this).find(".rrssb-tumblr
a").attr("href","http://tumblr.com/share/link?url="+i.url+(i.title!==r?"&name="+i.title:"")+(i.description!==r?"&description="+i.description:"")),e(this).find(".rrssb-linkedin
a").attr("href","http://www.linkedin.com/shareArticle?mini=true&url="+i.url+(i.title!==r?"&title="+i.title:"")+(i.description!==r?"&summary="+i.description:"")),e(this).find(".rrssb-twitter
a").attr("href","https://twitter.com/intent/tweet?text="+(i.description!==r?i.description:"")+"%20"+i.url),e(this).find(".rrssb-googleplus
a").attr("href","https://plus.google.com/share?url="+i.url),e(this).find(".rrssb-pinterest
a").attr("href","http://pinterest.com/pin/create/button/?url="+i.url+(i.image!==r?"&amp;media="+i.image:"")+(i.description!==r?"&description="+i.description:"")),e(this).find(".rrssb-bbm
a").attr("href","bbmi://api/share?message="+i.url+(i.title!==r?"?ref=bbm&userCustomMessage="+i.title:"")),e(this).find(".rrssb-whatsapp
a").attr("href","whatsapp://send?text="+(i.description!==r?i.description+"%20":i.title!==r?i.title+"%20":"")+i.url)),e(this).find(".rrssb-line
a").attr("href","https://timeline.line.me/social-plugin/share?url="+i.url)};var
 s=function(){var 
t=e("<div>"),r=["calc","-webkit-calc","-moz-calc"];e("body").append(t);for(var
s=0;s<r.length;s++)if(t.css("width",r[s]+"(1px)"),1===t.width()){i.calc=r[s];break}t.remove()},a=function(t){if(t!==r&&null!==t){if(null===t.match(/%[0-9a-f]{2}/i))return
encodeURIComponent(t);t=decodeURIComponent(t),a(t)}},n=function(){e(".rrssb-buttons").each(function(t){var
r=e(this),i=e("li:visible",r),s=i.length,a=100/s;i.css("width",a+"%").attr("data-initwidth",a)})},l=function(){e(".rrssb-buttons").each(function(t){var
r=e(this),i=r.width(),s=e("li",r).not(".small").eq(0).width(),a=e("li.small",r).length;if(s>80&&a<1){r.addClass("large-format");var
 n=s/12+"px";r.css("font-size",n)}else 
r.removeClass("large-format"),r.css("font-size","");i<25*a?r.removeClass("small-format").addClass("tiny-format"):r.removeClass("tiny-format")})},o=function(){e(".rrssb-buttons").each(function(t){var
r=e(this),i=e("li",r),s=i.filter(".small"),a=0,n=0,l=s.eq(0),o=parseFloat(l.attr("data-size"))+55,c=s.length;if(c===i.length){var
d=42*c,u=r.width();d+o<u&&(r.removeClass("small-format"),s.eq(0).removeClass("small"),h())}else{i.not(".small").each(function(t){var
r=e(this),i=parseFloat(r.attr("data-size"))+55,s=parseFloat(r.width());a+=s,n+=i});var
m=a-n;o<m&&(l.removeClass("small"),h())}})},c=function(t){e(".rrssb-buttons").each(function(t){var
 r=e(this),i=e("li",r);e(i.get().reverse()).each(function(t,r){var 
s=e(this);if(s.hasClass("small")===!1){var 
a=parseFloat(s.attr("data-size"))+55,n=parseFloat(s.width());if(a>n){var
l=i.not(".small").last();e(l).addClass("small"),h()}}--r||o()})}),t===!0&&u(h)},h=function(){e(".rrssb-buttons").each(function(t){var
r,s,a,l,o,c=e(this),h=e("li",c),d=h.filter(".small"),u=d.length;u>0&&u!==h.length?(c.removeClass("small-format"),d.css("width","42px"),a=42*u,r=h.not(".small").length,s=100/r,o=a/r,i.calc===!1?(l=(c.innerWidth()-1)/r-o,l=Math.floor(1e3*l)/1e3,l+="px"):l=i.calc+"("+s+"%
 - 
"+o+"px)",h.not(".small").css("width",l)):u===h.length?(c.addClass("small-format"),n()):(c.removeClass("small-format"),n())}),l()},d=function(){e(".rrssb-buttons").each(function(t){e(this).addClass("rrssb-"+(t+1))}),s(),n(),e(".rrssb-buttons
 li .rrssb-text").each(function(t){var 
r=e(this),i=r.width();r.closest("li").attr("data-size",i)}),c(!0)},u=function(t){e(".rrssb-buttons
 li.small").removeClass("small"),c(),t()},m=function(e,i,s,a){var 
n=t.screenLeft!==r?t.screenLeft:screen.left,l=t.screenTop!==r?t.screenTop:screen.top,o=t.innerWidth?t.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,c=t.innerHeight?t.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,h=o/2-s/2+n,d=c/3-a/3+l,u=t.open(e,i,"scrollbars=yes,
 width="+s+", height="+a+", top="+d+", 
left="+h);u&&u.focus&&u.focus()},f=function(){var 
t={};return function(e,r,i){i||(i="Don't call this twice without a 
uniqueId"),t[i]&&clearTimeout(t[i]),t[i]=setTimeout(e,r)}}();e(document).ready(function(){try{e(document).on("click",".rrssb-buttons
 a.popup",{},function(t){var 
r=e(this);m(r.attr("href"),r.find(".rrssb-text").html(),580,470),t.preventDefault()})}catch(t){}e(t).resize(function(){u(h),f(function(){u(h)},200,"finished
 resizing")}),d()}),t.rrssbInit=d}(window,jQuery);
//]]>
</script>
</b:if>

4. Salin kode di bawah ini:
<b:includable id='share-tool' var='post'>
<div class='share-wrapper' id='share-wrapper'>
  <ul class='rrssb-buttons'>
    <li class='rrssb-facebook'>
      <a class='popup' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 29 29' 
xmlns='http://www.w3.org/2000/svg'><path d='M26.4 0H2.6C1.714 0 0 
1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 
2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 
6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 
2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 
2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z'/></svg>
         </span>
        <span class='rrssb-text'>facebook</span>
      </a>
    </li>
 <li class='rrssb-twitter'>
      <a class='popup' 
expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + 
data:post.title + &quot;&amp;url=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' 
xmlns='http://www.w3.org/2000/svg'><path d='M24.253 8.756C24.69 
17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 
5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 
2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 
5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 
3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 
5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 
1-2.48 2.71z'/></svg>
          </span>
    <span class='rrssb-text'>twitter</span>
      </a>
    </li>
 <li class='rrssb-googleplus'>
   <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg height='24' viewBox='0 0 24 24' width='24' 
xmlns='http://www.w3.org/2000/svg'><path d='M21 
8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 
10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 
0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 
1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 
11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 
0-.52-.065-1.104-.13-1.624H7.614z'/></svg>           
 </span>
        <span class='rrssb-text'>google+</span>
      </a>
    </li>
<li class='rrssb-tumblr'>
      <a 
expr:href='&quot;http://tumblr.com/share/link?url=&quot; + 
data:post.url + &quot;&amp;name=&quot; + data:post.title + 
&quot;&amp;description=&quot; + data:post.snippet' 
target='_blank'>
        <span class='rrssb-icon'>
  <svg viewBox='0 0 28 28' 
xmlns='http://www.w3.org/2000/svg'><path d='M18.02 
21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218
 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 
1.863-.03 3.934-.795 
4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z'/></svg>
          </span>
<span class='rrssb-text'>tumblr</span>
      </a>
    </li>
<li class='rrssb-linkedin'>
      <a class='popup' 
expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;
 + data:post.url'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' 
xmlns='http://www.w3.org/2000/svg'><path d='M25.424 
15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 
0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35
 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 
1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 
2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 
2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 
2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/></svg>
          </span>
        <span class='rrssb-text'>linkedin</span>
      </a>
    </li>
<li class='rrssb-pinterest'>
      <a 
expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot;
 + data:post.url + &quot;&amp;media=&quot; + 
data:post.firstImageUrl + &quot;&amp;description=&quot; + 
data:post.title' target='_blank'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' 
xmlns='http://www.w3.org/2000/svg'><path d='M14.02 1.57c-7.06 
0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725
 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 
17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 
6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 
2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 
2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 
3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 
4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 
8.532v.003z'/></svg>
          </span>
        <span class='rrssb-text'>pinterest</span>
      </a>
    </li>
<li class='rrssb-whatsapp'>
      <a data-action='share/whatsapp/share' 
expr:href='&quot;whatsapp://send?text=&quot; + data:post.title +
 &quot;%3A%20&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg height='90' viewBox='0 0 90 90' width='90' 
xmlns='http://www.w3.org/2000/svg'><path d='M90 43.84c0 
24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 
90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 
45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 
16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 
14.274-4.537A37.122 37.122 0 0 0 45.82 80.7c20.48 0 37.145-16.533 
37.145-36.857S66.3 6.983 45.818 6.983zm22.31 
46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72
 1.076-2.797 3.495-3.43 
4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482
 1.084-1.255 1.625-1.882.543-.628.723-1.075 
1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63
 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 
3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 
18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 
7.312-5.107.9-2.513.9-4.664.63-5.112z'/></svg>
          </span>
        <span class='rrssb-text'>Whatsapp</span>
      </a>
    </li>
<li class='rrssb-line'>
     <a 
expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot;
 + data:post.url' target='_blank'>
        <span class='rrssb-icon'>
           <svg class='icon icons8-LINE' viewBox='0 0 48 48'>
    <path 
d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23
      C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
    <path 
d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637
 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185
  c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001
      C36.203,26.879,37.113,24.764,37.113,22.417z 
M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01     
 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687
      C19.562,25.598,19.254,25.907,18.875,25.907z 
M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01
      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z 
M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652     
 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688
 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035
 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z
 M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917
 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603
 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604
 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z'
 style='fill:#FFFFFF;'/></svg>
      </span>
     <span class='rrssb-text'>line</span>
      </a>
    </li>
<li class='rrssb-bbm'>
     <a expr:href='&quot;bbmi://api/share?message=&quot; + 
data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; +
 data:post.title'>
     <span class='rrssb-icon'>
     <svg class='icon BlackBerry-Icon' viewBox='0 0 5067 5067'>
   <rect height='5067' rx='489' ry='489' style='fill: black;' width='5067'/>
    <g>
   <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 
150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 
-724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 
-150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 
361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 
-110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26
 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 
266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 
-68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: 
nonzero;'/>
      <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
      <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
      <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 
-190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 
-378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 
-32,-208 -86,-293z' style='fill: white;'/>
    </g>
  </svg>
     </span>
 <span class='rrssb-text'>blackberry</span>
      </a>
    </li>
  </ul>
</div>
</b:includable>

5. Simpan di bawah kode berikut (di bawah kode </b:includable>)
<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

Atau juga bisa menyimpannya di bawah kode :
<b:includable id='postQuickEdit' var='post'/>
6. Terakhir simpan kode di bawah ini di mana Anda ingin menampilkan tombolnya, biasanya di bawah artikel atau di bawah di bawah judul artikel.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

Saya terapkan di bawah judul postingan artikel sehingga kode tersebut diletakkan di atas kode :
<div itemprop='description articleBody'>

Selamat mencoba, semoga bermanfaat.
Cara Pasang Tombol Share WhatsApp di Blogger

Cara Pasang Tombol Share WhatsApp di Blogger

WhatsApp merupakan salah satu aplikasi pesan instan multimedia lintas platform untuk ponsel pintar yang memungkinkan penggunanya bertukar pesan, suara, dan video melalui koneksi data internet. Bahkan WhatsApp bisa diakses di komputer atau laptop melalui fitur "WhatsApp Web" atau "WhatsApp berbasis situs web untuk komputer". WhatsApp merupakan aplikasi yang paling populer di Indonesia dan secara global digunakan lebih dari 1 miliar pengguna setiap bulannya.

Dengan kepopuleran dan jumlah penggunanya yang demikian besar, maka jelas WhatsApp merupakan salah satu media yang wajib dimanfaatkan oleh para blogger sebagai media untuk berbagi konten blognya sehingga konten di blog bisa dibagikan oleh pembaca artikel kepada pengguna WhatsApp lainnya dengan mudah. Artikel menarik yang telah dibagikan tersebut akan mengundang pengguna WhatsApp untuk mengunjungi blog sehingga bisa meningkatkan trafik kunjungan blog via perangkat seluler atau "mobile".

Berikut langkah-langkah cara memasang "Share WhatsApp" di Blogger untuk berbagi konten artikel blog via WhatsApp. Tombol ini hanya muncul saat blog dibuka di perangkat seluler ponsel pintar (smartphone).
1. Login ke akun blogger Anda.
2. Pilih opsi Edit template HTML
3. Lalu cari kode </body> (untuk memudahkan pencarian, tekan tombol Ctrl + F bersamaan pada keybord Anda), kemudian salin kode berikut di atasnya.
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://cdn.jsdelivr.net/whatsapp-sharing/1.3.4/whatsapp-button.js&quot;;h.appendChild(s);}</script>

4. Pilih salah satu opsi ukuran tombol "Share WhatsApp" berikut ini, dan letakkan di bagian kelompok media sosial berbagi konten blog yang sudah ada seperti Facebook, Twitter, Google Plus, Pinterest, dan media sosial lainnya.
<a class="wa_btn wa_btn_s" expr:data-href="data:post.url" expr:data-text="data:post.title" href="whatsapp://send" style="display: none;">Share</a>

Huruf "s" yang berwarna hitam tebal di atas untuk ukuran tombol "share WhatsApp" yang kecil ("small"), untuk ukuran sedang atau medium bisa diganti dengan huruf "m" (medium), dan untuk ukutan besar atau lebar bisa diganti dengan huruf "l" ("large").
5. Simpan template dan cek hasilnya melalui perangkat seluler ''smartphone''.
Cara Memasang Iklan Adsense Di Antara Artikel Halaman Utama Blog

Cara Memasang Iklan Adsense Di Antara Artikel Halaman Utama Blog

Blogger sebenarnya sudah menyediakan pengaturan untuk penempatan iklan Adsense di antara postingan artikel di halaman utama (homepage) blog, yakni melalui "Edit" di "Layout" (Tata Letak) pada bagian "Posting Blog". Namun kelemahan cara ini adalah kita tidak bisa sepenuhnya mengatur di bawah postingan artikel ke berapa iklan Adsense akan muncul karena iklan otomatis akan selalu muncul di bawah postingan artikel pertama, berapa pun jumlah (angka) yang kita pilih untuk pengaturan "tampilan iklan setelah sekian postingan artikel". Lagi pula, cara ini hanya tersedia jika kita mengubah pengaturan bahasa ke bahasa Inggris terlebih dahulu untuk memunculkan pilihan ini.

Untuk memasang iklan Adsense di antara postingan artikel di halaman utama blog, kita akan menyimpan kode-kode yang dibutuhkan di daerah <b:includable id='main' var='top'> yang biasanya akan tampak atau seperti berikut:
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>


Untuk menampilkan iklan Adsense di antara postingan artikel di halaman utama blog, silahkan tambahkan kode index='x' pada kode <b:loop values='data:posts' var='post'> sehingga menjadi seperti berikut:
<b:loop values='data:posts' var='post' index='x'>


Kemudian gunakan kode berikut:
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>


Angka 1 artinya iklan akan muncul di bawah postingan artikel kedua, dan angka 3 berarti iklan akan muncul di bawah postingan artikel keempat. Jadi, angka-angka tersebut bisa disesuaikan untuk mengatur iklan Adsense yang akan muncul di antara postingan artikel blog.

Simpan kode di atas tepat di bawah kode berikut ini:
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>


Sehingga secara keseluruhan akan tampak seperti di bawah ini:
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post' index='x'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>


Tambahkan juga kode CSS berikut ini untuk mengatur kata "Advertisement":
.post span.title-ads{font-size:16px;font-weight:bold;display:block;margin:10px 0}
Format Baru Iklan Adsense : Page-Level Ads

Format Baru Iklan Adsense : Page-Level Ads

Google Adsense baru saja memperkenalkan format baru iklannya yang inovatif dengan nama "Page-level Ads" atau iklan tingkat laman. Iklan tingkat laman dirancang hanya untuk tampil di perangkat mobile kelas tinggi dengan browser tertentu. Format iklan ini dioptimalkan untuk muncul hanya ketika akan melakukan performansi dengan baik, memberikan pengalaman pengguna yang baik, dan mudah untuk dipasang juga.

Terdapat dua jenis format "page-level ads" yakni "anchor/overlay ads" dan "vignette ads". "Anchor/overlay ads" tampil dengan format iklan horizontal kecil yang muncul menggantung di bagian bawah layar, sedangkan "vignette ads" tampil dengan format iklan satu halaman penuh. Format iklan baru ini tidak diperhitungkan dalam batas maksimun tiga unit iklan per halaman. Kedua format iklan ini juga dengan mudah untuk dihilangkan oleh pengunjung jika tidak tertarik dengan iklan yang muncul.

Browser yang mendukung tampilan format baru iklan adsense ini di antaranya Google Chrome, Opera for Android, dengan minimal sistem operasi "Android 4.0 Ice Cream Sandwich". Sementara browser Firefox for Android and Opera Mini tidak mendukung. Google Chrome dan Safari juga mendukung tampilan format iklan ini untuk sistem operasi minimal iOS5. Browser di Windows Phone juga tidak mendukung format iklan ini.

Cara memasang format iklan baru ini sangat mudah, cukup aktifkan fitur ini di akun adsense masing-masing, kemudian ambil kode iklan yang diberikan, dan pasang di bagian atas <head> dalam templat blog atau situs.
Memunculkan Iklan Adsense Di Antara Posting Blog

Memunculkan Iklan Adsense Di Antara Posting Blog

Google Adsense memang sudah lama mendukung situs dan blog berbahasa Indonesia, namun khusus untuk memunculkan iklan adsense di antara posting atau artikel blog berbahasa Indonesia, masih tidak bisa muncul secara otomatis di pilihan "Edit Posting Blog".

Hal ini juga bisa dilihat dari beberapa komentar sobat blogger yang menanyakan cara untuk menampilkan atau memunculkan iklan adsense di antara posting atau artikel blog ini. Artikel ini saya tulis sebagai solusi untuk menjawab pertanyaan tersebut.

Sebenarnya cara yang harus dilakukan cukup sederhana, sebagai berikut :
1. Login ke Blogger, pilih Settings, kemudian di bagian pengaturan bahasa, pilih Bahasa Inggris. Simpan pengaturan.
2. Pilih Layout (Tata letak), klik Edit di bagian Posting Blog, akan muncul jendela baru dengan pilihan "Show Ads Between Posts" di bagian bawah. Centang bagian ini dan lakukan pengaturan iklan adsense yang diinginkan. Simpan.
3. Setelah iklan adsense di antara posting muncul, kembali lagi ke bagian Settings dan pengaturan bahasa, ganti kembali ke pilihan Bahasa Indonesia. Simpan.

Demikian cara yang bisa dilakukan untuk memunculkan iklan adsense di antara posting atau artikel blog di Blogger.
Cara Membuat Menu Navigasi Blogger Responsif

Cara Membuat Menu Navigasi Blogger Responsif

Dengan semakin populer dan meluasnya penggunaan perangkat mobile untuk browsing di dunia maya, maka membuat blog yang "mobile friendly" merupakan sebuah keharusan yang tidak bisa dihindari lagi. Apalagi Google sendiri untuk pencarian melalui perangkat mobile akan memberikan prioritas untuk blog atau situs yang dikategorikan "mobile friendly" dalam menampilkan hasil pencarian mobile tersebut. Untuk mendukung blog yang "mobile friendly" tersebut, menu navigasi blog yang responsif sekaligus "mobile friendly" juga harus diperhatikan.

Menu navigasi blogger responsif yang dibuat dengan cara berikut ini memiliki keistimewaan dalam versi mobile, di mana menu navigasi yang ditampilkan otomatis akan mendorong konten artikel ke bawah, tepat di bawah menu navigasi, dan tidak akan menutupi konten artikel atau iklan yang ada di bagian atas blog.

Silakan ikuti langkah demi langkah berikut cara membuat menu navigasi responsif khusus untuk platform blogger.

Langkah pertama :
Buka "Template Blogger", kemudian "Edit HTML". Backup terlebih dahulu template yang ada. Setelah itu, copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin> :

/* Navigasi Menu */
#pull{display:none;text-decoration:none}
#navi{background:#222;width:100%;display:block;font-size:16px; font-family:"Open Sans Condensed",sans-serif;text-transform:uppercase;font-weight:bolder; width:100%; overflow:hidden; position:relative;text-decoration:none;margin:0 auto; padding:0
#navi ul{margin:0 auto; padding:0}
#navi li{list-style:none}
#navi li a{float:left;display:block; color:#fff;font-size:16px; padding:10px 20px;text-decoration:none}
#navi li a:hover{display:block;text-decoration:none; color:#fff;background:#ea6153;}
@media screen and (max-width:960px){
#navi{height:auto; border-bottom:0}
#navi ul{width:100%; display:none; height:auto}
#navi li{width:100%; float:left; position:relative;}
#navi li a{padding:10px 0}
#navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px}
#navi a#pull{display:block; margin:0 auto; background-color:#333; height:40px; width:100%; position:relative}
#navi a#pull:after{content:''; background:url(http://1.bp.blogspot.com/-oB6hb7vlX3s/UhVaYStH6qI/AAAAAAAAAzQ/HTg9BDuy50Q/s320/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px}
}

Langkah kedua :
Tambahkan jquery berikut di atas </head>, tidak menjadi masalah jika versinya berbeda dan abaikan jika sudah ada dalam blog Anda.
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Langkah ketiga :
Copy script berikut ini, lalu letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){var pull=$('#pull');menu=$('#navi ul');menuHeight=menu.height();$(pull).on('
click',function(e){e.preventDefault();menu.slideToggle()})});
//]]>
</script>

Langkah terakhir :
Letakkan kode berikut di bawah kode </header>

<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a>
<ul class='clearfix'>
<li><a href='/' title='Home'>Home</a>
</li>
<li><a href='/search/label/A?max-results=5' title='A'>A</a>
</li>
<li><a href='/search/label/B?max-results=5' title='B'>B</a>
</li>
<li><a href='/search/label/C?max-results=5' title='C'>C</a></li>
<li><a href='/search/label/D?max-results=5' title='D'>D</a></li>
</ul>
</nav>

Sesuaikan A, B, C, D di atas dengan label yang ada di blog Anda. Simpan template.

Selamat mencoba !
Cara Mengatasi Isi Halaman Statis Blog Kosong

Cara Mengatasi Isi Halaman Statis Blog Kosong

Pernahkah Anda mengalami isi halaman statis blogger kosong padahal halaman statis tersebut berisi sitemap atau daftar isi, atau bisa juga deskripsi singkat mengenai blog kita ? Hal ini bisa saja terjadi dikarenakan ada kode HTML yang terhapus di template blog kita.

Cara untuk mengatasi isi halaman statis blog kosong atau hilang sebenarnya cukup mudah. Seperti biasa, masuk ke bagian Template blog kita, dan pilih Edit HTML. Kemudian cari kode berikut :
<div itemprop='description articleBody'>

Pada template blog yang saya pakai, kode tersebut ada dua, dan pilih kode yang kedua, setelah itu tambahkan kode <data:post.body/> tepat di bawah kode tersebut sebelumnya, kemudian simpan.

Cek kembali tampilan halaman statis blog Anda. Halaman statis blog sekarang seharusnya sudah lengkap kembali dengan isi yang hilang sebelumnya.
Back To Top