Cara memasang Widget Sharing is Caring / Sharing is Sexy di Blog A Z K A V E I R O: Cara memasang Widget Sharing is Caring / Sharing is Sexy di Blog
9

Cara memasang Widget Sharing is Caring / Sharing is Sexy di Blog

Share on :

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.
UNTUK MENGHARGAI POSTINGAN INI KLIK IKLAN 1X 

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 melakukan beberapa modifikasi pada jenis button bookmark apa saja yang digunakan dan juga menggunakan CSS sprite (image sprite) garapan CSSReflex tanpa javascript/jquery.
UNTUK MENGHARGAI POSTINGAN INI KLIK IKLAN 1X 
  • 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
2. Centang 'Expand Widget Templates'. Jika perlu, backup template terlebih dahulu.
3. Cari </head> (Ctrl+F), letakkan kode CSS berikut tepat di atasnya.


<!--sharing-sexy-azka-veiro.blogspot.com-starts-->

<style type='text/css'>

div.beauty-bookmarks {height:54px;background:url(&#39;http://3.bp.blogspot.com/-hqoa_YwhA2A/T5Yb2iSK_lI/AAAAAAAABdY/ASy95CIaVa8/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat left top;position:relative;width:540px;}

div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url(&#39;http://3.bp.blogspot.com/-hqoa_YwhA2A/T5Yb2iSK_lI/AAAAAAAABdY/ASy95CIaVa8/s1600/buka-rahasia-sharing-background.png&#39;) 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(&#39;http://2.bp.blogspot.com/-lDppcTd-d5w/T5Yb5aJ_anI/AAAAAAAABdg/qw_3bh0X3NA/s1600/bukarahasia-sexysprite.png&#39;) 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-azka-veiro.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 == &quot;item&quot;'>

<center><div class='beauty-bookmarks'>

<ul class='socials'>

<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>

<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/azkaaveiro' title='Subscribe to RSS'/></li>

<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>

<span class='beauty-rightside'/></div></center>

</b:if>

<!--sharing-widget-buka-rahasia.blogspot.com-ends-->


Ganti http://feeds.feedburner.com/azkaaveiro dengan url feedburner blogmu.

5. Save templates.

PPC Iklan Blogger Indonesia

Ditulis Oleh : Azka Latif Noor ~ Tips dan Trik Blogspot

Azka Latif Noor Sobat sedang membaca artikel tentang Cara memasang Widget Sharing is Caring / Sharing is Sexy di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

9 komentar:

Ketopjoze mengatakan...
Reply

Saat saya masuk ke blog ini, saya lihat di sebelah kira halaman, online visitor, tertulis 760. Berarti pengunjung blog ini yang sedang online berjumlah 760. Hebat ya? Usia blog ini berapa ya? Dulu skulnya dimana?

Zaky Argha mengatakan...
Reply

sepp gan..
btw lucu tuh emot untuk komentarnya..hahah

Republic Of Note ᚚ

Zaky Argha mengatakan...
Reply

lupa tes emotnya...
numpang tes yah..hehe
:e :tup

Mr.DHI mengatakan...
Reply

akan saya coba praktekan, gan do'akan semoga berhasil di blog saya. amin

#salam terhangat dari Mr.DHI

Gunawan Sianturi mengatakan...
Reply

mantap sobmmm kalo mau pake yg technorati aja bisa khan..
trims sob

Rama Banten Blogs mengatakan...
Reply

mantaap ...kunjungi blk sob

Anonim mengatakan...
Reply

Hi thеre to аll, hoω is the ωhοlе thing, I thіnk
eνery one іs gеtting mοre from this ωеb ѕіte, anԁ your viеωѕ are nіce for nеw pеoρle.


Alsо vіѕіt my web-site -
iphone repair petaling jaya

Anonim mengatakan...
Reply

I enjoy reaԁing through an аrtiсlе that can make men anԁ ωomen thіnk.
Alѕo, thanks for peгmitting me to сοmment!


Here iѕ my ωеb ѕite; ipad repair damansara

Anonim mengatakan...
Reply

Thіs dеsіgn is ѕpeсtаcular!
You most сertаinly knoω how to keep a rеader
еntertainеd. Betωeеn your ωit
and your νideoѕ, I ωas almοst mοvеd tο
start mу οwn blog (ωеll, аlmost.
..ΗаHa!) Fаntastic job. I rеally loѵеԁ whаt yоu haԁ to sаy,
and more thаn thаt, how you presentеd it.
Τoо cool!

My page iphone repair bangsar

Posting Komentar

BLOG INI DOFOLLOW .
Silahkan tinggalkan komentar dan kritik sobat, tapi mohon jangan SPAM ya..!
Komentar SPAM akan di HAPUS oleh admin.
Komentar yang membangun sangat dibutuhkan oleh blog ini.
Terima Kasih.

Back to Top