2009-05-28

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.

2009-05-21

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.





2009-05-19

Image

Syntax Highlighter For Blogger

Syntax Highlighter For Displaying any types of Codes and Scripts In Blogger posts.As bloggers like us sometimes need to post different languages codes in our posts basically for programmers and some need to highlight some codes too in blogger posts like me to have on tutorials and display css codes.
Syntax highlighter is the plugin actually designed for wordpress blogs but we can still use it in blogger platform but with some features.

This is how the syntax highlighter looks below you would have seen in blogger posts.




Now follow on these steps on how to install this syntax highlighter in blogger blog.

Step 1 :

Login to your Blogger account and navigate to Layout section . Then go to Edit Html Tab.

Step:2

Press Ctrl+F and search for </head>

Step 3:

Add The below codes above this </head>


<link href='http://www.sigmirror.com/files/16077_mfmek/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://www.sigmirror.com/files/16075_vovs4/shCore.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16067_qdw00/shBrushJava.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16068_sxqrw/shBrushJScript.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16074_y4x0p/shBrushXml.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16065_pax2t/shBrushCss.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16081_8ztl5/shBrushProperties.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16080_4fwwe/shBrushBash.js'/>


Please download the all above js files and upload to your own server and chnage he above urls with yours as mine may not work because my server bandwidth exceeds very fast.


Now search for </body>

And place the below codes above it.


<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf=&#39;http://www.sigmirror.com/files/16078_i3xhu/clipboard.swf&#39;;
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>


Now save your template.

If you find it difficult,add this widget direct from this page.

Now whenever you are posting codes in your blog posts place the codes between these tags in your posts.


<pre name="code" class="java">
<----Your all codes Go here--->
</pre>


Change the class java to any other language if your using that in your codes like css,javascript,c-sharp or any else.And please only you add those languages that you have included in your html that you have added as i told you to add before /head tag.

If you want any other language codes to place and not having it please get it all



2009-05-15

Image

Custom Search Bars with Image and CSS


Attention to detail is what separates great web layouts from average ones. Incorporating custom elements, like bullet points and search boxes, can elevate your website into a clean, cohesive design. However, creating a custom search box with OnMouseOver-like effects can be difficult, particularly when styling for multiple browsers.
This tutorial will teach you how to add custom form boxes (a search bar) to your designs, and in browsers that format CSS correctly (read: not IE anything, although there is an IE fix for other problems) we’re going to have nice, fancy image replacements when you click on the search box, using the :focus pseudo class. Note: This does NOT work right in Safari, because it doesn’t know how to render transparent form inputs. Shame.

We’re going to step away from trade shows for this post to let me, the webmaster, write a short “how to:” for creating custom search bars with image replacement using CSS. When I was first presented with the idea of a custom search box, I searched the Google for hours trying to come up with a solution, but in the end I couldn’t find one to achieve what I wanted, hence this tutorial.
Although this example is tailored to a search bar, the same principles can be applied to any <form>.What’s the point of creating a beautiful web layout if you’re going to slap default form boxes on it?

Overview

When it comes to adding search boxes to websites, the vast majority of them are plain and boring. Replacing the search button is pretty common, but the actual input box remains white and boxy. About the most creative that the majority of websites get is adding a colored border or changing the inside color.
I’ve seen examples of custom search bars, but most of them break down in IE7, like Sacbee.com. It looks nice and Mac-esque, but type more characters than can fit on one screen and the image exits stage left, leaving you with a blank search box. You could add an image that repeats-x, but that is pretty limited. Using some basic HTML and advanced CSS, we can get the desired effect (almost in IE) without having to use Javascript.
Example: (Note: the positioning will be off in IE, because Wordpress is rudely changing a <div> tag into a <p> tag that closes too early for reasons that baffle me)

Creating the Search Form

The first step is creating your search box form. If you are planning on upgrading your current website’s search box, this step will be easy. If you have to implement a search script yourself, it can be a little harder, but not by much. There are plenty of free search scripts that will index and search your website, and most hosting packages with some kind of accessible control panel will come with one, which is what I will be using in my example. However, note that the result page is probably going to be very ugly, and requires some formatting to get it to look like your web template. A bigger job for another day.
Below is a standard search form input, as dictated to me by the cgi search script when I set it up on my server.
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”>
<input name=”query” value=”search” type=”text”>
<input name=”user” value=”nimlok” type=”hidden”>
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”>
<input name=”template” value=”default” type=”hidden”>
<input value=”Search” type=”submit”>
</form>
Which looks like this:


Pretty ugly, wouldn’t you say?

Assembly

Let’s start with the images I want to put there instead: two search input boxes (one for normal and one for focused state) and a search button.


These images are really easy to make in Photoshop; they’re just rounded rectangle shapes with a pattern fill and a 2px stroke. The search button itself uses the magnifying glass shape included in Photoshop, so you can recreate simple images like these in about 15 minutes.

The Search Button

The first step is changing out the default images with our new ones. Start with the search button, the code for which currently looks like this:
<input value=”Search” type=”submit”>
change the type to “image” and add in the path to your new image, in my case, src=”http://www.nimlok-louisiana.com/images/search-btn.gif”. This is also a good time to add a “search_button” class to give it a 0 border and positioning.
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”>
It’s not positioned quite correctly, but we’ll fix that later.

The Search Box

Next, we need to switch out that ugly white rectangle for something that matches your website’s design. You’ll note the search script told me to add several type=”hidden” fields to my search form. We’re going to add another one to get the desired background effect, allowing us to effectively stack the background underneath the search field.
Immediately after the INPUT line that controls the text input (the one of type=”text”) add a new hidden field. This hidden field will not show up in IE, although it will in Firefox. We’ll fix IE later; for now, let’s focus on getting it to work in Firefox.
<input name=”searchbg” value=”” type=”hidden” class=”searchbg”>
Then, add the searchbg class into your style sheet. This will determine which image shows up originally in Firefox (and other browsers that I haven’t tested). It has no effect on IE.
.searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) no-repeat;
width:101px;
height:23px;
display:block;
border: 0;
}
This still looks pretty rough. Add class=”search_field” to your <input type=”text”> field (the actual search bar), and add the following style code.
.search_field
{
float:left; /* this will make the images line up */
border:0;
padding:0;
width:92px; /* the width of the actual search box, must be shorter than your image so it fits inside it. */
height:20px; /* again, must be slightly less than the image size */
background-color:transparent; /* Makes the search field invisible so you can see the image we want underneath. This doesn’t work in Safari, so I may go back later and give them their own style sheet. For now, I’m not bothered by this small inconvenience. */
}

:Focus Pseudo Class

Now it’s time for the fun part, making the images change in Firefox when you click on the search box.
This is achieved with an advanced CSS psuedo class called :focus. The focus tag is how you get an element to change when you click on it. You can also do :hover and :active (which have similar effects) to act as an OnMouseOver-like tag.
.search_field:focus + .searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) no-repeat;
}
The + .searchbg tells the code to change the .searchbg class whenever you focus on the .search_field.
Looks pretty good, doesn’t it? In Firefox, I mean.

IE Calamity

Now, if you’ve been following along in IE, you may be curious as to why the image isn’t showing up for you. IE interprets hidden fields differently–maybe more correctly, I mean, they ARE hidden–and so you’re left in the dark.
There’s an easy solution to this, and it involves conditional comments.
We’re going to add a new class called .searchbgIE, and use it in a div to wrap around the entire form. Putting the image as a div background is important. If you put it on the form input background (.search_field) it will move to the left and out of view in IE7 as you type.
As a plus, we’re going to make it only appear in IE by using the <!–[if IE]> <![endif]–> conditional comment. Since this isn’t technically a “CSS hack,” it will still validate.
<!–[if IE]><div class=”searchbgIE”><![endif]–>
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”>
<input name=”query” value=”search” class=”search_field” type=”text”>
<input name=”searchbg” value=”” class=”searchbg” type=”hidden”>
<input name=”user” value=”nimlokl” type=”hidden”>
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”>
<input name=”template” value=”default” type=”hidden”>
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”>
</form>
<!–[if IE]></div><![endif]–>
The class .searchbgIE looks like this
.searchbgIE
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) no-repeat;
width:101px;
height:23px;
display:block;
border:0;
}

It’s not positioned quite right, but I’ll fix all the positioning later, when Wordpress isn’t screwing it up. The plus of this is that I don’t have to worry about the positioning for the IE background messing up the positioning for Firefox’s; they use different classes.

Tie off loose ends

Now, wrap the entire thing in a div using the class .search, so you can position everything together. Throw a position:relative on it so that we can absolutely position everything inside. (Note: again, this doesn’t appear correctly in this tutorial, because of the way Wordpress converts my code into nonsense. Check the Nimlok Homepage for a working example in IE.)
.search
{
position:relative;
height:23px;
padding:0;
margin: 0px 0px 0px 0px; /* change this to position how you like */
}
Your HTML code should look like this:
<div class=”search”><!–[if IE]><div class=”searchbgIE”><![endif]–>
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”>
<input name=”query” value=”search” class=”search_field” type=”text”>
<input name=”searchbg” value=”” class=”searchbg” type=”hidden”>
<input name=”user” value=”nimlokl” type=”hidden”>
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”>
<input name=”template” value=”default” type=”hidden”>
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”>
</form>
<!–[if IE]></div><![endif]–> </div>
Completed Style Sheet, with positioning fixed. This is just how it looked best positioned on mine.
.search
{
margin: -8px 0px 0px 11px;
padding: 0;
position:relative;
height:23px;
}
.searchbgIE
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) 3px 1px no-repeat;
width:101px;
height:23px;
display:block;
border: 0;
}
.searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) 2px 1px no-repeat;
width:101px;
height:23px;
display:block;
border: 0px;
}
.search_button
{
position:absolute;
top:-1px;
left:100px;
border: 0px;
margin: 0px 0px 0px 2px;
}
.search_field
{
float:left;
border:0;
margin-left: 7px;
margin-top: 4px;
padding: 0;
width:92px;
height: 20px;
padding: 0px 0px 0px 0px;
font: 1.0em Arial;
background-color:transparent;
}
.search_field:focus + .searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) 2px 0px no-repeat;
}

The End

This is it for the tutorial. By this point, you should have a working custom search bar, with a delightful :focus effect in Firefox.
I’m by no way an advanced CSS user, so if anyone has any suggestions for improvement, please leave me a comment, and I will update this guide accordingly.
Image

Top Blogger Hacks Make Your Blog Professional



Things are quite easy and enjoyable for bloggers who are blogging on self hosted blog with wordpress blogging script. Lots of useful plugins are available online for free to make blog professional. For blogger.com users things are bit difficult but not much. I used to be such blogger myself, in fact I still blog on my free blogspot blog. Here is the list of hacks that can make your blog impressive.


SEO Hacks For Blogger.com

Different Title/Description to post hack
We all know how important SEO is to get rank in search result. Time and effort will go in vain if your post doesn’t get rank for keywords, and apparently you are not going to get what you have started blogging for. This hack will provide separate title and description to your particular post. I have achieved extremely good result because of this hack. You don’t have to use any Java Script. It is the easiest hack to be applied. Configure this hack.
‘Read More’ Link Hack
You must have landed on kind of blogs where home page shows only some initial part of post and you have to click on ‘Read More’ or ‘Continue’ link to read full post. Wordpress bloggers call it Excerpt plugin. Google doesn’t provide any option for such navigation, so, you have to manually configure this hack. This hack ensures that visitors click on your post link to read full post. This is quite good strategy to increase clicks on your blog. Click Here For Hack
Tag Clould Hack
Tag cloud is collection of keywords that best describes the content of the post. Most frequently the used keywords (in our case a ‘label’) will be distinguished by high font weight and font size. Click here to configure this hack.


Web 2.0 Effect Hacks


Deepjax / Ajax Lable Hack
This hack is the one that I am using on my blogger blog (Click on blue top horizontal tab). It gives wonderfull effect of web 2.0. It is the form of ajax label hack. Deepjax is the name I have given to this hack as its been created by Deepak (To give him credit). Click Here to configure this hack.
Tabview Widget
Tabview is the very famous widget. You can find tabview widget to all major websites (specially news portal websites) like yahoo and about.com. Hoctro is the developer of this hack. It is very good solution to display recent post, recent comments and links at just one spot. Click here to configure this hack.
Add Social BookMark Buttons To Post Hack
Social bookmarking sites are the latest buzz on internet. Millions of users of sites, like digg, Stumbleupon and Del.icio.us, submit or rate an article to this sites. More ratting will give you more traffic. Even a normal person can get his article exposed to international readers. Configure this hack.
Widget on Particular Post
By default your all widgets can be seen on all blog posts. This hack enables you to display a particular widget on related post. You can also use this hack to show a widget on all post except on home page. Configure this hack.


General Hacks

Welcome Note / Few words Hack
It would be nice if you can display welcome note to greet visitors on home page and not on all post (it can be done with ‘wideget on particular post’), and it will be really great if you can display few words on all labels. Click here for hack
Comments List Widget
Recent comment hack displays list of comments (with link of the commentors’ blog). It is the good way to give traffic to who have commented thus you can pay back your readers and enticed them to leave comments again. Guide to get this hack .
Related Posts List Widget Hack
This hack will list the post urls posted with same label. readers are most likely to visits post if the post is about something interested in. A good way to keep visitors spending more time on your blog. Use this hack.
I have successfully applied all hacks on my blogspot blog. You may leave comment for support, if you have any trouble.
Image

Text Links To Make Money and Increase Traffic


Text based link ads has been playing pivotal role in online industry. In fact it has changed the complexion of online marketing scenario ever since Yahoo and Google started giving more importance to the text link to determine quality of a page. In other words you can say text-link is support system of current search algorithm. Knowing this fact, webmasters begun to exchange and sell links which, eventually, was manipulating search results. Finally Google stopped considering links on link Farm pages as real links or natural links.
Many text link ads services have tried to find middle way. Some are coming up with good, more importantly improved, ideas to provide a hub where advertiser and publisher can get togather for their need. LinkShowOff is one such service. It is a link based marketplace where advertisers can find a platform to advertise with few easy steps and bloggers can earn by selling links to them.
Linkshowoff has learned from the failure of the predecessors like TNX.net and TLA.com. It displays the link with nofollow attribute. Advertiser and publisher will not have to afraid of penalty from link-o-centric search engines since it won’t pass the link juice regardless of the quality of the website.
How it works?
After you sign up you will have to create a widget where you need to information like URL, Title, Category, Slots (Number of links), Approval method, description, Cost for each link to be displayed, Color of widget and tags. You will be provided javascript code according to your widget information, which you are supposed to place on your site or blog.
For Publishers….
  • Publishers (webmaster and bloggers) decides cost of a slot to display on their blog.
  • Your website/blog will be listed at LinkShowOff Directory.
  • Advertisers pay you the amount you have deiced and their link will be up on your widget.
Image

Free Css/Html Horizontal Menu



This is a simple light dynamic Css/Html vertical menu with a light gradient and a border that you can use on your site. . . this menu is a cross browser complaint (Mozilla, IE6, IE7, Safari).  And Here you can see the DEMO .  And also you can See and download the images here.

CSS code:
ul#hmenu {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
width:900px;
height:40px;
background:url(images/HM_bg.jpg) repeat-x;
}
ul#hmenu li {
float:left;
background:url(images/HM_border.jpg) right no-repeat;
padding:0 2px 0 0;
}
ul#hmenu li a {
display:block;
padding:0 28px 0 30px;
height:40px;
width:auto;
font:bold 14px Arial, Helvetica, sans-serif;;
color:#FFFFFF;
text-decoration:none;
float:left;
line-height:40px;
}
ul#hmenu li a:hover {
background:url(images/HM_bg_hover.jpg) repeat-x;
}
HTML code:
<ul id=”hmenu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Privacy</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
Image

Magazine Blogger Template Free Download


Great blogger template. This is the first of its kind magazine style blogger template. Really good work. This is three columns blogger template. Sidebar consisted of wide bar. Posts are arranged in grid manner. The extreme of the professional blogger template. Tab widget provided at the end makes it much professional.
This template have broken all the design barriers for blogger users.
It is the magazine wordpress theme converted to blogger template by Falconhive.com. I am sure converting this theme to blogger template would have been much time consuming and head eating.

Wordpress Theme: Click Here
Demo: Click Here
Download: Click Here
Converter: Click Here




Image

Top Ten Wordpress Plugins For Free


Wordpress Blogging script is an open source script i.e. one can add more functions by having installed small program. Wordpress named it plugins. There are many plugins out there to enhance functionality of the blogging script. I am listing here the plugins which are highly useful. Some of them are very famous and some are underdog.
Top WP-Cache
Function of WP-Cache to create static (or you can say cache) of the posts and serve them without going to MySQL database. Intention is to let the visitors surf your blog fast. It is very powerful technique to manage huge traffic without putting load on server. There is no better way to handle sudden traffic from social bookmarking sites.
http://mnm.uib.es/gallir/wp-cache-2/
Chunk URLs
New bloggers usually place comments, leave URL in comment on others blog in order to drive some traffic. If the URL is long it might make the blog design awkward. This plugin will make long urls into shorter one.
http://www.village-idiot.org/archives/2006/06/29/wp-chunk/

Head Meta Description
[SEO Plugin]
As an blogger you know how important is to rank well in search result. This is an execellent plugin to optimize your every post with unique description meta tag. Keyword meta tag hold no more value in SEO. But meta description is still one of the important part to decide ranking position.
http://guff.szub.net/2005/09/01/head-meta-description/

All In One SEO Pack
[SEO Plugin]
You don’t need to worry about SEOing your blog. Everything will be taken care by this plugin. Improve traffic from search engines by installing this plugin.
http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Wordpress Database Backup

Do I need to explain how important it is to take backup of everything of your blog (specially hard written content of the posts). Take backup automatically or whenever you wish with the help of this plugin.
http://www.ilfilosofo.com/blog/wp-db-backup
Google XML Sitemaps [SEO Plugin]
Wow! I just love it. Small, albeit very useful, plugin to create sitemap of the blog. Yahoo, Live and Google loves XML sitemap a lot. Plugin will help to create and update the sitemap. Just install once and forget forever about any sitemap issues.
http://www.arnebrachhold.de/redir/sitemap-home/
Related Posts [Navigation lugin]
Most famous plugin in blogsphere. Listing up related posts at the end of a perticualr post is good practice to serve more your visitors about what they like. Increase page views per vistor by installing this plugin.
http://wasabi.pbwiki.com/Related%20Entries
Adsense Delux [Monetize]
Monetizing your blog with Adsense is easiest way to make money off your blog. Adsense Deluxe enable you to insert adsense code in either posts or anywhever in you blog.
http://www.acmetech.com/blog/adsense-deluxe/
Google Analytics for WordPress
Traffic monitoring and tracking activities of visitors on your blog has been very easy with Google Analytics which is free. The plugin help you to add analytics code in a blog.
http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
Akismet spam protection [Spam Prevention Plugin]
One of the worst thing in blogging is spam of comments. Akismet has became unseparable part of wordpress blogging. You can imagine how important the plugin is as it is already installed in script. Job of this plugin is to…
  • Protect prevent spam comments, which eventually save your lots of time.
  • Churn out spam comments from good comments.
For best result use Math Comment Spam Protection.
Democracy Plugin
Running a poll is most user-interactive task. This plugin help you to run AJAX polls on your blog. It is highly recommended to instal widet also in order to move the poll anywhere aroung blog.
http://blog.jalenack.com/archives/democracy/
Adsense Manager [Monetize]
Don’t assume that the plugin enable you to place Adsene code in blog, instead, it supports many popular ad placement services. Monetizing your blog is very easy with this.
http://wordpress.org/extend/plugins/adsense-manager/
MCEComments
MCEComments convert standard text field into user friendly WYSISYG format. People can post images in comment which can be stopped by disabling in plugin option.
http://mk.netgenes.org/my-plugins/mcecomments/
Thumbnail Viewer [For Image]
It is a plugin to view enlarge view of the small image in the posts without leaving the blog. It will impress visitors with web2.0 effect.
http://www.longren.org/wordpress/thumbnail-viewer/
Broken Links Remover
Checks your posts for broken links. If it finds one then it will make that link as normal text so that your readers will not see any dead links.
This plugin will help keep your site clean by hiding all bad/broken links. As soon as it finds a bad or broken link, it will notify the link with appropriate post under Manage -> Bad Links Wordpress admin page. More Info
That’s it. As a being blogger and blogging on self hosted blog with wordpress script I found these plugins very useful and headache reducing. Hope you also feel the same.
Image

101 CSS Resources And Tutorials To Your Site

CSS ResourcesAll the cool kids are using CSS to separate content from appearance on their sites. Here is 101 resources that will get your feet wet with CSS, teach you some new tricks and techniques, clean your code, and hit the ground running with pre-made layouts.


CSS Templates and Layouts

A collection of 40 CSS layouts based on the same markup and ready for download! - blog.html.it
CSS Layouts - layouts.ironmyers.com
CSS Templates - free-css-templates.co.uk
The Web’s CSS Site - cssvault.com
CSS Stars -cssstars.com
Open Source Web Design - Download free web design templates - oswd.org
Dynamic Drive CSS Layouts- Tableless, CSS based templates - dynamicdrive.com
Free CSS Templates - free-css-templates.com
Free Design Templates - smashingmagazine.com
Free Website Templates - andreasviklund.com
CSS Design Gallery - didloo.com
Free Website Templates, Free Web Templates, Photoshop Layouts - freshtemplates.com
Free XHTML/CSS Website Templates - templateworld.com
Nice and Free CSS Templates - mycelly.com
Open Design Community - opendesigns.org
The CSS Tinderbox - csstinderbox.raykonline.com
The only CSS layout you need(?) Strictly CSS - strictlycss.com

CSS Tips and Techniques

10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com
15 CSS Properties You Probably Never Use (but perhaps should) - seomoz.org
53 CSS-Techniques You Couldn’t Live Without - smashingmagazine.com
A CSS Crossfader Demo - mikeomatic.net
Attach icons to anything with CSS - hunlock.com
Beginner's guide from a seasoned CSS designer - cameronmoll.com
CSS Advisor beta adobe.com
CSS Image Text Wrap Tutorial - bigbaer.com
CSS Navigation Techniques (37 entries) - alvit.de
CSS techniques I use all the time - christianmontoya.com
CSS Techniques Roundup - 20 CSS Tips and Tricks - petefreitag.com
CSS tips and tricks - blogherald.com
CSS: Getting Into Good Coding Habits - communitymx.com
Erratic Wisdom: 5 Tips for Organizing Your CSS - erraticwisdom.com
Everything You Need to Know About CSS3 - css3.info
Little Boxes - thenoodleincident.com
Master Stylesheet: The Most Useful CSS Technique - crucialwebhost.com
Max Design - Sample CSS Page Layouts - maxdesign.com.au
My 5 CSS Tips - businesslogs.com
Playing Nice with the Other CSS Kids - contentwithstyle.co.uk
Showing Hyperlink Cues with CSS - askthecssguy.com
Squeaky Clean CSS - huddletogether.com
Ten CSS tricks you may not know - webcredible.co.uk
Ten more CSS tricks you may not know - webcredible.co.uk
Three Column Layouts - css-discuss - css-discuss.incutio.com
Turning a list into a navigation bar - 456bereastreet.com
Turning Lists into Trees - odyniec.net
Unordered List Rollover Gallery - destinedtodesign.com
Web Page Reconstruction with CSS - digital-web.com
Yahoo! UI Library: Grids CSS - com1.devnet.scd.yahoo.com

CSS Tutorials

53 CSS-Techniques You Couldn’t Live Without - smashingmagazine.com
A Slacker’s Guide to Style Sheets - slackerhtml.tripod.com
Advanced CSS Layouts: Step by Step - webreference.com
Advanced HTML Tables and CSS Tutorial - lynchconsulting.com.au
Alternative Style: Working With Alternate Style Sheets - alistapart.com
Cascading Style Sheets in 7 Easy Steps: A CSS Tutorial - javascript-page.com
Creating a CSS layout from scratch - subcide.com
CSS - Quirks mode and strict mode - quirksmode.org
CSS Basics - Making Cascading Style Sheets Easy to Understand - cssbasics.com
CSS Design, News, Jobs, Community, Web Standards - cssbeauty.com
CSS Design: Creating Custom Corners & Borders - nidahas.com
CSS Library- Practical CSS codes and examples - dynamicdrive.com
CSS shorthand properties - an introduction - home.no.net
CSS Tutorial - w3schools.com
css Zen Garden: The Beauty in CSS Design - csszengarden.com
CSS: cascading style sheets tutorials and style guide - yourhtmlsource.com
Making Complex CSS Simple! - leftjustified.net
Making Headlines With CSS - webreference.com
MIS Web Design: Fancy Paragraphs With CSS - miswebdesign.com
More Rounded Corners with CSS - schillmania.com
Simple Styling with CSS - adobe.com
Single Image Multi Replacement - web-graphics.com
Spiderpro: How To justify text with CSS - spiderpro.com
The Complete CSS tutorial - echoecho.com
Tools : Link Thumbnail- lab.arc90.com
Tutorials: Uberlinks CSS List Menus - projectseven.com
Using CSS and a simple list to create radically different list options - css.maxdesign.com.au

CSS Utilities

Cascading Style Cheatsheet - home.tampabay.rr.com
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS - cleancss.com
CSS Browser Selector - rafael.adm.br
CSS Cheat Sheet - Cheat Sheets - ilovejackdaniels.com
CSS Compressor - iceyboard.no-ip.org
CSS Creator - csscreator.com
CSS Editor - pixy.cz
css filters (css hacks) - centricle.com
CSS Formatter and Optimiser/Optimizer - cdburnerxp.se
CSS Properties to JavaScript Reference - codepunk.hardwar.org.uk
CSS Rounded Box Generator - neuroticweb.com
CSS Source Ordered 1-3 Columned Page Maker by ClevaTreva Designs - The Generator Form v2.90 - positioniseverything.net
CSS Superdouche
CSS Tweak ~ Web Based CSS Tweaker! - cssdev.com
CSSCheck, a Cascading Style Sheets Lint - htmlhelp.com
CSSTidy - csstidy.sourceforge.net
Firdamatic: the Design Tool for the Uninspired Webloggers - wannabegirl.org
Free CSS Template Code Generator - Maker for 3 Column Layout (tableless) - ibdjohn.com
Iconize Textlinks with CSS - pooliestudios - pooliestudios.com
JotForm - jotform.com
Live CSS editing with Internet Explorer and Firefox simultaneously - sitevista.com
OverZone Software - CSS Tab Designer - highdots.com
Simple CSS - hostm.com
Sky CSS Tool - skycsstool.sourceforge.net
Stylesheet Generator - Scriptomizers’ Webmaster Tools - scriptomizers.com
The W3C CSS Validation Service - jigsaw.w3.org
i will sure , you do the best
Image

make Ajax Slideshows with Google Ajax Feed In Your Blogger

Today I have something very unique to share with my readers and fellow bloggers. I will be providing a simple tutorial on how to make Ajax Slideshows with the Google Ajax Feed API and how to easily embed them in your website or blog.
Google Ajax Slideshows
For those who don't know Google Ajax Slideshow is a simple application of the Google AJAX Feed API that is designed to let you add photo slide shows to your pages, sites, and blogs. The slide show control takes photo feeds from all popular sites, such as PhotoBucket, Flickr, and Picasa Web Albums. Any feeds that use Media RSS can be used without customization.

Things You Can Do with Ajax Slideshows
The Slide Show control is highly customizable, allowing you to specify options such as the number of photos to display, display and transition time between photos, how the photos link back to their source. Here are some amazing things you can do with with Google Ajax Slideshows
  • Make Slideshows of Your Personal Photos
  • Make Slideshows out of any Media Feed
  • Share Slideshows with Your Friends
  • Display Slideshows on Your Blog
For those Flickr and Photobucket Feed Sticker geeks this is the best thing so far.
How To Make Google Ajax Slideshow
I will be discussing particularly how you can embed the Google Ajax Slideshows in your Wordpress Blog. Lets say I want to make Ajax Slideshow of a Sunset Media Feed then here are the steps you need to follow to display the slideshow in your sidebar.
  1. Sign up for Ajax Feed API key for your blog
  2. Open header.php file in your theme and add this script code after body
<script src="http://www.google.com/jsapi/?key=Your-Key"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<script type="text/javascript">
function LoadSlideShow() {
var feed = "http://www.google.com/uds/solutions/slideshow/sample.rss";
var options = {displayTime:2000, transistionTime:600, scaleImages:true};
var ss = new GFslideShow(feed, "slideShow", options);
}
/**
* Use google.load() to load the AJAX Feeds API
* Use google.setOnLoadCallback() to call LoadTuneBar once the page loads
*/
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script>
3- Replace Your-Key with your real Ajax Feed API Key.
4- Open style.css and define some styling for your slideshow
#slideShow {
width : 300px;
height : 250px;
padding : 10px;
}

5- Call the script function anywhere in your sidebar using this code
<div id="slideShow">Loading...</div>
You are done

Image

Add Google Ajax Feed To your Blogger Templates

blogger recent posts Ajax feed GoogleFirst of all, i want to give credits for New Blogger's (blogspot.com) recent posts widget using Google's Ajax Feed API to Hecto, i just modified the script to make it open in the same window, work with FeedBurner and a few other minor tweaks.

Now we can begin. You can see this New Blogger Recent Posts Widget using Google's Ajax Feed API in the right side of my blog. Move your mouse over it to see how it works.

1. You will need a key from Google which you can get in a second without any registration, by going to this link.

2. Go to your Blogger Dashboard > Layout > Edit HTML, check "Expand Widget Templates" and find: </head> and paste the following code above it


<!-- recent posts ajax -->
<script src='http://www.google.com/jsapi/?key=YOUR KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url(&quot;http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css&quot;);

#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
float:left;
}
.gfg-title {
font-size: 17px;
border-bottom: 1px solid #307396;
font-weight: normal;
color : #BF0000;
background-color: #FFFFFF;
}
.gfg-title a {
color : #005580;
}
.gfg-root {
border: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color : white;
}
.gfg-list {
background-color : white;
}
.gfg-listentry-odd {
background-color : white;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 7.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gfg-listentry-highlight {
background-image : url(&#39;http://nilarimogard.googlepages.com/garrow.gif&#39;);
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
}

</style>
<script type='text/javascript'>


function load() {
var homeUrl = &quot;<data:blog.homepageUrl/>&quot;;
var feed = homeUrl + &quot;atom.xml?redirect=false&quot;;
new GFdynamicFeedControl(feed, &quot;feedControl&quot;,
{linkTarget : google.feeds.LINK_TARGET_SELF, numResults : 5, title : &#39;Recent Posts&#39;});
}

google.load(&quot;feeds&quot;, &quot;1&quot;);
google.setOnLoadCallback(load);
</script>

<!-- /recent posts ajax -->

Change YOUR KEY with the key you got in point 1. The bold code above can be changed to suit your needs. numResults : 5 is the number of posts in this widget, change the number to the number of posts you want to show up in your recent posts widget. title : 'Recent Posts' can also be changed with the title you want for your widget, or you can remove title : 'Recent Posts' if you want your feed's default title to be displayed.

3. Create a new "HTML/JavScript" widget, then add this line to the content:


<div id="feedControl">Loading...</div>

Save it and you're done.

Customizing the recent posts Ajax widget


To change the font, colors and so on of your widget, modify the CSS styles:


#feedControl {
width : 353px;
margin-left : 1px;
background : white;
font-size: 13px;
float:left;
}
.gfg-title {
font-size: 17px;
border-bottom: 1px solid #307396;
font-weight: normal;
color : #BF0000;
background-color: #FFFFFF;
}
.gfg-title a {
color : #005580;
}
.gfg-root {
border: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color : white;
}
.gfg-list {
background-color : white;
}
.gfg-listentry-odd {
background-color : white;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 7.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gfg-listentry-highlight {
background-image : url('http://nilarimogard.googlepages.com/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
background-color : #F6F6F6;
}

To change the red arrow, save this image: http://nilarimogard.googlepages.com/garrow.gif, edit it with the color you want and upload yours to some host, then change it in the above code.

You cand find all the CSS elements for the Google Feed API, here.

For further documentation regarding the Google Feed API, visit it's homepage.




Image

Create and Change your own Gmail Theme


Recently Google Introduces themes for Gmail, and if you are bored with those themes. So now you can create your own Custom theme for you Gmail Box easily. You can now make Gmail as ugly or pretty as you want – by choosing your own colors. Go to Gmail -> Settings -> Themes, and click “Choose your own colors”. This opens a window where you can configure a template with instant preview. Hit Save & Close, and Gmail will appear in your custom colors.

Your colors are saved when you finish editing the theme and the changes are added to Gmail after you press “Save”. If you don’t like your theme, you can always choose one of the 31 pre-defined thems or click on “Reset” to go back to the default theme. And you still want to customize Gmail than you have to try Change the Look of Gmail with Firefox Addon

Image

Change the Layout of Gmail with Firefox Addon

If you are bored from the skin of GMAIL and Want to change it, than you have to try the Firefox Addon Google Redesigned. Google Redesigned is a Mozilla Firefox extension designed by Globex Designs that aims to fully redesign the look and feel of popular Google services. This is achieved with Cascading StyleSheet (CSS) files which are loaded on the client’s browser.
 
 
Google Redesigned is built for Mozilla based browsers (Firefox, Flock, IceWeasel, and such). Users using other browsers will not be to install the extension. Firefox 3 and Flock 2 are highly recommended as certain styles will not work correctly on older versions of the Gecko engine. As well the Firefox 3 engine provides much faster performance for handling these styles.
Download FireFox Addon Gmail Redesigned




2009-05-06

Image

All Feeds using FeedBurner

Integrate your FeedBurner feed with your blogger beta blog.

1) Feed Auto-Detection

Go to Layout > Edit HTML and find this line of code


<b:include data='blog' name='all-head-content'/>

which actually splits out something like this


<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate" type="application/atom+xml" title="YourBlogName - Atom" href="http://yourblog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="YourBlogName - RSS" href="http://yourblog.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="YourBlogName - Atom" href="http://www.blogger.com/feeds/yourblogid/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=yourblogid" />


when you view the page source (In Firefox click on View > Page Source).

YourBlogName stands for the title of your blog, yourblog.blogspot.com is your blog's url, and yourblogid is a long number, the id of your blog.

The two lines with link rel="alternate",

<link rel="alternate" type="application/atom+xml" title="YourBlogName - Atom" href="http://yourblog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="YourBlogName - RSS" href="http://yourblog.blogspot.com/feeds/posts/default?alt=rss" />

let newsreaders auto-detect your blogs feeds. So we have to change these lines to point them in the direction of your FeedBurner feed.

Remove the line:

<b:include data='blog' name='all-head-content'/>


Replace it with:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

<meta content='true' name='MSSmartTagsPreventParsing'/>

<meta content='blogger' name='generator'/>

<link href='http://feeds.feedburner.com/yourblogname' rel='alternate' title='RSS' type='application/atom+xml'/>

<link rel="service.post" type="application/atom+xml" title="YourBlogName - Atom" href="http://www.blogger.com/feeds/yourblogid/posts/default" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=yourblogid" />


Replace http://feeds2.feedburner.com/yourblogname with the url of your FeedBurner feed.

Save Template.

Now that we have fixed the auto-detection part, there is still the issue of the feed-link on your posts page. This feed-link has to be made invisible, so that your visitor has no other option than following the link to your FeedBurner feed.

Go to Layout > Edit HTML and find this line

.feed-link {


Below the line add

display: none;


If there is no .feed-link class defined in your template, define it with:

.feed-link { display:none; }


Save Template.

Leave your comments and URL of your blog :)




Image

Adding left sidebar to Blogger

Denim is a standard 2 column template provided by Blogger. With small changes to the template, we can add a third column to Denim. The third column can be on the right or on the left. I added the third column to the left and called it left sidebar. Follow the steps given below to add left sidebar to your blog.
Step 1

Log in to Blogger and go to Layout > EditHTML. Check Expand Widget Templates.
Step 2
Change the header width to 960px. Edit the #header portion of the CSS.

#header {
width: 960px;
margin: 0 auto;
background-color: #336699;
Change the content-wrapper width to 960px. Edit the #content-wrapper portion of the CSS.

#content-wrapper {
width: 960px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
Change the main-wrapper width to 480px and margin-left to 10px. Edit the #main-wrapper portion of the CSS.

#main-wrapper {
margin-left: 10px;
width: 480px;
float: left;

Step 3
In your template there is a sidebar-wrapper. This is the right sidebar wrapper. It will be like this
#sidebar-wrapper {

margin-right: 14px;

width: 240px;

float: right;

background-color: #ffffff;

display:inline;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Change #sidebar-wrapper to #right-sidebar-wrapper, margin-right to 10px from 14px and width to 220px from 240px.

After the editing it will look like this
#right-sidebar-wrapper {

margin-right: 10px;

width: 220px;

float: right;

background-color: #ffffff;

display:inline;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Step 4

Add the code given below just before the #right-sidebar-wrapper.
#left-sidebar-wrapper {

margin-left: 10px;

width: 220px;

float: left;

background-color: #ffffff;

display:inline;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Step 5

Find out the portion of code given below.
<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

Add the code given below just below the code given above.
<div id='left-sidebar-wrapper'>

<b:section class='sidebar' id='left-sidebar' preferred='yes'>

</b:section>

</div>

Step 6

Find out the portion of code given below.
<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Replace it with the code given below.
<div id='right-sidebar-wrapper'>

<b:section class='sidebar' id='right-sidebar' preferred='yes'>

Step 7
Save Template.

Leave your comments and URL of your blog :)




Total Pageviews