March 8, 2012
Customizing the Blogger Simple Template, Part 1
I have posted several tutorials on how to make your own blog background, post divider and such and I hope they have been useful to you. However, all of these tutorials have required that you use the Minima template. I like this template the most but this template does not allow you to take full advantage of the Template Designer. Also, many of you are terrified at the thought of editing the HTML on your own.
So, I would like to give you some instructions on how to add your own custom designs to the Blogger Simple template. If you use this template, you can adjust the widths of the columns, the arrangement of the columns and much more without having to edit the HTML at all! In fact, when you add all of your design elements, you won't ever have to click "Edit HTML"!
This first post will be all about getting your blog set-up with the Simple template of your choice. (There are several Simple templates. I'll help you choose!) My next post will show you how to add your own Custom Design Elements.
Ready to get started? Here we go!
Please agree to my terms of use and backup your current template and sidebar gadgets before making any changes to your blog. Here are instructions on how to do that:
I will explain in my next post how to add a custom background, a custom post divider, and a post icon as well as a few little adjustments. But first, you need to get the right Simple template.
Before you add your custom designs, be sure to change your template to the Blogger Simple template by doing the following:
1. From your Blogger Dashboard, click the "Design" tab and then click "Template Designer".
2. You should see the following: (Click on any image to enlarge it.)
If you want to add your own custom background, the first 2 Simple templates as well as the second to last one will not work. The first two have a color that fades from the top to the bottom that you can't remove. When you add your background, the color overlay will still be there. The second to last template only allows you to add a background to the top section to the left and right of the header. So, unless that is what you want, don't use this one.
When you choose which template you want, remember that the backgrounds, colors, fonts, etc. can all be adjusted. I will show you how to adjust each of these 4 templates to get them ready for your customizations.
Gray Simple Template
To remove the gray background on this template, first click on this template and then click "Advanced" on the left side of your screen. From the next list of options, choose "Backgrounds". You will then see three different backgrounds that you can adjust.
The "Outer Background" is where you will be adding your custom background, so you will need to remove the one that is there. To do this, click the down arrow under "Outer Background" and choose "Transparent" as shown below:
You may still see a color on the background, but it will be gone once you add your custom background.
If you want to change any other colors, click on any of the other options. If you ever need to revert back to the original template, just go back to the main Template Designer screen and choose your template again.
Red Simple Template
This template has a patterned background that needs to be removed (unless you want it). After selecting this template, click "Background" from the list furthest to the left. (The one that says, "Template", "Background", "Adjust Widths", etc.)
Click "Remove Image" and "Ok" from the pop-up screen and the pattern will be gone.
However, we still need to remove the color. To do this, click on "Advanced", then "Backgrounds" and then click the down arrow under "Outer Backgrounds". Choose "Transparent" as you see below:
Again, the background looks like it still has a color, but it will be gone once you add your custom background.
If you want to change any other colors, click on any of the other options. If you ever need to revert back to the original template, just go back to the main Template Designer screen and choose your template again.
Books Simple Template
For the Simple template that has the books in the background, follow the same instructions that I posted above for the Red Simple Template.
White Simple Template
For the very last Simple template, you may not think you need to do anything. However, the background has a white bar across the top of the background. To remove this, follow the same instructions that I posted above for the Gray Simple Template.
Once you are done, click "Apply to Blog" (the orange button in the top right corner). Once it says your template has been applied, you can View Your Blog.
Your blog is now ready for customizations.
Click here to read Part 2 of Customizing the Simple Template: Creating a Custom Background.
So, I would like to give you some instructions on how to add your own custom designs to the Blogger Simple template. If you use this template, you can adjust the widths of the columns, the arrangement of the columns and much more without having to edit the HTML at all! In fact, when you add all of your design elements, you won't ever have to click "Edit HTML"!
This first post will be all about getting your blog set-up with the Simple template of your choice. (There are several Simple templates. I'll help you choose!) My next post will show you how to add your own Custom Design Elements.
Ready to get started? Here we go!
Please agree to my terms of use and backup your current template and sidebar gadgets before making any changes to your blog. Here are instructions on how to do that:
I will explain in my next post how to add a custom background, a custom post divider, and a post icon as well as a few little adjustments. But first, you need to get the right Simple template.
Before you add your custom designs, be sure to change your template to the Blogger Simple template by doing the following:
1. From your Blogger Dashboard, click the "Design" tab and then click "Template Designer".
2. You should see the following: (Click on any image to enlarge it.)
If you want to add your own custom background, the first 2 Simple templates as well as the second to last one will not work. The first two have a color that fades from the top to the bottom that you can't remove. When you add your background, the color overlay will still be there. The second to last template only allows you to add a background to the top section to the left and right of the header. So, unless that is what you want, don't use this one.
When you choose which template you want, remember that the backgrounds, colors, fonts, etc. can all be adjusted. I will show you how to adjust each of these 4 templates to get them ready for your customizations.
Gray Simple Template
To remove the gray background on this template, first click on this template and then click "Advanced" on the left side of your screen. From the next list of options, choose "Backgrounds". You will then see three different backgrounds that you can adjust.
The "Outer Background" is where you will be adding your custom background, so you will need to remove the one that is there. To do this, click the down arrow under "Outer Background" and choose "Transparent" as shown below:
You may still see a color on the background, but it will be gone once you add your custom background.
If you want to change any other colors, click on any of the other options. If you ever need to revert back to the original template, just go back to the main Template Designer screen and choose your template again.
Red Simple Template
This template has a patterned background that needs to be removed (unless you want it). After selecting this template, click "Background" from the list furthest to the left. (The one that says, "Template", "Background", "Adjust Widths", etc.)
Click "Remove Image" and "Ok" from the pop-up screen and the pattern will be gone.
However, we still need to remove the color. To do this, click on "Advanced", then "Backgrounds" and then click the down arrow under "Outer Backgrounds". Choose "Transparent" as you see below:
Again, the background looks like it still has a color, but it will be gone once you add your custom background.
If you want to change any other colors, click on any of the other options. If you ever need to revert back to the original template, just go back to the main Template Designer screen and choose your template again.
Books Simple Template
For the Simple template that has the books in the background, follow the same instructions that I posted above for the Red Simple Template.
White Simple Template
For the very last Simple template, you may not think you need to do anything. However, the background has a white bar across the top of the background. To remove this, follow the same instructions that I posted above for the Gray Simple Template.
Once you are done, click "Apply to Blog" (the orange button in the top right corner). Once it says your template has been applied, you can View Your Blog.
Your blog is now ready for customizations.
Click here to read Part 2 of Customizing the Simple Template: Creating a Custom Background.
Labels:
Simple Template,
Tutorials
4 comments:
Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.
Subscribe to:
Post Comments (Atom)
HELP! I want the Post a Comment box AND the comments to show on the bottom of my page.....and I just can't find a way to make it happen.
ReplyDeleteI'm using Simple Template.
Everything I find about doing this talks about "Blogger in Draft" and there is not BID any longer. Now what?
Thanks.
Go to Settings, then "Posts and Comments" and then where it says "Comment Location" choose "Embedded". Does this help?
DeleteOn the Simple template, how do I create a border around my blog title and set my tabs like this one: http://aphrochic.blogspot.com/? HELP!!!
ReplyDeleteThis comment has been removed by the author.
ReplyDelete