Constellations...

Hello everyone, this is just a very basic tutorial on how to change the planetary links’ backgrounds to have images instead.  If the code doesn’t work, or if you have any further questions- please feel free to send me an ask on kanexis.tumblr.com.  I’ll try to rectify the issue as soon as possible. 

If you have trouble viewing the complete code, go to:

http://pastebin.com/4vYyfWQq

<!--First of all...

Insert the following code after <!---- Customizable Metalinks --->:-->

<meta name="image:planet1img" content=""/>

<meta name="image:planet1ximg" content=""/>

<meta name="image:planet2img" content=""/>

<meta name="image:planet2ximg" content=""/>

<meta name="image:planet3img" content=""/>

<meta name="image:planet3ximg" content=""/>

<meta name="image:planet3x2img" content=""/>

<meta name="image:planet4img" content=""/>

<meta name="image:planet4ximg" content=""/>

<meta name="image:planet5img" content=""/>

<meta name="image:planet5ximg" content=""/>

<!--Next- delete the code from-

/*planets*/

/*For customization of planets /not included in metalinks/ */

/*planet1*/

to /*-end of p5x-*/-->

And then replace with the following code:

#planet1 {

   margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet1img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(350px);

   -moz-transform: translateX(350px);

   -o-transform: translateX(350px);

   transform: translateX(350px);

       -webkit-animation: myOrbit 26s linear infinite;

      -moz-animation: myOrbit 26s linear infinite;

        -o-animation: myOrbit 26s linear infinite;

           animation: myOrbit 26s linear infinite;

           }

           @-webkit-keyframes myOrbit {

   from { -webkit-transform: rotate(0deg) translateX(350px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(350px) rotate(-360deg); }

}

@-moz-keyframes myOrbit {

   from { -moz-transform: rotate(0deg) translateX(350px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(350px) rotate(-360deg); }

}

@-o-keyframes myOrbit {

   from { -o-transform: rotate(0deg) translateX(350px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(350px) rotate(-360deg); }

}

@keyframes myOrbit {

   from { transform: rotate(360deg) translateX(350px) rotate(-360deg); }

   to   { transform: rotate(0deg) translateX(350px) rotate(0deg); }

}

#planet1:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p1-*/

/*planet1x*/

#planet1x {

   margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet1ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(350px);

   -moz-transform: translateX(350px);

   -o-transform: translateX(350px);

   transform: translateX(350px);

       -webkit-animation: myOrbit 20s linear infinite;

      -moz-animation: myOrbit 20s linear infinite;

        -o-animation: myOrbit 20s linear infinite;

           animation: myOrbit 20s linear infinite;

           }

#planet1x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-20px;

   margin-left:-20px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p1x-*/

/*planet2*/

#planet2 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet2img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(400px);

   -moz-transform: translateX(400px);

   -o-transform: translateX(400px);

   transform: translateX(400px);

       -webkit-animation: myOrbit2 26s linear infinite;

      -moz-animation: myOrbit2 26s linear infinite;

        -o-animation: myOrbit2 26s linear infinite;

           animation: myOrbit2 26s linear infinite;

           }

           @-webkit-keyframes myOrbit2 {

   from { -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

@-moz-keyframes myOrbit2 {

   from { -moz-transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

@-o-keyframes myOrbit2 {

   from { -o-transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

@keyframes myOrbit2 {

   from { transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

#planet2:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p2-*/

/*planet2x*/

#planet2x {

      margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet2ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(400px);

   -moz-transform: translateX(400px);

   -o-transform: translateX(400px);

   transform: translateX(400px);

       -webkit-animation: myOrbit2 46s linear infinite;

      -moz-animation: myOrbit2 46s linear infinite;

        -o-animation: myOrbit2 46s linear infinite;

           animation: myOrbit2 46s linear infinite;

           }

#planet2x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p2x-*/

/*planet3*/

#planet3 {

      margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet3img});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(430px);

   -moz-transform: translateX(430px);

   -o-transform: translateX(430px);

   transform: translateX(430px);

       -webkit-animation: myOrbit3 46s linear infinite;

      -moz-animation: myOrbit3 46s linear infinite;

        -o-animation: myOrbit3 46s linear infinite;

           animation: myOrbit3 46s linear infinite;

           }

           @-webkit-keyframes myOrbit3 {

   from { -webkit-transform: rotate(0deg) translateX(430px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(430px) rotate(-360deg); }

}

@-moz-keyframes myOrbit3 {

   from { -moz-transform: rotate(0deg) translateX(430px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(430px) rotate(-360deg); }

}

@-o-keyframes myOrbit3 {

   from { -o-transform: rotate(0deg) translateX(430px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(430px) rotate(-360deg); }

}

@keyframes myOrbit3 {

   from { transform: rotate(360deg) translateX(430px) rotate(-360deg); }

   to   { transform: rotate(0deg) translateX(430px) rotate(0deg); }

}

#planet3:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p3-*/

/*planet3x*/

#planet3x {

      margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet3ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(430px);

   -moz-transform: translateX(430px);

   -o-transform: translateX(430px);

   transform: translateX(430px);

       -webkit-animation: myOrbit3 28s linear infinite;

      -moz-animation: myOrbit3 28s linear infinite;

        -o-animation: myOrbit3 28s linear infinite;

           animation: myOrbit3 28s linear infinite;

           }

#planet3x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p3x-*/

/*planet3*/

#planet3x2 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet3x2img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(430px);

   -moz-transform: translateX(430px);

   -o-transform: translateX(430px);

   transform: translateX(430px);

       -webkit-animation: myOrbit3 38s linear infinite;

      -moz-animation: myOrbit3 38s linear infinite;

        -o-animation: myOrbit3 38s linear infinite;

           animation: myOrbit3 38s linear infinite;

           }

#planet3x2:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p3x2-*/

/*planet4*/

#planet4 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet4img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(465px);

   -moz-transform: translateX(465px);

   -o-transform: translateX(465px);

   transform: translateX(465px);

       -webkit-animation: myOrbit4 60s linear infinite;

      -moz-animation: myOrbit4 60s linear infinite;

        -o-animation: myOrbit4 60s linear infinite;

           animation: myOrbit4 60s linear infinite;

           }

           @-webkit-keyframes myOrbit4 {

   from { -webkit-transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

@-moz-keyframes myOrbit4 {

   from { -moz-transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

@-o-keyframes myOrbit4 {

   from { -o-transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

@keyframes myOrbit4 {

   from { transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

#planet4:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p4-*/

/*planet4x*/

#planet4x {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet4ximg});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(465px);

   -moz-transform: translateX(465px);

   -o-transform: translateX(465px);

   transform: translateX(465px);

       -webkit-animation: myOrbit4 24s linear infinite;

      -moz-animation: myOrbit4 24s linear infinite;

        -o-animation: myOrbit4 24s linear infinite;

           animation: myOrbit4 24s linear infinite;

           }

#planet4x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p4x-*/

/*planet5*/

#planet5 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet5img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(530px);

   -moz-transform: translateX(530px);

   -o-transform: translateX(530px);

   transform: translateX(530px);

       -webkit-animation: myOrbit5 20s linear infinite;

      -moz-animation: myOrbit5 20s linear infinite;

        -o-animation: myOrbit5 20s linear infinite;

           animation: myOrbit5 20s linear infinite;

           }

           @-webkit-keyframes myOrbit5 {

   from { -webkit-transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

@-moz-keyframes myOrbit5 {

   from { -moz-transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

@-o-keyframes myOrbit5 {

   from { -o-transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

@keyframes myOrbit5 {

   from { transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

#planet5:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p5-*/

/*planet5x*/

#planet5x {

   margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet5ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(530px);

   -moz-transform: translateX(530px);

   -o-transform: translateX(530px);

   transform: translateX(530px);

       -webkit-animation: myOrbit5 28s linear infinite;

      -moz-animation: myOrbit5 28s linear infinite;

        -o-animation: myOrbit5 28s linear infinite;

           animation: myOrbit5 28s linear infinite;

           }

#planet5x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p5x-*/

To see a World in a Grain of Sand And a Heaven in a Wild Flower, Hold Infinity in the palm of your hand And Eternity in an hour.

A Robin Redbreast in a Cage Puts all Heaven in a Rage. A dove house fill’d with doves and pigeons Shudders Hell thro’ all its regions. A Dog starv’d at his Master’s Gate Predicts the ruin of the State. A Horse misus’d upon the Road Calls to Heaven for Human blood. Each outcry of the hunted Hare A fiber from the Brain does tear.

He who shall train the Horse to War Shall never pass the Polar Bar. The Beggar’s Dog and Widow’s Cat, Feed them and thou wilt grow fat. The Gnat that sings his Summer song Poison gets from Slander’s tongue. The poison of the Snake and Newt Is the sweat of Envy’s Foot.

A truth that’s told with bad intent Beats all the Lies you can invent. It is right it should be so; Man was made for Joy and Woe; And when this we rightly know Thro’ the World we safely go.

Every Night and every Morn Some to Misery are Born. Every Morn and every Night Some are Born to sweet delight. Some are Born to sweet delight, Some are Born to Endless Night.