Image Modefied Revolution Blogger template

Now you have the opportunity to download this SEO and Adsense friendly  ,fully hacked and widgetized Blogger template . This template is inspired from Revolution Blogger template .

• Search engine friendly ( meta tags , Blogger title hack included)
  
•  Fully customizable (You can change the color , Background image etc .)
• Adsense friendly ( Built for maximum CTR)
• Related posts Widgets
• Read more widget
• Blogger footer page navigation
• Smileys in comments
• Customizable logo Modified beautiful email subscription form
• Animated favicons
  
• Email subscription below Blogger posts 
• Social bookmarking below posts (nofollowed for seo)
• Social connection button on the top of navigation (nofollowed for seo)
  
• Web 2.0 look and clean and easy to use navigation .

Demo :www.techknowl.com
Download  Revolution Inspirit Blogger template.

Image Add Top Comments automatically to Blogger

 Add Top Comments automatically to Blogger easy

1. go to your page element 
2. add a Gadget  and select HTML/JavaScript

and edit this code and change 3rb-game.blogspot.com ,and add it to Html/JavaScript

<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=47909d73002419d14e697928bd9c4f24&url=http%3A%2F%2F3rb-game.blogspot.com&num=10&filter=yourname" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://3rb-game.blogspot.com/2009/05/add-top-comments-automatically-to.html">3rb Game Blogger</a></span>

and save it


C U in another post

Image Change older post and newer post icon

. Sign in Blogger

2. Layout

3. Edit HTML

4. Do not forget to give a check in the Expand Widget Templates

5. Find the code below:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class = 'blog-pager-newer-link' expr: href = 'data: newerPageUrl'
expr: id = 'data: widget.instanceId + "_blog-pager-newer-link"'
expr: title = 'data: newerPageTitle'> <data:newerPageTitle/> </ a>
</ span>
</ b: if>

6. Replace any posts over the blue with the code below:

<img src="http://alien.keren.googlepages.com/first.gif"/>

7. Then find this code:

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class = 'blog-pager-older-link' expr: href = 'data: olderPageUrl'
expr: id = 'data: widget.instanceId + "_blog-pager-older-link"'
expr: title = 'data: olderPageTitle'> <data:olderPageTitle/> </ a>
</ span>
</ b: if>

8. Change the text color blue with the code below:

<img src="http://alien.keren.googlepages.com/last.gif"/>

9. Then find this code:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </ a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </ a>
</ b: if>
</ b: if>

10. Replace any posts over the red with the code below:

<img src="http://alien.keren.googlepages.com/home.gif"/>

11. Save and see the results.

Image 7 free SEO tools to analyze and optimize your website for speed and compatibility

When you first started blogging, you probably used to spend a lot of time refining the design and making sure your site loaded quickly. You basically made sure that is was technically sound and working well for your visitors. However, after some time, your concentration may have shifted to other important tasks such as writing good content, marketing your blog, commenting on other blogs, writing guest posts, etc.
Here’s a list of free tools you should definitely check out to make sure that your website is running at an acceptable level compared to your fellow bloggers. If your site is not running optimally, then you’re probably not getting the your full potential of traffic.

1. Website Grader - I wrote about Website Grader a few months back as a free search engine optimization tool that you should be using if you’re a webmaster. Website Grader will give you a report of many aspects of your site and a final grade out of 100. When I first ran it on my site, I was at 56, now I’m up to 98. And my traffic has gone from 100 visits a day to 5000. I’m not saying it’s because of Website Grader, but it helped me determine problem areas.
2. Xinu Returns - Another web site I had written about a couple of months back that lets you quickly check things like your pagerank, rating, backlinks, and indexed pages. It’s a great tool to get a quick overview of your the status of your site in the blogosphere. It also gives you tips for your title tags and meta keywords.
3. BrowserShots - This site is really awesome for webmasters. You type in your web address and then choose all of the browsers and OSs that you would like to see your website shown in. You can see how your web site looks on Linux, Windows or Mac and in all of the different browsers, including Firefox, IE, Safari, and Opera. You can also choose the screen size, color depth, etc. Really great tool.
4. YSlow - YSlow is a Firefox only addon, but it is an amazing tool for analyzing a website in terms of performance and speed. It checks 13 different factors for a web page and generates a final score for the site. It also lists out the improvements that need to be made to ensure the highest possible grade. I wrote two articles on YSlow, one about how it helped me reduce the load time of my site by 50% and another on how to setup YSlow. Make sure to read them and install Firefox just for this purpose.
5. WebSiteOptmization - Another tool you can use that is similar to YSlow, but no need for Firefox. It gives you a breakdown of various aspects of your site, including HTTP requests, DNS lookups, etc and gives you recommendations on how to make it load faster, etc.
6. BuiltWith - BuiltWith is a very cool site that creates a profile of your website based on what technologies your site is running on. This site really focuses on the actual technologies that your site is built with, i.e. PHP, Apache server, Google Analytics, etc. It also gives you a score out of 5 stars depending on how good those technologies are. Microsoft.com has a rating of 2/5! IIS sucks!
7. CSS Optimizer - Just about every website uses CSS in some way or another and each call to a CSS file takes time to download. If you can shrink the size of your CSS files, even by a little bit, you’ll save a lot of time on page loading. You can also go to the W3C CSS Validation site to make sure your CSS is valid.
8. Minify - A very powerful tool that will take your JavaScript and CSS files and combine them together and remove all unnecessary comments and whitespace. I have used this tool before to reduce the size of my Javascript files by almost 40%. You can imagine the savings in load time because of that, especially if you use Wordpress where each plugin usually has it’s own Javascript file.

Image Show Only Post Title In Blogger Home Pages

1.Login to Blogger
2.Go To LAYOUT
3.Then Click On Edit HTML
4.Check Mark Expand Widgets
5.Press Ctrl+F

Now search For below code line in red :-

<b:include data='post' name='post'/>

And Replace it with Below Codes:-

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

Now Preview Your template. If it accepts Your Html.Then Save It.

Now open your blog and click on the label or archive page of your blog it will show only post title .

I hope you will be satisfied with it.This is one way.

Now there is another way of doing it but the results are different.

If you want to show only title of posts in your blog home page also,then only follow this way and implemet it.If you want only label page to show post title just get stoppd after reading first way only.

Now the second way to show only post title in blogger home page too.

1.Login to Blogger
2.Go To LAYOUT
3.Then Click On Edit HTML
4.Check Mark EXpand Widgets
5.Press Ctrl+F

Now search for this line in red :-

<p><data:post.body/></p>

After finding this line replace it with below codes :-

<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
</b:if>

This will show only post title on all pages of blogger including homepage label and archive pages.

One of my reader asked to show post title only in archive pages so i am placing code for him

Just use these codes to replace the above red line in place of above codes.

<b:if cond='data:blog.pageType == "index"'>
<p><data:post.body/></p>
</b:if>

And if you dont want to use post titles in archive pages use archive in place of index in above codes that's the only word making basic difference between the codes.

*Note-If you are using read more hack in your blogger you will get above red line twice.So replace only the line that appears first in your blog html code and leave second one as it is.

And then preview your template,if its ok. Save It.

Image Adding scroll bar to sidebar widgets

We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>

In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-

/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}

This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in blue.

another Method


Select HTML JAVASCRIPT to add the page element .

Now You have to add some html codes to his page element to show of the scroll bar menu widget to the sidebar of your blogger.

<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">

<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><span style="font-weight:bold;"></span>

</ul></div>

Copy this codes and paste it to page element and save it.

Now preview your blog.

You can change your links http://3rb-game.blogspot.com/ and text in the codes to show of yours links and posts.

Note:-In the codes you can edit height and width in red to adjust it to your blog.