Menaruh Widget Flipper Sharing Untuk Blogger

Lagi-lagi saya akan membagikan widget sosial bookmark yang mana terdapat 12 icon yang mana sangat berguna untuk blog kamu. Langsung saja deh cara menaruhnya yah karena saya yakin kalian semua sudah tahu fungsi daripada widget ini hehe :)

1. Masuk ke Akun Blogger kamu.

2. Klik Template --> Cadangkan/Pulihkan untuk back up template kamu terlebih dahulu.

3. Klik Edit HTML --> Lanjutkan --> Klik Expand Template Widget --> Cari kode <data:post.body/> kemudian kamu salin dan tempel kode di bawah ini tepat di bawah kode <data:post.body/>.

<style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOyRRqoarHEVUM9cnpIIvFIIKTj7ONf7gvjGQnJP_cJ4e8z1HK8LClcSLnc3FK_QbdGGErjmux95ePTEgicGV7ciu77vpzTwuw-4abvvaCrwS6qdHfJBfzuDZgO4gH8VrN8NRVoEbcyqRo/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' href="http://plus.google.com/" 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"/>

NOTE : 

•  Kata yang berwarna biru bisa kamu ganti sesuai keinginan kamu
• color:#333333; adalah untuk warna kata-kata yang kamu inginkan (disitu kata-katanya adalah Please Share it :))

4. Simpan Template.

Oh iya jika kamu ingin menghapus salah satu iconnya, tinggal kamu hapus saja contohnya seperti ini, misalkan kamu ingin menghapus icon reddit, maka yang kamu hapus adalah kode seperti ini saja.

<!-- 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;'/>

Mudah bukan ? thanks mybloggertricks :)

 

 

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget