Cara Pasang Widget Sharing Is Caring/Sexy Di Blogger
Share posting ke beberapa social bookmark maupun social media lain merupakan hal penting untuk promosi blog dan artikel blog. Menyediakan tool untuk pengunjung agar lebih mudah melakukan sharing membuat mereka mudah melakukannya. Salah satu bookmarking widget yang cukup menjadi favorit adalah "Sharing is caring/sexy bookmarking widget", karena tampak atraktif dan animatif sehingga dapat menjadi nilai plus juga untuk desain blog.
Widget ini banyak ditemui dan dishare oleh banyak blog. Sebagian menggunakan javascript/jquery library, yang memang tampak lebih animatif. Namun kekurangannya, waktu load yang dibutuhkan lebih lama. Sehingga bagi blog yang sudah terlalu banyak menggunakan javascript, widget ini dapat menambah beban/berat blog dan membuat waktu load lebih panjang. Untuk versi widget sharing is caring ini, saya melaksanakan beberapa modifikasi pada jenis button bookmark apa saja yang dipakai dan juga menggunakan CSS sprite (image sprite) garapan CSSReflex tanpa javascript/jquery.
- Demo 1 (Sharing is caring): lihat di bawah
- Demo 2 (Sharing is sexy): Click here
Cara Memasang Widget Sharing is Caring/Sexy di Blogger
Widget bookmark sharing blogger ini akan ditampilkan di bawah posting blog.
1. Masuk ke dashboard > template > Edit HTML
1. Masuk ke dashboard > template > Edit HTML
2. Centang 'Expand Widget Templates'. Jika perlu, backup template terlebih dahulu.
3. Cari </head> (Ctrl+F), letakkan aba-aba CSS berikut tepat di atasnya.
<!--sharing-sexy-buka-rahasia.blogspot.com-starts-->
<style type='text/css'>
div.beauty-bookmarks height:54px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHMjSQ6JYsn4vBrY_fexhWOiENMvsj0EDF4F6HdhG4qS68AurxtPVENqRsiJuzLPWxKn_gzryhrATsxf9paS3bkmNrZnzG42-dMfT_Cbm1V7n9BNwtbwSPBzVgucnv3z3c__o9SnfCPmg/s1600/buka-rahasia-sharing-background.png') no-repeat left top;position:relative;width:540px;
div.beauty-bookmarks span.beauty-rightside width:17px;height:54px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCHMjSQ6JYsn4vBrY_fexhWOiENMvsj0EDF4F6HdhG4qS68AurxtPVENqRsiJuzLPWxKn_gzryhrATsxf9paS3bkmNrZnzG42-dMfT_Cbm1V7n9BNwtbwSPBzVgucnv3z3c__o9SnfCPmg/s1600/buka-rahasia-sharing-background.png') no-repeat right top;position:absolute;right:-17px;
div.beauty-bookmarks ul.socials margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px;
div.beauty-bookmarks ul.socials li display:inline-block !important;float:left !important;list-style-type:none !important;margin:0 !important;height:29px !important;width:48px !important;cursor:pointer !important;padding:0 !important;
div.beauty-bookmarks ul.socials a display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important;
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNFT7CUOrvGbwaDUwdKS-_YKLBjJzgmhkKVDItHnex1wzneuRASo-DcyVBwSmJMz8Bhfodpoc0iD3LzIrl8lMSvhFj4eVVHV-T08pZxLND4HPn69wSpbv4qjzz3SkVnT-mJP9aXfgTP-C/s1600/bukarahasia-sexysprite.png') no-repeat !important;
.beauty-furl background-position:-300px top !important;
.beauty-furl:hover background-position:-300px bottom !important;
.beauty-digg background-position:-500px top !important;
.beauty-digg:hover background-position:-500px bottom !important;
.beauty-reddit background-position:-100px top !important;
.beauty-reddit:hover background-position:-100px bottom !important;
.beauty-stumble background-position:-50px top !important;
.beauty-stumble:hover background-position:-50px bottom !important;
.beauty-delicious background-position:left top !important;
.beauty-delicious:hover background-position:left bottom !important;
.beauty-yahoo background-position:-650px top !important;
.beauty-yahoo:hover background-position:-650px bottom !important;
.beauty-blinklist background-position:-600px top !important;
.beauty-blinklist:hover background-position:-600px bottom !important;
.beauty-technorati background-position:-700px top !important;
.beauty-technorati:hover background-position:-700px bottom !important;
.beauty-myspace background-position:-200px top !important;
.beauty-myspace:hover background-position:-200px bottom !important;
.beauty-twitter background-position:-350px top !important;
.beauty-twitter:hover background-position:-350px bottom !important;
.beauty-facebook background-position:-450px top !important;
.beauty-facebook:hover background-position:-450px bottom !important;
.beauty-mixx background-position:-250px top !important;
.beauty-mixx:hover background-position:-250px bottom !important;
.beauty-script-style background-position:-400px top !important;
.beauty-script-style:hover background-position:-400px bottom !important;
.beauty-designfloat background-position:-550px top !important;
.beauty-designfloat:hover background-position:-550px bottom !important;
.beauty-syndicate background-position:-150px top !important;
.beauty-syndicate:hover background-position:-150px bottom !important;
.beauty-email background-position:-753px top !important;
.beauty-email:hover background-position:-753px bottom !important;
</style>
<!--sharing-sexy-buka-diam-diam.blogspot.com-ends-->
Kostumisasi CSS:
Secara default, CSS di atas saya set untuk menampilkan quote "sharing is caring". Untuk mengubah menjadi "sharing is sexy", perhatikan pada bagian CSS background positioning di atas yang saya tandai dengan warna biru: ganti left top dengan left bottom, dan right top dengan right bottom.
4. Cari <data:post.body/> (Ctrl+F), paste kode berikut TEPAT setelah/dibawahnya:
<!--sharing-widget-buka-rahasia.blogspot.com-starts-->
<b:if cond='data:blog.pageType == "item"'>
<center><div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/blogspot/bukarahasia' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div></center>
</b:if>
<!--sharing-widget-buka-diam-diam.blogspot.com-ends-->
Ganti harus di isi/search?q=situs-direktori-bookmark-dofollow" target="_blank">feedburner blogmu.
5. Save templates.
Done, sekarang tinggal ajak pengunjung untuk memanfaatkan bookmark sharing widget tersebut.
Credits and thanks to CSSReflex for the beautiful CSS Sprite!
Belum ada Komentar untuk "Cara Pasang Widget Sharing Is Caring/Sexy Di Blogger"
Posting Komentar