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: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>Make these changes:
/*--------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/AVvXsEiUMVlphn0z9fskTgj85ijb-x0DfGm924YFwOpIznbYJO0ia9vbGIoywNZzVuBKfE6wyf3meOMwGQPKlnZwqa4AoTrVQMCBP1QymIxeM3KNC7wqOPmqcOqZrvdRSQEQsOe6H2g4nPcHOAkk/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' href="http://plus.google.com/" 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"/>
- To change the color of the text that appears on top of widget edit #333333
- If in case you wanted to remove some icons then just delete its code. For example if we wish to remove the Digg icon from the list then we just need to delete the code:
<!--DIGG-->The HTML has been cleanly indented and structured so you would not encounter any trouble playing with the code.
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>
0 comments:
Post a Comment