» » » Cara Membuat Tombol Share Buttons Responsive pada Blogger

Google Follower

~~~ SeoChipS ~~~ - 05.53
Setiap Blogger jika memang ingin website yang anda kelola meningkat prioritasnya serta yang terbaik, efektif yaitu dengan cara berbagi konten gratis ke sosial media. Cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs adalah dengan rajin menge-share artikel kita ke media sosial, seperti Facebook, Twitter, Dll. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media dari Blogger yaitu dengan cara memasang tombol share buttons.

Baca Juga :
[MayCyber] - Share Buttons RRSSB
Selain Tujuan berbagi ke media sosial adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik mengklik postingan Anda, Selain itu juga Tujuan berbagi ke media sosial adalah agar orang lain tahu blog Anda, dan melihat terus-menerus alamat blog anda di Timeline mereka. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung dengan hanya satu klik. Karena ini memang dibutuhkan, sebaiknya Anda memasang Tombol Share di blog Anda.

Screenshoot :

Cara Membuat Tombol Share Buttons Responsive pada Blogger

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* Share Buttons RRSS
----------------------------------------------- */
.rrssb-buttons.large-format li a,.rrssb-buttons.large-format li a .text{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.rrssb-buttons,.rrssb-buttons li,.rrssb-buttons li a{-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{*zoom:1}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}.rrssb-buttons{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0!important;width:100%}.rrssb-buttons li{float:left;height:100%;list-style:none;margin:0;padding:0 2.5px;line-height:13px}.rrssb-buttons li.email a{background-color:#0a88ff}.rrssb-buttons li.email a:hover{background-color:#006ed6}.rrssb-buttons li.facebook a{background-color:#306199}.rrssb-buttons li.facebook a:hover{background-color:#244872}.rrssb-buttons li.tumblr a{background-color:#32506d}.rrssb-buttons li.tumblr a:hover{background-color:#22364a}.rrssb-buttons li.linkedin a{background-color:#007bb6}.rrssb-buttons li.linkedin a:hover{background-color:#005983}.rrssb-buttons li.twitter a{background-color:#26c4f1}.rrssb-buttons li.twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.googleplus a{background-color:#e93f2e}.rrssb-buttons li.googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.youtube a{background-color:#df1c31}.rrssb-buttons li.youtube a:hover{background-color:#b21627}.rrssb-buttons li.reddit a{background-color:#8bbbe3}.rrssb-buttons li.reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.pinterest a{background-color:#b81621}.rrssb-buttons li.pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.pocket a{background-color:#ed4054}.rrssb-buttons li.pocket a:hover{background-color:#e4162d}.rrssb-buttons li.github a{background-color:#444}.rrssb-buttons li.github a:hover{background-color:#2b2b2b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;display:block;font-size:11px;font-weight:bold;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;-webkit-transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-o-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}.rrssb-buttons li a .icon{display:block;height:100%;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .icon svg{height:17px;width:17px}.rrssb-buttons li a .icon svg path,.rrssb-buttons li a .icon svg polygon{fill:#fff}.rrssb-buttons li a .text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .icon{height:100%;left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .text{visibility:hidden}.rrssb-buttons.large-format{height:auto}.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em;line-height:1vw}.rrssb-buttons.large-format li a .icon{left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .icon svg{height:100%;width:100%}.rrssb-buttons.large-format li a .text{font-size:15px;font-size:1vw}.rrssb-buttons.large-format li a:hover{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1.5px}.rrssb-buttons.small-format li a .icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .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 .icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:hover,.rrssb-buttons.tiny-format li a:active{background-color:transparent}.rrssb-buttons.tiny-format li.email a .icon svg path,.rrssb-buttons.tiny-format li.email a .icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.facebook a .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.tumblr a .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.linkedin a .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.twitter a .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.googleplus a .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.youtube a .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.reddit a .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.pinterest a .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.pocket a .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.github a .icon svg path,.rrssb-buttons.tiny-format li.github a .icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg polygon{fill:#111}

/* Share Buttons RRSS End
----------------------------------------------- */
3. Jika sudah? Temukan lagi kode </body>
4. Copy & Paste kode berikut ini, dan letakkan diatas </body>
<script type='text/javascript'>//<![CDATA[
/* Start Share Buttons RRSSB */
(function(e,t,n){"use strict";var r=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).length,i=100/r;t("li",n).css("width",i+"%").attr("data-initwidth",i)})},i=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=parseFloat(t(n).width()),i=t("li",n).not(".small").first().width(),s=t("li.small",n).length;i>170&&s<1?t(n).addClass("large-format"):t(n).removeClass("large-format");r<200?t(n).removeClass("small-format").addClass("tiny-format"):t(n).removeClass("tiny-format")})},s=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=0,i=0,s,o,a=t("li.small",n).length;if(a===t("li",n).length){var f=a*42,l=parseFloat(t(n).width());s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(f+o<l){t(n).removeClass("small-format");t("li.small",n).first().removeClass("small");u()}}else{t("li",n).not(".small").each(function(e){var n=parseFloat(t(this).attr("data-size"))+55,s=parseFloat(t(this).width());r+=s;i+=n});var c=r-i;s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(o<c){t(s).removeClass("small");u()}}})},o=function(e){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).nextAll(),i=r.length;t(t("li",n).get().reverse()).each(function(e,r){if(t(this).hasClass("small")===!1){var i=parseFloat(t(this).attr("data-size"))+55,o=parseFloat(t(this).width());if(i>o){var a=t("li",n).not(".small").last();t(a).addClass("small");u()}}--r||s()})});e===!0&&f(u)},u=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,o,u,a,f=t("li.small",n).length;if(f>0&&f!==t("li",n).length){t(n).removeClass("small-format");t("li.small",n).css("width","42px");o=f*42;i=t("li",n).not(".small").length;s=100/i;a=o/i;navigator.userAgent.indexOf("Chrome")>=0||navigator.userAgent.indexOf("Safari")>=0?u="-webkit-calc("+s+"% - "+a+"px)":navigator.userAgent.indexOf("Firefox")>=0?u="-moz-calc("+s+"% - "+a+"px)":u="calc("+s+"% - "+a+"px)";t("li",n).not(".small").css("width",u)}else if(f===t("li",n).length){t(n).addClass("small-format");r()}else{t(n).removeClass("small-format");r()}});i()},a=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});r();t(".rrssb-buttons li .text").each(function(e){var n=parseFloat(t(this).width());t(this).closest("li").attr("data-size",n)});o(!0)},f=function(e){t(".rrssb-buttons li.small").removeClass("small");o();e()},l=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},c=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);l(n.attr("href"),n.find(".text").html(),580,470);e.preventDefault()});t(e).resize(function(){f(u);c(function(){f(u)},200,"finished resizing")});t(document).ready(function(){a()})})(window,jQuery);

/* Share Buttons RRSSB: JavaScript Ends */
//]]></script>
5. Jika sudah? Terakhir, Temukan kode <data:post.body/> . Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga.
6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>
<!-- RRSSB Share Buttons Start -->
<ul class='rrssb-buttons'>
 <li class='email'>
  <a expr:href='&quot;mailto:?subject=Check%20out%20&quot; + data:post.title + &quot;&amp;body=Visit:%20&quot; + data:post.canonicalUrl '><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z'/></g></svg></span><span class='text'>email</span></a>
 </li>
 <li class='facebook'>
  <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434                                         c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726                                         c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/></svg></span><span class='text'>facebook</span></a>
 </li>
 <li class='linkedin'>
  <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803                                         c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048                                         h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501                                         c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546                                         C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z'/></svg></span><span class='text'>linkedin</span></a>
 </li>
 <li class='twitter'>
  <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32                                     c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155                                     C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965                                     C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683                                     c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851                                     C26.275,7.229,25.39,8.196,24.253,8.756z'/></svg></span><span class='text'>twitter</span></a>
 </li>
 <li class='reddit'>
  <a expr:href='&quot;http://www.reddit.com/submit?url=&quot;+data:post.canonicalUrl' title='Share on reddit'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z'/><path d='M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z'/><path d='M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z'/><path d='M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z'/></g></svg>
</span><span class='text'>reddit</span></a>
 </li>
 <li class='googleplus'>
  <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
                                    <g>
                                        <g>
                                            <path d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663                                                 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027                                                 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068                                                 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562                                                 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41                                                 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511                                                 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478                                                 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492                                                 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479                                                 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/>
                                            <polygon points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004                                                 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89      '/>
                                        </g>
                                    </g></svg></span><span class='text'>google+</span></a>
 </li>
 <li class='pinterest'>
  <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785                                     C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458                                     c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557                                     c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168                                     C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239                                     c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z'/></svg></span><span class='text'>pinterest</span></a>
 </li>
</ul><!-- RRSSB Share Buttons End -->
7. Silakan Simpan Template.

Sekian Tutorial Blogger kali ini, Jika terdapat kesalahan silakan jangan sungkan untuk berkomentar. Silakan anda lihat postingan blog anda atau lihat bagian bawah blog anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Share Buttons Responsive pada Blogger

Setiap Blogger jika memang ingin website yang anda kelola meningkat prioritasnya serta yang terbaik, efektif yaitu dengan cara berbagi konten gratis ke sosial media. Cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs adalah dengan rajin menge-share artikel kita ke media sosial, seperti Facebook, Twitter, Dll. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media dari Blogger yaitu dengan cara memasang tombol share buttons.

Baca Juga :
[MayCyber] - Share Buttons RRSSB
Selain Tujuan berbagi ke media sosial adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik mengklik postingan Anda, Selain itu juga Tujuan berbagi ke media sosial adalah agar orang lain tahu blog Anda, dan melihat terus-menerus alamat blog anda di Timeline mereka. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung dengan hanya satu klik. Karena ini memang dibutuhkan, sebaiknya Anda memasang Tombol Share di blog Anda.

Screenshoot :

Cara Membuat Tombol Share Buttons Responsive pada Blogger

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* Share Buttons RRSS
----------------------------------------------- */
.rrssb-buttons.large-format li a,.rrssb-buttons.large-format li a .text{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.rrssb-buttons,.rrssb-buttons li,.rrssb-buttons li a{-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{*zoom:1}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}.rrssb-buttons{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0!important;width:100%}.rrssb-buttons li{float:left;height:100%;list-style:none;margin:0;padding:0 2.5px;line-height:13px}.rrssb-buttons li.email a{background-color:#0a88ff}.rrssb-buttons li.email a:hover{background-color:#006ed6}.rrssb-buttons li.facebook a{background-color:#306199}.rrssb-buttons li.facebook a:hover{background-color:#244872}.rrssb-buttons li.tumblr a{background-color:#32506d}.rrssb-buttons li.tumblr a:hover{background-color:#22364a}.rrssb-buttons li.linkedin a{background-color:#007bb6}.rrssb-buttons li.linkedin a:hover{background-color:#005983}.rrssb-buttons li.twitter a{background-color:#26c4f1}.rrssb-buttons li.twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.googleplus a{background-color:#e93f2e}.rrssb-buttons li.googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.youtube a{background-color:#df1c31}.rrssb-buttons li.youtube a:hover{background-color:#b21627}.rrssb-buttons li.reddit a{background-color:#8bbbe3}.rrssb-buttons li.reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.pinterest a{background-color:#b81621}.rrssb-buttons li.pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.pocket a{background-color:#ed4054}.rrssb-buttons li.pocket a:hover{background-color:#e4162d}.rrssb-buttons li.github a{background-color:#444}.rrssb-buttons li.github a:hover{background-color:#2b2b2b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;display:block;font-size:11px;font-weight:bold;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;-webkit-transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-o-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}.rrssb-buttons li a .icon{display:block;height:100%;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .icon svg{height:17px;width:17px}.rrssb-buttons li a .icon svg path,.rrssb-buttons li a .icon svg polygon{fill:#fff}.rrssb-buttons li a .text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .icon{height:100%;left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .text{visibility:hidden}.rrssb-buttons.large-format{height:auto}.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em;line-height:1vw}.rrssb-buttons.large-format li a .icon{left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .icon svg{height:100%;width:100%}.rrssb-buttons.large-format li a .text{font-size:15px;font-size:1vw}.rrssb-buttons.large-format li a:hover{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1.5px}.rrssb-buttons.small-format li a .icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .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 .icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:hover,.rrssb-buttons.tiny-format li a:active{background-color:transparent}.rrssb-buttons.tiny-format li.email a .icon svg path,.rrssb-buttons.tiny-format li.email a .icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.facebook a .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.tumblr a .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.linkedin a .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.twitter a .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.googleplus a .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.youtube a .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.reddit a .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.pinterest a .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.pocket a .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.github a .icon svg path,.rrssb-buttons.tiny-format li.github a .icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg polygon{fill:#111}

/* Share Buttons RRSS End
----------------------------------------------- */
3. Jika sudah? Temukan lagi kode </body>
4. Copy & Paste kode berikut ini, dan letakkan diatas </body>
<script type='text/javascript'>//<![CDATA[
/* Start Share Buttons RRSSB */
(function(e,t,n){"use strict";var r=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).length,i=100/r;t("li",n).css("width",i+"%").attr("data-initwidth",i)})},i=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=parseFloat(t(n).width()),i=t("li",n).not(".small").first().width(),s=t("li.small",n).length;i>170&&s<1?t(n).addClass("large-format"):t(n).removeClass("large-format");r<200?t(n).removeClass("small-format").addClass("tiny-format"):t(n).removeClass("tiny-format")})},s=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=0,i=0,s,o,a=t("li.small",n).length;if(a===t("li",n).length){var f=a*42,l=parseFloat(t(n).width());s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(f+o<l){t(n).removeClass("small-format");t("li.small",n).first().removeClass("small");u()}}else{t("li",n).not(".small").each(function(e){var n=parseFloat(t(this).attr("data-size"))+55,s=parseFloat(t(this).width());r+=s;i+=n});var c=r-i;s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(o<c){t(s).removeClass("small");u()}}})},o=function(e){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).nextAll(),i=r.length;t(t("li",n).get().reverse()).each(function(e,r){if(t(this).hasClass("small")===!1){var i=parseFloat(t(this).attr("data-size"))+55,o=parseFloat(t(this).width());if(i>o){var a=t("li",n).not(".small").last();t(a).addClass("small");u()}}--r||s()})});e===!0&&f(u)},u=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,o,u,a,f=t("li.small",n).length;if(f>0&&f!==t("li",n).length){t(n).removeClass("small-format");t("li.small",n).css("width","42px");o=f*42;i=t("li",n).not(".small").length;s=100/i;a=o/i;navigator.userAgent.indexOf("Chrome")>=0||navigator.userAgent.indexOf("Safari")>=0?u="-webkit-calc("+s+"% - "+a+"px)":navigator.userAgent.indexOf("Firefox")>=0?u="-moz-calc("+s+"% - "+a+"px)":u="calc("+s+"% - "+a+"px)";t("li",n).not(".small").css("width",u)}else if(f===t("li",n).length){t(n).addClass("small-format");r()}else{t(n).removeClass("small-format");r()}});i()},a=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});r();t(".rrssb-buttons li .text").each(function(e){var n=parseFloat(t(this).width());t(this).closest("li").attr("data-size",n)});o(!0)},f=function(e){t(".rrssb-buttons li.small").removeClass("small");o();e()},l=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},c=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);l(n.attr("href"),n.find(".text").html(),580,470);e.preventDefault()});t(e).resize(function(){f(u);c(function(){f(u)},200,"finished resizing")});t(document).ready(function(){a()})})(window,jQuery);

/* Share Buttons RRSSB: JavaScript Ends */
//]]></script>
5. Jika sudah? Terakhir, Temukan kode <data:post.body/> . Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga.
6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>
<!-- RRSSB Share Buttons Start -->
<ul class='rrssb-buttons'>
 <li class='email'>
  <a expr:href='&quot;mailto:?subject=Check%20out%20&quot; + data:post.title + &quot;&amp;body=Visit:%20&quot; + data:post.canonicalUrl '><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z'/></g></svg></span><span class='text'>email</span></a>
 </li>
 <li class='facebook'>
  <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434                                         c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726                                         c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/></svg></span><span class='text'>facebook</span></a>
 </li>
 <li class='linkedin'>
  <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803                                         c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048                                         h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501                                         c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546                                         C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z'/></svg></span><span class='text'>linkedin</span></a>
 </li>
 <li class='twitter'>
  <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32                                     c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155                                     C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965                                     C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683                                     c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851                                     C26.275,7.229,25.39,8.196,24.253,8.756z'/></svg></span><span class='text'>twitter</span></a>
 </li>
 <li class='reddit'>
  <a expr:href='&quot;http://www.reddit.com/submit?url=&quot;+data:post.canonicalUrl' title='Share on reddit'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z'/><path d='M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z'/><path d='M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z'/><path d='M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z'/></g></svg>
</span><span class='text'>reddit</span></a>
 </li>
 <li class='googleplus'>
  <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
                                    <g>
                                        <g>
                                            <path d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663                                                 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027                                                 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068                                                 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562                                                 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41                                                 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511                                                 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478                                                 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492                                                 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479                                                 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/>
                                            <polygon points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004                                                 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89      '/>
                                        </g>
                                    </g></svg></span><span class='text'>google+</span></a>
 </li>
 <li class='pinterest'>
  <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785                                     C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458                                     c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557                                     c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168                                     C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239                                     c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z'/></svg></span><span class='text'>pinterest</span></a>
 </li>
</ul><!-- RRSSB Share Buttons End -->
7. Silakan Simpan Template.

Sekian Tutorial Blogger kali ini, Jika terdapat kesalahan silakan jangan sungkan untuk berkomentar. Silakan anda lihat postingan blog anda atau lihat bagian bawah blog anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Share Buttons Responsive pada Blogger

Tags - Kalian sedang berada dipostingan Cara Membuat Tombol Share Buttons Responsive pada Blogger

download Cara Membuat Tombol Share Buttons Responsive pada Blogger android terbaru, apk android terbaru Cara Membuat Tombol Share Buttons Responsive pada Blogger android asus, Cara Membuat Tombol Share Buttons Responsive pada Blogger android advance, Cara Membuat Tombol Share Buttons Responsive pada Blogger android apk, Cara Membuat Tombol Share Buttons Responsive pada Blogger android app, Cara Membuat Tombol Share Buttons Responsive pada Blogger android games, Cara Membuat Tombol Share Buttons Responsive pada Blogger android programming, Cara Membuat Tombol Share Buttons Responsive pada Blogger aplikasi edit foto,Cara Membuat Tombol Share Buttons Responsive pada Blogger aplikasi facebook, Cara Membuat Tombol Share Buttons Responsive pada Blogger aplikasi bbm

Cara Membuat Tombol Share Buttons Responsive pada Blogger

,

Cara Membuat Tombol Share Buttons Responsive pada Blogger aplikasi edit video

aplikasi vidmate Cara Membuat Tombol Share Buttons Responsive pada Blogger aplikasi wa, aplikasi play store Cara Membuat Tombol Share Buttons Responsive pada Blogger Download, Download Cara Membuat Tombol Share Buttons Responsive pada Blogger indonesia aplikasi download lagu, aplikasi pembobol wifi Cara Membuat Tombol Share Buttons Responsive pada Blogger Google Drive, download aplikasi instagram Cara Membuat Tombol Share Buttons Responsive pada Blogger 3gp,Cara Membuat Tombol Share Buttons Responsive pada Blogger mp4,Cara Membuat Tombol Share Buttons Responsive pada Blogger mkv, Cara Membuat Tombol Share Buttons Responsive pada Blogger google drive, Cara Membuat Tombol Share Buttons Responsive pada Blogger 480p,Cara Membuat Tombol Share Buttons Responsive pada Blogger 720p, aplikasi android terbaik Cara Membuat Tombol Share Buttons Responsive pada Blogger,download aplikasi anti virus, aplikasi bigo live, download template web gratis, download template gratis, template website php, template website responsive, template blogspot, download template html, download template website dinamis gratis, download template premium, download template mirip atau clone, Download Professional XML Blogspot Templates, Free Blogger Templates, download blogger template responsive, Cara Membuat Tombol Share Buttons Responsive pada Blogger download template blogger seo, download template blog xml, download template blog gratis terbaru, download template blog simple, download template blogger keren, cara mengganti template blog, download template fast loading seo friendly, Cara posting artikel, Cara memasang widget, Memahami menu-menu di blogger, Cara mengganti atau memasang template, Cara membuat halaman statis, Cara memasang favicon, Cara mengganti judul blog dengan logo, 10 Tutorial blogger lainnya, Cara Menghasilkan Uang dari Blog , Panduan Lengkap, Rahasia Cara Daftar Google AdSense Agar Mudah Diterima, SEO, BLOG, DAN INTERNET MARKETING, Tutorial Belajar SEO dan Blogging juga Internet Marketing Terpadu Yang Mudah Untuk Anda Pelajari, BELAJAR SEO, cara tutorial Membuat Website Wordpress, Cara Cepat Mendapatkan Backlink Untuk Menaikkan Ranking, Download Free Template Blog SEO Friendly Responsive Design Mudah Diedit, Cara membuat blog di blogger com, Cara Melakukan Optimasi SEO Onpage Google Dengan Benar, Berbagai Cara Cari Uang Di Internet Yang Perlu Anda Tahu, CARA MUDAH MEMBUAT THUMBNAIL POST WARNA WARNI SESUAI LABEL POST, CARA MEMBUAT BLOG SEO 100 DI CHKME COM, 5 TEMPLATES BLOGGER SEO RESPONSIVE KEREN TERBAIK 2017 GRATIS, CARA AGAR ARTIKEL ATAU POSTINGAN CEPAT TERINDEX GOOGLE, LANGKAH LANGKAH OPTIMASI ONPAGE PADA BLOG, CARA DAPAT UANG DARI BERBAGAI BISNIS ONLINE, UPLOAD VIDEO DI FACEBOOK BISA DAPAT UANG, CARA MEMBUAT WIDGET TWITTER DI BLOGGER BLOGSPOT, CARA MEMBUAT BREADCRUMBS SEO FRIENDLY DENGAN FONT AWESOME, MEMBUAT TOMBOL BACK TO TOP DENGAN EFEK BOUNCE, CARA MEMBUAT BADGE GOOGLE PLUS DAN DAPAT DI MODIFIKASI, MACAM TAG KONDISIONAL UNTUK MODIFIKASI TAMPILAN DAN MENYEMBUNYIKAN WIDGET, CARA MEMBUAT CATATAN KAKI SEO DAN TERINDEX GOOGLE, TIPS TRIK MEMPERCEPAT LOADING BLOG, TIPS TRIK MENDAPATKAN UANG DOLLAR DARI BLOGGER BLOGSPOT, CARA MEMBUAT THREADED COMMENTS VALID HTML5 DI BLOGGER, MEMBUAT ARTIKEL TERKAIT DISERTAI THUMBNAIL GAMBAR, JQUERY SLIDING PANEL DENGAN MEMBUKA MENUTUP UNTUK BLOGGER, CARA MEMBUAT STICKY WIDGET SIDEBAR DI BLOG, CARA MEMASANG TRANSLATE DENGAN GAMBAR BENDERA DI BLOG, FASTESEO SEO RESPONSIVE BLOGGER TEMPLATE, 6 RAHASIA CARA SAYA MENINGKATKAN RANKING ALEXA, DOWNLOAD TEMPLATE BLOGSPOT SEO RESPONSIVE PREMIUM, Cara memasang widget, download template blog anime, SSH PREMIUM, SSH GRATIS, OPEN SSH, Config HI Axis100Config HI Indosat, Config HI Smartfreen, Config HI Telkomsel, Config HI Three 3, Config HI XL, Config KPN Tunnel Ultimate, Config KPN Tunnel Ultimate Axis, Config KPN Tunnel Ultimate Telkomsel, Config KPN Tunnel Ultimate Three, Config OpenVPN Axis, Config OpenVPN Indosat, Config OpenVPN Three 3, Config OpenVPN XL

Diposting oleh
,
Terimakasih telah membaca : Cara Membuat Tombol Share Buttons Responsive pada Blogger. Silahkan masukan email anda dibawah ini! dan anda akan otomatis mendapatkan kiriman artikel terbaru dari ~~~ SeoChipS ~~~. Terimakasih.
0 Komentar untuk "Cara Membuat Tombol Share Buttons Responsive pada Blogger"

Diberdayakan oleh Blogger.