Memasang Widget Sharing Is Sexy/Caring di Bawah Postingan

Farhan Share - Sobat farhan pada postingan kali ini kita akan membahas tentang Tutorial Blog, yakni cara membuat widget sharing is sexy di bawah postingan blog. Sebenarnya apa sih fungsi dan kegunaan dari memasang widget sharing is caring ini sobat? Ya, dengan adanya widget sharing is caring ini memudahkan pengunjung atau visitor yang mungkin mereka ingin merekomendasikan dan membagikan artikel di blog kita kepada sahabat dan teman terdekatnya, selain itu juga sobat farhan widget sharing is caring ini masih mempunyai banyak keunggulan lainya, contohnya semakin banyak visitor yang berkunjung ke blog kita, dan mereka melakukan sharing artikel di blog kita ke jejaring sosial mereka masing-masing, pastinya akan semakin banyak orang yang mengetahui dan berminat untuk mengunjungi blog kita, itu artinya traffic blog kita akan terangkat naik, coba bayangkan misalnya 1 pengunjung share ke jejaring sosial mereka, contohnya twitter, dan mereka mempunyai lebih dari 200 Followers, mungkin 1/5 dari followers-nya akan berminat mengunjungi blog kita, sudah lumayan bukan sekedar untuk meningkatkan traffic blog kita.

Sobat farhan widget sharing is caring seperti ini nampaknya sudah banyak di share oleh banyak blog, dan mudah ditemui di Internet. Mungkin bagi sebagian blogger yang memberikan tutorial memasang widget Sharing is Caring ini, pada umumnya menggunakan JavaScript/JqueryLibrary, yang memang dari bentuknya nampak lebih menarik dan animatif. Tapi sobat farhan kekuranganya adalah waktu loadingnya yang lama,  sebaiknya jika sobat farhan ingin memasang widget ini kurangi pemakaian JavaScript pada sidebar dan Header, karena itu mungkin salah satu penyebab loading blog menjadi lambat, pindahkanlah widget yang memuat JavaScript ke bagian Footer atau Bawah blog. Baik, sobat farhan di bawah ini saya sudah persiapkan script dan cara memasang widget sharing is caring di bawah postingan, di simak baik-baik ya.

1. Login Ke Blogger.

2. Pilih Template.

3. Pilih Download Full Template (berjaga-jaga bila terjadi kesalahan dalam meng-edit HTML).

4. Pilih Edit HTML.

5. Centang box "Expand Template Widget".

6. Sobat cari kode </head> menggunakan CTRL+F atau F3, lalu letakkan kode di bawah ini tepat di atasnya.

<!--farhanshare.blogspot.com-starts-->

<style type='text/css'>

div.beauty-bookmarks {height:54px;background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTb8SNztPNyjArEB7ZF0QcmUhah6cagrscuxiv0qrEubQnAL5nEZvpJQYhOao0oBviQsH3v8QMdJo1ZR23QUlRW6_Fizg1TrEJ_0KLLJEg81gAZi-I_aeTt3Jec9tFt1WXq-YK9AcRn2Cx/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTb8SNztPNyjArEB7ZF0QcmUhah6cagrscuxiv0qrEubQnAL5nEZvpJQYhOao0oBviQsH3v8QMdJo1ZR23QUlRW6_Fizg1TrEJ_0KLLJEg81gAZi-I_aeTt3Jec9tFt1WXq-YK9AcRn2Cx/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPyzg0M5IeizuRt87NKjwKJNG3uSjqGcWLo4q19KxHifzbckXO6USd1YypSzM01QtwTggASyPUsOUSXA0b-D3la0w832KDKGYdKLKT19R5YlHuECs7yZlEjfwhArLDfRqky5nnQsf83VT/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>

<!--farhanshare.blogspot.com-ends--> 

7. Selanjutnya sobat cari kode <data:post.body/>, bila sobat sudah memasang read more otomatis, biasanya akan ada beberapa kode seperti itu, pilihlah kode yang ke-2, Lalu letakkan kode di bawah ini tepat di bawah kode <data:post.body/> yang ke-2.

<!--farhanshare.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/farhanshare' 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>

<!--farhanshare.blogspot.com-ends-->

Catatan : ganti kode yang berwarna biru dengan URL feedburner blog sobat.

8. Klik "Save Template" dan Selesai.

Demikian sobat farhan artikel tentang Membuat Widget Sharing is Sexy di bawah postingan blog, semoga bermanfaat, bila ada pertanyaan comment di bawah.