New : Download Free:Ebook | FREE : [ Limited Copies ] Premium Blogger Template : Grab Now!!! | Like Us :

Sunday, 2 June 2013

Blue Flame Template For Blogger | Free Gift to Loyal Readers


A splendid and joyous Beginning of my Blog Indian Blogger Community made me to give a gift to the Loyal Readers for their continuous interest shown in the Blog.


The Name of the Template we are going to Release is BLUE FLAME. We are gifting you this theme free of cost. One of the Blogger Template website offered me $300 for selling the templates to them.
But money is not every thing. Relations matters :)

On the eve of MahaShivratri I am releasing the Free Template BLUE FLAME made by me with an effort of 20 hours hard-work.

I wish that on On this auspicious Occasion MahaShivratri this template will give a new Freshness to your blog. I wish all of us have Blessing of the Lord Shiva.



See Demo at:-
DEMO 1
DEMO 2

You can download the theme from the Below link:-CLICK HERE

Layout:-


Whats New:-


Better SEO
The thing which matters most in a template is better SEO. I assure it has a better SEO than your previous template.This Template is Search engine optimized. The Title of the Page will be the post Title not the Blog Title. The clean HTML structure would make it fairly easy for search robots to crawl and index the pages easily without useless scripts block access. It has much Faster Loading Time than normal Templates.

Social Buttons
It has Social Buttons in the End of the Page which provides a unique looks to the Blogger.
     

Cool Follow by Email Widget


Highly Customizable
This template is highly customizable. You can customize the template the template according to your need.

Google+
We have also added the Google + button in it because the More +1 makes your blog more popular. It is placed along with the Labels.


Attractive Labels
We have modified the CSS of the normal Labels and gave a attractive look to labels.



How to Install The Template

1.Click here to Download the template
2.Open the XML file and Copy the entire code.
3.Go to Template>EDIT HTML>Expand Widget Templates

4.Remove the Complete code their.
5.Copy the Code given in XML FILE and paste here.
6.It will give a warning:Template does not contain widgets.... CLICK DELETE WIDGETS.

                           

7.Your templates have been changed.
You need to Do some customization given below to give the template a cool look.

Customization:-

1.Date Format
 Go to Setting>Language and formatting>Timestamp Format
Change the Time-stamp to

The configuration should be:-

It will change the Date to the following pattern

2.Add Follow By Email Details
Go to layout>Add a Gadget>Follow by Email

3.Add About us to the Footer 1 Position
To add the widget copy the below link and paste it in HTML/JavaScript widget.
Change the Code given in red color
Add your image link and Short Bio about you in the place of the red lines.
Change the Read more link in green color to your read more link.


<div class="widget HTML" id="HTML1">
<h2 class="title">About The Author</h2>
<div class="widget-content">
<!--[if !IE]> -->
<style>
#profileSyedShah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileSyedShah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<!--[endif]---->
<style>
#profileSyedShah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileSyedShah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity {
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
zoom: 1;
}
.opacity:hover {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img class="opacity" id="profileAshish" src="http://1.bp.blogspot.com/-X5R7nyNNP_M/UKeyDhtZOeI/AAAAAAAAItk/0nAAIlymbRU/s320/p.PNG" align="left" height="100" width="100"/><br/><br/><br/><br/><br/><br/><br/>Narender Sharma is owner and founder of TechGama.com He is an Engineering student. Beside Engineering his area of interest are internet, Android, web designing, blogging and SEO.
<a style="color:#FF0000;" href="http://www.techgama.com/p/about-us.html"><b>Read More</b></a><!--![endif]---->
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="blogID=10.......21&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<div class="clear"></div>
</div>
<a href="http://indianbloggercommunity.blogspot.in" title="Indian Blogger" target="_blank"> <img src ="http://3.bp.blogspot.com/-Df8ds1wTTHs/UO-L-vkdzUI/AAAAAAAAAPI/EXyQwtHhsRA/s1600/indianbloggercommunitypremium.jpg" alt="Indian Blogger" /></a>


4. Add Post Titles by Labels Gadgets in footer 2 & 3
Adding Posts Title by Labels give a cool look to blog.You can them in the Footer 2 and Footer 3 or even in sidebar.

Copy the below code and paste in>HTML/JAVASCRIPT gadget.Change the Link given in red color to your Blogs url.
The word in the green color is label. Change the Label according to your requirements whose posts you want to show.


<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://www.techgama.com/feeds/posts/summary/-/Games?max-results=5&alt=json-in-script&callback=recentpostslist"></script>


5.Add labels
To add labels go to>Layout>Add A Gadget>labels
The configuration of labels should be
6.Changing Social widgets link:-

To change the Social Button link url Press Cntrl+F and search for the following code
div class='IBCSocial'
Then change the following things written in red color:-

<div class='IBCSocial'><span><a href='http://www.twitter.com/sachin_rt' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span> <span><a href='http://www.facebook.com/technicalrevolutionnews' id='iconFacebook' target='_blank' title='Facebook'>Facebook</a></span> <span><a href='http://feeds.feedburner.com/indianbloggercommunity' id='iconRSS' target='_blank' title='RSS Feed'>RSS</a></span> <span><a href='http://www.youtube.com/' id='iconYouTube' target='_blank' title='YouTube Channel'>YouTube</a></span> <span><a href='https://plus.google.com/107918605681426796283' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span>


Twitter :-Add your twitter username
Facebook :-Add your facebook username
Feedburner:-your website name(not complete just name)
Youtube:-Your youtube channel
Google+:-Your Google+ profile


Anything left?

I have put my best efforts in making the template. I just hope I have covered the details of almost every part.
In case you find any difficulty in installing this template please Let me know.

5 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Great Job Dude Www.tipsntricks4fun.in

    ReplyDelete
  3. I think this will help me more ,than others...

    Thank's for the info.

    Best of luck..

    Techpebble.com

    ReplyDelete

 

About The Author








I am a B.Tech Computer Science Student. I love Programming and blogging. I am Oracle certified Java Professional. My Profile

DMCA.com

Technology Blogs

Education Blogs

Twitter Facebook RSS YouTube Google

All Rights Reserved ©Indian Blogger Community 2013

© 2013 Designed by Indian Blogger Community