Two years ago we released a simple sharing widget using the flapper Icon set. We made use of CSS sprites in order to make the roll over effect more quick and effective. Now when we have already taught most of you how to apply CSS3 transitions, its time to apply them in a different way. I just designed two additional flapper icons for Pinterest and Google Plus and now this new version has several benefits over the previous. The Icons rotate vertically and flips upon mouse hover. The time taken by the effect is so small that the user rarely notices image shift. We will be releasing some more social media icons in coming days with some unseen CSS3 effects to let you take the full bliss of animation without using jquery. Please see a demo first:
Update: Google Plus link has been corrected and now you can share your posts on Google+ too with both thumbnail and description.
Our Lab is too over crowded with gadget and plugins so please wait for a minute for the page to load.
How it works?
We used our predesigned icons and packed them into one image. Then we created separate classes for each icon by specifying the background position property in order to connect the sub classes with the main class containing the Packed image. For the vertical flip effect we used the property of ease-in and timed it at o.15 seconds.Flapper set includes a total of 12 icons but we have excluded Technorati, yahoo and YouTube icons in order to make use of the more useful ones like:
- Google Plus
- Delicious
- Digg
- Stumble upon
- RSS
Why use it?
- It uses only CSS and no Scripts,
- It loads from your very own blog and does not connect to third party servers,
- It loads fast and looks great!
- Attracts readers and increases chances of social circulation
Add it to Blogger
This gadget can be inserted easily in any blogging platform by making simple changes to the Sharing links. Blogger users can follow these easy steps to install flipper on their blogs:- Go To Blogger > Template
- Back up your template
- Click Edit HTML > Proceed
- Click the Expand Widget Templates box
- Search for <data:post.body/>
- Just below it paste the following HTML code
<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/AVvXsEgA_u1XQ66apvos1eTSYbat1Z8obXZYgG0vyiSP7uhvwst_t380A-yyMW5R3od8XvLhmbR3ydf_Jik5Ofe5hZBOtZNH2Oz6TT1IYDis-htHQVuqabA793DNs_1v3hiGuBJ5UwN3fr30-d3m/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 == "item"'>
<div class="Pleaseshare">
Please Share it! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>
<!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>
<!-- Pinterest -->
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>
<!-- Delicious -->
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>
<!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz :>'/>
</b:if></div>
<div style="clear:both"/>
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.