Introducing my first blogger template OgbongeBlog blogger template. This is my first blogger template which I am offering free to everybody that wants it. I think it is currently sold for N10,000 on other sites but here you are learning how to create the exact template and even add some spicing to it like Jumbo share counter, Download and Demo buttons and lot more. See Template demo
Why Learn to Design Blogger Templates
As you are asking me that question, my reply is why not learn how to design your own Blogger template? it is the greatest way to gain uniqueness among others. When you purchase a template, others might also purchase the template but when you create it yourself, it becomes unique.
Also learninghow to modify your own template, gives you tons of opportunities to enjoy the same designing privilege many designers enjoy. You get familiar with blogging and coding terms which willmake you a professional. Sooner than later, you will become your own boss and design blogger template bothpremium and free.
What do I need to Become a Professional Blogger Template Designer
Not to worry I have you covered on it. There are various tools which I believe you can get easily to become a professional blogger template designer. Actually, it's my first post in this series. So open a new tab and get to know tools needed to design OgbongeBlog look alike blogger template.
How To Design Professional Blogger Template How To Design OgbongeBlog Blogger Template - Part 1 Blogger Auto Read More with Thumbnail - Ogbongeblog Style
Hey! before I forget, My name is John Okosun and I am a professional blogger template designer, soon I will be dropping tons of elegant template here. I believe you already have a template installed on your blog so I first thing first, back up your template. Like this!
Then watch out for the pop-up below.
After saving, clink on close and let's move to the Customize Tab as seen in the picture below. Here we will select our colour theme, the width of blog, design sidebar, change the font, change the background and do most of our work. So let's go!
Default Blogger Template
Now comparing all the default blogger template with OgbongeBlog, the closest in resemblance and structure is the Awesome Inc. default template, which tells us that the default template used by OgbongeBlog is Awesome Inc. Without wasting time, select the first white Awesome Inc as shown in the picture below.
Changing The Layout
Jide of Ogbonge Blog designed his template really neat and professional by not using double gadgets on the same side or both side. Meaning he uses a one sidebar blogger template. Now we are going to select single sidebar and 3 footer column as shown below.
If you want your blog to be larger, please select your own values but if you want exact same sidebar and body width with Ogbonge Blog then use the following values.
Sidebar Width: 350px wide
Entire Blog 950px wide.
Note: I got these tips using Google Chrome Inspect tool.
Now we have the basic framework of OgbongeBlog, out next task is to customize every part of the blog. Header, Date Header. Cross Column, Blog Body, Post Body, Sidebar, and Footer.
How To Customize Blogger Sidebar Title - OgbongeBlog Style.
Using Google Inspect tool, I have been able to get the exact code with no changes used by Jide on his Technology Blog. Now, let's add it to ours!.
Move to the Advanced tab. then locate Add CSS which is at the bottom. Once you click on it. You will see an empty box like mine in the picture below.
Code To Style Blogger Sidebar Title.
Paste the below code in the empty box and click on enter on your keyboard. Note: Do not let any part of this code get missing. Properly copy the code.
The codes are written plain to make you understand and style easily.
To change the line colour below title, simply replace #708090 with any hex colour of your choice.
To change the Text Colour of the title, simply replace the #B44444 with any colour of your choice.
To change the font type or family, simply replace asap with any font family of your choice. e.g Arial, Georgia, New times roman, calibri etc.
To change the size of the sidebar title just replace 17px with any value. Make it smaller with 16px, 15px, 14px etc and make it bigger with 18px, 19px 20px etc.
Choose where you want it to show. at the center, left or right. replace left with any of these terms: right, center or left.
How To Style Blogger Post Title - OgbongeBlog Style
Now we are through with the Sidebar title, now we are heading to the post title or the headings. How do we make our blog look exactly like that of OgbongeBlog? it's easy with Google Chrome Inspect tool. I have already copied the code. Just paste the code after the above code in the same box. See picture below.
Now once again, style each part of the code, the way you want it or to suit your taste. But if you want exactly OgbongeBlog title style, then don't change anything.
How To Automatically Resize Blogger Images To Fit Post Body
Haven't you noticed your images appearing extremely larger than your blog post area? I know you were worried. So worry no more. Let's resolve the image issue with just small coding. On the same box, paste the following code and your image should immediately fit to blog post area.
The above code, will also style your blogger image and make it appear professional by removing the border that is around it. Giving you that great image effect.
What do you think about my Tutorial So far?.
How To Style Blogger Footer
Jide uses a beautiful black footer on OgbongeBlog and with this great tool which I will write an eBook on, you can get the exact code. Just the same way you have been adding codes and using the enter button to create space, also do same and add this code.