Creating a blogger template from scratch
Part 3: Customizing the basic design elements of your blogger template.
In Part 2 we covered how to create a basic working blogger template from scratch,(click here) to go to part 2. After you have created your first blogger template you are probably wondering how you can customize it. This article will guide you to customizing the basic layout and design of your blogger template.
If you have successfully completed part 2 your template should look similar to the one below.
It is pretty simple and not much appealing. Now lets start by enhancing the looks of your template.
Adding a modify-able body margin to your template
Open up your blogger template editor and search for the following code
]]>
now just before it add the following code
........................................................................................
body {
padding: 0px;
margin: 0px;
}
...........................................................................................
You have successfully added a margin to your template
Adding a custom header design
Find the following code
]]>
Now paste the following code before the above code
...............................................................................................
header h1 {
margin: 0px;
}
header {
padding: 10px 0px;
border-bottom: 2px solid #262424;
font-family: sans-serif;
background: #F2B25C;
color: white;
text-shadow: 2px 2px 2px black;
}
......................................................................
You can now save your template to view the changes.
It should look something like this.
Makes a big difference doesn't it.
Editing the post/ article area of your blog.
Once again find the following code
]]>
Now paste the following code before the above code
.................................................................................................
article {
width: 64%;
float: left;
font-family: sans-serif;
border-right: 1px solid #F4EEEE;
}
....................................................................................................
Save the changes to your template to see it implemented
It should look similar to the below picture
Adding widgets to the sidebar.
Once again find the following code
]]>
Now paste the following code before the above code
.....................................................................................
aside {
float: left;
width: 35%;
}
aside h2 {
background: #262424;
font-family: sans-serif;
border-bottom: 2px solid #F2B25C;
color: white;
padding: 2px;
}
...................................................................................
Now go to layout on your blogger dashboard and add the desired widgets to your sidebar.
I chose to add the popular post widget.
Click save arrangement when done.
Your template should now look similar to the image shown below.
Now the last thing to edit is your footer.
Editing your blogger footer
Once again find the following code
]]>
Now paste the following code before the above code
....................................................................................................
footer {
float: left;
width: 100%;
background: #262424;
border-top: 1px solid black;
color: #F2B25C;
}
....................................................................................................
Your footer should now be uncased in a black frame.
This brings us to the end of Part 3 in this series of how to create a Blogger Template from scratch.
Hope you all enjoyed this series. If anyone wish to have a part 4 published I will but only on request.
So pop an comment of what you want to see in part 4.
