Cara membuat Flipper Sharing Widget hanya dipostingan blog

Tweet

Dua tahun lalu kami meluncurkan sebuah widget berbagi sederhana menggunakan set Icon flapper. Kami menggunakan sprite CSS untuk membuat gulungan atas efek yang lebih cepat dan efektif. Sekarang ketika kita telah diajarkan sebagian besar dari Anda bagaimana menerapkan CSS3 transisi, waktu untuk menerapkannya dengan cara yang berbeda. Aku hanya dirancang dua ikon flapper tambahan untuk Pinterest dan Google Plus dan sekarang versi baru ini memiliki beberapa keuntungan atas sebelumnya. Para Ikon memutar dan membalik secara vertikal pada mouse hover. Waktu yang dibutuhkan oleh efeknya sangat kecil sehingga pengguna jarang memperhatikan pergeseran gambar. Kami akan merilis beberapa media lebih sosial ikon dalam beberapa hari mendatang dengan beberapa CSS3 efek tak terlihat untuk membiarkan Anda mengambil kebahagiaan penuh animasi tanpa menggunakan jquery.

Kami menggunakan ikon kami pradesain dan dikemas menjadi satu gambar. Kemudian kita buat kelas terpisah untuk setiap ikon dengan menentukan properti posisi latar belakang untuk menghubungkan kelas sub dengan kelas utama yang berisi gambar kemasan. Untuk efek Flip vertikal kami menggunakan milik kemudahan dalam dan waktunya itu pada o.15 detik.

Set flapper mencakup total 12 icons tapi kami telah dikecualikan Technorati, yahoo dan ikon YouTube untuk membuat penggunaan yang lebih berguna seperti:

1. Google Ditambah
2. Facebook
3. kericau
4. Pinterest
5. Delicious
6. Digg
7. Stumble upon
8. reddit
9. RSS

Cara menggunakannya :

1. Buka akun blog Anda
2. Masuk ke Menu template >> Procced >> centang Expand Template Widget
3. Cari kode : '<data:post.body/>' lalu masukkan kode dibawah ini tepat dibawah kode  '<data:post.body/>' yang kedua

<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/AVvXsEg8DHCSN8bcuTTkpNH0mIVrSzhEBh0TRjG8LnQqSUzMCmzpKyZw3wNvAp_6HTEQwJIYovrGD4KzR7X0IulBxIUir-B8rMPSatziFV9uB0jn2myh_edkyLLsl-Ar7hP7CSKPCahOFOeKa3Dl/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"/>

Lalu simpan...