How To Create Your Own Blogger Template


If you want to create your own Blogger Template or better understand the best way to customize an existing template this tutorial should help you.

 

In this tutorial we will modify the White "Simple" Blogger Template.



1. To follow the instructions in this tutorial step by step, please login to your Blogger Dashboard and click "Templates. Apply the White Simple template to your Blog;






2. Click on Layout and make sure you have the same widgets on your Blog as the ones in the image below;


You can later add other widgets and customize them to match your template.


3. Click Edit on the Navbar widget and select Off.


4. Click Save arrangement and preview your Blog.
This is what you should have so far:




5. Now let's start by removing the styling of the template so that we are left with a blank template.
To clear the style of the template click on Template then Edit HTML and expand the <b:skin> tag by clicking on the small arrow on the left.


Find this code:

/* Content
----------------------------------------------- */


and delete everything below it down to:

]]></b:skin>


So that you will be left with the Variable definitions followed by:

/* Content
----------------------------------------------- */



]]></b:skin>



6. We can now style the first element on the page, which is the AdSense horizontal banner. You can right click in your browser next to the horizontal banner and click "Inspect Element". (I am using Firefox while writing this tutorial so it would be best if you would too) You will notice that the AdSense banner is a div id="AdSense1".

Add the following CSS code to your template inside the empty Content section you cleared before:


#AdSense1{
margin: 0 !important;
text-align: center;
background:#ddd !important;
padding: 5px 0 1px 0;
border: 1px solid #bbb !important;
-webkit-border-radius: 5px;
border-radius: 5px; 
}


Your Blog should now look like this.




7. We ca style the Title at this point. Again, right click the title, Inspect Element and you will see the title has the class="title".

Add this CSS code:

body{
font-family:Arial, Helvetica, sans-serif;
}

.title{
text-align: center;
color: #333;
text-shadow: 3px 3px 5px #999;
filter: dropshadow(color=#999, offx=3, offy=3);
}


You have now changed the Font of your Blog and the style of the Title.




8. Let's turn our attention to the menu. Add the following CSS code:


.tabs .widget ul, .tabs .widget ul {
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #bbb;
text-align: center;
color: #333;
Background: #ddd;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.tabs .widget li, .tabs .widget li {
width: 19.8%;
border-right: 1px solid #999;
border-left: 1px solid #fff;
}

.tabs .widget li:first-child, .tabs .widget li:first-child {
border-left:0;
}

.tabs .widget li:last-child, .tabs .widget li:last-child {
border-right:0;
}

.PageList LI A {
width: 100%;
display: block;
padding: 10px 0;
color: #333;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
}

.PageList LI.selected A,.PageList LI A:hover {
font-weight: normal;
color: #fff;
text-shadow: 1px 1px 1px #000;
filter: dropshadow(color=#000, offx=1, offy=1);
}

.region-inner tabs-inner{
padding-left:0;
}

.tabs-inner {
padding:0;
}


Your menu should now look like this:





8. As a final step we will style the right column and the main content area.

.region-inner tabs-inner{
padding-left:0;
}

.tabs-inner {
padding:0;
}

.main-inner .column-center-inner, aside{
background:#eee !important;
padding: 20px 0 20px 0;
border: 1px solid #bbb !important;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow:hidden;
}




This is how your blog should now look like.

From here on you just need to style your fonts and make any other changes you might like.

You can download the complete template code here.

Please leave your questions or suggestions below.