Documentation - iNews 2014 Blogger Template

Download this template at "Seo Blogger Templates"

Table of Content

---

Getting Started

Hello, Lets start with installation process for these you need a account on blogger.com where you can create a free blog, In this guide I'm not going to tell you that how you can create a blog on blogger, I assume that you have a blogger account with a blogger blog, so let's get started!

Installing Blogger Template

Follow Below Steps To Install Blogger Template 

Login to blogger dashboard.

On Blogger Dashboard Click Template

Now Click On Backup/Restore button (Top Right).

Click Choose File button. Find where the “iNews-theme.xml” file location.

Now Click On Upload Button.

---

Customizing Menu

To customize the drop down menu located above header follow below steps- 

Login to blogger dashboard.

On Blogger Dashboard Click Template

Now Click On Edit HTML button

Now using ctrl+f find below code

<ul class="menunav l_tinynav1">

<li class="firstli"><a href="/">Home</a></li>

<li><a href="your-link-here">About</a></li>

<li>

<a href="your-link-here">  Portfolio</a>

<ul>

<li><a href="your-link-here">Web Design</a></li>

<li><a href="your-link-here">Development</a></li>

<li><a href="your-link-here">Illustrations</a></li>

</ul>

</li>

<li><a href="your-link-here">404</a></li>

<li><a href="your-link-here">Contact</a></li>

<li><a href="your-link-here">Themes</a></li>

</ul>

Now replace your-link-here and all blue color text.

---

Customize Search Box

At Home Page Your website 

Now Click On Edit button at box HTML/Javascript for the Search box 

Now copy and paste below code 

<style>
#search-box{
background: #f9f9f9;
border: 1px solid #ACACAC;
padding: 10px !important;
font-style: italic;
font-weight: 400;
width: 60%;
}
#search-btn
{
border: none;
padding: 9px;
color: white;
background: #4A7BF8;
font-style: normal;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
</style>


<div class='menusearch'>
<div style='padding:8px 8px 0 0;'>
<form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<div id='search'>
<div class='search-input form-search'>
<input id='search-box' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Search the site&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Search the site'/>
<input align='top' id='search-btn'  type='submit' value='Search'/>
</div>
</div>
</form>
</div>
</div>

Then Save and view result your search box

---

Customize Social Buttons

Social Media Follow Us buttons will help your blog/website to make your blog viral on Social Medias, To change the link of social medias button follow below steps: 

Go to blogger dashboard

Click On Template Tab

Now Click On Edit HTML button

Now using ctrl+f find below code

<div class='boxingofscl'>

<div class='scl-btn-sid'>
<a href='http://www.facebook.com/freewebsitetemplate' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a>
</div>
<div class='scl-btn-sid'>
<a href='http://www.twitter.com/kulzrua' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a>
</div>
<div class='scl-btn-sid'>
<a href='http://www.plus.google.com/username' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a>
</div>
<div class='scl-btn-sid'>
<a href='http://www.youtube.com/username' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a>
</div>
<div class='scl-btn-sid'>
<a href='http://www.feedburner.com/username' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a>
</div>
</div>

Now replace all red color highlited url with your scoial medias username.

Add Your Feedburner username

Email Subscription box will help you to make your blog viral using email marketing, to add your own feedburner user name follow below steps:

Go to blogger dashboard

Now click on Template tab

Now Click on Edit HTML button and find below code

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=seotemplates&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p class='etlt'>Subscribe Via Email</p><p><input class='einputb' name='email' placeholder='Your Email Here...' type='text'/></p><input name='uri' type='hidden' value='seotemplates'/><input name='loc' type='hidden' value='en_US'/><input class='ebtn' type='submit' value='Subscribe'/></form>      

Now replace seotemplates with your feedburner username.

---

Add You Own Facebook Apps ID

Step#1

The First thing you need to do is to create a separate App ID for your application and that can be done easily through Facebook Developer. Login to your Facebook account and go to Facebook Developers website. This places allow Developers to manage their apps hosted at Facebook, click on Create New App button.

 

A Small pop out will appear which would ask you to insert little information about your application. There are two fields, write the App name and press the continue button.

 

Now you will land of a new page which would provide you your application details like App ID, App name and etc. You need to copy these keys and enter them later.

Step#2

Login to blogger dashboard.

On Blogger Dashboard Click Template

Now Click On Edit HTML button

Now using ctrl+f find below code

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
 

Now Replace YOUR_APP_ID with the app id which you have obtained in step#1.

Now finally you can save your template.

---

Add Your Own Disqus Shortname

Adding your own shorname to discus wil give you the admin position by which you can manage all disqus comments on your blog. 

Login to blogger dashboard.

On Blogger Dashboard Click Template

Now Click On Edit HTML button

Now using ctrl+f find below code

var disqus_shortname = 'testthemeforest'
 

Now replace testthemeforest with your own disqus shortname.

Where you can get Disqus shortname?

Access your Disqus Admin and choose Settings

Then scroll down to Site Identify, you will see the shortname there.

---

How to show post with labels

At last I'm going to tell you the most important thing which you have to add in your blog, Follow all the below steps carefully:

Go to blogger dashboard

Click on Layout tab

Now add a new gadget >> Html/JavaScript.

Paste below code there

<div id='featurebottom1'>

<h2 class='headingfeature'>

technology <a class="linku" href="/search/label/technology">Load More</a>

</h2>

<div class='left-corner-canvas'/>

<script src='/feeds/posts/summary/-/technology?

max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;

callback=recentthumbs&amp;' type='text/javascript'/>

</div>

<div style='clear:both;'/>

</script>

</div>

</div>

Now Replace technology with any label from which you want to display posts.

Click On Save button

Now you might be guessing that what that blue color highlited code will do, There are three style of showing post with label Replace recentthumbs with any of the below style.

Style 1

This is by default style, you don't have to do any change in code to show this style, simply paste above code and save.

Style 2

 

To add this style replace recentthumbs with recentthumbs2

Style 3

 

To add this style replace recentthumbs with recentthumbs3

The End