How to Create a Share Button Like Google

How to Create a Share Button Like Google. I was given the opportunity to share, on this occasion I will share a tutorial on How to Create a Button Share Like Google! Very simple and useful course for you who has a lot of articles. It is different with the AddThis plugin and share button others. Share Button which I will share is using a custom blogger conditional tag, when someone visits the page posts / articles, then Google Share button will appear with Popup Share after all the content in the article page / posts loaded by the browser. You can see the demo below.

How to install :

1. Login Blogger
2. Click the " Template" → " Edit HTML "
3. Make sure the friend already storing external code jQuery library below, immediately before the </head>

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

Note : JQuery library code can only be installed 1x course, if my friend had put jQuery code library skip this step, because it will lead to conflict and make all of the jQuery code will not work.

4. Save all the below code just above the code <div class='comments' id='comments'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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%;
  }
.share img {
position:fixed;
z-index:+1000;
top:200px;
left:0;
background:#fff;
padding:10px;
border-radius:0 3px 3px 0;
border:1px solid #ddd;
  }
.share img:hover {
opacity:.7;
cursor:pointer;
box-shadow:0px 3px 0px rgba(0,0,0,0.14);
top:197px;
  }
.share img:active {
box-shadow:none;
top:200px;
  }
@media screen and (max-width : 640px) {
.google-share, .overlay, .share { display:none!important;}
}
</style>
<div class='share'>
 <img alt='share' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQf7qe-uwu5l1PY7jlL0D8nWz54OA26weBm9eS1Cpsf1TvyLXFeloB7DYYF_RGqkyXZQWmHENhP4iEhwic8HwAthNyIJbVmJ6s9_qwKbVUrXg7l6fY0jhlVlOzeQL2kTHqbrDDd0vfCQ/s1600/share.png' title='share!'/>
</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'>Click to share in:</span><br/>
  <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.canonicalUrl' target='_blank' title='share di Google+'><img alt='Google Plus Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQOp3RLzlb8uJ1tgglnXFxQjh5G5mZjeYQI6Nx3kR4yXWJsW91h4UPTxC_A497tHyKa_gQbee0Cv5_UWNTvM26HCk7xEvKRKBroZWmQ5qOmNsMgOJHDlO0ONkRe6cQeufAwOu7YtThox0/h33/gplus.png'/></a>
  <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.canonicalUrl' target='_blank' title='share di Facebook'><img alt='Facebook Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTx2e3LiCrmWXMfCdC4zI2iZArfL6eO8zlBQ_R8gUo8jzTJ_2eNHv9zmyZtqwCvy5cc_eDPq-FaWo-ZlO2RyaOGRQ9DTYabK32pC_FOSMyOfsAIbRVOIu1HvGYxkLm6iPq3zI-b5Zg-Q/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='share di Twitter'><img alt='Twitter Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bI9ilVf14QSeGoWc2GiUesojctAOiTloVrqogGM9sHGsIQx0ACV9eaSbsgN1fqts6JkIk9MJPYNDQqT8z8_6rpLBujMoHzEkcXozlJVG1HN4QSi6ExZL3inpplEhKQDb9EdWuEvUDFA/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='share via Email'><img alt='Email Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYtkStuTj9K5OXRgRzdxZMP0Qnkars_EaPw4OQDmfohJ0Er7-uuj9ravDGHAAbOSdHLS41HeO9C2BIiA0SgvfURonOgddr0whx8XZZLow4ZQNaC0ZnrYaomrj-mAcLiuIkTbmrxOWuNp0/h33/m.png'/></a>
  <br/>
  <span class='small'>Or copy link:</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();
  });
  $('.share').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>

Finally click save, Share Button Like Google will appear on your blog. It will appear when visitor visit your site and make them easy to share your post.


I hope this tutorial can be a sollution for your blog. You did not need other share button that will spend a lot of place at your theme.

Advertisement