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"

Calculate Time in Linux

Calculating time in LINUX in milliseconds and Seconds. We should include sys/time.h header file and the remaining sample code is

struct timeval start;

we wil be using gettimeofday system call whose syntax is
int gettimeofday(struct timeval *tv, struct timezone *tz); where

struct timeval
{
time_t tv_sec;···············/* seconds */
suseconds_t tv_usec;······/* microseconds */
};


/* To calculate time in seconds*/

gettimeofday(&start, NULL);
starttime = start.tv_sec + start.tv_usec/1000000;

/* To calculate time in milliseconds*/

gettimeofday(&start, NULL);
starttime = start.tv_sec*1000 + start.tv_usec/1000;

Using GOOGLE as proxy to hide IP-Adress

NOTE (UPDATED on FEBRUARY 30th 2009): This trick seems to be no more fool proof as sites like tracemyip tracks down your exact IP-Adress even by using the Google Translation Service.

We know that GOOGLE has changed the way we access the web. It has simply became the stepping stone for any body who want to know information about anything in this world .. offcourse of universe too. It had wide variety of web based applications namely search, maps, gmail, gears, adsense, adwords, analyzers, language translators and many in its arsenal.

Now we can use one of the services of GOOGLE as proxy so that we can access the web anonymously without revealing our ipadress, location of our ISP. You might be wondering how our location is revealed out? Let us try out a simple experiment. Just visit the site

http://www.ip-adress.com/
We can see that the site reveals my ISP ipadress as 59.164.98.133 and my ISP location in a google map as Bangalore. If we further check out the site we can find out that the site has ecen information about our browser version, plugins installed, our screen resolution and many other things got revealed.
So how does GOOGLE service can be used a proxy? Let us check out the language translation service provided by the GOOGLE. You can get the link to this service if you type www.google.com and we can see a link to language tools or just click this link.

http://www.google.co.in/language_tools?hl=en

Once you click you are into that page we can see a option named "Translate a Webpage" with options to translate from one language to other. Note we cant translate same language to the same one i.e. for example from English to English. If we try to do it we get a GOOGLE ERROR.
Not let us try to access the site http://www.ip-adress.com/ asking GOOGLE translation service to convert the site from from French to English. Since nothing French is there in that site is simply displayed in English.
Strange it displays my ISP ip-adress as 209.85.170.136 and its location as United States. If I check out the site further I found out that I am getting redirected via google server present at Mountain View, US which is acting as proxy to access the site http://www.ip-adress.com/.
So we can access the any site in this way without revealing our information much. Thats really cool trick to stay anonymous. But there is a problem by doing so as the images cannot seen properly by using this technique. But even if a site is bocked we can access its content in this way. I tried out this trick on one of the torrent sites that are blocked but I can still access its contents.