Widget Bagikan Artikel Ke Sosial Bookmarking

Membagikan artikel ke sosial bookmarking - bagi sobat yang suka dalam hal memodifikasi tampilan blog untuk mempercantik blog, widget ini sangat cocok untuk sobat selain memenuhi kebutuhan SEO juga memenuhi keindahan blog dimata pengunjung widget sosial bookmarking ini disebut flipper sharing widget karena widget ini berbalik saat di sorot kursor.

untuk membangun trafic blog sudah tidak bisa dilepaskan lagi dari sosial media yang menjadi patner blog sobat untuk memenuhi kebutuhan SEO dalam mengaet visitor ke blog sobat, fungsi utama widget ini yaitu befungsi untuk membagikan artikel ke sosial bookmarking berkualitas seperti dig, reddit, delicious, google plus, dan lainnya.

keunggulan dari widget ini selain membagikan artikel ke sosial media, tips seo, juga widget ini menggunakan gambar-gambar yang dijadikan satu gambar atau yang sering disebut css sprites yang membuat loading widget terasa lebih cepat karena hanya men-request satu gambar dari server dibandingkan dengan menggunakan gambar yang terpisah menjadikan widget butuh waktu lama untuk menrequest banyak gambar, tanpa panjang lebar lagi ikuti panduannya ya.

Baca juga ya:

• 7 tips ampuh percepat loading blog
• Membuat sitemap dengan efek akordion

cara memasang pada blog

• login keblogger
• template >> edit html >> cari kode <data:post.body/>
• copy paste script dibawah ini tepat dibawah  kode diatas

<style>
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtoH0EHtVQCU7WXZpZIE0hkGrtMi82r2K_SXAqnB1fxZIKayug-g7-VHVWO4Bz5dxDsZX9Noy19LTIEBQV-MOpyqjH0i07IcPRqBT-qUUmKcpQWlUiO08SpXhPnQoVwQSGARfgNVRJv3u/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare">
Please Share it! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</b:if></div>
<div style="clear:both"/>

butuh bantuan

jangan malu untuk menannyakan sesuatu ,silakan tanyakan apa yang menjadi kendala sobat dalam artikel saya kali ini  di kotak komentar dibawah ini, dengan tanggap saya akan menjawab pertanyaan sobat dengan segera, salam blogger :D