#link codes

If you don't already have a popup ask, install one by following the directions here.

To add another popup, paste the chunk of coding you posted below </body> and change the div id="02" to div id="08", and create a link in your header links that says:

<a href="#?w=500" rel="08" class="poplight">Links</a>

Okay, so now you have your links popup but you don't have any content. 

If you want your links in boxes, add this code under <style>

.poplinktitle{ font-size: 24px;}

.poplinks a{ margin: 10px; margin-top: 30px; border: 1px solid #000; /*change your border */ border-radius: 25px 0px 25px 0px; /*border radius*/ background-image:url(BACKGROUND IMAGE URL); /*change your background image*/ padding: 10px; /*change how big they are around the word*/

font-size: 18px; -webkit-transition: 0.6s ease-in; -moz-transition: 0.6s ease-in; transition: 0.6s ease-in; /*how fast the hover transition is*/ }

.poplinks a:hover{ border-radius: 0px 25px 0px 25px; /*the border hover effect*/ -webkit-transition: 0.6s ease-in; -moz-transition: 0.6s ease-in; transition: 0.6s ease-in;}

In the content part of the popup (under </body>, under <div id="08" class="popup_block">), paste this code:

<center><div class="poplinktitle">links</div></center>

<br><center><br>

<div class="poplinks"> <a href="/">ONE</a> <a href="/"> TWO</a> <a href="/">THREE</a><br><br><br> <a href="/">FOUR</a> <a href="/">FIVE</a> <a href="/">SIX</a></div></center><br>

IF YOU WANT MORE THAN SIX LINKS, READ ON:

Every three links, add a <br><br><br> 

Add the next link code in the series

<a href="/">LINK TITLE</a>

right after the </a> of the sixth link.

Inspired by tutorial-baby xx

add this to your a.hover{ code

text-shadow: 0 0 0.3em #FF63E2;

you can change the colour code by replacing #FF63E2 with a different html colour code (go here for them)

Create a link: <a href="url here"> text here</a>

Image: <img src="url image here>

This is newly popular on tumblr, and although there is an easy html way to do this with title, i wanted to post a way that you can style them using the popular Tool Tip method

Now first add this code to your <style> or <Style type="text/css"> tag

a.tip span { display: none } a.tip:hover span { border: #fcf 3px solid; /*Change border color, style, and width*/ padding: 5px; text-align: center; display: block; z-index: 100; background: #fff; /*Change background color here*/ margin: 10px; max-width: 200px; position: absolute; top: 15px; box-shadow: 10px 10px 5px #888888; }

Now just paste this code where you want the link

<a href="#" class="tip">LINK TITLE<span>DESCRIPTION HERE</span></a>

And if you are still confused. here is a link where can view and play with code here

Okay first of all for this tutorial, if you want to use a custom font, you have to have it already installed, 

here is a tutorial on how to that

Now to change the font on hover, find your link code

It should be either a { or a:link, press ctrl+f to search for it.

Now insert this code under the a:link or a code

font-family: 'The Name of your font here';

and then insert this code under your a:hover code

Live View

Paste this code in your a:hover div inbetween the brackets { } Press cntrl+f to search for it

Live View

Put this code in your a:hover div (press ctrl+f to search for it in your coding)  DO NOT make another a:hover code, put this in the one your already have!!!