2 Style Tombol Share Di Blogspot

Oke Sobat Disini Saya Akan Memberikan Tutorial Cara membuat Tombol Share Di Blogspot,Jika Ingin Lihat-lihat dulu Silahkan Klik Demo Dibawah Ini.

Demo

Oke Langsung Saja ke pemasangan .

1.Login Ke Blogger Kalian.
2.Pergi Ke Tata Letak / "EDIT HTML".
3.Pasang Jquery And Fontawesome Di bawah ini tepat di atas kode "</head>".

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>

NOTE:Jika Di template kalian sudah di pasang kode diatas Lewatkan saja bagian ini.
4.Tempatkan HTML dibawah ini tepat di bawah </div> atau </aside> /<footer> paling bawah sesuai template kalian .

<a id='btn' style='display:none;'><i class='fa fa-caret-square-o-up'/></a>
  <div id='share'><a id='hide'><i class='fa fa-caret-square-o-down'/></a>
  <a class='fa fa-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' id='facebook1' rel='nofollow' target='_blank' title='Facebook Share'/>
<a class='fa fa-twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' id='twitter1' rel='nofollow' target='_blank' title='Twitter Tweet'/>
<a class='fa fa-google' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' id='googleplus1' rel='nofollow' target='_blank' title='Google Plus Share'/>
<a class='fa fa-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' id='linkedin1' target='_blank' title='Linkedin Share'/>
<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' class="fa fa-pinterest"></a>
</div>

5.Selanjutnya pasang Javascript dibawah ini Tepat di atas "</body".

 <script>
$(document).ready(function(){
    $(&quot;#hide&quot;).click(function(){
        $(&quot;#share&quot;).hide();
    });
    $(&quot;#btn&quot;).click(function(){
        $(&quot;#share&quot;).show();
  $(&quot;#btn&quot;).hide();
    });
     $(&quot;#hide&quot;).click(function(){
        $(&quot;#btn&quot;).show();
    });
});
</script>

6.Cari Kode "</b:skin>" Atau "</style>" pasang Kode CSS dibawah ini Tepat di atas kode "</b:skin>" Atau "</style>".

#share {position: fixed;z-index: 99;height: auto;max-width: ;bottom: 0px;left:0;text-align:left;}
#share a{color:white;}
#btn{border:none;position:fixed;bottom:0px;left:0;cursor:pointer;}
#hide{border:none;cursor:pointer;}
.fa:hover {opacity: 0.7;}
.fa-facebook {background: #3B5998;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-twitter {background: #55ACEE;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-google {background: #dd4b39;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-linkedin {background: #007bb5;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-pinterest {background: #cb2027;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-caret-square-o-up {background:#000;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-caret-square-o-down {background: #000;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}

#share {position: fixed;z-index: 99;height: auto;max-width: 80px;bottom: 0px;left:0;text-align:left;}
#share a{color:white;}
#btn{border:none;position:fixed;bottom:0px;left:0;cursor:pointer;}
#hide{border:none;cursor:pointer;}
.fa:hover {opacity: 0.7;}
.fa-facebook {background: #3B5998;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-twitter {background: #55ACEE;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-google {background: #dd4b39;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-linkedin {background: #007bb5;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-pinterest {background: #cb2027;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-caret-square-o-up {background:#000;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}
.fa-caret-square-o-down {background: #000;color: white;padding: 20px;font-size: 20px;width: 30px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;}

Jika di template kalian ada css "fa" Hapus saja agar tidak bentrok.

Sudah selesai Mudah kan Tutorial 2 Style Tombol Share Di Blogspot Selamat Mencoba.