Widget Share Buttom mempunyai peran yang sangat besar dalam mendukung
kemajuan sebuah blog. Dengan memasang
Widget Share Buttom ini para pengunjung dapat lebih mudah membagikan artikel yang telah
kita posting ke dalam beberapa media sosial mereka seperti Facebook, Twitter, maupun
Google+. Dalam membuat Widget Share Buttom ini menggunakan CSS dan gambar untuk
membuat tampilan tombolnya menjadi lebih keren
dan 3D seperti gambar di atas.
Trik Memasang Widget Share Buttom Keren 3D
- Login ke blogger
- Masuk ke menu Template
- Lalu pilih Edit HTML
- Cari kode ]]></b:skin> menggunakan Ctrl+F agar mudah
- Kemudian copy kode berikut dan paste-kan tepat 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;}
- Cari kode <data:post.body/> atau bisa juga <div class='post-footer'>
- Kemudian copy kode berikut dan paste-kan tepat di bawahnya
Catatan: kode <data:post.body/> dan <div class='post-footer'> mungkin ada lebih dari satu, tergantung template yang digunakan. Untuk itu sebelum menyimpan ada baiknya Pratinjau dulu dan lihat hasilnya.
<!-- start:share -->
<div class='share-wrapper'><h2> Bagikan :</h2>
<a class='button-share' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0kbpVIB6W6yPR0VtxvSxvG4Q-oh4V_HYig6pc1Wqm0filXP2AFPI5mlbiJUuo-5Ga2MdqFGeUfDE6AsIachWCA5JCDCEbqIM1ASkiRBmDQhxKHmOfrk4XezssVHt0Qp0ux_AJ-m9gpE/s1600/facebook.png'/></a>
<a class='button-share' expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7oauRxGyCQFsIjEMlroMccPE4V6F36vDm9DYwS_39MgJy5Wk2ZT5QHfm9RGKyV1wCWOCmeICG_Eab_gyIv2w7G4WqQ8d9ZBRdV3_uVLECGDQXwCHAGJHYbpCPDPDvBGla7FXfvJMzmOY/s1600/twitter.png'/></a>
<a class='button-share' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbidU_CiICy2y3qG46W4J3aAI4daIBUCTgOhKseSe4KYDLhWUYA6wGg7RkR2f6LrBUQMY55ct-1nLFmQi_OL8k_VcTTRRztgIQHHanMPI1JXcahgXyUCGLGvsjDeKBkXf8TaYy2DulVRI/s1600/googleplus.png'/></a>
<a class='button-share' expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjaSHBR4Crx3h9eBGrV89BD42NMGqPAPkeVVWrIarozvB8r31ByjeT7PUEM78Z7GTj5NqOWoH91tC7tcpp2r1Rff1jt_kxvJ-wYPROZG6rY1aey9LZDp6Mo-BmpiHOXR_-9bEydB641g/s1600/linkedin.png'/></a>
</div>
<!-- end:share -->
- Langkah terakhir klik Simpan Template.
Begitulah Trik Memasang Widget Share Buttom Keren 3D
ini, semoga dapat bermanfaat bagi blogger pemula seperti saya. Selamat
mencoba...!