Please wait...

Recent News & ArticleOur Blog

How to convert wordpress themes into blogger templates

hey folks! here we are back with another awesome tutorial of How to convert WordPress themes into blogger templates, yes it seems weird ass but we are here to help you out! this is a tutorial, for those who want to convert WordPress themes into blogger templates, because there are tones of WordPress themes which are indeed exciting and amazing but on the other side of the wall there are many bloggers running their blogs on blogger platform with plenty of good themes/templates but not that great as WordPress does! So lets jump in to find out how it’s actually done!

 

Prerequisites

Note that it’s not that easy to Convert WordPress themes to blogger templates as WordPress is built on PHP, and JavaScript, and it stores themes in different files like styles-sheet, and other files, but as in blogger templates they use XHTML and CSS and a little JavaScript to develop blogger templates, so it might not be that easy so these are the things you require to know:

  • Knowledge of Basic XHTML and css
  • A text editor(sublimetext preferably)
  • Patience
  • a browser

How To Convert WordPress Themes into Blogger Templates

Step 1: Main frame:Choose a base template, if you don’t know how to build a template from scratch, go to google and search for a template that suits and relevant to what you are trying to build, remember make sure this template be free to use with no copyright issues, and also check that the code is not too complicated,

Step 2:Understand the mainframe of the WordPress site

template-structure

 

try to analyse what are pre-requisites in your site, understand whether he has used 2 side bars or one,

 

 

 

 

 

 

step3: start! yup just start: start of by getting code from the console and implementing it into the main code,

first make sure you set the right widths and heights of wrapper and sidebar, for ex:

#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;

start off by coding the header, the main element in your template, first frame the basic html header and then style it with css, and JavaScript if you need, also add some of your personal touch, like few social icons maybe? 😉

if you need your template to be three column one just use the code in step 5!

step4: then come to styling posts, and sidebar, this part should be little easy if you have chosen a similar template as the base of the template then this part might be easy for you, or else make the required changes and you are good to go!

Step5: (only for those who need three column templates)

just take a deep breath get into end of body tag and by the code given below make the required changes to your code

<div id=”content-wrapper”>
<div class=”sidebar-wrapper”></div>
<div id=”main-wrapper”></div>
<div class=”sidebar-wrapper”></div>
<!– spacer for skins that want sidebar and main to be the same height–>
<div class=”clear”></div>
</div>
<!– end content-wrapper –>

Step5: Get to the footer!: start off, by optional tweaking and then head to css, and style it with a bit of JavaScript, and then you are ready to launch!

After all these steps you might get few errors like parsing error,etc make sure you solve them and get through it, i know it takes a lot of time, but you should be good to go after a several errors,

 

Wrapping it up

well i know this guide can be little tough for newbies out there, but it’s really easy if you just try things out, remember one thing: never stop trying! see ya folks, if you find something else to add to this post, drop down in comment section below, and share this post with your friends because sharing is caring!

 

(Visited 106 times, 1 visits today)

Leave a Reply

Your email address will not be published.