Tuesday, 21 May 2013

Tagged under: , ,

How to Create a Social Media Buttons Widget in Html

social sharing buttons widget
Social media becomes the backbone of every blog & website. It has played a vital role in blogging career while its second name is placed as booster visitors. because to deal with these popular social services you will probably get a massive traffics to your home blog & website. You might have observed since many times thats every blog & websites must keep a social buttons thats why to grow its popularity with online world. Nowadays different bloggers have customize this widget in different style some of them have placed it in side bar, most of them put it in header while other have drop it into the footer areas. There are millions of social widget exists for blogger & wordpress but in today post will study how to create this widget easily by using html language.
How to make a social media widget in HTML
Part 2: Using CSS+Html in Process.

  Is a simple gadget often design by Html & Css ?

The above title indicate the this widget has been totally created in Html (hyper text markup language). People are using Css+Html whenever they create a special gadgets for blogger blog. These two language have mutual relationship. They are playing specific actions during in making a gadgets. lets clear it. Html are used for structure & build the gadget style. It create the map of a gadget while Css (cascading style sheet) are used to design this gadget with millions of colors stylized and make it perfects looks. It helps in decorating the page objects & layout.

Is it possible to create a gadget by using only Html ?

Yes absolutely you can create thousands of gadgets by using only Html. In the above paragraph you have learnt There are numerous widgets developed by Web designers with only using the Html language. But since from the couple of years now every webmaster & probloggers want to create a gadgets with Css3 & html. So our today recipe will goes how to make a simple social sharing buttons widget for blogger blog.

Best 3 website To Find Free Quality Images

Learn How to make a social sharing buttons widget in Html

There are thousands of ways by which you can create this widgets even if you are not an expert web designer & webmaster. Some of the Basics html Terminologies you will need to study about various tags and codes using in html. You must have strongly focused on html becuase it is the fisrt step towards web designing. Now come to the points. In the below few steps will analyze your thoughts how to create this gadgets by using simple html technique.

Follow the simple steps given below

  • Go to blogger dashboard:
  • Add Html/javascript gadget:
  • Past the below given code:

<div style="margin: 20px 0px 10px 50px">
<div class="fleft" style="margin: 10px 0px 0px 0px;text-align:center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<a href="#">
<img alt="Share this page in facebook" src="http://2.bp.blogspot.com/-Tllm0P8k5cg/UZu33bMSKmI/AAAAAAAABQQ/jqpz8fwrF4A/s1600/facebook.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Google" src="http://4.bp.blogspot.com/-S4OTsdWjlcg/UZu34YIQLiI/AAAAAAAABQg/eHUfUqDOrZw/s1600/google.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Yahoo!" src="http://3.bp.blogspot.com/-iVpZ8P_KHks/UZu36OMUZgI/AAAAAAAABRQ/S8JpC85D92E/s1600/yahoo.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Mixx" src="http://1.bp.blogspot.com/-rFSpYGBP8UI/UZu346-k1yI/AAAAAAAABQ4/M3JUHAhM_5Y/s1600/mixx.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in reddit" src="http://2.bp.blogspot.com/-N9EHhFx4Bmo/UZu348FIsnI/AAAAAAAABQ0/zrjGcw5Ssyw/s1600/reddit.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<img alt="Share this page in StumbleUpon" src="http://2.bp.blogspot.com/-JGawLSFsQUI/UZu35vjwj8I/AAAAAAAABRI/lqb0j0BubDQ/s1600/stumbleupon.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Delicious" src="http://4.bp.blogspot.com/-PPxOSEfNlKg/UZu33TXD-eI/AAAAAAAABQY/IxcFA6LfeDI/s1600/delicious.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in twitter" src="http://2.bp.blogspot.com/-hamHidVbKkw/UZu356LiVHI/AAAAAAAABRE/eLHlnz0lIRY/s1600/twitter.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in myspace" src="http://2.bp.blogspot.com/-kJSoJIVEXXw/UZu34hDSQsI/AAAAAAAABQw/yF1d8v4JMiQ/s1600/myspace.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Social Sharing Friends" src="http://3.bp.blogspot.com/-8GfWMa1eQ0U/UZu33uhOBmI/AAAAAAAABQU/-vaZ1UAg9ao/s1600/friendfeed.png" />
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

All Possible Customization Inside Codes

  • If you want to increase the gadget area then increase the first green values in the above code
  • If you want to move the gadget left, right,top and bottom then change the red value in above code
  • Also insert the url of specif social sharing services of your own blog instead of 
  • You can also insert your own choice social sharing icons 32x32 in width & height and replacing it by the purple color codes
  • You almost done

social sharing buttons widget
 Demo

Why to use html Gadget ?

Due to time shortage i will explain a little bit. Using css or css3 social widget in blog or website some time it may not work in old all versions of firefox, mozilla, chrome, and internet explore. Our blog is visited from throughout the world. Different people using different browsers on theirs pc. while by using such css3 widget it will not visible on the all these old version browers they will not support and in the same way we lost millions of visitors by joining the social communities. There we are strongly recommended always try to keep simple and lighter widget in blog. It will also increase loading speed of your blog website.

Find Easily Code In Blogger New HTml Editor

Final Words

I hope guys you will like this amazing simple gadget only prepared by html. There is no huge collections of css coding inside this gadget.Inshallah In our Coming Tutorial We will study how to create a simple gadget by using the both Css&Html. It is not a big task to create a such widget. Always try to create your own choice widget for your blog & website. Try try again & be practice by making a new things. Do not use such a heavier gadget because it will compel your blog on loading time. Guys meet you soon. 



Check Your Website Worth

26 comments:

  1. waooooo great post i really waiting of your post like that great work.....
    way to blogging

    ReplyDelete
    Replies
    1. Thanks Shakeel Brother for liking our efforts. Bro we will soon publish its seconds parts. Keep visiting us & hears for updates.

      Delete
  2. Hi Khan,

    Thanks for sharing the awesome idea on creating social media buttons sing html - a good one

    Though I wonder, Is It Really Necessary to learn HTML/CSS as a blogger trick?

    ReplyDelete
    Replies
    1. Thanks Peter Mutiso I am really very happy to see you here. Thanks for your precious time & landed on PBT. Thanks Once again. Bro see you soon.

      Delete
  3. very nice trick bro..thanks for sharing..

    ReplyDelete
    Replies
    1. Yes bro its a simple tricks for newbies. They can create different style of widgets in this ways. Thanks for appreciations.

      Delete
  4. It's too simple Hafeez. However a newbie can learn the basics. You have simply used table and images with little CSS. I would like to see something more advanced from you.

    ReplyDelete
    Replies
    1. Happy to see you here with commenting. Yes Ravi Brother you are absolutely right. we have used a very simple tricks. Bro these days i am busy in Exam our papers are goings on head thats why we are publishing a little & basics posts about any things. You may have heard that "Time is a great physician"

      After passing our exams we will rock with blogging with new tips & tricks. just wait for a short durations. Thanks & see you soon.

      Delete
  5. You have done really nice job Hafeez. I just subscribed to your blog.

    Read - 20+ Awesome Blogging Tips For Newbie Bloggers

    ReplyDelete
    Replies
    1. Oh Bro well done. Thanks for making strings with us. ITs a great pleasure for me. Thanks for your nice words. Meet you soon in our coming tutorial.

      Delete
  6. Nice Post Bro Good Job! And What about Your Exams

    ReplyDelete
    Replies
    1. Abdul Bro Our exam is going now. its about 3 papers gone out. We will soon come back with awesome posts. just wait bro.

      Delete
  7. Very nice post bro..
    Keep doing this type of hard work and you wil touch the sky..


    Highly Compressed Pc Games World - semaGGames

    ReplyDelete
    Replies
    1. Wow bro thanks for Encouragements. I like your dancing words. keep visiting us. thanks.

      Delete
  8. Replies
    1. Thanks for well appreciations. keep in touch with PBT.

      Delete
  9. Replies
    1. Oh Asad Bro you really like our jobs. Thanks for Commenting here with our editorial team. we will be always inviting you here. Thanks alot to see you.

      Delete
  10. very informative article really liked your blog and helped me a lot in building mine

    http://jeemistaan.blogspot.com

    Thankyou :-)

    ReplyDelete
    Replies
    1. Thanks Jamal Hussain. I think this is your first visit on PBT. you are landed here for the first time with our team. I hope you will like our efforts. Be around with us. Thanks and see you soon.

      Delete
  11. Hafeez Bro Awesome tutorial, about your exams which time is closed down about me and just two papers here. i will finish the paper again appear ther bloggers! papers will election this problem was created. you will complete the exams start newbiews introduced new features in bloggers and etc.

    ReplyDelete
    Replies
    1. Yes Awais brother. we have a dreadful exams going these days. we are really in trouble. due to some problem. Study timing, load shading problem in pakistan. we are unable to update the blog continuously. Bro we will soon come back, now its only one paper remaining. Mathematics. After that we will free. Thanks for encouraging us.

      Delete
  12. Cheers, I am trying to add the icons to my site so thanks for the advice.

    ReplyDelete
  13. thank you for the posting ... please visit my blog : http://pandeverything.wordpress.com/

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism