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.
Don't Miss: How To Add Go To Up And Down Buttons In Blogger
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 {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.
color: #464646;
font-family: 'Lora', serif;
font-size: 14px;
background: #ffffff;
}
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, Social Subscription 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.Go to Blogger > Design > Edit HTML
Search for ]]>
and just above it paste the following CSS code
/*------Header-----*/Now search for <body> and just below it paste this following coding:
#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;
}
<div id='header-wrapper'>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.
<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>
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 {After finding the proper css you can change its background, font-style etc. You can also add various types of border in it
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;
}
Recommended For Your : How To Add Social Floating Bar in Blogger
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 readersSidebar:-
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.
Need Help?
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.
About Author
Subscribe via email
Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.
How To Customize Blogger Template In Simple Steps
4/
5
Unknown
If you like our post or have any suggestion or got stuck at any step implementing the widget to your blog then leave a comment below i will be glad to help you out.