Nitesh is back to blogging.. Apologies for no updates since last 2 months..
Home
About
Forums
Advertise
Contact
TopBottom

Pure css based tooltip that works with all browsers - blogger hack

Posted by Nitesh Kothari on 18 December 2008
Share this post:
 Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

29 Comments

Tool tip can be very useful in terms of site navigation. I searched for pure css tool tips but all in vain. Most of the tutorials, available online, use JavaScript which slows down the loading time of the page. So, I decided to write a tutorial about designing a pure css based tool tip for Blogger. Yeah, you heard it right – Pure css based Tool Tip.

What is tooltip?
As per Wikipedia: The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.

Demo: Hover over hereTool tip text appears here

Blogger hack by Nitesh Kothari..

This tooltip works with all browsers. Liked it? Just follow the instruction given below and start using it on your blog.


Step 1: CSS Codes
Copy and paste the following code just above </b:skin>

a.tip {position:relative;}

a.tip span {display: none; position: absolute; top: auto; left: auto; padding: 5px 5px 5px 5px; z-index: 100; background-color: #000; color: #fff; border:0px solid #777; width:200px; height:auto; -moz-border-radius: 2px; -webkit-border-radius: 2px;}

a:hover.tip {font-size: 99%;cursor:pointer;}

a:hover.tip span {display: block;position: absolute;-moz-opacity: 0.7;
opacity:0.7; top:auto; left:auto; right:2px; bottom:auto; line-height:14px; font-size:12px;font-weight:normal;}

Now, i will explain you in detail, how these codes work.
a.tip {position:relative;}

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

a.tip span {display: none; position: absolute; top: auto; left: auto; padding: 5px 5px 5px 5px; z-index: 100; background-color: #000; color: #fff; width:200px; height:auto;}

This section of css code controls the tool tip text.
display:none - It makes the tool tip text disppear.
position: absolute - When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
background-color: #000 - you can change the background color as per your wish.
color: #fff - This element changes the font's color.
width:200px - Set the width of the tool tip text container.
height:auto - Set the height of the tool tip text container.

a:hover.tip {font-size: 99%;cursor:pointer;}

Here font-size:99% is used for IE browser.
Cursor:pointer - This makes a pointer appear, whenever you hover over the text. you also change it to help.

a:hover.tip span {display: block; position: absolute;-moz-opacity: 0.7;
opacity:0.7; top:auto; left:auto; right:2px; bottom:auto; line-height:auto; font-size:12px;font-weight:normal;}

This is the section that makes the text area appear whenever you hover over the link.

display: block - makes the tool tip visible.
-moz-opacity: 0.7; opacity:0.7; - This makes the tool tip container transparent.
right:2px; - Container will appear 2px left to the link.

Step 2: HTML Code
Check the following example.
<a class='tip' href='#'>more<span>tool tips text area. know more..</span></a>

In the above code, "more" is the link. When you hover over more, the tool tip appears. The text between span tags is what appears in the tool tip.


Final Words
This is one of the best and easiest blogger hack i have written. I hope you like it. Hover over '?' in this blog for a demo. Is it useful for your blog?

Labels:

 

Show current day and date on blogger - blogger widget

Posted by Nitesh Kothari on 16 December 2008
Share this post:
 Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

4 Comments

Wolverine hacks has new magazine style look. Many readers were happy with the current date section at the top left. It is very easy to show current day and date on Blogger using Current date and dat blogger widget. Copy and paste the following code to a new HTML/Javascript box in the page element section.


<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
var montharray=new Array("January","February","March","April","May", "June","July", "August","September","October","November","December")
document.write("<p>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</p>")
</script>
<p align="right"><font face="arial, helvetica" size="-2"><a href="http://clwolvi.blogspot.com">Grab this widget</a></font></p>

Leave a comment, if you have any problem or query.

Labels:

 

WH Multi level drop down menu v 1.1

Posted by Nitesh Kothari on 15 December 2008
Share this post:
 Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

10 Comments

Two days back, I wrote a quick tutorial on multi level drop down menu on a readers request, but the previous version had some bug. It was not working with IE browser. I recieved 3 more mails, requesting me to write a tutorial for multi level drop down menu that works on all browsers.

WH Multi level drop down menu v 1.1 features:

1. Browser support: FF1+ IE6+ Opera8+
2. Smooth Navigation using jQuery
3. slide plus fade in effect for sub menus
4. Shadow effect

This menu is a css list based menu using jQuery which makes it smoother. The submenus repositions themselves if they are too close to the right or left edge of the page. Shadow effect's color or depth can be changed or completely removed too.


Step 1: CSS Code
Copy and paste the following code just above </b:skin>

.ddsmoothmenu{
font: bold 12px Verdana;
background: #72a8d2 url(http://img291.imageshack.us/img291/4531/navbgbluekp4.png); /*background of menu bar (default state)*/
width: 100%; }

.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Georgia; font-weight:bold;}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: white;}

.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #2299ff;}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: #414141;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 12px; right: 7px;}

.rightarrowclass{position: absolute; top: 6px; right: 5px;}

/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;}


Step 2: Copy and paste the following code just above </head>

<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://ads.googlecode.com/files/wh%20ddmenu.js' type='text/javascript'/>

The Above code contains some external files, which can be uploaded to your server or on other servers like google code.

whddmenu.js
right image
down image


Step 1: HTML Code
Add the following code to body section where you wish the menu to appear.

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://clwolvi.blogspot.com">Home</a></li>
<li><a href="#">page 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://clwolvi.blogspot.com/2008/12/multi-level-drop-down-menu-for-blogger.html">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Final Words
I think this is the first tutorial on blogosphere about multi level drop down menu for bloggers that works with all browsers. Take a moment to save this post on social bookmarking websites or subscribe via email for more updates. leave a comment here and let me know what do you think about this post.

Labels: , , ,

 

Multi level drop down menu for blogger

Posted by Nitesh Kothari on 12 December 2008
Share this post:
 Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

19 Comments

A good site navigation is very important. Every visitor or reader searches for the navigation to read more and more on the blog. I have visited many sites which do not have a site navigation at all. It becomes really difficult to search something on such blogs. I believe, one should have a multi level drop down menu, which gives better accessibility of the content to the readers. Using such menu, it becomes very easy to check almost all blog posts of a blog. Taylor Thompson, owner of Video blogging tips mailed me and asked how to design a drop down menu for the website or blog, so i decided to write a tutorial about it.


Step 1: CSS Code
Copy and paste following code just above </b:skin>

#NavbarMenu {background: #72a8d2;width: 100%;height: 25px;font-size: 12px;font-family: Arial, Tahoma, Verdana;color: #FFF;font-weight: bold;padding: 0;vertical-align:middle;margin-bottom:5px;}

#nav {margin: 0;padding: 0;vertical-align:middle;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;border-bottom:1px solid #dee5e5;}

#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 15px; font-family: Georgia, Times New Roman;font-weight: normal;text-transform: none;margin: 0; padding: 3px 15px 3px;text-decoration: none; }

#nav li a:hover {background: #dee5e5;color: #2299ff;margin: 0;padding: auto 15px auto; text-decoration: none;vertical-align:middle;border-bottom:1px solid #dee5e5;}

#nav li a:active {background: #dee5e5; color: #2299ff;margin: 0;padding:auto 15px auto; text-decoration: none;border-bottom:1px solid #dee5e5;}

#nav li li a, #nav li li a:link, #nav li li a:visited {background:#555; width: 150px; color: #FFF; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF;}

#nav li li a:hover, #nav li li a:active {background: #777; color: #FFF; padding: 7px 10px; }

#nav li {float: left; padding: 0;}
#nav li ul {z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0;padding: 0;}

#nav li ul a {width: 140px;}
#nav li ul ul { margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

Step:2 HTML Code
Copy and paste following code to body section(wherever you want to place this dropdown menu).

<div id='NavbarMenu'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Blogger Hacks</a>
<ul>
<li>
<a href='#'>Most Popular</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Most Recent</a></li>
<li><a href='#'>Most Commented</a></li>
<li><a href='#'>Top Rated</a></li>
<li><a href='#'>All Blogger Hacks</a></li>
</ul>
</li>
<li><a href='#'>Blogger Widget</a>
<ul>
<li>
<a href='#'>Most Popular</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Most Recent</a></li>
<li><a href='#'>Most Commented</a></li>
<li><a href='#'>Top Rated</a></li>
<li><a href='#'>All Blogger Hacks</a></li>
</ul>
</li>
<li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Tag Cloud</a></li>
<li><a href='javascript:togglediv("headlines")'>Headlines</a></li>
</ul>
</div>

Final Words
I am not explaining this hack in detail, because i will be writing a detailed post about multi level drop down menu which works in all the browsers. This menu does not work well with IE. submenus don't appear on mousehover. Expect a better version soon. Leave a comment here, if you have any doubts or queries.

Labels: , ,

 

Hide or remove blogger navbar - blogger hack by wolverine hacks

Posted by Nitesh Kothari on 04 December 2008
Share this post:
 Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

2 Comments

Most of the bloggers hate blogger navbar(I'm one of them). I feel blogger navbar doesn't go well with my blog design. It is very easy to hide or remove blogger navbar using simple CSS code. Many people asked me whether its illegal to remove blogger navbar. I checked the terms and condition, but they do not mention anything about it. Anyways, lets not remove the Blogger navbar, just hide it.


copy and paste the following code to your blogger template {below <b:skin><![CDATA[/* or <b:skin>}

#navbar, #navbar-iframe { height: 0px; visibility: hidden; display: none;}

I hope this blogger hack was useful for you. So, get rid off blogger navbar and enjoy blogging. Any question? leave a comment.

Labels:

 

Subscribe to: Posts (Atom)