Switching off the mobile template
Before you install the theme, you have to switch off the mobile template first. Otherwise people who visit your website with their smartphones, will see a distorted view of your website.
1) Go to http://www.blogger.com and choose Theme on the menu on your left side.
2) Below the mobile view, you will see a gear icon. Click on it.
3) Choose "No. Show desktop template on mobile devices" and press on Save.
How to install the themeClick on an image for a larger view.
1) Go to http://www.blogger.com and click on Theme on the left side, or click on Design at the top of your page on the right side.
2) Click on Customize.
3) Click on Templates, choose the template Simple and choose the fifth option of the Simple layout.
4) Click on Adjust widths and take over the values, shown on the image below:
5) Now click on the left side on Layout. Choose the third option for the Body layout and the second option for the Footer layout.
6) Click on Advanced and choose Add CSS. Copy the CSS codes and paste them in the white form by pressing on Ctrl-V on your keyboard. It is very important you use Ctrl-V instead of using the shortcut menu. For some odd reason the css codes cannot/won't be saved if you're doing it otherwise!!
7) Click on Apply to blog.
9) Important: if the buttons are overlapping the first widget on your homepage, for instance like this:
If they do, then go back to the form with the CSS codes, press on CTRL-f on your keyboard and type (or copy the sentence):
Change the value from padding-top into a higher value, for instance 1900px. Example:
If the overlap isn't gone, choose a higher value, until the overlap is completely gone. Then click on Apply to blog.
The reverse situation is also possible. If you don't have buttons installed on your page and there is a huge gap between the header image (the top image from the installed theme) and the blog area, search for the element
and reduce the value of padding-top into a lower value, until the gap isn't so big anymore. Then click on Apply to blog.
Aligning the images in the middle
In some cases it looks like the images aren't aligned in the middle in your blog post. To correct this click on the pencil that's at the bottom of your blog post, then click on the button HTML:
Click on your keyboard on CTRL-f and copy/paste this sentence:
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
When that particular sentence is marked/selected, click on that sentence with the right mouse button, so that it's selected again and choose Delete on the shortcut menu. Repeat this action until the sentence cannot be found anymore.