#hover links

usually there are two different kinds of links that you can include on your blog...

1. ‘full links’ - where you have the full word or description of the link on display - like so - 

2. ‘hover links’ - where you can have a symbol, or a number, or a roman numeral, or maybe even a letter as the links, and when your visitors hover their mouse over these links, there is a little hover info activated which tells them where the link leads...like so - 

or

- so this is a ‘how to’ make the second kind of link ( hover links ) on your blog...

installing the code

the jquery code for tooltips comes from the demo by malihu.

1. up in the top section of your code, you will need to paste three things - make sure this goes into your code ABOVE <style type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

[ the minimum jquery required to run this script from google ]

<script src="http://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>

[ the ‘style my tooltips’ js file from malihu ( which i’ve uploaded for you, so you don’t need to do it again... ]

<script> (function($){ $(document).ready(function(){ $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:90, tip_fade_speed:700, attribute:"title" }); }); })(jQuery); </script>

[ the script for actually calling the tooltips from malihu ]

change the delay time and the fade speed to suit your preferences... ( in milliseconds O_O )  the original code has been changed from "[title]" to "a[title]" so that it works on links and not just text...

2. in the next section of your code ( the css bit which is mostly orange and yellow ) - between <style type="text/css"> and </style></head> paste the next bit of code - this is how your hover information will be styled ( i’ve added some extra to help explain the styling XD )

#s-m-t-tooltip {    max-width:300px;    border-radius: 0px; /* you can add in a border radius here for curved corners if you like */    padding:4px; /* space around the text */    margin:5px 10px 5px 0px; /* positioning of your hover info in relation to the link */    color:#fff; /* text color */    border:1px solid #fff; /* optional border and border color */    font-family: 'Fjalla One', sans-serif; /* i’ve added a custom font in here but you can remove this line if you don’t use custom fonts */    font-size:10px; /* font size of your hover info */    letter-spacing:2px; /* optional letter spacing */    background:#000; /* change the background color of your hover info */    z-index:99999;}

3. now you can add your hover links to your blog - in your html section you probably already have something like this

<a href=“/”>home</a> <a href=“/ask”>ask</a> <a href=“/submit”>submit</a> <a href=“/archive”>archive</a>

these are currently full links.  to change them into hover links, we need to tweak them a little - 

<a href="/" title="home">i</a> <a href=“/ask” title="ask">ii</a> <a href=“/submit” title="submit">iii</a> <a href=“/archive” title="archive">iv</a>

the ‘title=“home”’ part is the info for the link that will show on hover.  and the roman numerals will be our actual links.

if you want these to be symbols, rather than letters or numbers, just paste in the symbol you want... e.g. 

<a href="/" title="home">★</a> <a href=“/ask” title="ask">★</a> <a href=“/submit” title="submit">★</a> <a href=“/archive” title="archive">★</a>

if you’re looking for symbols to use - just google ‘tumblr symbols’ for sites which you can just cut and paste from!  here’s a couple to get you started... [ x ] [ x ] 

voila!  hoverlinks -

if this helped at all, a like or reblog would be super lovely - thanks! ♥

LAYOUT #1

c o d e

LAYOUT #2

c o d e

LAYOUT #3

c o d e

LAYOUT #4

c o d e

LAYOUT #5

c o d e

LAYOUT #6

c o d e

LAYOUT #7

c o d e

LAYOUT #8

c o d e

LAYOUT #9