Monday, March 19, 2012

TechCrunch Social Sharing Widget

TechCrunch is a very popular Technology Blog, having around 300 Alexa Rank. I visited on that blog and see the social sharing widget and think to design the same for you. After my hard work, I have successful designed this widget for both blogger as well as WordPress blog.  TechCrunch social sharing widget is pretty cool and having all the popular social networking site links and logos. This widget having background color White means if your sidebar background color is white then its look cool. Its a very simple and unique design so you can attract more followers for your blog. This widget works for blogger as well as WordPress blogIf you want to this it on your blog, follow these steps.





Other Sharing Widgets


Steps to add TechCrunch Social Sharing Widget.

  1. Go to blogger > Design > Page Element 
  2. Add a Gadget.
  3. paste the following code in Gadget 
<style type="text/css">
/* PBT- TechCrunch Widget Style Sheet */
.pbt-techcrunch{margin-bottom:10px;position:relative;width:300px; background-color:#fff  ;margin-left: 10px;}
#pbt-social-widget-facebook{width:300px;overflow:hidden;margin-bottom:10px;margin-top:10px;border:1px solid gainsboro;}
#pbt-social-widget-facebook iframe{padding:15px 15px 0 15px;}#pbt-social-widget-facebook iframe{height:28px;width:300px;}
#pbt-social-widget-twitter{width:300px;overflow:hidden;margin-bottom:10px;border:1px solid gainsboro;}
#pbt-social-widget-twitter iframe{padding:19px 15px 19px 15px;}
#pbt-social-widget-google{width:300px;margin-bottom:10px;}#pbt-social-widget-chiclets{width:270px;overflow:hidden;text-align:center;padding:19px 15px 19px 15px;border:1px solid gainsboro;}#pbt-social-widget-chiclets div{width:32px;height:32px;display:inline-block;margin-right:10px;}
#pbt-social-widget-chiclets a{width:32px;height:32px;display:block;background:url(http://3.bp.blogspot.com/-AY21jGZVnyA/T2a3Ssxqy9I/AAAAAAAABIE/iWzfkZGmGSU/s1600/social_widget_sprite.png) no-repeat;}#pbt-social-widget-chiclets-linkedin a{background-position:0 0;}
#pbt-social-widget-chiclets-stumbleupon a{background-position:0 -33px;}#pbt-social-widget-chiclets-youtube a{background-position:0 -65px;}#pbt-social-widget-chiclets-feedburner a{background-position:0 -97px;}#pbt-social-widget-chiclets-rss a{background-position:0 -129px;}
</style>       
<div class="pbt-techcrunch" >
    <div class="pbt-configuration">
        <div id="pbt-social-widget-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fprobloggingtools&amp;send=false&amp;layout=standard&amp;width=270&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:80px;" allowtransparency="true"></iframe></div>
<div id="pbt-social-widget-twitter">
<a href="https://twitter.com/ProBloggingTool" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @ProBloggingTool</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div id="pbt-social-widget-google">
<g:plus href="https://plus.google.com/104498101167197212267" size="smallbadge"></g:plus></div>
<div id="pbt-social-widget-chiclets">
<div id="pbt-social-widget-chiclets-linkedin"><a href="http://www.linkedin.com/today/probloggingtools/"></a></div>
<div id="pbt-social-widget-chiclets-stumbleupon"><a href="http://www.stumbleupon.com/channel/probloggintools/"></a></div>
<div id="pbt-social-widget-chiclets-youtube"><a href="http://www.youtube.com/probloggingtools"></a></div>
<div id="pbt-social-widget-chiclets-feedburner"><a href="http://feedburner.google.com/fb/a/mailverify?uri=Probloggingtools&loc=en_US"></a></div>
<div id="pbt-social-widget-chiclets-rss"><a href="http://feeds.feedburner.com/ProBloggingTools"></a></div>
</div></div></div>
    4.  Edit Facebook Like Page name .
    5. Edit Google Plus Page id.
    6. Edit Linkdin, stumbleupon, Youtube, Feedburner, and Email Subscription links.
If your page background is not White then you can edit background color  background-color:#fff.

Credits

This social Sharing Widget is developed by TechCrunch and Further Customized by PBT. IF you want to share with your readers, you have to  give credits to PBT by attaching a link back to this blog.

Need help ?

If you having any problem for adding this widget in your blog. Feel Free to ask me, by commenting here, I tried to solve your issues as soon as possible.

2 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...