Convert Wordpress themes to Blogger templates supreethMonday, 23 December 2013 10 comments

Don't you think there are a lot of awesome treats in wordpress themes and not so much in blogger templates well i bet this post is going to convert awesome Wordpress themes to Blogger templates,

Steps to convert......

• Choose the theme and get inspired.....

choose the theme which you would like to convert to blogger template, make sure choose a good one and with light graphics to start with,think about it and get inspired of design,get rid of themes with lot of stuffed things.

• Understand the structure from inside.....

before converting a theme you must have idea of the basic structure of the template you are going to convert into,the actual structure of any themes are not exactly the same. But, by the basic structure, you can design a template, and change it into a different structure.Some parts of the theme structure are obvious from what you can see on most blogs: the headers, posts and footers sections. there are some sections that are not visible on the computer screen, but important HTML-wise to convert a WP theme into a practical and proper working template.

 A theme structure on the whole, contains blocks of pieces that looks like this

• Start with a plain generic template of blogger..

start with the normal template if you are not a proper coder of xml,first start modifying body,then everything

• Get the grip of the graphics......

download the graphics in the theme and keep it online somewhere(host it)

dont miss a thing in it!

• Tweaking the css.....

This is the crucial part of converting - setting how your template looks like after converting. By this time the widths of all the pieces inside the CSS code should have been set. you need to know about tweaking the CSS code that it's a  process - it's a process of refining that always repeats back and forth until its completely looking like the theme. start from the top, Assuming that you're starting from an existing template, at this point you don't have to worry much about customizing the body, outer-wrapper, and content-wrapper, except the width

•  Setting up the size.....

Setting up the template size is one of the first things you need to do when converting to blogger template.Setting the template to have a fluid size, which means the width changes with the browser or screen size.Setting a fixed template size:To set a template width, you actually have to set the width of a few large containers. 

Here is a sample code showing you all the container widths that are set to make sure the template width is properly set body

 #outer-wrapper {                                                                                                              margin: 0 auto; /* to shift to the screen center */min-width: 700px;max-width: 700px; }                                                                                                      #content-wrapper {min-width: 700px;max-width: 700px; }                                    #header-wrapper {min-width: 700px;max-width: 700px; }                                      #main-wrapper {min-width: 400px;max-width: 400px;                                         .sidebar {padding: 10px 10px 10px 10px;min-width: 180px;max-width: 180px;         #sidebar1 {.....}#sidebar2 {.....}                                                              #footer-wrapper {min-width: 700px;max-width: 700px; }

•  Making your template a three column...

change or add sidebars is simply tweaking the XML code directly from the edit html page . So the Body section at the end of the code won't be shown cluttered with detailed algorithms for widgets and post data. by tweaking the two column code by looking at this piece of code can do the job

<div id='content-wrapper'>
<div class='sidebar-wrapper'><b:section class='sidebar' id='sidebar1' preferred='yes'></b:section></div><div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'><b:widget id='xxx' locked='false' title='Blog Posts' type='Blog'/></b:section></div><div class='sidebar-wrapper'><b:section class='sidebar' id='sidebar2' preferred='yes'></b:section></div><!-- spacer for skins that want sidebar and main to be the same height--><div class='clear'> </div></div> <!-- end content-wrapper -->

 finally by choosing colors and quick checkup your wordpress theme is converted into blogger template! its your turn to make it, comment below about your views