How To Design OgbongeBlog Blogger Template

OgbongeBlog Blogger Template
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 learning how 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 will make you a professional. Sooner than later, you will become your own boss and design blogger template both premium 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.


    Series

    How To Design Professional Blogger Template
    How To Design OgbongeBlog Blogger Template – Part 1
    Blogger Auto Read More with Thumbnail – Ogbongeblog Style

    Getting Started

    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!
    template backup

    Then watch out for the pop-up below.

    Back Up Blogger template

    Customize Tab

    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!

    Blogger Customize tab

    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.
    Awesome Inc Blogger template

    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.
    sidebar and footer layout

    Adjust Width

    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. 
    Adjust Width

    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.
    add css to blogger

    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.

    Blogger Sidebar with Uppercase Styling

    .sidebar .widget h2 {
        border-bottom: 2px solid #708090;
        color: #B44444;
        display: inline-block;
        font-family: asap;
        font-size: 17px;
        font-weight: 700;
        padding: 4px 4px 5px 2px;
        text-align: left;
        text-transform: uppercase;
    }

    Blogger Sidebar Title With Capitative Styling

    .sidebar .widget h2 {
        border-bottom: 2px solid #708090;
        color: #B44444;
        display: inline-block;
        font-family: asap;
        font-size: 17px;
        font-weight: 700;
        padding: 4px 4px 5px 2px;
        text-align: left;
        text-transform: capitative;
    }

    Blogger Sidebar Title With Lowercase Styling

    .sidebar .widget h2 {
        border-bottom: 2px solid #708090;
        color: #B44444;
        display: inline-block;
        font-family: asap;
        font-size: 17px;
        font-weight: 700;
        padding: 4px 4px 5px 2px;
        text-align: left;
        text-transform: lowercase;
    }

    Add More Styling To The Sidebar Title

    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.
    Blogger post title

    Code To Style Blogger Post Title

    .post-title {
        border-bottom: 1px solid #dcdcdc;
        color: #555555;
        font-family: lora;
        font-size: 37px;
        font-weight: bold;
        letter-spacing: 0.2px;
        line-height: 48px;
        margin-bottom: 15px;
        padding-bottom: 4px;
        word-spacing: 0.8px;
    }

    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.

    .post-body img {
    max-width: 100%;
    max-height: auto;
    box-shadow: none;
    border: none;
    padding: 0px;
    }

    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.

    .footer-fauxborder-left {
        border-top: 1px solid #eeeeee;
        background: #222222 none repeat scroll 0 0;
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        margin: 0 -20px;
    }

    In case you don’t want a black background, simply change the #222222 with your favorite color. some colours and hex below
    1. White – #ffffff
    2. Pure black – #000000
    3. Faint black: #444444
    4. Reddish – #B44444
    Now click on Apply to Blog to save changes, 

    Add And Style Navigation Menu

    Now lets style blogger default Navigation menu with just a little code. Simply add the below CSS in the same box where we have been placing all out codes.

    .tabs-inner .widget ul {
        text-align: center !important;
    }

    Now locate tabs text, once you find it, simply change text colour with any colour you want – Jide used white (#ffffff) on his blog. And selected colour with the same value.
    After that let’s style the tabs background. Locate Tabs Background and change the following as shown below
    • Background Colour – #b44444
    • Selected Colour – #b44444
    • Border Colour – #f3f3f3
    Once again click on Apply To Blog.
    We are done with the styling, now we are going to add the Navigation Menu to our blogger blog.
    Simply click on Back to Blog.
    Now, we Head to Layout section where we are going to be adding the Navigation menu.
    Follow the pictures and your desired labels and pages and clink on save. 
    blogger navigation menu
    styling blogger navigation menu
    styling blogger navigation menu
    This is the End of Our Today’s Tutorial. I am still working on the rest part of How To Design OgbongeBlog Blogger Template. 

    Remaining topics on How To Design OgbongeBlog Blogger Template

    1. How to Add Auto Read more and thumbnail image in blogger homepage and label pages
    2. How to style the header
    3. How to style inside the post, post footer
    4. How to add share buttons – OgbongeBlog style.
    5. Add subscription box below post
    6. Add Facebook comment box below post
    7. Change post a comment message with an image. etc.
    For those who just want to download OgbongeBlog Blogger Template for free. I will soon offer it for free download.

    What’s In: Free Download OgbongeBlog Blogger Template

    Related Articles

    25 Comments - Post Yours! How to? ▼

    hello
    1. Awesome and technical, keep it up.

    2. Thanks. Really appreciated. Second tutorial will drop soon.

    3. Am still waiting patiently for the tutorial I will love to learn every bit here and promise to return all bscklinks

    4. sir thank you verymuch for this, plz am still awaiting for the part2 sir you responds will b appreciated

    5. Welcome ogbodo. I have already written a second post on this series. Check it out here https://obhiabablog.blogspot.com.ng/2016/07/blogger-auto-read-more-with-thumbnail.html

    6. Prince please how can I archive that adsense placement under every post. I want to place that exact type inside all my blog post.. Thanks in advance.

    7. Welcome Emmanuel. About the adsense placement below post title, I will drop the next series post latest next week which will contain how to place ads below post title, after post and also within post.

      So stay with us!.

    8. Emmanuel new post published on Properly Show Adsense Ads Anywhere In Blogger Blog

      read here: https://obhiabablog.blogspot.com.ng/2016/09/properly-show-adsense-ads-anywhere-blogger-blog.html

    9. Please..
      .drop d download link to download d fully customised one….pls

    10. Please..
      .drop d download link to download d fully customised one….pls

    11. Bro thanks for keeping ur promise…But till nw I still can't get it to work.

    12. Emmanuel i have.. Just visit here

    13. You are really doing a great job. Thanks man

    14. very nice boss… help me with ur facebook id or whatsapp number lemme add u up i love grt men like u sir. my watsapp number 08141823088 my name Bright Raymond. tnx

    15. Thanks for the kind words.. Find me on FB as Prince John Okosun and like my page facebook.com/obhiabablog

    16. this is the best blog i have seen in africa i am so happy right now well i also have a new cassified network
      Afrideals.com.ng – Nigeria's No. 1 Classified website
      Sell what you don't use for free with a simple click and find buyers all over Nigeria.

    17. Where you having problem understanding the post?

    18. Oh, Very nice words from you Joshua.

    19. Thanks jhon awesome

    20. Still missing John for jhon

    21. Thanks

      Please help me give a review on my blog http://www.droidtechn.blogspot.com

    22. It is not responsive

    23. wow what a great visit over here
      i enjoy vising this blog

    24. wow what a great visit over here
      i enjoy vising this blog


    Leave a Reply

    0 Shares