Pure CSS Elegant Share widget untuk Blogger

Unknown

blog, Tips, Trick, Tutorial

09/10/2013

2 Komentar

tombol-tombol ini terbuat dari Pure CSS dan terlihat sangat elegan. widget ini memiliki efek hover yang keren dan ringan. Agan dapat menambahkan tombol ini di bawah setiap posting blog Agan dan meningkatkan interaksi pengguna dalam blog. COntoh lihat dibawah :

Pertama yang harus dilakukan adalah Masukan kode CSS dibawah ini ke Template → Edit HTML. Cari kode ]]></b:skin>  masukan kode dibawah tepat diatas kode ]]></b:skin>

@import url(http://weloveiconfonts.com/api/?family=zocial);/* zocial */[class*="zocial-"]:before {  font: 2.5em/2em 'zocial', sans-serif;  color: white;  line-height: 2.2;}
.post-social .facebook {  background: #3B5998;}.post-social .twitter {  background: #4099FF;}.post-social .googleplus {  background: #db5a3c;}.post-social .social {  float: left;}.post-social .zocial-facebook {  margin: 0 15px;}.post-social .zocial-twitter {  margin: 0 25px;}.post-social .zocial-googleplus {  margin: 0 25px;}.post-social li {  min-width: 180px;  width: 210px;  height: 80px;  cursor: pointer;  list-style: none;  text-align: left;  float: left;}.post-social li:hover [class*="zocial-"]:before {  opacity: 0.5;  text-align: right;}.post-social li:hover iframe {  opacity: 1;}.post-social li iframe {  margin-top: 30px !important;  opacity: 0;  transition: all .3s ease-in-out;}.post-social li .fb_ltr {  margin: 30px 20px !important;}

Selanjutnya Masukan kode ke Template → Edit HTML. tekan Ctrl + F dan cari kode <data:post.body/>  dan paste kode dibawah tepat dibawah kode <data:post.body/>. 

layout="button_count" data-width="250" data-show-faces="true"></div>  </li>  <li class="twitter">      <span class="social zocial-twitter"></span>    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips">Tweet</a>  </li>  <li class="googleplus">        <span class="social zocial-googleplus"></span>    <g:plusone size="medium"></g:plusone>  </li></ul>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Terakhir Save Template.dengan widget ini maka blog anda akan terlihat elegant dan menarik.