How to set up a tooltip with javascript

Let this tutorial to make you curious, you try your mouse over the text below. How to set up a tooltip with javascript When you point the mouse in the text above for a while, then you will see a display box containing a description that describes the contents of the text. Box that appears is called tooltips. Then how do I create a tooltip like the above? For that follow this tutorial to complete.

To create a tooltip above we need the javascript code. For script code you can see in the box below.

<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip
var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image
document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script> 

Code above the script and style before you put it hosted. If you use blogger, then you can use javascript like the suggestion to put on a post in blogger javascript hosting solutions. for code style can be combined with a blog style code above . 

After the javascript code and style has been placed correctly, we then we put the tooltip code in place that we want. For example we want to put a tooltip on the referral link. That would make the reader more interested in joining our referral. For example we want to put a tooltip on How to set tooltip text with javascript. So the result becomes as follows. The code that we put on a link:

onmouseover="ddrivetip('tutorial how to put a tooltip that make the text more interesting.', 240)" onmouseout="hideddrivetip()"

description: red = text that you want appears in the tooltip Blue = width of the box as a whole we want to be like the following code. 

onmouseover="ddrivetip('tutorial how to put a tooltip that make the text more interesting.', 240)" onmouseout="hideddrivetip()" href="http://www.hatsadz-lamp.tk/2010/02/how-to-put-a-tooltip-by-javascript.html" target="_blank">How to install a tooltip with javascript

so that code can we put on the refferal link, banner or other. to change the background color of the box can be done through css style above.

 

Read More - How to set up a tooltip with javascript

Step Three Rounded Corner

There are three common ways used by the designer if you want to form a rounded background (ellipse) or something that clearly is a cool name Rounded Corner. Nilanya expressed by radius. And because it uses basic CSS selector ranging from property to, this trick can be used on all templates and themes.


1. Stating Background As Direct Images
The percentage of usage can be up to 40%. This is the easiest stage of the three stages which I will explain. There are three extensions that are often used:

    * PNG: Usually used if the background behind it but not the color images. Storing images with this extension can be made transparent effect on the rounded part. All the major browsers already support PNG transparency except IE6.
    * GIF: Almost similar to the extension of PNG, only produced poor-quality image even with a smaller size so that the loading pretty quickly.
    * JPG: Used if the designer already knows the background color of the target. Since this extension does not support transparency, so if the images created in photoshop (* transparent background) and saved with this extension, the background will become white.

There are interesting from the third party tools that provide manufacturing services for free Corners rounded. Just try to visit http://www.roundedcornr.com

Examples of its application can be seen in the quote ID CSS below ==>

#menubottom{
width:100%;
margin:0 0 0px;
height:46px;
background:#40534a url(http://img706.imageshack.us/img706/8813/navmenu2radius7.png) no-repeat;
}

2. Property
In addition to step one above, this is the second easiest. Even easier to say, if for those who can not use Photoshop. From some of my surgical templates, presentation of the use of this property could achieve the 35%. Some of the major browsers (Mozilla, Chrome, Safari and Opera) are supported except for the IE family. 

 
The following properties are:

• moz-border-radius:7px; /* untuk mozilla FF & Universal*/
• webkit-border-radius:7px; /* untuk Safari */

Examples of its application can be seen on CSS excerpts below ==>

#header1{
background: #8a9c8e;
margin: 10px 0;
text-align: center;
color:$pagetitlecolor;
width:490px;
height:90px;
float:right;
overflow:hidden;
-moz-border-radius:7px;
-webkit-border-radius:7px;



3. CSS Selector
How pretty complicated. Perhaps because of that, how is rarely used in personal-based template design. Though complicated, but works well on all browsers. Stages still utilize the saved images with a certain extension (* note Step 1 above). The position is governed by the CSS peletakannya hereinafter called an HTML section. There is one blog that has never explained the application of this method. I've forgotten who the author, a clear link is here. Sorry, I can not explain here because it's too long ...


Setting margins / padding is very influential. My advice, better air-margin value "0" (zero).

Read More - Step Three Rounded Corner

Next Showing Comments Blogger for over 200 comments

We who use Blogger Custom Templates are usually not too much attention to this Comment Next issue, this problem usually only discovered after a number of blog comments we've exceeded the number 200. I always got surprised too see how much my blog comments that should display more than 500 comments and it turns out the bloggers themselves are only limited to only 200 comments per article, the rest of bloggers ask users to see pages that displayed advanced bedasarkan number of comments and links to pages comments newer. You can see an example in the picture below.


The absence of these facilities Next Comment on Custom Template old also not the fault of the previous template creator, I can say this because the bloggers themselves who some time ago just to renew this facility, as a result of long-template tempate not even show support for this facility. But do not worry, to add facilities Next Comment is not so difficult really, just follow the tutorial below:

First look for the code below, oh yeah do not forget to check the Expand Widget Templates.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

If you have found Copas wrote all the code below , thenput it right under the code above

 <b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

In the same way, Copas back all the above code, then look back code below and place the code we have just Copas was right above the code below.

<p class='comment-footer'>

Please be saved, oh yes, unfortunately we can not see the results unless there are comments on our blog which has reached more than 200.

Finish the tutorial above actually, but if you want to display the different views using the Custom CSS in Blogger Next Comment, we can use the CSS code below: 

.paging-control-container
{
float: right;
margin-top: 0pt;
margin-right: 6px;
margin-bottom: 0pt;
margin-left: 0pt;
font-size: 11px;
font-weight:bold;
} 

As usual, to install the CSS code just above the live input of CSS code in an existing row in the Edit HTML page, save it and see the results.

Read More - Next Showing Comments Blogger for over 200 comments

Blogger Navbar Support with Transparent Color

Blogger re-fix the system display Navigation Bar at them, if the first blogger navbar only provide a choice of 4 traditional colors of Blue, Black, Tan and silver, now two more bloggers to add a new color scheme that is "Transparent Light" and "Transparent Dark."



This new color scheme utilizing the ability of modern browsers to provide transparency (a technique known to web designers as "alpha blending"). This allows us to integrate with the navbar background color background blog today. "Transparent Light" has a semi-transparent color scheme with white background, resulting in subtle pastel colors, while the background "Transparent Dark" is semi-transparent black color that produces a shaded appearance.

Read More - Blogger Navbar Support with Transparent Color

How to sign up for Gmail

Before applying to the Blogger service should we have to have a Gmail address. What is Gmail? Gmail or Google Mail is one of the email service of Google products, where this email address will be used as the name of User Name at the time we log into Blogger. Why Gmail? Because if you use other email service Gmail will not support with Blogger, so it's a must if you want to create a blog in blogger must have email addresses in Gmail. If you do not have a Gmail account I'll teach you easy steps or how to register these kelayanan. Steps to register for Gmail is: First we do is run a web browser, here we are using the Firefox browser as its web client. After typing it in the Address Bar http://www.gmail.com do not forget to press enter.

If the page has been opened, on that page click Sign up for Gmail This means we as a new user who will perform the registration process first.

Next on the page will appear "seek An Account" Here we are asked to enter some personal data. Input data in accordance with directions or instructions they (Gmail).

Example input data:

First Name: Enter the name of our first
Last Name: Enter the last name of our
Desired Login Name: This is a name we will e-mail
Choose a password: enter password / keyword at least 8 characters
Enter again: Enter the same password as above
Secret Question: Select the questions that exist (this is needed if we forget our password)
Answer: feedback responses (to remember this answer if it should be noted)
Secondary Email: not optional but if we have another email address we can include it.
Location: Where you are now
Word Verification: enter numbers or letters in accordance with the drawings underneath (The picture looks a bit strange and abstract)

If you have to enter data on click the button "I Accept. Create my account "until the stage of making e-mail here is complete.

 

If no error then the process of making our email successfully. Note the email address and your password in a safe place.

Congratulations you already have an email address from Gmail service. Well this is the email address which will be used later to apply to the Blogger service.

Read More - How to sign up for Gmail