ExceptNothing Logo

Cool Minimal Floating Social Widget for Blogger and WordPress

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=”http://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. Simple Make Changes. Learn from Trials. You can become a Pro.


The Article was written by Anirudh Karthik. A Young-Aged Blogger, and a student. Loves Exploring Smartphones, Tech Addict and a lil Gamer. Mail me at m.anirudh18@gmail.com

Share This Post

Related Articles

2 Responses to “Cool Minimal Floating Social Widget for Blogger and WordPress”

  1. Jim says:

    Hi,

    If there a way to add HTML code to an existig Blogger widget to make it float?

    Thanks!

Leave a Reply


− four = 5

© 2014 Except Nothing. All rights reserved. Site Admin · Entries RSS · Comments RSS