Widget Sosial Share Pure CSS

Widget Sosial Share Pure CSS

Posted by Robi Armansyah

Widget Sosial Share Dengan Efek Hover

Widget Sosial Share dengan Pure CSS terlihat sangat elegan.
Dengan efek hover yang keren dan sangat ringan juga. Sobat dapat menambahkan tombol Sosial Share ini di bawah pada setiap posting blog untuk meningkatkan interaksi pengguna blog.
Demo dapat sobat lihat pada gambar di bawah berikut.
Tutorial Widget Sosial Share Pure CSS
Buka dasboard blog ▬►Template ▬►Edit HTML
Cari kode(CTRL+F) ]]></b:skin> Lalu lettakan kode CSS berikut tepat di atas kode ]]></b:skin> tsb

CSS
@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;
}

Berikutnya bagian penerapan HTML kode, cari (CTRL+F) kode <data:post.body/> didalam template blog sobat dan letakan kode HTML dibawah tepat dibawah kode <data:post.body/> nomor 2 atau nomor 3 karna kode <data:post.body/> ini lebih dari satu biasanya jika widget sosial share tidak muncul dibawah postingan blog silahkan sobat coba saja persatu pada kode <data:post.body/> tsb.

HTML
<ul class="post-social">

  <li class="facebook">
      <span class="social zocial-facebook"></span>
    <div class="fb-like" data-send="false" data-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>
Dan terakhir simpan template blog sobat

Ditulis Oleh : Robby Armansyah

DMCA.com Protection StatusAnda baru saja membaca artikel dengan judul Widget Sosial Share Pure CSS. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.
✚
Subscribe to:Post Comments (Atom)