Cara Membuat Fitur Google Share di Blog

Cara Membuat Fitur Google Share di Blog - Alhamdulillah saya masih diberi kesempatan untuk berbagi, pada kesempatan ini saya akan berbagi tutorial tentang bagaimana cara membuat tombol berbagi mirip seperti google! yang sangat simple dan berguna tentunya untuk sobat yang mempunyai banyak artikel.

Berbeda dengan plugin Addthis dan sebagainya.. Plugin yang akan saya bagikan kali ini custom dengan menggunakan blogger tag kondisional yang mana ketika seseorang mengunjungi halaman postingan / artikel, maka tombol Google Share ini akan muncul dengan Popup Berbagi setelah semua konten di laman artikel/postingan di load oleh browser.

Berikut contoh pop-up yang saya ambil dari situs http://www.kangrian.com ( pada halaman artikel ) :



Untuk demonstrasi-nya langsung, sobat bisa lihat langsung Disini

Cara Pemasangan:

1. Login Blogger

2. Klik menu "Template" → "Edit HTML"

3. Pastikan sobat sudah menyimpan kode external jQuery library di bawah ini, tepat sebelum tag 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Kode jQuery library hanya bisa di pasang 1x saja, jika sobat sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

4. Simpan semua kode di bawah ini tepat di atas kode 
 :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.overlay {
position:fixed;
z-index:+100000;
top:0;left:0;
width:100%;
height:100%;
background:white;
opacity:.8;
  }
.google-share {
border:1px solid #aaa;
background:white;
padding:33px;
width:570px;
max-width:95%;
position:fixed;
z-index:+100001;
top:100px;
left:50%;
margin-left:-285px;
box-shadow:0px 5px 10px rgba(0,0,0,0.18);
  }
.google-share h3 {
clear:both;
margin:0px!important;
margin-bottom:20px!important;
font-size:20px!important;
font-weight:normal;
color:#333;
  }
.google-share h3 span.close {
float:right;
cursor:pointer;
font-size:25px;
  }
.google-share img { margin:5px;margin-right:0px; display:inline-block; border-radius:2px; transition:all .3s ease; }
  .google-share img:hover { opacity:.7; }
.google-share span.small {
font-size:14px!important;
font-family:arial,sans-serif!important;
color:#484848;
  }
.google-share input {
border:1px solid #ccc;
width:80%;
  }
.bagikan img {
position:fixed;
z-index:+1000;
top:200px;
left:0;
background:#fff;
padding:10px;
border-radius:0 3px 3px 0;
border:1px solid #ddd;
  }
.bagikan img:hover {
opacity:.7;
cursor:pointer;
box-shadow:0px 3px 0px rgba(0,0,0,0.14);
top:197px;
  }
.bagikan img:active {
box-shadow:none;
top:200px;
  }


@media screen and (max-width : 640px) {
.google-share, .overlay, .bagikan { display:none!important;}
}
</style>

<div class='bagikan'><img alt='bagikan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1oW1UjFZpG9Dl-sycGZZrTYC3U_byhr5B515Z22oL78Dv8kXgoi2QODjMaQ4LFIKNWWxCzkR-K4RU_3iKhgSkIS1qTtSht0owtjdWvxZJi5gmELCJSBBKOtDVIcbsone-5TViU-GHEs/s1600/share.png' title='Bagikan!'/></div>

<div class='overlay' style='display:none;'/> 
<div class='google-share' id='google-share' style='display:none;'>
  <h3><data:post.title/> <span class='close'>×</span></h3>
  <span class='small'>Klik untuk berbagi di:</span><br/>
  <a expr:href='"https://plus.google.com/share?url=" + data:blog.canonicalUrl' target='_blank' title='Bagikan di Google+'>
<img alt='Google Plus Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByUGf1hyyQywQJ_Alj9n_4RgTpq60wjJMx_CC-wuyef5ioqXtcSopsIkGIwlcoRyJhov4MNnS_JkqJtq-Mpk5f0NJvQHWSc0rsV5Kqo1pUC3uSi6PlYM-MVQ1LAB-9pCTiZmb2wdQcjM/h33/gplus.png'/></a> 
  <a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.canonicalUrl' target='_blank' title='Bagikan di Facebook'>
<img alt='Facebook Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgOOXnbOAmO2BVzvL2OYDyXO52lLCWAufjCoczKD9z_WQCiThtlGloBrvlpq-kjcJ8Tp74-Ppi9CUPMmKrkB4KZt-giYzE_lVBEziGZ1IQ_SoitlOOFkYq_si8y-Qzj6S-H7oQ39NBWPE/h33/fb.png'/></a> 
  <a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='Bagikan di Twitter'>
<img alt='Twitter Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjQcNhtd3Rytijb1_uTcIjOkDju-trUh8b_hyB4C2voAAWnxqWkxiDcQt8SFbXaaMME9_X0UggMPTIwVwI-VhHx9fKUWDW5ZlmG0w1Y41gk471K92XGw9Z3pCFtes00K6AYm997yzR1Y/h33/t.png'/></a> 
  <a expr:href='"mailto:?subject=" + data:post.title + "&amp;body=" + data:blog.canonicalUrl' target='_blank' title='Bagikan via Email'>
<img alt='Email Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTY0zJthzXbOcLAgF66XuLyq5fTpqKsDRU4qf-9b_RXtxI8NQ8_Fr8Frg5DYdnlQG90LWqd8VFnifohT4UClO9O0V7jRazI2MoAGKBhTab82mnjeoOE_VJDE-NvfFDXXaEvbEwjVcDCfI/h33/m.png'/></a> 
  <br/>
  <span class='small'>Atau salin tautan:</span><br/>
  <input expr:value='data:blog.canonicalUrl' readonly='readonly' type='text'/>
</div>
  <script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
   $('#google-share, .overlay').fadeIn(1000);
      $('#google-share input').select();
});
  $('#google-share input').click(function() {
 $('#google-share input').select();
  });
  $('.bagikan').click(function() {
 $('#google-share, .overlay').fadeIn(500);
 $('#google-share input').select();
  });
$(document).ready(function() {
  $('.close, .overlay, #google-share img').click(function() {
      $('#google-share').hide();
      $('.overlay').hide();
  });
});
//]]>
</script>

</b:if>

5. Terakhir "Simpan Template"

Selesai, selamat mencoba dan semoga berhasil! :)