Home / BLOGGER / Google / Cara Membuat Fitur Google Share di Blog

Cara Download Cara Membuat Fitur Google Share di Blog Update Terbaru

Sedikit Info Seputar Cara Membuat Fitur Google Share di Blog Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Membuat Fitur Google Share di Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel BLOGGER, Artikel Google, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Membuat Fitur Google Share di Blog Terbaru
link: Cara Membuat Fitur Google Share di Blog

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Cara Membuat Fitur Google Share di Blog Terbaru dan Terlengkap 2017

Google Share IconAlhamdulillah 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 ) :

ss google share di blogger

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 </head> :

<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 <div class='comments' id='comments'> :
<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- BEGIN [ GOOGLE SHARE ] &#169;2015 Pure By:KangRian.com -->
<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/AVvXsEjAvC_ApuwlUT7BTYFzU_dTSMc1XubOT6xaaQWjDDwICDvt1qp6qFsGJbT_uRfH8lMdIy0a2xwbjU3DdWDVcqkzqWIP90bMuSanSBjaooQMWOfe6FAxRh3Auqx_VoLHSNNwZS_235NA0Hg/s1600/share.png' title='Bagikan!'/></div>

<div class='overlay' style='display:none;'/> <!-- White Overlay -->
<div class='google-share' id='google-share' style='display:none;'>
  <h3><data:post.title/> <span class='close'>&#215;</span></h3>
  <span class='small'>Klik untuk berbagi di:</span><br/>
  <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.canonicalUrl' target='_blank' title='Bagikan di Google+'>
<img alt='Google Plus Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3-_kjFdePQVBLeG3zEyRzUedisCts4YAb6WxZIiA9wisHulo2eLGjIgoFzDUZXZoPCfayFKGIERJDSQylQ3C4ZXtBbE-yNPmu0rTGzKGyOecGQhfd-Fa5I95HEZ6KAS5Oelgrc4t4ng/h33/gplus.png'/></a> 
  <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.canonicalUrl' target='_blank' title='Bagikan di Facebook'>
<img alt='Facebook Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTHmhE0DY98wG8rNVyjYjHZKAGdEjiq7U8ZVyvWS2b4SIhFwTZHdtLFrRje3FftJL1AAAHtmYi1X0eenhBuu45G3LZM2GHofpU6omueFiLoAqKJZ34KqBRW5amSXth_uHlwOBo7Hsfyc/h33/fb.png'/></a> 
  <a expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url' target='_blank' title='Bagikan di Twitter'>
<img alt='Twitter Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqbZstZ3fnwCsh8y27LrvC_d_Ji2-Xs89F2yZx6McS0BpAvv-5FjmQ5LGw4rgQGuO16lT39GIPsB9EDktEby7y6P3TPKJ2FvUAT9X4WPYWrQOnMSgOkOzOs0a-fbKfQd6WIr141WO0gI/h33/t.png'/></a> 
  <a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;amp;body=&quot; + data:blog.canonicalUrl' target='_blank' title='Bagikan via Email'>
<img alt='Email Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HIDGbJaN1pj5ITdLyXS5BAQnyCEgk0NeEu4QQkmGjcsQlSYxDxLeTPQJ8qNHaLkN3vg5mfr7kI08qQatAsFzMA8gaqn5-htywx0Q54sLHzcHw3ShrQJO0THyXPnx3ZKV-mgVyb2ObD8/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><!-- END [ GOOGLE SHARE ] &#169;2015 Pure By:KangRian.com -->

5. Terakhir "Simpan Template"

Selesai, selamat mencoba dan semoga berhasil! :)

Itulah sedikit Artikel Cara Membuat Fitur Google Share di Blog terbaru dari kami

Semoga artikel Cara Membuat Fitur Google Share di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Membuat Fitur Google Share di Blog

Share this