Customize Your Blogger Template in Simple Steps

customize blogger template
Hello readers!! This article is all about “How to Customize a Blogger template”. A well customized template can increase your blog’s reputation a lot among your blog readers. Everybody wants to use a unique and stylish template, So that it can catch an eye of the visitor and to convert the visitor into a regular reader. A template is the most important thing for a blog, it express your blog is capable to attract visitors or not. Your template must look enough attractive and easy to navigate so that it can connect with your blogs reader.

Customizing the template:-

There are lots of templates available into the internet and most of the bloggers apply those templates into their blogs. But as in our sense those template doesn't have that unique tag in their style or in customization because the templates were publicly released.  As a template developer its not a big deal to customize or to make a new theme or template from scratch but what about the new and beginner blogger’s? Is that a easy job for them? Can they customize their own template? Yes they can but not so properly. Cause template Customization is hard job and it needs lot of patients, but you can customize some basic things in your template and this article is all about it.
Below we have mentioned some Important terms and tags, after customizing them you can make your template unique and stylish. So here we go.

Body:-

Body is the main part of your blog’s template. It holds the whole structure of your blog’s template. It starts  With  and ends with    in between it there are various types coding of different widgets. You can customize the body by adding some cool and stylish backgrounds in it also you can add some default font style and font color.Below we have given an example of CSS which is responsible for your blogs body style.

body {
color: #464646;
font-family: 'Lora', serif;
font-size: 14px;
background: #ffffff;
}

Now in the above css you can see there is background,color,Font-family and font-size now #ffffff this is responsible for the background color you can put any background color by changing this value, you can try color code generator for more color codes. Font-family, color and Font-size  is responsible for the the default font customization.

Note:  You can add image instead of color in your body background, to add an image just add this in the background value.

url(Your-Image-Link);

Header:-

Header is one of the most important part of any blog or blogger template. Normally Header is used to place blog’s logo or title but you can also add some extra widgets like navigation, ad spot, SocialSubscription widgets, search widget and many more. But if you have only one space to add widget into header than you have to customize your header, so that it can be divided into two parts. You need to add some css and HTML in your template.
header divide

  • Go to Blogger > Design > Edit HTML
  • Search for ]]>
  • and just above it paste the following  CSS code.

/*------Header-----*/
#header-wrapper{
width: 960px;
color: #000;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
color: #BF0100;
font-size: 36px;
font-family: 'Ultra', serif, Arial;
font-weight: bold;
margin: 0;
padding: 0px 0 5px 0;
text-decoration: none;
text-shadow: 6px 6px 4px #ccc;
line-height:1.2em;
}
.headerleft h3 {
font-family: arial, tahoma,  Sans-Serif;
font-weight: normal;
margin: 0;
padding: 0;
}
.headerleft .description {
color: #3B3B3B;
font:bold 12px Helvetica, arial,  sans-serif;
margin: 0px;
padding: 0 0 20px 0;
text-shadow: 4px 4px 6px #ccc;
}
.headerleft {
width: 450px;
float: left;
margin: 0;
padding: 0;
height:80px;
}
.headerright {
width: 468px;
height:80px;
float: right;
margin: 0px;
padding:1px 0 0 0;

}

  • Now search <body> for and just below it paste this following coding:

<div id='header-wrapper'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The SB Lab (Header)' type='Header'/>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div></div>

Now you have successfully divided your blogs header into two parts, so now let’s customize it. At first we will take a look on its background. Just change the color code into that css or you can also add any image as a background.. You can change the default Font style of your header title by changing its Font-family value into the header css. You can also change its color size, you can add shadow effect into the texts.Note:- The above coding is taken from MBT.

Post area:-

Now this is something very important for your blog or blog’s template because it carries your content section of your blog. So in simple words you can customize your post are in following ways.

  • Customizing the heading and sub-heading tags.

Basically these tags are signified by h2 and h3 attributes. You can change their style by simply customizing the cs/div>

.post h2 {
font:bold 210% Arial, sans-serif;
line-height:1.2em;
margin: 0 0 7px;
padding: 3px 0px;
}
.post h3 {
color: #4E555A;
border-top: 1px dotted #4E555A;
border-bottom: 1px dotted #4E555A;
}

After finding the proper css you can change its background, font-style etc. You can also add various types of border in it

  • Adding useful widgets:-

Adding widgets in post area are always very helpful and important for your blog. You can add social sharing widget below post, post author box and related post widget to make your blog beautiful and also these widgets will help your readers.

Sidebar:-

There is nothing much to customize in the side bar you can customize the sidebar widget title by editing its sidebar h2 value in its css. You can add border, background, font-style etc.

From Editors Desk:-

We hope that you have enjoyed the above session of discussion about  "Customizing your blog" and "Making Blogger Template Unique and Beautiful". In our Next article we will share some more cool customization of sidebar,so stay in touch. If you are confused about Customize your Blogger Template then kindly drop a comment below. We will reply you as soon as possible. Peace and Happy Blogging.

Comments

  1. Abhishek Raj

    Nice going deep, it is good to teach css. Mainly newbie don't know how to customize. And thanks for the idea. I will also share it in brief.

    Regards
    The Pro Blogging

  2. Tharun Raj

    this is awesome brother. Really makes us understanding how blogger layout can be cracked. Thanks for this post. But what about demo url redirection? I have already mentioned in one of your blogger template. Please make a tutorial on that issue.
    Regards
    http://www.bloggerbulk.com

  3. Aditya Singh

    These are really a great tips to do theme customization. You are becoming professional in theme making bro. Keep it Up...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Looking for More Awesomeness?