AD Banner

Featured

3/featured/recent

footer about

Videos

6/cate2/videos
Adv (300 x 250)

Find us on Facebook

5/cate3/lifestyle

Advertisement

6/breakingnews/random

Instagram posts

About us

3/cate1/entertainment

Recent Comments

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Copyright ©2019 by Mogtemplates

contact form

Name

Email *

Message *

Other News

[Related][recentmag]

EHI ONLINE

EHI ONLINE LESSONS

EHI ONLINE

EHI ONLINE LESSONS

Powered by Blogger.

Random Posts

World News

[World News][recentmag]
featured

Header Ads

Total Pageviews

Search This Blog

Search This Blog

Latest

Brexit

Brexit

Football

Football

Random posts

5/cate4/random

Random Post

Adv (880 x 120)

News By Picture

pictures

Hot News

5/cate3/hottrend
Adv (880 x 120)

Labels

Hot News

[Hot News][recentmag]

Labels Cloud

Get In Touch
Footer Logo

Trending Posts Display

Labels List

Home Layout Display

Posts Title Display

Theme Layout

Theme Translation

Tech

tech

Games

games

Popular Posts

127 Likes
3,240 Followers
12.7k Subscribers
136 Followers

Pages

Recent Comments

How accessories make you a better lover. 18 ways devices are completely overrated. Operating systems in 12 easy steps.

Recent Posts

Adv (300 x 250)

Popular Posts

Trending Posts

Recent Posts

.
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
    By Ehijoshua (Jboss) → Monday 11 September 2017
    .
    OgbongeBlog template

    Finally, I round-up the entire OgbongeBlog blogger template series with the free version of the blog template which is both responsive, fast loading and awesome. If you love the actual blog by Jide then getting to love this theme will be real easy and quick  (love at first sight).




    I found Ogbonge blog template professional and elegant. It will fit perfectly into any niche. From the daily gossipers up to the technology bloggers, fashion, and music lovers. Name it? its great and you will love it.
    For bloggers and theme designers who have been following the tutorial series, am sure your test blog will look more like this if not better but don't fail to let me check out what you have designed so far even as you download this free template that comes with  MBT Jumbo share button with counter.

    Template Features

    1. Home and Archive page read more buttons with thumbnail and snippet
    2. Jumbo share buttons with counter 
    3.  Responsive layout 
    4.  Mobile Friendly 
    5.  Fast and Neatly coded 
    6.  Fully customizable 
    7.  No External scripts 
    8.  Right Sidebar with 3 layout footer

    What is Not Here

    1. Advanced SEO 
    2.  Facebook Comment Box 
    3.  Twitter Cards 
    4.  Facebook Open Graph 
    5.  Social Media Links 
    6.  Recent and Random Post

    How To Upload Blogger Template

    Download the free or premium version and save the file to your computer (Advised). Visit your blogger blog dashboard www.blogger.com and select the blog you wish to use.

    Step 1

    Locate the "Template tab" (now Theme) and click on it.

    Step 2

    Locate 'Backup / Restore' at the top on the right side and click on it.

    Step 3

    Click on 'choose a file' and select the XML of the free template you downloaded earlier and hit enter. Let it load and upload.

    Step 4

    Now click close and locate the gear icon shown below the mobile view. Click on it and select  'Yes. Show mobile template on mobile devices'.

    Step 5

    Scroll down and choose 'Custom' and hit save. Now visit your blog both on mobile and laptop, it should look nice.

    Final Words

    I have provided this template for you for free and also have plans to create an eBook. But before you can download this template, which is locked with content locker, you need to subscribe to this blog and share this post to your social media profiles as shown in the widget lock.
    Thanks for visiting this blog and also using this template. More free and premium templates to be published soon, if you want to remove the credits at the bottom of the Ogbonge Blogger template, simply purchase the premium version by sending me an email here

    Download OgbongeBlog Blogger Template below



    Free Download
    Free Version




    See Demo
    Live Preview




    Buy Now
    Premium Version

    Free Download OgbongeBlog Blogger Template

    By Ehijoshua (Jboss) →