Obhiaba Simple Template Documentation

Introduction

Obhiaba Simple, is a basic structured blogger template with a large collection of only important widgets. While creating this theme, i did not use purely self developed widgets and plugins. It's smooth, fast, responsive, flexible and eye catching. It is most preferred for tech, music, news, gossip, fashion and personal bloggers depending on your taste. Feel free to use every widget included in this theme and also external widgets from Obhiaba Blog and others.

Template Credits

This template was designed by Prince John Okosun, founder and admin of Obhiaba Blog (ww.obhiabablog.com.ng) due credits is reserved to the designer of this theme. If you have purchase the premium version, then the template credits will be removed but if you have downloaded the free version, due credits most be reserved. 

Note: Removal of footer credit links will cause your blog to redirect to designer site.

Template Installation

There are basically two ways to install custom blogger templates.

Method 1. Uploading File 

Step 1

Visit your blog at www.blogger.com - Navigate to "Templates" - Backup/Restore

Step 2

Click on "Choose File" and select the XML document you download or purchased from blog

Step 3

Now click on "Upload" and you theme will upload.

Method 2. Copy & Paste (Recommended)

Step 1

Open the XML file you downloaded or purchase using a notepad. 

Step 2

Using CTRL + A, highlight the entire code, and using CTRL + C, copy the entire code in the notepad

Step 3

Visit your dashboard at www.blogger.com - Navigate to "Templates" - "Edit HTML" 

Step 4

Using CTRL + A, highlight the entire code in the HTML box and delete everything. Now paste the code from the notepad into the HTML box and click save at the top.

Enabling Mobile Template

Step 1

Navigate to "Templates" - Click on the "Gear Icon" under the Mobile view

Step 2

Tick "Yes. Show mobile template on mobile devices." and Save. 

Changing Colors, Fonts & Themes

Navigate to "Templates" - Click "Customise" under the "live on Blog" section -

Navigate to "Advanced". Now change to your desire, from fonts, colors, hovers etc.

After changing to your desires, Click  She "Save" to save your settings.

Setting Up SEO Tags

Please read this post to set your blog meta tags

Enable Widgets

Go to "Templates" - "Edit HTML".

Main Menu

Using CTRL + F search for the below code

<ul class='topnav' id='myTopnav'>
Then you should see the below codes.
<ul class='topnav' id='myTopnav'>
  <li><a class='active' href='#'>Home</a></li>
  <li><a href='#'>News</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>News</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>About</a></li>
  <li class='icon'>
    <a href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'>&#9776;</a>
  </li>
</ul>

Replace the red # with the link of pages you want to direct to

Replace News, Contact, About etc with the title of the pages corresponding to each link.

Example

<li><a class='active' href='https://www.obhiabablog.blogspot.com'>Home</a></li>

Sliding Recent Posts (Breaking News)

Using CTRL + F search for the below code

var latest_post = 10;

Then you should see the whole code below

<script type='text/javascript'>
var blog_url = &quot;http://free-obhiabasimple.blogspot.com.ng&quot;;
var latest_post = 10;
var scrolling_speed = &quot;5&quot;;
var close_button = false;
var info_text = true;
</script>

Replace http://free-obhiabasimple.blogspot.com.ng with your blog link
Replace var latest_post = 10; to the number of post to display.

Click save after editing

Enable Disqus Comments

If you are new to disqus commenting system, simply go here to create an account and disqus short name for free.

after creation, do not import the comment box, all you need is the short code which you should save in a notepad.

Navigate to "Templates" - "Edit HTML"
Using CTRL + F search for the below code.

var disqus_shortname="DISQUS-SHORT-NAME";

Replace DISQUS-SHORT-NAME with your disqus short name and Click Save.

Enabling Recent Posts (Sidebar Grid)

Go to www.blogger.com - locate "Layout" - "sidebar-right-1" - "Recent Post"

Note: if you cant find the Recent Post, you easily click on "Add a Widgets" - "HTML/Javascript"

Copy the below code and paste it inside the HTML box.

<script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

Replace max-results=9 with the number of posts you wish to show.

Enabling Email Box

Go to "Layout" - "Get FREE Updates in Your Inbox". Once it opens, you can change the title and then click save.

Setting The Popular Posts

It will show by default but to choose the number of posts to show follow the below procedure

Go to "Layout" - "Popular Posts"

Change "Display up until" with the value of your choice.

Adding Search Bar

Go to "Layout" - "sidebar-right-1" - Add a Gadget - HTML/JavaScript

Copy and paste the code inside the HTML box

<div id="_bcd_141013" style="display:none"></div>
<style type="text/css">
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;
border: /*border-width-s*/1px solid;/*border-width-e*/
border-color: /*border-color-s*/#dddddd;/*border-color-e*/
    padding: /*padding-s*/5px;/*padding-e*/
    font-size: /*font-size-s*/12px;/*font-size-e*/
background-color: /*bg-color-s*/#ffffff;/*bg-color-e*/
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
padding: 0;
    line-height: 2em;
    height: 2em;
    outline: none;
background: transparent;
color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
padding: 0 /*padding-s*/5px;/*padding-e*/
    margin: 0;
    position: absolute;
    right: /*padding-s*/5px;/*padding-e*/
    top: /*padding-s*/5px;/*padding-e*/
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
border: none;
min-width: 2em;
color: /*submit-text-color-s*/#000000;/*submit-text-color-e*/
    background: /*submit-bg-color-s*/#f0f0f0;/*submit-bg-color-e*/
}
html[dir="rtl"] button#_bcd_141013_search_submit {
right: auto;
left: /*padding-s*/5px;/*padding-e*/
}
</style>
<form action='/search' id='_bcd_141013_search_form' method='get'>
<input id='_bcd_141013_search_text' name='q' placeholder="Search..." data-placeholder-end="" type='text'/>
<button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button><!--endofsearsubmit-->
</form>
<script type="text/javascript">
/*
Name: Natural Search Box with Multi Design
Author: Prince John Okosun
Site: http://www.obhiabablog.com.ng/
Version: 1.0
License GNU
*/
var ss = document.getElementsByTagName('link');
for (var i = 0; i < ss.length; i++) {
var href = ss[i].getAttribute('href');
if (href && href != null && href.indexOf("font-awesome/") != -1) {
        break;
}
}
if (i >= ss.length) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
}
document.getElementsByTagName("head")[0].appendChild(link);

</script>
<!--
BLOGGER-WIDGET-OPTIONS
"Border Width": {
"start": "/*border-width-s*/",
"end": "px solid;/*border-width-e*/",
"default": "1",
"desc": "Border width of search box."
},
"Border Color": {
"start": "/*border-color-s*/",
"end": ";/*border-color-e*/",
"default": "#dddddd",
"type" : "color",
"desc": "Border color of search box"
},
"Padding": {
"start": "/*padding-s*/",
"end": "px;/*padding-e*/",
"default": "5",
"desc": "Padding of search box. Allow integer only."
},
"Font Size": {
"start": "/*font-size-s*/",
"end": "px;/*font-size-e*/",
"default": "12",
"type" : "number",
"desc": "Search text font size in pixel"
},
"Background Color": {
"start": "/*bg-color-s*/",
"end": ";/*bg-color-e*/",
"default": "white",
"type" : "color",
"desc": "Search box background color"
},
"Text Color": {
"start": "/*text-color-s*/",
"end": ";/*text-color-e*/",
"default": "black",
"type" : "color",
"desc": "Search box text color"
},
"Padding": {
"start": "/*padding-s*/",
"end": "px;/*padding-e*/",
"default": "5",
"type" : "number",
"desc": "Search text padding in pixel"
},
"Submit Button Background Color": {
"start": "/*submit-bg-color-s*/",
"end": ";/*submit-bg-color-e*/",
"default": "#f0f0f0",
"type" : "color",
"desc": "Search box background color for submit button"
},
"Submit Button Text Color": {
"start": "/*submit-text-color-s*/",
"end": ";/*submit-text-color-e*/",
"default": "black",
"type" : "color",
"desc": "Search box text color for submit button"
},
"Placeholder Text": {
"start": "placeholder=\"",
"end": "\" data-placeholder-end=\"\"",
"default": "Search...",
"desc": "Placerholder text for search box"
},
"Search Submit Text": {
"start": "<button type=\"submit\" id=\"_bcd_141013_search_submit\">",
"end": "</button>",
"default": "<i class=\"fa fa-search\"></i>",
"desc": "Search submit text and / or <a href=\"http://fontawesome.io/icons/\" target=\"_blank\">icon tags</a>"
}
BLOGGER-WIDGET-OPTIONS
-->

Adding Advert Banners

Follow the below procedures to enable adverts. It could be adsense, alternative ads, media.net etc

Header Advert.

Go to "Layout" - "header-right" - Add a Gadget.

Below Main Main Advert

Go to "Layout" - "Cross-Column 2" - Add a Gadget.

Footer Large Banner

Go to "Layout" - "footer" - Add a Gadget.

Post Page Settings

Go to "Layout" - "Main" - "Blog Post" - Edit.
Use the below photo to set yours.

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: