Icon Media Share With Hover Slide

Icon Media Share With Hover Slide - Salah satu cara meningkatkan trafik blog agar banyak yang mengenal dan berkunjung ke blog Anda adalah dengan berbagi (membagikan ulang artikel blog) ke sosial media seperti facebook like, twitter dan google plus share. Namun sangat tidak mungkin blog Anda mendapat kunjungan minimal 1000 pageview/hari jika itu hanya Anda yang melakukannya, Anda harus bisa mengajak pengunjung untuk melakukan hal yang sama.

Jika berkunjung ke blog lain bisa Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking, maka dengan membuat dan memasang widget icon media share di blog juga tidak kalah penting, karena widget tombol share seperti ini akan sangat-sangat membantu untuk memperkenalkan keberadaan blog Anda ke orang banyak. Untuk membuat pengunjung tertarik membagikan ulang beberapa artikel di blog Anda, tampilan widget tombol share seperti ini banyak saya modifikasi dengan berbagai efek, beberapa diantaranya bisa Anda lihat pada TAB Artikel dibawah ini:

• Article-1
• Article-2
• Article-3

Membuat Tombol Share Terbaru Efek Transisi

Desain Icon Media Share Dengan Efek Transisi - Cara terbaik membantu reputasi blog agar dikenal banyak orang adalah dengan membagikan ulang artikel blog ke situs-situs media sosial seperti google plus, facebook dan twitter...
► Baca Selengkapnya

Tombol Share Bouncing Fixed Shadow

Dengan perhitungan minimal, jika 20 orang yang berkunjung ke blog Anda melalu media Facebook, 20 orang dari Twitter dan 20 orang dari Google Plus, maka blog Anda sudah mendapat kunjungan 60 visitor dalam sehari untuk 1 posting atikel...
► Baca Selengkapnya

Cara Mudah Membuat Tombol Share Di Blog

Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog agar dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share...
► Baca Selengkapnya

Icon media share kali ini saya bentuk dengan tampilan yang berbeda, saya hanya mengambil nilai seberapa banyak pengunjung yang sudah membagikan ulang artikel blog Anda untuk ditampilkan disana, dan untuk melihat hasilnya saya hubungkan dengan efek hover slide seperti ini:




DEMO SHOW



Semua akan saya buat mudah, pada masing-masing icon media sudah aktif saat widget ini terpasang di blog Anda, artinya pengunjung yang membagikan ulang artikel blog Anda akan ditampilkan dengan jumlah angka, tanpa Anda melakukan edit kode ID akun pada icon media target, karena pada HTML pemanggil masing-masing data icon sudah saya sertakan perintah JavaScript aktif untuk mengambil URL-data saat pengunjung melakukan share, kode lengkapnya seperti ini:

<div id="media">
   <div class="facebook share"> // Icon media Facebook
     <i class="icon"><i class="icon-facebook"></i></i><div class="slide">
         <p>facebook</p></div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe>
   </div>
   <div class="twitter share"> // Icon media Twitter
     <i class="icon"><i class="icon-twitter"></i></i><div class="slide">
         <p>twitter</p></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">Tweet</a>
<script>
  !function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
      js=d.createElement(s);
      js.id=id;
      js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
   </div>
   <div class="google share"> // Icon media Google+
     <i class="icon"><i class="icon-google-plus"></i></i><div class="slide">
         <p>google+</p></div>
            <div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
   </div>
   <div class="linkedin share"> // Icon media Linkedin
     <i class="icon"><i class="icon-linkedin"></i></i><div class="slide">
         <p>linkedin</p></div>
<script type="IN/Share" data-counter="right"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
    lang: en_US
  </script>
   </div>
</div> <!..ending id tag 'media'..!>

Pekerjaan sudah selesai, tinggal membuat bentuk rangka tampilan pada masing-masing icon media. Konsepnya kita bentuk dengan susunan CSS element, akan tetapi jika Anda kurang menyukai bentuk tampilan widget seperti diatas, Anda bisa merubah tampilannya sesuai keinginan dan warna di blog Anda, silahkan Anda edit beberapa kode CSS berikut untuk membuat tampilan tombol share lebih keren lagi dari ini, CSS lengkapnya sebagai berikut:

#media {
  border-radius: 5px;
  padding: 14px 7px;
  background: white;
  width: 660px;
  overflow: hidden;
  margin: 50px auto 0;
  box-shadow:0 2px 3px rgba(71, 71, 71, 0.31)}

.share {
  background: #DCE0E0;
  position: relative;
  display: block;
  float: left;
  height: 40px;
  margin: 0 7px;
  overflow: hidden;
  width: 150px;
  border-radius: 3px}

.icon {
  display: block;
  float: left;
  position: relative;
  z-index: 3;
  height: 100%;
  vertical-align: top;
  width: 38px;
  border-radius: 3px 0px 0px 3px;
  text-align: center}

.slide {
  z-index: 2;
  display: block;
  margin: 0;
  height: 100%;
  left: 38px;
  position: absolute;
  width: 112px;
  border-radius: 0px 3px 3px 0px}

.slide p {
  font:400 16px Open Sans;
  border-left: 1px solid #fff;
  border-left: 1px solid rgba(255,255,255,0.35);
  left: 0;
  margin: 0;
  color: #fff;
  position: absolute;
  text-align: center;
  top: 10px;
  width: 100%}

.share .slide {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out}

.icon i {color:#fff;line-height:42px;text-shadow:1px 2px 1px #111}
.facebook iframe,.twitter iframe,.google #___plusone_0,
.linkedin .IN-widget {display:block;position:absolute;top:10px;z-index:1}
.linkedin .IN-widget {right:22px}
.facebook iframe {right:16px}
.twitter iframe {width:90px !important;right:5px}
.google #___plusone_0 {width:70px !important;right:15px}
.facebook:hover .slide,.twitter:hover .slide {left:150px}
.google:hover .slide,.linkedin:hover .slide {left:-150px}
.facebook .icon,.facebook .slide {background:#305c99}
.twitter .icon,.twitter .slide {background:#00cdff}
.google .icon,.google .slide {background:#d24228}
.linkedin .icon,.linkedin .slide {background:#007bb6}

Jika kode CSS diatas terlalu panjang, sangat banyak sehingga takut akan loading blog menjadi berat, bisa Anda ringkas dengan Cara Memperkecil Ukuran File CSS. Sampai disini dulu ya cerita dari Devy, next time saya akan memberikan widget yang lebih menarik lagi dari ini, semoga Icon Media Share With Hover Slide kali ini dapat bermanfaat buat sahabat semua pecinta SAHABAT BLOGGER 77 yang selalu setia berkunjung disini. Dan pastinya dapat membuat blog Anda lebih terkenal lagi dan sukses selalu. Amin..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Icon Media Share With Hover Slide
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

https://sahabatblogger77.blogspot.com/2015/04/icon-media-share-with-hover-slide.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77