Ini yaitu lanjutan dari postingan lalu yang sudah dibahas yaitu Cara Memasang Tombol Sosial Sharing Responsive di Template Blogger yang sebelumnya memasang sosial share khusus untuk templated Blogger . Di postingan kali ini kita akan masih membahas seputar Tombol Media Sosial sharing namun yang akan kita bahas disini untuk template umum Blogger, artinya yang bukan template dapat menggunakannya.
Di pembahasan ini Pemasangan Tombol sosial share akan kita tambahkan tombol sharing Line dan BBM di Blogger yang pastinya akan ditampilkan Responsive dapat menyesuaikan bentuk jikalau di susukan melalui smartphone dan tablet sehingga pengunjung lebih nyaman dalam melihatnya.
Bagi teman yang mau mencobanya mari kita bahas bersama Cara Memasang Tombol Sosial Sharing Responsive With Whatsapp Line And BBM di Blogger.
Langkah Pertama
Cara Memasang Tombol Sosial Sharing Responsive With Whatsapp Line And BBM di Blogger ini menggunakan aba-aba dari SVG yang sudah dimodifikasi jadi teman tidak perlu lagi memasang aba-aba font awesome di template blognya, keunggulan aba-aba dari SVG ini sudah support untuk semua jenis Browser yang modern.
Langkah Ke Dua
Silahkan salin aba-aba CSS dibawah ini lalu letakkan aba-aba tersebut di atas aba-aba </head>.
Langkah Ke Tiga
Silahkan salin aba-aba Javascript dibawah ini lalu silahkan teman letakkan aba-aba tersebut di atas aba-aba </body>.
Langkah Ke Empat
Silahkan cari aba-aba berikut ini biar lebih memudahkan pergunakan control F.
Setelah ketemu silahkan salin aba-aba berikut ini lalu lalu letakkan aba-aba tersebut di bawah aba-aba </b:includable>.
Langkah Ke Lima
Silahkan salin aba-aba dibawah ini lalu letakkan bebas dimana teman mau tampilkan Tombil sosial Sharing ini, biasanya sempurna dibawah postingan.
Perhatikan setiap langkah dalam penerapannya dan pastikan juga teman sudah memasang kode Jquery Library yang versinya bebas tidak masalah. Jika sudah tanggapan silahkan SAVE dan tampilkan, selamat mencoba semoga bermanfaat.
<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>Langkah Ke Tiga
Silahkan salin aba-aba Javascript dibawah ini lalu silahkan teman letakkan aba-aba tersebut di atas aba-aba </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>Langkah Ke Empat
Silahkan cari aba-aba berikut ini biar lebih memudahkan pergunakan control F.
<b:includable id='shareButtons' var='post'> ............ ............ ............ </b:includable>Setelah ketemu silahkan salin aba-aba berikut ini lalu lalu letakkan aba-aba tersebut di bawah aba-aba </b:includable>.
<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>Langkah Ke Lima
Silahkan salin aba-aba dibawah ini lalu letakkan bebas dimana teman mau tampilkan Tombil sosial Sharing ini, biasanya sempurna dibawah postingan.
<b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='share-tool'/> </b:if>Perhatikan setiap langkah dalam penerapannya dan pastikan juga teman sudah memasang kode Jquery Library yang versinya bebas tidak masalah. Jika sudah tanggapan silahkan SAVE dan tampilkan, selamat mencoba semoga bermanfaat.
Comments