#hover links

[themesbyrhi]

“Celestial” theme by teentide! :)

this theme comes with:

2 columns

one circular sidebar photo

6 links

adjustable description length

tooltips

one short blogtitle

“zoom-in” on post hover

preview || code

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

[themesbyrhi]

“Runaway” theme by teentide! :)

this theme comes with:

2 or 3 columns

one square sidebar photo

5 hover links

spinning links on sidebar hover

color change on link hover

short hover description

“growing” line detail

tooltips

one short length blogtitle

fly in permalinks

preview || message me for the code (include the name of the theme and you must have liked this post)

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

[octomoosey]

( for the ‘in general’ anon XD )

there are a few tutorials out there around installing and styling hoverlinks - this is a quick run down of how i do it - with credit to the original code and jquery by malihu -- -  onward, friend...

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! ♥

NB/ if you copy and paste from this post, you will have to delete and retype all of your quotation marks - tumblr messes up quotations when copying from a post into the html editor!

[octomoosey]

Hey. First of all, your themes are awesome. :) Second, I'd like to ask something if it's okay. I'm not sure what this is called, the thing where you hover on a link and there'll be something to tell you what that link is about (google say it's called tooltip?). How do you customize them? I notice the js file. Is that yours or you get it somewhere? I found jquery qtip through qoogle but I keep failing at trying it myself. I thought I ask. Sorry about my English. I suck at describing things.

hi there anon, no worries - there are a lot of really nice tutorials out there already for making and customising tooltips on tumblr... check out some of these, they’re p awesome and very helpful.  most of these include links to full code including the script and the css you will use to style them :3   hopefully you’ll be up and running with tooltips in no time!  

by tutorialbaby

by tumblrtutoriial

by koosui

by minewt

and the pure code by neonbikethemes

hope this helps!

[htmlqueens]

popup links layouts by costalies

here are a few link layouts that i found, but for these to work you must have popup already installed, if not, here is a tutorial. hope you like them!

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

c o d e

[jesuschryst]

how did you make a picture a link with a hover desc? i have the code to make a picture a link and the code to make a picture have a hover desc but i want it to be both like yours. can you help me out?

are you talking about the “ad” picture on my blog or my friends page bc theyre completely different but its pretty simple really!

just add title like this:

title=”hover desc here” href=”link here”><img src=”img link here”>

im sorry if im too late!

[rebecca-themes]

Theme Loveable by Cajoling. This theme's features are:

one blogtitle

dashed sidebar

name under answers

two columns

top bar desc

rounded posts (optional)

hover links

mini cursor

LIKE IS YOUR USING OR PLANNING ON USING

Preview {}  Preview 2 {} Code

[rebecca-themes]

Theme 12,Broken by Rebutting. This theme's features are:

two columns

hover description

circular links

links spin on hover

font family on title specialized 

PLEASE LIKE IF YOUR USING OR PLANNING ON USING!

Preview {} Code