Blogger: Optimize post title for more visitors and search engine results

When we search for the posts of a blog in google or yahoo we will find out that the post title is displayed as

Blog Title + Post Title

Such titles really doesn't attract much traffic to your blog. But it is the default setting in our blog template code. Now we will tweak the HTML code of our blog template to optimize the post title for search engines in a more attractive format

Post Title + Blog Title

This tweak will take a while for the Formatted titles to appear in search results(will appear when it is reindexed) but I am sure that it will increase the traffic to your blog.

Check out my post "Editing the HTML code of a Blogger Beta Template" to know how to edit the html code of the blogger template.

Search for the code <title><data:blog.pageTitle/></title> and replace the code with the following code

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

So use the tweak for more traffic.

Converting .djvu file to .pdf file

DjVu (pronounced déjà vu) is a computer file format designed primarily to store scanned images, especially those containing text and line drawings. Basically some of the ebooks and comics are present in this format.

Portable Document Format (PDF) is a file format created by Adobe Systems as a represention for two-dimensional documents in a manner independent of the application software, hardware, and operating system. This is the most popular file format used for data and ebooks.

Since DjVu is not so popular as PDF I decided to share the cheap and best way to convert the DjVu format file into PDF format file.

1. Download & Install FreePDF which is used to print the documents as pdf files.
http://www.shbox.de/fpxpdownload.htm

2. Download DjVu viewer namely windjview. It is a sourceforge project so it can be downloaded freely and it is a few kilo bytes file.
http://sourceforge.net/projects/windjview

3. Now open the djvu file with windjview.

4. Choose "print" option and SELECT FreePDF as the PRINTER to print the file as PDF file.

So we successfully converted the djvu file into pdf freely and easily.

Blogger: Setting labels as horizontal tabs

In this post I will discuss how to set the labels in blogger as a horizontal tabs.

NOTE: Read this post completely before you start tweaking your blog.

Since we are about to modify the HTML code of your blog template backup your complete blogger template. Check out my post on Editing the HTML code of a Blogger Beta Template to know how to perform template backup. Also make sure that your blog has posts with labels assigned to them if not nothing will be working out.

Step 1:

Download the free CSS navigation menus from the Exploding Boy website. Once you download the entire set unzip it and decide which type of menu you are going to include in your site. Then we have to upload these GIF images to any photosharing site or any place in internet so that we can access them directly. There are many options like Photobucket, Picasa, Googlepages.

Step 2:

Now we have to change the Header so that it can include page elements. Search for id="header" in html code of your blog's template and modify this line:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

as

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Step 3:

Now we will prepare the CSS portion of the tweak. I have uploaded the images tableftF.gif and tabrightF.gif which are related to Menu style F at the links

http://www.site.com/tableftF.gif
and
http://www.site.com/tabrightF.gif

So you have to replace those links in the code with the appropriate links where you have uploaded those images. Below is the CSS code for menu style F:

#tabsF
{
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;
}

#tabsF ul
{
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabsF li
{
display:inline;
margin:0;
padding:0;
}

#tabsF a
{
float:left;
background:url(" http://www.site.com/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsF a span
{
float:left;
display:block;
background:url(" http://www.site.com/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span
{
color:#FFF;
}

#tabsF a:hover
{
background-position:0% -42px;
}

#tabsF a:hover span
{
background-position:100% -42px;
}

Step 4

Now we have to add the Label Widget. Insert the following Widget code

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

NOTE: By using the above code by default tabs for all your labels is created. If you got more number of labels then the tabs for all labels is created by default i.e. If there are 30 labels in your blog then 30 tabs are created which don't looks good. So I modified the green lines in the above code in this way so that we can include only those labels which we want to add.

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>

<b:loop values='data:labels' var='label'>

<!--I am adding the label - Linux in this code -->
<b:if cond='data:label.name == "Linux"'>
<a expr:href='data:label.url'>
<span>
<data:label.name/>
</span>
</a>
</b:if>

<!--I am adding the label - Opensource in this code -->
<b:if cond='data:label.name == "Open Source"'>
<a expr:href='data:label.url'>
<span>
<data:label.name/>
</span>
</a>
</b:if>

</b:loop>

</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Depending upon your requirement you can add as many labels you want.

NOTE: If you use a CSS menu style other than F, than make sure id='tabsF' reflects the correct tab, such as id='tabsE' for style E. Later, if you like a different design, just cut-and-paste the style's CSS code, then change this id again to reflect the change. Check out the Tabs in my blog.


Checkout the CSS code for other Menu styles from A to F

/*- Menu Tabs A --------------------------- */

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.site.com/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.site.com/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.site.com/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.site.com/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.site.com/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.site.com/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.site.com/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.site.com/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.site.com/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.site.com/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.site.com/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.site.com/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

Blogger: Editing the HTML code of a Blogger Beta Template

In this post we will be checking out How to Edit the HTML code of template of a Blogger BETA.

Once you login into blogger.com by default you will be landing into "Dashboard" which shows the list of blogs that have been created by you.

Since we are editing the layout of the blog we have to click the "Layout" link to check the layout of the blog. Then you will be seeing a page that has a look similar to one shown below.
Now you can see three tabs namely Posting, Settings, Layout. Depending upon your template you will be having different options under Layout tab and I got Page Elements, Fonts & colors, Edit HTML, Pick New Template.

If you have to pick a new predefined template from google you have to click the option "Pick New Template". As I decided to show how to edit the HTML of the existing template I will be clicking "Edit HTML" option.Then you will be seeing a view similar to as shown below.
Before you modify the HTML of the BLOGGER template remember that you have to backup the existing template code so that even if any problem occurs because of modification of HTML code we can revert back to previously working HTML code. Click the "Download Full Template" link to backup the existing template code. The backup is saved as a .xml file. If you have to revert back to previously existing code which is saved in your harddisk just upload it by clicking the upload button.

By default "Expand Widget Templates" is not checked. Before we modify the HTML code we have to check it so that the code related to each and every widget that is present in our blog is shown up.
Once modifying the code present in the HTML editor we have to save the template or preview it using the appropriate button shown in above figure. Even if anything goes wrong we can revert back to the previous code as we already performed the backup of our previous code.

How to: Checking Hardware Configuration of a Computer

Whenever we buy a Laptop or a Desktop we will configure our DREAM machine with certain hardware specifications .. like x GHz processor, Graphic card with y memory and so on. But once we receive our shipment we don't know whether our DREAM machine is fitted with right configuration or not.

Since there is a chance of getting wrong hardware components during the time of assembly of our PC let us see one of the easy way to check the PC/Laptop hardware configuration without unscrewing it by using a PC audit software named Belarc Advisor.

Coolest thing about Belarc Advisor is it produces a detailed report of not only about the hardware configuration but also builds a detailed profile of the installed software, missing Microsoft hotfixes, anti-virus status, CIS (Center for Internet Security) benchmarks of your PC. The output is finally displayed in a webpage. And all these services are provided by Belarc Advisor in free for personal use.

So stop thinking about how to know the hardware configuration of your Laptop/Desktop and start using the Belarc Advisor.

Checkout the site: http://www.belarc.com/free_download.html"