Monday, June 11, 2012

Menaruh Widget Flipper Sharing Untuk Blogger

flipper sharing widget

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:

32 comments:

  1. Makasi banyak infonya sob... nice share

    ReplyDelete
  2. jadi ada yang sundul2annya itu ya? :D boleh juga

    ReplyDelete
  3. keren nih, untuk jejaring sosial...
    mau saya pake ntar di blog sy...

    ReplyDelete
  4. saya nyoba ikuti.. ntar siang masuk lebih lanjut deh..

    ReplyDelete
  5. Wah, info bagus nih sob. di coba dulu sob. Tapi kira-kira bikin loading blog berat gak ya.

    ReplyDelete
  6. Kira2 kalau di pasang di blog bikin load berat gak gan?

    ReplyDelete
  7. keren sob, kapan-kapan bisa diterapkan
    makasih ya

    ReplyDelete
  8. wah widget yg mantabss sob, trims ya disave dulu deh, ntar kalo perlu bisa mampir kesini sob, trims

    ReplyDelete
  9. lebih mudah ke addthis.com gan

    ReplyDelete
    Replies
    1. memang lebih mudah, tadinya saya mau make addthis, tapi di template saya ga bisa gan. yaudah saya sekareang make CSS aja. ga bikin blog berat juga hehe

      Delete
  10. wahh,, keren nii sob.. boleh dicoba nii..

    ReplyDelete
  11. Mantab nich gan,saya pengen pasang cuma mau tak tarok dimana lagi ya.??

    ReplyDelete
    Replies
    1. taruh di tempat strategis, bisa di atas postingan atau dibawah postingan gan :)

      Delete
    2. Diatas sudah penuh gan.kalo ditarok dibawah doble dong.? :D

      Delete
    3. Haha ya gpp gan, double kn lebih asik :D

      Delete
  12. makasih kawand
    mudah kelihatannya sih tapi aku masih belum paham

    ReplyDelete
    Replies
    1. dicoba dahulu saja sob, ente pasti bisa :D

      Delete
  13. wahh keren, tapi kemairin ane baru juga nemuin yang unik dan mantap kayak diblog ane, jadi nanti dulu dicoba

    ReplyDelete
  14. mantap sekali, kayaknya bagus, dan blog ane masih kosong,,, nanti dicoba ahh.. makasih ya :)

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More