Membuat Tombol Share Terbaru Efek Transisi

Tombol Share Terbaru Ala Sahabat Blogger 77

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. Karena mustahil Anda bisa mendapatkan trafik sebesar 500 pageview/hari (minimal) jika itu hanya Anda yang malakukannya, blog butuh trafik agar bisa naik 1 tingkat dari level sebelumnya, yang sudah pasti blog butuh pengunjung.

KESIMPULAN
Semakin banyak terjadi lalu lintas dalam blog, maka besar kemungkinan blog akan cepat terkenal seiring bertambahnya jumlah artikel pada blog.

Dengan menambahkan widget tombol share di blog merupakan salah satu cara termudah untuk mempromosikan blog Anda kepada banyak orang, karena nyatanya kita tidak bisa memaksakan seseorang untuk melakukan hal yang sama saat kita melakukan blogwalking (hanya bisa berharap, agar blog yang kita kunjungi melakukan hal yang sama dengan berkunjung juga ke blog kita). Pertemuan kali ini, saya sudah mendesain widget tombol share terbaru ala SAHABAT BLOGGER 77 buat sahabat semua dengan menggunakan efek transisi seperti tampilan screenshort dibawah ini:

Baca juga - Daftar Isi Responsive Model Tema Facebook


Bentuk tampilan menu yang hanya menampilkan sebuah tombol knock ON/OFF, sedangkan untuk icon media, saya hanya menambahkan 3 icon saja yang secara umum banyak digunakan seperti google plus, facebook dan twitter dengan efek transisi.
Kode lengkapnya seperti ini:

<style type='text/css'>
/*icon media share transition design
css type:id element input[sb77]
released on November 01, 2014
visit: http://sahabatblogger77.blogspot.com
modified: Devy Indriyani*/
#share {
  width: 550px;
  display: block;
  position: relative;
  margin:0px auto;}

.open-menu /*!id='sb77'*/ {display: none;}
.open-menu:checked ~ .g-plus {top: 80px;}
.open-menu:checked ~ .fb {left: 310px;top:145px;}
.open-menu:checked ~ .twitter {left: 115px;top:145px;}

.show-menu {
  font: bold italic large Georgia;
  background: #DC143C;
  width: 105px;height: 105px;
  display: block;cursor: pointer;
  border-radius: 50%;
  position: absolute;
  color:#fff;text-align:center;
  line-height:105px;z-index: 10;
  top:200px;left:200px;
  box-shadow:inset 0px 0px 2px 10px #F0F8FF;
  text-shadow: 1px 2px 2px #111}

.text /*!id='sb77'*/ {
  width: 80px;height: 80px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 215px;left: 215px;
  background: #ecf0f1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;}

.g-plus {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia4U6nRokqkAdIpTxLWI8lx_53pxljDR5P7YVoxiA1osUiAzIc7XnbEpvyF2OUAGUvOQRN-qSpjJ4QP0ptl_dHJrmLjTmfJ5I_u08UiJKKAFzahnFMjHJRDXXQf7ffMligJKQ4IdbVtx8/s80/sb77-googleplus.png) no-repeat center center;}

.fb {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewb8dEcLodzBuaZVkmdj18vt7uiKFd2EFwqhkeRncNABBf-iwk4_vRvh_hwmEUAApp639wVI1VC2yQiOdnpgyAEfbV6KKaq_8-OQVavD_bj0gDf_SH1kIHsNjPyAuqTFwJk10XowEtPQ/s80/sb77-facebook.png) no-repeat center center;}

.twitter {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLldKPF-Y3vUO9Hp8jx0ZgIO-l3gyu8FRo66d7l4IL5RJVdqTl2DnGZAPlcJTTYEHY_jICxjyqr-fHadE50aamCrHHglXxJQ_hNNKbwI20j2P052vFlWHTKLHRIS3bVT896uAMS6_tM0/s80/sb77-twitter.png) no-repeat center center;}
</style>

Hasilnya:



DEMO SHOW



Untuk HTML berikut saya menggunakan kode fungsi input-checkbox untuk menghilangkan perintah link URL pada tombol, lengkapnya seperti ini:

<div id="share">
<input type="checkbox" id="sb77_id" class="open-menu">
<label for="sb77_id" class="show-menu">SHARE</label>
<a href="#" class="g-plus text"></a>
<a href="#" class="fb text"></a>
<a href="#" class="twitter text"></a>
</input>
</div>

Mungkin saat ini mereka sedang aktif dalam media facebook, ajak mereka untuk berkunjung ke blog Anda dengan membuat sebuah status pada facebook sebagai link tautan, saya yakin beberapa diantara mereka pasti akan KLIK tautan yang Anda kirimkan pada status kronologi di facebook Anda. Hal yang menguntungkan bukan.? hehe..!! *SALAM MANIS*