Wednesday, January 27, 2010

Elegant pop up title for your link




Elegant link pop up title for your links in your blog...


------------- STEPS -------------

Step 1
- As usual, go to Layout > Edit HTML

Step 2
- Then use Ctrl+F shortcut key to find this ]]></b:skin> code tag

Step 3
- Paste this below code above the ]]></b:skin> code tag:

/* Titlepopup by syafzpic.com */ 
#titlepopup{
    background:#323232;/*titlepopup background color*/
    color:#f1f1f1;/*titlepopup font color*/

    padding:2px 5px;
    z-index: 20;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 5px;
    -moz-opacity: .87;

    border:none;
    display:none;
    position:absolute;
}    


Step 4
- Paste this script code link in your <head> area or just paste it above the </head>


<script src="http://s2.sigmirror.com/files/53531_qbkj8/jquery.js" type="text/javascript"></script>
<script src="http://s2.sigmirror.com/files/53732_zbfhp/nice_appears.js" type="text/javascript"></script>



Step 5
- Save your template

Step 6
- Just use this code in any link that you wanted the popup title to be appear

<a href="PUT URL HERE" class="titlepopup" title="PUT THE URL TITLE HERE ">URL Name Here</a>

  • PUT URL HERE = Replace this with URL link, for example: http://blogging-style.blogspot.com
  • PUT THE URL TITLE HERE  = Replace this with the pop up title, for example: Visit me again.
  • URL Name Here = Replace this with the name of your URL, for example: Blogger Tips and Style  




----------------------- Finished ------------------------

Example link with title pop up code:
<a href="http://www.syafzpic.com" class="titlepopup" title="Visit me at syafzpic.com ">SyafzPic</a>

Result = mouse-over to this word, SyafzPic



0 comments:

Post a Comment

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template