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'>Replace the red # with the link of pages you want to direct to
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;'>☰</a>
</li>
</ul>
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 codevar latest_post = 10;Then you should see the whole code below
<script type='text/javascript'>Replace http://free-obhiabasimple.blogspot.com.ng with your blog link
var blog_url = "http://free-obhiabasimple.blogspot.com.ng";
var latest_post = 10;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>
Replace var latest_post = 10; to the number of posts to display.
Click save after editing
Enable Disqus Comments
If you are new to the 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 shortcode 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 can't find the Recent Post, you easily click on "Add a Widgets" - "HTML/Javascript"
Copy the below code and paste it into the HTML box.
<script>Replace max-results=9 with the number of posts you wish to show.
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=arlinagrid"></script>
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 choose the number of posts to show follow the below procedureGo 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/JavaScriptCopy and paste the code into 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 etcHeader 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.
