Elite Blue Blogger Template:Highly Professional and Customised

Hello Readers, Today, I am very excited to release my first new blogger template called ‘Elite Blue Theme’. It’s Highly professional, Customised and Optimised for Faster Page Loading. Fortunately, I got holidays for a week. I had to do lots of other work, but, I decided to do what I like the most!, Playing with CSS : P. I have not coded the whole template myself. I took church theme from Bloganol and started customising it. I have been customising it from past one month or so but, Major customisation have been in these three days of holidays. I have spent most of these three days in front of my PC! . At the end, I was ready with a new look which I awaited for!.

I have customised each and every bit of the original template that you may not even find any difference between the two. Have a look at the demo of my new template.

Demo

OK, Had a look at the theme. Nice, isn't it?. Let’s have a look at the features I have incorporated in it . .

Features of Elite Blue Theme

No Ugly Blogger Navigation Bar !
Cool Header Image designed by me.
Beautiful Navigation and sub-navigation bars with cool hover effect below the header to help your blog readers.
Custom Search box.
One line post header to describing time, post author, labels and number of comments.
Customised h3, h4, h5 and h6 heading tags which you often use in your blog posts.
Cool Blockquote style!
Arrows indicating unordered lists instead of ugly circle bullets ( Bullet Lists)
Cool ‘Read More’ feature with css button!
Superb social bookmarking icons below every blog post with amazing hover effects (I love this part the most)
Integrated with Related Posts widget below each post (Javascript based) that will help you increase pageviews.
Stunning Comment form with Blogger Avatars or gravatars.
Different appearance of comments from the author and from readers.
Three column flexible footer with a cool look.
Stunning Home, Previous and Next buttons designed by me instead of older, newer post text links.
Sidebars wih different background and borders.
Lists in sidebar with a plus (+) blue icon.
Blog Loads fastly because of very less amount of images in it. Most of the styling is done with CSS.
The whole template XML file is of 54KB which is very less compared with other flashy templates. Hence a faster load time.
This List is endless !

Liked the template? Then, lets download the template and change the look of your blog.

Download Template

Downloaded : times

After you have downloaded the template, Lets customise it according to your needs : )

Before customising the template, we have to backup the template as a precaution. Have a look at my post which describes how to do this –> Installing a Blogger Template.

Customisations

I have assumed that you have backed up your old template and have installed the new template as per the instructions. Now, lets customise it to suit your blog needs : )

1. Editing Meta Tags

Elite Blue is highly customised for its ability to attract search engines and get them the right information. Its important to add meta tags to the template for more SEO friendly behaviour. Read my previous post –> Meta Tags Explained.

I have added dynamic meta tags by default and you only have to customise a part of it.

Go to Design tab, then to Edit HTML.
Search for <head> (Press Ctrl +F)
You can find meta tags below it as shown in the screenshot.
Just replace the words with the bolded words as shown below.

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<link href='mailto:YOUR EMAIL ID GOES HERE' rev='made'/>
<meta content='YOUR NAME GOES HERE' name='author'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='A short and sweet description of your blog(not more than 100 words) goes here' name='description'/>
<meta content='important keywords that describe your blog seperated by commas' name='keywords'/>
</b:if>
<link href='http://feeds.feedburner.com/yourfeedadress' rel='alternate' title='Your Blog Title - Atom' type='application/atom+xml'/>
<link href='http://feeds.feedburner.com/your feed adress' rel='alternate' title='Your Blog Title - RSS' type='application/rss+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>
<!--End of meta and title tags—>

Just look at the dummy example below so that it gives a clear idea as to how you need to edit it .

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<link href='mailto:coolguy110395@gmail.com' rev='made'/>
<meta content='Amit.M.B' name='author'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='A Blog about blogger tricks, tips, hacks. It also provides you with freebies,writing tips, SEO tricks and more…' name='description'/>
<meta content='Blogger tricks, Blogger widgets, templates, freebies, ebooks, css tricks, writing tips' name='keywords'/>
</b:if>
<link href='http://feeds.feedburner.com/EnhanceBlogger' rel='alternate' title='Enhance Blogger - Atom' type='application/atom+xml'/>
<link href='http://feeds.feedburner.com/EnhanceBlogger' rel='alternate' title='Enhance Blogger - RSS' type='application/rss+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>
<!--End of meta and title tags—>

You can refer to one of my post –> Choosing good meta tags

2.Editing the Navigation Bar Menu

Search for <div id='NavbarMenu'>
You can see a code snippet like this . . .

<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Edit Me</a>
          <ul>
            <li><a href='#'>Edit Me</a></li>
            <li><a href='#'>Edit Me</a></li>
            <li><a href='#'>Edit Me</a></li>
          </ul>
        </li>

        <li><a href='#'>Edit Me</a></li>
        <li><a href='#'>Edit Me</a></li>

      </ul>
    </div>

In the above code, replace all ‘# ‘ with your Page URL or Post URL and the ‘Edit Me’ text with your page titles.

Dont want subpages on hovering? then delete this part of code

<ul>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
<li><a href='#'>Edit Me</a></li>
</ul>

3.Edit Sub-Navigation bar

search for <div id='subnavbar'> in your template.
Code appears as shown below

<div id='subnavbar'>
<ul id='subnav'>
    <li> <a href='#'>Download This Theme</a>
      <ul>
        <li>
          <a href='#'>Hover Here</a>
          <ul>
            <li>
              <a href='#'>Sub Sub Category #1</a>
            </li>
            <li>
              <a href='#'>Sub Sub Category #2</a>
            </li>
            <li>
              <a href='#'>Sub Sub Category #3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'>Sub Category #2</a>
        </li>
        <li>
          <a href='#'>Sub Category #3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>Download This Template</a>
    </li>
    <li>
      <a href='http://www.enhanceblogger.blogspot.com/'>Go To Enhance Blogger</a>
    </li>
</ul>
</div>

Do the same thing i.e Replace replace all ‘# ‘ with your Page URL or Post URL and the pink text with your page titles. If you dont want subpages on hovering, then delete this part of code . . .

          <ul>
            <li>
              <a href='#'>Sub Sub Category #1</a>
            </li>
            <li>
              <a href='#'>Sub Sub Category #2</a>
            </li>
            <li>
              <a href='#'>Sub Sub Category #3</a>
            </li>
          </ul>

I Hope you can edit all other parts of the template by yourself. You just need to change the title of the widgets which you are capable to do . . .

That’s all, Enjoy the new look of your blog !

Of you have any problems regarding the installation of the template, Drop in comments and I will try to solve the problems. Soon, I am gonna release a new version of this template which includes ad slots for bloggers who publish ads. Wait for three more days . . .

Anyone who wants minor customisations to template can contact me at coolguy110395[@]gmail.com

Comments

5 comments to "Elite Blue Blogger Template:Highly Professional and Customised"

Mohammad Mustafa Ahmedzai said... May 21, 2011 at 3:13 PM: Reply..

Nice template hari. Pure and neat in design. Keep up the good work brother. You have a great potential. :>

Regards,
Mohammad
Mohammad Mustafa Ahmedzai said... May 21, 2011 at 3:14 PM: Reply..

Sorry I meant Amit*
Amit M B said... May 22, 2011 at 6:35 PM: Reply..

Pleasure to recieve nice comments from you bro especially for my first template . . . Keep visiting and be reviewing my works . . .
Lancey said... December 9, 2011 at 6:13 PM: Reply..

You mention truth issue on that stuff. I think you described it in a professional way. I hope you go further in this way, with your excellent way of writing articles.
Unknown said... April 5, 2015 at 3:55 AM: Reply..

Please how to view this template in mobile view

Thursday, May 19, 2011