Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
ā Live Streamingā Interactive Chatā Private Showsā HD Quality
Anya is LIVE right now
FREE
Free to watch ⢠No registration required ⢠HD streaming
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">
[ 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
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!
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! Ā
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
ā Live Streamingā Interactive Chatā Private Showsā HD Quality
Anya is LIVE right now
FREE
Free to watch ⢠No registration required ⢠HD streaming
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ā>