Design and Create Blogger Widgets - The Secret!

Design blogger WidgetsDeveloping widgets, gadgets or plugins has become a productive hobby for all. Technology is changing its face rapidly with enhancements and better updates. Technologies once dreamt off are fast becoming realities. Till now you kept on following tutorials on this blog and several others. You did how you were instructed but now you must take a step further and start exploring your hidden skills. Blogger Template editing is an open source option for talented people like you. It takes only a month or two to learn things you never even dreamt off. In todays tutorial I will focus on widgets alone and on my upcoming series guide I will share every single step to design a Blogger Template.

PS: By widget I mean any separate independent object or item of a blog may that be static or dynamic.

How are Blogger Widgets Coded?

Widgets are created in two steps i.e

  1. Programming The Widget
  2. Designing The Widget


Programming The Widget:

Blogger widgets are programmed using XHTML, jQuery and JavaScript. These scripts make the widgets dynamic and describes their function. Most of the coding is done using XHTML which is an advance form of XML combination with HTML. The w3 rules for XHTML are very strict and not obeying to them results in error messages that you see while editing your templates. Honestly speaking it is the only area where even I lack skills as my focus is more towards web designing. Though you can still create widgets by skipping this programming side. Follow up...

Designing The Widget:

Now here comes my favorite part of the discussion. After a widget is programmed then comes styling the widget's font colors, borders, background colors etc. using CSS which stands for Cascading Style Sheet. CSS is responsible for giving proper look and feel to objects and HTML is responsible for positioning them. HTML is used to build the structure for the widget and CSS is used to dress up that structure. Take an example of the Text below,

                    Hello Brother!

HTML Code:

<p><strong><center> Hello world! </center></strong></p>

Now see it after styling it with CSS:

Hello Brother!



<center><span style="border-bottom: #8080ff 10px solid; border-left: #8080ff 10px solid; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; border-top: #8080ff 10px solid; border-right: #8080ff 10px solid; padding-top: 6px; -moz-border-radius: 10px; -webkit-border-radius: 10px"><font color="#8080ff"><strong>Hello Brother!</strong></font></span></center>


Don't be confused with the large chunk of code above, CSS is the most interesting and most easiest web language of all. Just the way you make sentences using alphabets we use bits and pieces to create a CSS class.

So How will you design a widget?

Whether you wish to become a designer or you wish to be able enough to customize your template and posts, learning both CSS and HTML is a must now for a happy blogging career. I learnt designing by tweaking Blogger templates and by reading tutorials on w3schools. There are three important practical tips that I can give:

  1. Go and Learn Photoshop. Find a nearby institute where Photoshop is taught. Take a course of no more than 1 month.
  2. Start reading at least 5 tutorials per day of HTML at w3schools
  3. After you learnt the basics of HTML then start the CSS tutorials and read at least 4 tutorials daily at w3schools

This entire hard work will take you no more than a month. After having learnt everything, you will start experimenting and practicing them the next month and on the third and fourth month you deserve to be called a Designer!

After you have developed your designing skills then you can also go and start learning JavaScript, php, jQuery etc.

I have shared whatever that is practical and affordable to all of you. If you think you can hire a teacher for HTML and CSS then it is even more good but trust me Photoshop is the only thing I learnt in an institute, the rest of all my skills are self thought thanks to helpful internet and w3schools in general. The best thing about w3schools is that you can use their HTML editor to create and preview the code at the same time just like MBT HTML Editor. This thing will build up solid skills within a short time of span.

Keeping everything aside, I will be always there for constant help and support. I wish you may find the topic and tips today helpful in order to better enjoy your lives online. Please never give up and utilize this golden life opportunity effectively. Peace and blessings friends.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Good post bro. I never knew about HTML and CSS 5 months ago.I too learnt html and css at wschools. Now, I can tweak my template, design elements and do so many things. everyone ought to learn html and css....

  2. i would recommend all to use youtube for photoshop there are a lot of basics and expert tutorials on photoshop u must see

  3. Great! Hey does that mean if I replace the words welome brother in that code to pr friednly, that I could put that as a button on my blog? barb diabeticsnacker(at)

  4. Of course I'd spell it correctly. :)

  5. @Amit

    Proud of you buddy. Keep it up!

    Not a bad idea dude. Video tutorials are always the best!


    Yes you can use the code by changing the text. :) But that wasn't the aim of this topic pal.

  6. Hi i want to know how i can add blog's color in the border? please help me.

  7. Thankx a LOt for the post.
    actually I knew about W3School but didnt tried it.
    I think I am going to give a try to it.
    I wanted to make a custom social plugin for my blog.
    I hope I will be able to do it now.
    Thank you
    -- Kartik (

  8. I think I should learn those too. I'm stuck in idea with blogging.

  9. I just want to ask. What is the need to learn Photoshop for programming in html.