How to Create a Social Media Buttons Widget in Html

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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivSN9lVAgJfhU8Qa5QCIWVxes4wXd1lUvC-4Pq6W7uKnUauM4we55hlX3sZ5RL7Hwhy664UBIrpYd7MoTStaRJhmMMuH3-6lz0eYLuB-K2aQ9l0nO5VCOmDBCadLbo_a5xQGql46dEUcA/s1600/facebook.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Google" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQdacy64JoGVMHVUwts3huiAoqhxLFHoB5gFapMkMuHVsYrRgbrpYvC32gYe22mH1azkwofcNwxHS2j73bBpW1av0ticg27nO1x8IRWnozWk7DHXlYdXGMadi-insb9srCzEwTjSBC9w/s1600/google.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Yahoo!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqk6bC6-4xbo8gFkl_3GtTut9ZGzsXT2xXPzWtcN4UeYCzgqmLNhU22p7XtUYLRSwZuu1P5nz9icOl6hbwVqJzIGHxe3ob9eS23hIK4H9k5fYDTBcffVpupa1rFJrtR4nAmRilmBgHoOQ/s1600/yahoo.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Mixx" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAr3hOLeErwKMHY_ZN9k7Q0fgNRyMaGz2VCdTCQzGi73IaW2N-OxcH5Cbpyle6HBATE5WTeBrxgqlp2EhjbQxrHNBMaJjVhE13qbfmMZpjlOo_KgSZWtmb_KYgG-HY3hbyxzLJZAHeJL8/s1600/mixx.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in reddit" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpe_m2F-grLKYWSsHGVJQUIT5y0TN2hdiQOYjJ4jMIdHkjO0-2yXz3ozi06S0aQWXqhHJiobtDAWRupnRMWRvWQId_ej4bLrjHHqbJIBNYdvaK-q2EvbCY2UVOJEIgh20QaXWQqK0dtK4/s1600/reddit.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<img alt="Share this page in StumbleUpon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hiTGLqWqjM2tTxg_rObqC1k7f7zA8gdU-2Se1T68RCVGLXeemjz6-lSv1NBNALGuW_LBMyFIX6dyMzqpgLwwPfjGdJI9TJJJIXV3TZF97UgjtA3bR062C6aTVcvh5kg77ebiMNizGw0/s1600/stumbleupon.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in Delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNZlxSdLmCdVivxC9tIPtCO_BUu4fKQCAGrw36PFGlTE5WwLLXTgzVKD19TZBrd3xxaHZ1wKdBPRxvVdVNGTQvy2a92V22cFxwgOQlEtdP_rTdc_wMtwFrd-LcecXe-khTWndo2uqCoY/s1600/delicious.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYztwib3yQmlr7Dx4P8D6uE34sbQ8VQUCIMW7KLaVTzKlJ8vgrggilXvwhrapjaQg5OWzd-q8Bu2YbzNbDSipTkAODLuNYC2Ob3eEqIimsy8kqM3OTZTNxG2wpb48WGbjogP4NJs7O22E/s1600/twitter.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Share this page in myspace" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBRQ5QXqWW_9zx-0kOi3sWx8IquV2G2f82FI3At_6NW8zCkLumJ6eleWm5IudWjrc8M4Z3a3hWjgvS7eEQ-eeiOhyoWG4H07m-hTO2oVo3bN_VG3WSK7ONMV4y0eusWlRGqSNqud00_IM/s1600/myspace.png" />
</a>
</td>
<td>
<a href="#">
<img alt="Social Sharing Friends" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGZBEyQsxdxiW2_vVpqTg78sz2OdKeKDcdeCV5wqtja492NFTnRm-3xGEVXu12eyX3BjtD961HOOi2f9Vbl8AXPVTB5Ihdb-edaMJKipNCIwyu8HxOUed1bX-woTq8Ym3TdOkl4ncq08/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

 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.

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.