Tekikon

watch This

2008-10-17T07:18:00.000-07:00

WatchThis is a name of my new free xml blogger templates which is converted from free css template under a same name created by LucaCvrk at solucija.com.

It is two column template with right sidebar and an intro box in the top middle area that suitable to put your introduction text such as "About Me".

WatchThis also a simple template that using only one images for the body. No wonder even only use combination of black, white (grey) and red makes this WarchThis template looks clean and elegant.

Here is the screenshot.

Continue read to find where's the download link.

See my live blog demo here. You may download the code here. And please note that the zip file is password protected. How to get the magic word?

Simply subscribe to my feeds

Promise to keep all credit links (both link of mine and original designer) intact.

You agree to not use this template on a porn blog.

Say some words and don't forget to leave an email address enable me send you the magic word personally (use only a "name[at]server[dot]com" format to avoid some spammers).

I will try to send you the magic word as soon as possible but in case you haven't receive it after 2 x 24 hours, just remind me. Happy blogging!

Blue Weed ; Free Template

2008-10-17T07:14:00.001-07:00

New Blogger Template ; Blue Weed

After delayed few days, finally I can finish another free blogger template conversions from a wordpress theme.

It is Blueweed, originally designed by Jai at blogohblog.com.

Blueweed is multi column template with clear and neat boxes. Using white blue and green color combinations make it fits for any blogger purposes.

If I haven't installed modernpaper yet, sure i will use this template for my default template at template-godown.com.

On the blogger versions, some changes applied since not all WP function on this original theme could be copied. -the truth is, I just don't know the how to yet. ;). For instance, the original WP versions can show a recent post on the first box and then the second post follow on the other box beneath the first one. Will appreciate if you share the how to knowledge

See and download the original WP theme versions here.

Due to my stupidity, then i split the 'first post box' into two column and make it for left and right widgetbox. Continue read to see the screenshot.

Click to see the live demo.

To cover my shortage, an expandable post script is built inside. The blogger versions also g ad ready. You have to change the pub id with your own id.

Unfortunately, the zip file is locked. How to get the magic word?

Simply subscribe to my feeds

Just promise to keep all credit links (both link of me and original designer) intact.

You agree to not use this template on a porn blog.

Gimme your comments and don't forget to leave an email address (use only a "name[at]server[dot]com" format to avoid some spammers) enable me send you the magic word personally.

Download the xml code here and support template-godown enable provide more blogger templates.

Is it your first time visit? then check my other free blogger template collection here!.

Playing with tooltip

2008-10-17T07:07:00.000-07:00

I got this trick from Jai. He makes a post that teach us how to create tooltips purely using Cascading Style Sheets(CSS).

But, what is tooltips? From Jai's post I quote

Tooltips are basically little blocks of information that are used to inform users about certain attributes of your website elements.

Not like other tooltips that created using a help of javascript or some other programming languages, this tooltips is purely using css which is also meaning easy to create and can be loaded quickly without any delay.

Now, follow this step :

1. Make a blank HTML file and paste the following text in the BODY part :


<a href="#" class="tooltip"><span>
This is a pure CSS tooltip!</span>Tooltip 1</a>

This is the HTML part where we create a hyperlink with the text Tooltip1. In the next step, we are going to hide the text within the span tags which will serve as the tooltip text.

2. Now post this CSS information in your HEAD part of the HTML file


  .tooltip { position:relative; z-index:24; }
  .tooltip span { display:none;}
  .tooltip:hover {z-index:25;}
  .tooltip:hover span {
   display:block;
   position:absolute;
   width:120px;
   top:25px;
   left:20px;
   background-color:#FCFBDC;
   border:1px solid #333333;
   padding:5px;
   font-size:11px;
   color:#333333;
   text-decoration:none;
   font-family:Verdana, Arial, Helvetica, sans-serif;}

How its work?

The property display:none is given to the span tag inside the hyperlink. This will make the text inside the span tag invisible and display:block property on tag hover make it back visible when a mouse hovering the link.

The positioning of the .tooltip span class is relative because we will place the tooltip text relative to the hyperlink area and make the span tag absolute by defining its fixed position.

The z-index is used so that tooltips are in the front of the hyperlink and do not overlap. The more the value of z-index, the farther in the front goes the element.

We can adopt these tooltips trick to our blogger template easily. Just copy the CSS and put it before ]]></b:skin>, save your template and finish.

Every time we want to put a tooltip on our link, just use a similar code like below,


<a href="#" class="tooltip"><span>
This is a pure CSS tooltip!</span>Tooltip 1</a>

Styling also can be altered according to our own choice. Me, successfully integrate this tooltip for my tab menu and i also use an images inside the tooltip boxes.

Sound interesting right? Why not try it and share your experience by make a comment on this post?