Memasang Widget Tombol Share di Postingan

Tombol Share di blog berfungsi untuk memudahkan pengunjung ketika ingin membagikan sebuah artikel yang kita posting ke dalam beberapa media sosial seperti Twitter, Facebook, Google +, Pinterest dan media sosial lainnya.

Sebenarnya Blogger sendiri sudah menyediakan Widget Tombol Share ini, namun Widget tersebut tidak valid HTML5 dan juga tampilannya mungkin tidak kita suka, jadi ada baiknya membuat dan memodifikasi sendiri supaya valid HTML5 dan juga sesuai dengan yang kita inginkan.

Tombol Share yang akan kita pasang ini menggunakan Ikon dari Fontawesome, jadi silahkan pasang terlebih dahulu Code Fontawesome pada templatemu. Caranya

1. Login ke akun Bloggermu. Masuk ke Theme, lalu pilih Edit HTML. Setelah itu tambahkan kode di bawah ini sebelum </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

2. Masih di Edit HTML, selanjutnya silahkan tambahkan code dibawah ini sebelum ]]></b:skin> atau </style>

/* Share button */
.share-ayo {display: inline-block;margin: 15px;color: #029292;text-transform: uppercase;font-size: 16px;z-index: 1;position: relative;padding: 10px;font-weight: 500;border:1px solid #029292}
.share-p {text-align: center;border-top: 7px dotted rgba(0,0,0,0.08)}
#share-container {margin: 20px auto;overflow: hidden;}
#share {width: 100%;text-align: center;}
#share a {width: 20%;height: 40px;display: block;font-size: 24px;color: #fff;transition: opacity 0.15s linear;float: left;}
#share a:hover {opacity: 0.8;}
#share i {position: relative;top: 50%;transform: translateY(-50%);}
.facebook {background: #3b5998;}
.twitter {background: #55acee;}
.googleplus {background: #dd4b39;}
.pinterest {background: #cb2027;}
.whatsapp {background: #25d366;}

3. Kemudian silahkan tambahkan kode HTML berikut ini tepat dibawah kode <data:post.body/> atau <div class='post-footer'/> atau bisa juga disesuaikan sendiri sesuai kemauan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-container'>
<div class='share-p'>
<p class='share-ayo'>Share This Post</p>
<div id='share'>
  <!-- Facebook -->
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i></a>
  <!-- Twitter -->
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i></a>
  <!-- Google Plus -->
  <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i></a>
  <!-- Pinterest -->
  <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'></i></a>
  <!-- Whatsapp-->
  <a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>
</div>
</b:if>

4. Dan terakhir silahkan silahkan simpan, lalu lihat hasilnya.

Oke sekian saja artikel tentang Memasang Widget Tombol Share di Postingan, semoga bermanfaat. Dan sampai ketemu di artikel selanjutnya. じゃまた。👋