Cara membuat tombol share dengan efek 3D

Tombol Bagikan atau share yang dibawah posting blog tentu gak asinglagi bagi developer blogger, fungsi dari tombol share tersebut agar lebih memudahkan untuk membagikan artikel yang sudah kita posting ke dalam beberapa media sosial seperti facebok, twitter, google+, lintasme  dan jejearing lainya, Untuk membuat tombol share ini hanya menggunakan CSS dan gambar untuk membuat tampilan tombolnya menjadi 3D hanya akan menambahkan sedikit kode yang terdapat  didalam edit HTML Template blog, maka hasilnya akan menjadi tombol share pada gambar diatas untuk itu kita simak bersama-sama
1. Login ke akun blogger.
2. Masuk ke Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode]]></b:skin>

/*sosial */
.share-wrapper {width:98%;margin:auto;background:#F9FAFA;border: solid 1px #eeeeee;padding:5px;margin:auto;margin-bootm:10px;}
.share-wrapper h2 {float:left; font-family:Arial, Helvetica, sans-serif;font-size:17px;color:#999999;text-shadow: 0 1px #ffffff;margin-right:10px;line-height:35px;}
  .button-share {
  margin: 0 0 5px;
  padding: 5px 7px;
  height: 30px;width:30px;
  line-height: 28px;
  font-size: 14px;text-align:center;
  font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #dfdfdf;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #a8a8a8;
  outline: 0;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  background-image: -moz-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  background-image: -o-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  background-image: linear-gradient(to bottom, #f1f1f1, #dfdfdf 70%, #dadada);
  -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
}
.button-share:hover, .button-share:active {
  background: #dfdfdf;
  border-top-color: #c9c9c9;
}
.button-share:active{
  vertical-align: -5px;
  margin-bottom: 0;
  padding: 5px 7px;
  height: 30px;width:30px;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #a8a8a8;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}
.button-share img{margin-top:5px;}

 

4.Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'> 

<!-- start:share -->
<div class='share-wrapper'><h2> Bagikan :</h2>
  <a class='button-share' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXIXgVy6WSjn8RTnQTOp4cjNIFU9dVDxiSiuGMf4qBMEMEnomCW5uK1U4Afr2oBAfIU0kZ_nO4mTlE71bQPA33sxCBaMRipjHBYYmC_HzlhzBAOZ3S6rzICNBWdrjggmlz_YHnuxM_Q9Q/s1600/facebook.png'/></a>
  <a class='button-share' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwm6GN86a7FzOIINmcQ3vY_cV4no-Od2zbxnQVr50F4v80oUxi-hPN9aPs3PybthMzXXoRwsp6JbQFZWqQlTzmyLyHwpAC7X_e-KWW0PPhglR9O5i-hBiJSz8jLRuBVHFctCsVm4pIec/s1600/twitter.png'/></a>

  <a class='button-share' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3If_XGkIXkqrekN4y1IXOQcc7aFqyLdiv04-V9vKDY4HcoQ0WKcMJ9WVWvZtr9UZZl5Dm4qUtMZ5r0L0hW4HI29KiLGXrKuH0qA8sXNI6lsLjVV0z0VfEKn8Fz81YFlOnzFBwZlN4elI/s1600/googleplus.png'/></a>

 <a class='button-share' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWxVVPMxE6OZTyHJRa0w0r1hBBEACtyTYwm45j9b3DjaIvjHzU0u9bZsLIfEvA8-ScG7FASqGGLViDRVqo9ZQey002QOaUkAcZrma7u0CQbaS6knO1ca0Hloj9h566m5Fx58P6uO8uXA/s1600/linkedin.png'/></a>
</div>
      <!-- end:share -->

 

5. Silahkan simpan template kalian

Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <data:post.body/> dan <div class='post-footer'> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.