3d Share Button

Sudah lama sekali rasanya tidak share tutorial blogger disini , Yah memang karena terakhir posting itu tahun lalu :v . Dan Oke , kali ini yang akan saya bagikan adalah sebuah cara yang akan sangat bermanfaat untuk mempercantik dan memperindah blog anda dengan 3D Share Button yang pastinya keren sekali .

Dan untuk memulai memasang ini di Blog anda , silahkan ikuti tutorialnya dibawah ini dan semoga berhasil dengan baik . Dan lagi semoga beruntung !

Cara membuat 3d Share Button

Pertama masuk ke Dashboard anda dan klik menu template.
Cari kode ]]></b:skin>
Kemudian pastekan Css dibawah ini tepat diatasnya

/*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;}

Kemudian letakkan kode panjang dibawah ini tepat dibawah <data:post.body/>

<!-- 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='http://4.bp.blogspot.com/-iNGEep5sGH8/Ur5K2Ld96qI/AAAAAAAAAAw/gtwywTqPaqg/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='http://1.bp.blogspot.com/-kOHz4YkXjIE/Ur5K4s8C9UI/AAAAAAAAABA/ef0baDPLq1M/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='http://2.bp.blogspot.com/-SLZcocrTttM/Ur5K3XIRZiI/AAAAAAAAAA4/ZEwTsb3gswg/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='http://2.bp.blogspot.com/-8ZAWvgAl0Hs/Ur5K5qjCw0I/AAAAAAAAABI/MCra8nPUu50/s1600/linkedin.png'/></a>
</div>
      <!-- end:share --> 

Selesai .

Perlu diperhatikan saat pemasangan kode yang terakhir , biasanya ada lebih dari satu kode <data:post.body/> , untuk itu silahkan sesuaikan dengan template anda masing-masing .
Oke , pemasangan 3D Share Button sekarang telah selesai dan semoga bermanfaat .


Tutorial serupa bisa anda temukan di
http://s-widodo.com/blog/cara-membuat-tombol-share-dengan-efek-3d

Demo

Bagikan :