Cool Minimal Floating Social Widget for Blogger and WordPress

Widget Screenshot

Hows Blogging going on Guys? Hope it is Good. I am back with a Blogger Widget for you , Don’t worry WordPress Folks, you can too add it. Not like other Widgets, adding more codes, which won’t be understandable for Newbies. This is too simple and cool Looking widget. Just add one HTML Code editing your Social Links and that’s it. This Widget is made small, so that users with medium monitor sizes can see the floating widget.

Here is the Screenshot :

Widget Screenshot

 

Have a Live Demo of the Widget :

Live Demo of the Widget

Now Code of the Widget and don’t forget to see the” Important Notes:” below the code.

<div style=’position: fixed; bottom: 6%; right: 0.5%;’/><img src=”http://i.imgur.com/sITEb.png” alt=”Web Logos” usemap=”#logos” /> <map name=”logos”><area shape=”rect” coords=”13,2,147,11″ href=”https://exceptnothing.com/2012/12/cool-floating-social-widget/” title=”Get the Widget Code” alt=”Get the Widget code” /> <area shape=”rect” coords=”1,17,147,184″ href=”http://www.twitter.com/manirudhkarthik” title=”Twitter” alt=”Twitter” /><area shape=”rect” coords=”1,197,147,304″ href=”http://www.facebook.com/exceptnothing” title=”Facebook” alt=”Facebook” /><area shape=”rect” coords=”2,317,146,417″ href=”https://plus.google.com/104213330701990048695/” title=”Google+” alt=”Google+” /></map></div>

Important Notes:

Change the lines in Red with your Social Links. For Example: http://www.facebook.com/exceptnothing >> http://www.facebook.com/yourfanpage .

Now adding the Widget to the Blogger.

Blogger has updated their Dashboard Interface. So, the steps are given according to the New Dashboard layout

Step 1 : Go to Blogger.com > Login

Step 2 : Go to Layout > Click “Add a Gadget”

Step 3 : Choose HTML/Javascript > And paste the above code in it and save the widget.

Step 4 : Voila ! Refresh your site, you can see the floating widget float.

To add this Widget to WordPress is even simpler. Go to Appearance > Widgets > Drag a Text Widget from the left and drop it in your theme sidebar. Now, add the same code there and save it.

Now this Widget floats on the Right side bottom of your site, If you prefer to make the Widget float it in the left side of the Blog. Just change the word “right” to “left” in the first line of the code. That’s it! See the Widget Code, you can understand everything.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *