Cara membuat Desain Icon Media Share Dengan Efek Transisi

Berikut ini akan diuraikan langkah-langkah cara membuat (  Desain Icon Media Share Dengan Efek Transisi  ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : (  Desain Icon Media Share Dengan Efek Transisi  ) sebagai berikut :

1. Login ke akun blogger
2. Klik tema
3. Edit html

Masukan CSS di bawah 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/AVvXsEh9KIXs0b56Ff_2zoPcmU218a38tB3U0tHcmuBa0NeFRzIvLYvYAvrIh6EyNEA9RNOQjq91mLKqIlI_Z99Q8-2k1Sy7fVDdOHHCls3gC_JoaWGIt2RZe823A-sSfldgY4RlXCF6Pwzn5-c/s80/sb77-googleplus.png) no-repeat center center;}

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

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

Masukan Kode HTML di bawah 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>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah

simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,

dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Desain Icon Media Share Dengan Efek Transisi  ) semoga bermanfaat terima kasih.