Monday, June 11, 2012

Menaruh Widget Flipper Sharing Untuk Blogger

2:23 AM Hzndi 32 comments

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:

Blogger
Social Bookmarking
Social Sharing

Posted in: ,,,

32 comments:

  1. Black2ShareJune 11, 2012 at 5:50 AM

    Makasi banyak infonya sob... nice share

    ReplyDelete
  2. NFJune 11, 2012 at 6:39 AM

    jadi ada yang sundul2annya itu ya? :D boleh juga

    ReplyDelete
  3. Windows BlogJune 11, 2012 at 7:36 AM

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

    ReplyDelete
  4. zachflazzJune 11, 2012 at 10:41 AM

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

    ReplyDelete
  5. Rohmad Nur HidayatJune 11, 2012 at 10:42 AM

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

    ReplyDelete
  6. vlog media newsJune 11, 2012 at 11:16 AM

    Kira2 kalau di pasang di blog bikin load berat gak gan?

    ReplyDelete
  7. SCJune 11, 2012 at 11:35 AM

    keren sob, kapan-kapan bisa diterapkan
    makasih ya

    ReplyDelete
  8. Kang MuroiJune 11, 2012 at 11:36 AM

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

    ReplyDelete
  9. UnknownJune 11, 2012 at 12:27 PM

    lebih mudah ke addthis.com gan

    ReplyDelete
    Replies
    1. HzndiJune 11, 2012 at 4:43 PM

      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. Cendekiawan ITJune 11, 2012 at 1:13 PM

    eh lucu, ada nongol2nya... heeeee

    ReplyDelete
  11. yahyaJune 11, 2012 at 1:34 PM

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

    ReplyDelete
  12. agriculturproductJune 11, 2012 at 1:38 PM

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

    ReplyDelete
    Replies
    1. HzndiJune 11, 2012 at 4:56 PM

      taruh di tempat strategis, bisa di atas postingan atau dibawah postingan gan :)

      Delete
    2. AgriculturProductJune 12, 2012 at 8:04 AM

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

      Delete
    3. HzndiJune 12, 2012 at 9:37 AM

      Haha ya gpp gan, double kn lebih asik :D

      Delete
  13. Sungai AwanJune 11, 2012 at 1:52 PM

    makasih kawand
    mudah kelihatannya sih tapi aku masih belum paham

    ReplyDelete
    Replies
    1. HzndiJune 11, 2012 at 4:57 PM

      dicoba dahulu saja sob, ente pasti bisa :D

      Delete
  14. AsalasahJune 11, 2012 at 3:53 PM

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

    ReplyDelete
  15. Oh Gitu..June 11, 2012 at 3:54 PM

    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