1 Oktober 2017

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.
Buka Komentar
Comment Policy: Silakan berkomentar yang relevan dan mohon tidak menyertakan link aktif!