Design and Create Blogger Widgets - The Secret!

Developing 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!

 

CSS CODE:

<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.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 6/22/2011