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>
3. Simpan kode javascript berikut di atas kode </body>
4. Salin kode di bawah ini:
Atau juga bisa menyimpannya di bawah kode :
Saya terapkan di bawah judul postingan artikel sehingga kode tersebut diletakkan di atas kode :
Selamat mencoba, semoga bermanfaat.
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 == "item"'>
<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 == "item"'>
<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?"&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='"https://www.facebook.com/sharer/sharer.php?u=" + 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='"https://twitter.com/intent/tweet?text=" +
data:post.title + "&url=" + 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='"https://plus.google.com/share?url=" + 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='"http://tumblr.com/share/link?url=" +
data:post.url + "&name=" + data:post.title +
"&description=" + 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='"http://www.linkedin.com/shareArticle?mini=true&url="
+ 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='"http://pinterest.com/pin/create/button/?url="
+ data:post.url + "&media=" +
data:post.firstImageUrl + "&description=" +
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='"whatsapp://send?text=" + data:post.title +
"%3A%20" + 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='"https://timeline.line.me/social-plugin/share?url="
+ 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='"bbmi://api/share?message=" +
data:post.url + "?ref=bbm&userCustomMessage=" +
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>
<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 == "item"'>
<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.