Monday, May 12, 2014

Customized social button with Flipboard

Increase your blogs/ website SEO with Functionality to add your website to personal Flipboard magazine!!!


Looking to add a sharing button to your blog or website? Here is a transition set of buttons that you can add to your site and make it easy for people to share your content.

Copy paste the following code for the button layout shown bellow:
<style type="text/css">
#pbt-social-v1 {
width: 300px;
height: 35px;
margin: 0;
padding: 0;
list-style: none inside none;
margin-left:-80px;}
#pbt-social-v1 li {
float: right;
padding: 0;
margin: 5px;}
#pbt-social-v1 li a {
width: 32px;
height: 32px;
background: url("http://2.bp.blogspot.com/-nSBTXVZoAQw/U3EaSFKYGvI/AAAAAAAAAsQ/g7TdvFlUeZk/s1600/New.jpg") 100% 0 no-repeat;
display: block;
transition-property: background-position;
transition-duration: .2s;
-o-transition-property: background-position;
-o-transition-duration: .2s;
-webkit-transition-property: background-position;
-webkit-transition-duration: .2s;
-moz-transition-property: background-position;
-moz-transition-duration: .2s;
}#pbt-social-v1 #pbt-pin {
background-position: -160px 0;}
#pbt-social-v1 #pbt-flip:hover {
background-position: -160px 100%;}
#pbt-social-v1 #pbt-facebook {
background-position: 0px 0;}
#pbt-social-v1 #pbt-facebook:hover {
background-position: 0px 100%;}#pbt-social-v1 #pbt-twitter {
background-position: -40px 0;}
#pbt-social-v1 #pbt-twitter:hover {
background-position: -40px 100%;}
#pbt-social-v1 #pbt-gplus {
background-position: -80px 0;}
#pbt-social-v1 #pbt-gplus:hover {
background-position: -80px 100%;}#pbt-social-v1 #pbt-rss {
background-position: -120px 0;}
#pbt-social-v1 #pbt-rss:hover {
background-position: -120px 100%;}
</style>
<div>
<ul id="pbt-social-v1">
<li><a id="pbt-rss" href="http://feeds.feedburner.com/TechKarate"></a></li>
<li><a id="pbt-flip" href="https://share.flipboard.com/u/login?done=%2Fbookmarklet%2Fpopout%3Fv%3D2%26title%3DTech%2520Karate%26url%3Dhttp%253A%252F%252Ftechkarate.blogspot.in%252F%26t%3D1399921698497%26utm_campaign%3Dwidgets%26utm_medium%3Dweb%26utm_source%3Dflipit%26utm_content%3Dtechkarate.blogspot.in&fromBookmarklet=1"></a<li>
<li><a id="pbt-gplus" href="https://plus.google.com/u/0/113481929967384000338 "></a></li>
<li><a id="pbt-twitter" href="http://twitter.com/soutikc"></a></li>
<li><a id="pbt-facebook" href="https://www.facebook.com/soutik.chakraborty"></a></li>
</ul>
<div></div></div>

Change the links colored in RED to your Facebook, Twitter, G+ and RSS feed links for people to add you.

Blogger:

To add the following widget to your blog hosted on blogger.com follow the steps
1. open Blogger > Layout
2. Click on a Edit Gadget > Select Custom HTML/CSS
3. Copy paste the code in the box available
4. Select Ok! 

And you are done. Enjoy!