API tools faq
paste
Advertisement
mugendia

Animal Navigation Links [Horizontal]

mugendia
Jul 23rd, 2014 (edited)
1,108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.82 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ANIMAL NAVIGATION LINKS [Horizontal]
  4. by COCORINI (https://www.cocorini.tumblr.com)
  5. Visit the website for help on how to install this!
  6.  
  7. -->
  8.  
  9.  
  10. <!-- Part 1: Paste this after the <!DOCTYPE html PUBLIC> part in your theme code -->
  11.  
  12. <meta name="color:Cat Face" content="#de7468"/>
  13. <meta name="color:Cat Features" content="#905252"/>
  14. <meta name="color:Cat Body" content="#f8f3dd"/>
  15. <meta name="color:Cat Link Text" content="#fff"/>
  16. <meta name="color:Cat Link Background" content="#dc6060"/>
  17.  
  18. <meta name="color:Rabbit Face" content="#f99d9d"/>
  19. <meta name="color:Rabbit Features" content="#bb6363"/>
  20. <meta name="color:Rabbit Body" content="#f8f3dd"/>
  21. <meta name="color:Rabbit Link Text" content="#fff"/>
  22. <meta name="color:Rabbit Link Background" content="#e77896"/>
  23.  
  24. <meta name="color:Bear Face" content="#a3cfc8"/>
  25. <meta name="color:Bear Features" content="#729588"/>
  26. <meta name="color:Bear Body" content="#f8f3dd"/>
  27. <meta name="color:Bear Link Text" content="#fff"/>
  28. <meta name="color:Bear Link Background" content="#54aa8b"/>
  29.  
  30. <meta name="color:Panda Face" content="#c5c5c5"/>
  31. <meta name="color:Panda Features" content="#858585"/>
  32. <meta name="color:Panda Body" content="#f8f3dd"/>
  33. <meta name="color:Panda Link Text" content="#fff"/>
  34. <meta name="color:Panda Link Background" content="#7e7e7e"/>
  35.  
  36. <meta name="text:Cat Link Text" content="link 1"/>
  37. <meta name="text:Cat Link URL" content=""/>
  38. <meta name="text:Rabbit Link Text" content="link 2"/>
  39. <meta name="text:Rabbit Link URL" content=""/>
  40. <meta name="text:Bear Link Text" content="link 3"/>
  41. <meta name="text:Bear Link URL" content=""/>
  42. <meta name="text:Panda Link Text" content="link 4"/>
  43. <meta name="text:Panda Link URL" content=""/>
  44. <meta name="if:Animal Links Hover Over" content="1"/>
  45.  
  46. <!-- Part 1 End! -->
  47.  
  48.  
  49. ===================================
  50.  
  51.  
  52. /* Part 2: Paste this section (it's big!) after <style css="text/css"> in your theme code */
  53.  
  54. /* -- ANIMAL NAVIGATION LINKS -- */
  55.  
  56. #animals {
  57. z-index: 9999;
  58. position: fixed;
  59. top: 100px;
  60. left: 100px;
  61. }
  62.  
  63. /* -- CAT -- */
  64.  
  65. #cat {
  66. position: fixed;
  67. height: 45px;
  68. width: 55px;
  69. background-color: {color:Cat Face};
  70. border-radius: 55px;
  71. }
  72.  
  73. #catear1 { position: fixed; margin-top: -6px; margin-left: 6px; color: {color:Cat Face}; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); font-size: 15px; }
  74.  
  75. #catear2 { position: fixed; margin-top: -6px; margin-left: 34px; color: {color:Cat Face}; -webkit-transform: rotate(247deg); -moz-transform: rotate(247deg); -o-transform: rotate(247deg); font-size: 15px; }
  76.  
  77. #cateye1 { margin-top: 18px; margin-left: 13px; position: fixed; width: 4px; height: 4px; border-radius: 10px; background-color: {color:Cat Features}; }
  78.  
  79. #cateye2 { margin-top: 18px; margin-left: 37px; position: fixed; width: 4px; height: 4px; border-radius: 10px; background-color: {color:Cat Features}; }
  80.  
  81. #catnose { position: fixed; font-size: 6px; margin-left: 23px; margin-top: 20px; color: {color:Cat Features}; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
  82.  
  83. #catmouth1 { width: 2px; height: 3px; position: fixed; margin-left: 26px; margin-top: 27px; background-color: {color:Cat Features}; }
  84.  
  85. #catmouth2 { width: 2px; height: 5px; position: fixed; margin-left: 24px; margin-top: 29px; background-color: {color:Cat Features}; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
  86.  
  87. #catmouth3 { width: 2px; height: 5px; position: fixed; margin-left: 28px; margin-top: 29px; background-color: {color:Cat Features}; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); }
  88.  
  89. #catwhisker1 { width: 2px; height: 8px; margin-top: 22px; margin-left: 10px; position: fixed; background-color: {color:Cat Features}; border-radius: 20px; -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); }
  90.  
  91. #catwhisker2 { width: 2px; height: 8px; margin-top: 26px; margin-left: 10px; position: fixed; background-color: {color:Cat Features}; border-radius: 20px; -webkit-transform: rotate(260deg); -moz-transform: rotate(260deg); -o-transform: rotate(260deg); }
  92.  
  93. #catwhisker3 { width: 2px; height: 8px; margin-top: 22px; margin-left: 42px; position: fixed; background-color: {color:Cat Features}; border-radius: 20px; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); }
  94.  
  95. #catwhisker4 { width: 2px; height: 8px; margin-top: 26px; margin-left: 42px; position: fixed; background-color: {color:Cat Features}; border-radius: 20px; -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); }
  96.  
  97. #catbody { width: 41px; height: 80px; margin-top: 20px; margin-left: 7px; background-color: {color:Cat Face}; }
  98.  
  99. #catbody2 { width: 39px; height: 21px; margin-top: -45px; margin-left: 3px; background-color: {color:Cat Body}; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; text-align: center; }
  100.  
  101. #catbody2 a { font-family: tinytots; font-size: 8px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; color: {color:Cat Navigation Link}; }
  102.  
  103. #animaltext1 { {block:IfAnimalLinksHoverOver}opacity: 0;{/block:IfAnimalLinksHoverOver} {block:IfNotAnimalLinksHoverOver}opacity: 1;{block:IfNotAnimalLinksHoverOver} position: fixed; width: 55px; padding: 2px 0px 2px 0px; margin-top: 48px; z-index: 9999; background-color: {color:Cat Link Background}; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
  104.  
  105. #animaltext1 a { text-decoration: none; font-family: consolas; letter-spacing: 1px; font-size: 8px; text-transform: uppercase; color: {color:Cat Link Text}; }
  106.  
  107. {block:IfAnimalLinksHoverOver}#cat:hover #animaltext1 { opacity: 1; }{/block:IfAnimalLinksHoverOver}
  108.  
  109. /* -- RABBIT -- */
  110.  
  111. #rabbit {
  112. position: fixed;
  113. height: 45px;
  114. width: 55px;
  115. background-color: {color:Rabbit Face};
  116. border-radius: 55px;
  117. margin-left: 70px;
  118. }
  119.  
  120. #rabbitear1 { width: 20px; height: 40px; position: fixed; margin-top: -16px; margin-left: 5px; background-color: {color:Rabbit Face}; font-size: 15px; border-top-left-radius: 20px; border-top-right-radius: 20px; }
  121.  
  122. #rabbitear2 { width: 20px; height: 40px; position: fixed; margin-top: -16px; margin-left: 30px; background-color: {color:Rabbit Face}; font-size: 15px; border-top-left-radius: 20px; border-top-right-radius: 20px; }
  123.  
  124. #rabbiteye1 { margin-top: 18px; margin-left: 13px; position: fixed; width: 4px; height: 4px; border-radius: 10px; background-color: {color:Rabbit Features}; }
  125.  
  126. #rabbiteye2 { margin-top: 18px; margin-left: 37px; position: fixed; width: 4px; height: 4px; border-radius: 10px; background-color: {color:Rabbit Features}; }
  127.  
  128. #rabbitnose { position: fixed; font-size: 6px; margin-left: 23px; margin-top: 20px; color: {color:Rabbit Features}; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
  129.  
  130. #rabbitmouth1 { width: 2px; height: 3px; position: fixed; margin-left: 26px; margin-top: 27px; background-color: {color:Rabbit Features}; }
  131.  
  132. #rabbitmouth2 { width: 2px; height: 5px; position: fixed; margin-left: 24px; margin-top: 29px; background-color: {color:Rabbit Features}; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
  133.  
  134. #rabbitmouth3 { width: 2px; height: 5px; position: fixed; margin-left: 28px; margin-top: 29px; background-color: {color:Rabbit Features}; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); }
  135.  
  136. #rabbitbody { width: 41px; height: 80px; margin-top: 20px; margin-left: 7px; background-color: {color:Rabbit Face}; }
  137.  
  138. #rabbitbody2 { width: 39px; height: 21px; margin-top: -45px; margin-left: 3px; background-color: {color:Rabbit Body}; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; text-align: center; }
  139.  
  140. #rabbitbody2 a { font-family: tinytots; font-size: 8px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; color: {color:Rabbit Navigation Link}; }
  141.  
  142. #animaltext2 { {block:IfAnimalLinksHoverOver}opacity: 0;{/block:IfAnimalLinksHoverOver} {block:IfNotAnimalLinksHoverOver}opacity: 1;{/block:IfNotAnimalLinksHoverOver} position: fixed; width: 55px; padding: 2px 0px 2px 0px; margin-top: 48px; z-index: 9999; background-color: {color:Rabbit Link Background}; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
  143.  
  144. #animaltext2 a { text-decoration: none; font-family: consolas; letter-spacing: 1px; font-size: 8px; text-transform: uppercase; color: {color:Rabbit Link Text}; }
  145.  
  146. {block:IfAnimalLinksHoverOver}#rabbit:hover #animaltext2 { opacity: 1; }{/block:IfAnimalLinksHoverOver}
  147.  
  148. /* -- BEAR -- */
  149.  
  150. #bear {
  151. position: fixed;
  152. height: 45px;
  153. width: 55px;
  154. background-color: {color:Bear Face};
  155. border-radius: 55px;
  156. margin-left: 140px;
  157. }
  158.  
  159. #bearear1 { width: 20px; height: 20px; position: fixed; margin-top: -5px; margin-left: -1px; background-color: {color:Bear Face}; font-size: 15px; border-radius: 20px; }
  160.  
  161. #bearear2 { width: 20px; height: 20px; position: fixed; margin-top: -5px; margin-left: 35px; background-color: {color:Bear Face}; font-size: 15px; border-radius: 20px; }
  162.  
  163. #beareye1 { margin-top: 18px; margin-left: 13px; position: fixed; width: 4px; height: 4px; border-radius: 10px; background-color: {color:Bear Features}; }
  164.  
  165. #beareye2 { margin-top: 18px; margin-left: 37px; position: fixed; width: 4px; height: 4px; border-radius: 10px; background-color: {color:Bear Features}; }
  166.  
  167. #bearnose { width: 4px; height: 4px; position: fixed; margin-left: 25px; margin-top: 23px; background-color: {color:Bear Features}; border-radius: 10px; }
  168.  
  169. #bearmouth1 { width: 2px; height: 3px; position: fixed; margin-left: 26px; margin-top: 27px; background-color: {color:Bear Features}; }
  170.  
  171. #bearmouth2 { width: 2px; height: 5px; position: fixed; margin-left: 24px; margin-top: 29px; background-color: {color:Bear Features}; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
  172.  
  173. #bearmouth3 { width: 2px; height: 5px; position: fixed; margin-left: 28px; margin-top: 29px; background-color: {color:Bear Features}; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); }
  174.  
  175. #bearbody { width: 41px; height: 80px; margin-top: 20px; margin-left: 7px; background-color: {color:Bear Face}; }
  176.  
  177. #bearbody2 { width: 39px; height: 21px; margin-top: -45px; margin-left: 3px; background-color: {color:Bear Body}; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px;text-align: center; }
  178.  
  179. #bearbody2 a { font-family: tinytots; font-size: 8px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; color: {color:Bear Navigation Link}; }
  180.  
  181. #animaltext3 { {block:IfAnimalLinksHoverOver}opacity: 0;{/block:IfAnimalLinksHoverOver} {block:IfNotAnimalLinksHoverOver}opacity: 1;{/block:IfNotAnimalLinksHoverOver} position: fixed; width: 55px; padding: 2px 0px 2px 0px; margin-top: 48px; z-index: 9999; background-color: {color:Bear Link Background}; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
  182.  
  183. #animaltext3 a { text-decoration: none; font-family: consolas; letter-spacing: 1px; font-size: 8px; text-transform: uppercase; color: {color:Bear Link Text}; }
  184.  
  185. {block:IfAnimalLinksHoverOver}#bear:hover #animaltext3 { opacity: 1; }{/block:IfAnimalLinksHoverOver}
  186.  
  187. /* -- PANDA -- */
  188.  
  189. #panda {
  190. position: fixed;
  191. height: 45px;
  192. width: 55px;
  193. background-color: {color:Panda Face};
  194. border-radius: 55px;
  195. margin-left: 210px;
  196. }
  197.  
  198. #pandaear1 { width: 20px; height: 20px; position: fixed; margin-top: -5px; margin-left: -1px; background-color: {color:Panda Face}; font-size: 15px; border-radius: 20px; }
  199.  
  200. #pandaear2 { width: 20px; height: 20px; position: fixed; margin-top: -5px; margin-left: 35px; background-color: {color:Panda Face}; font-size: 15px; border-radius: 20px; }
  201.  
  202. #pandaeye1 { margin-top: 17px; margin-left: 9px; position: fixed; width: 12px; height: 8px; border-radius: 10px; background-color: {color:Panda Features}; -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); }
  203.  
  204. #pandaeye2 { margin-top: 17px; margin-left: 33px; position: fixed; width: 12px; height: 8px; border-radius: 10px; background-color: {color:Panda Features}; -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); }
  205.  
  206. #pandanose { width: 4px; height: 4px; position: fixed; margin-left: 25px; margin-top: 23px; background-color: {color:Panda Features}; border-radius: 10px; }
  207.  
  208. #pandamouth1 { width: 2px; height: 3px; position: fixed; margin-left: 26px; margin-top: 27px; background-color: {color:Panda Features}; }
  209.  
  210. #pandamouth2 { width: 2px; height: 5px; position: fixed; margin-left: 24px; margin-top: 29px; background-color: {color:Panda Features}; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
  211.  
  212. #pandamouth3 { width: 2px; height: 5px; position: fixed; margin-left: 28px; margin-top: 29px; background-color: {color:Panda Features}; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); }
  213.  
  214. #pandabody { width: 41px; height: 80px; margin-top: 20px; margin-left: 7px; background-color: {color:Panda Face}; }
  215.  
  216. #pandabody2 { width: 39px; height: 21px; margin-top: -45px; margin-left: 3px; background-color: {color:Panda Body};-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; text-align: center; }
  217.  
  218. #pandabody2 a { font-family: tinytots; font-size: 8px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; color: {color:Panda Navigation Link}; }
  219.  
  220. #animaltext4 { {block:IfAnimalLinksHoverOver}opacity: 0;{/block:IfAnimalLinksHoverOver} {block:IfNotAnimalLinksHoverOver}opacity: 1;{/block:IfNotAnimalLinksHoverOver} position: fixed; width: 55px; padding: 2px 0px 2px 0px; margin-top: 48px; z-index: 9999; background-color: {color:Panda Link Background}; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
  221.  
  222. #animaltext4 a { text-decoration: none; font-family: consolas; letter-spacing: 1px; font-size: 8px; text-transform: uppercase; color: {color:Panda Link Text}; }
  223.  
  224. {block:IfAnimalLinksHoverOver}#panda:hover #animaltext4 { opacity: 1; }{/block:IfAnimalLinksHoverOver}
  225.  
  226. /* Part 2 End! */
  227.  
  228.  
  229. ===================================
  230.  
  231.  
  232. <!-- Part 3: Paste this section after <body> in your theme code -->
  233.  
  234. <div id="animals">
  235. <!-- CAT -->
  236. <div id="cat">
  237. <div id="animaltext1"><a href="{text:Cat Link URL}">{text:Cat Link Text}</a></div>
  238. <div id="catear1">◢</div><div id="catear2">◢</div>
  239. <div id="cateye1"></div><div id="cateye2"></div>
  240. <div id="catnose">◢</div>
  241. <div id="catmouth1"></div><div id="catmouth2"></div><div id="catmouth3"></div>
  242. <div id="catwhisker1"></div><div id="catwhisker2"></div><div id="catwhisker3"></div><div id="catwhisker4"></div>
  243. </div>
  244.  
  245. <!-- RABBIT -->
  246. <div id="rabbit">
  247. <div id="animaltext2"><a href="{text:Rabbit Link URL}">{text:Rabbit Link Text}</a></div>
  248. <div id="rabbitear1"></div><div id="rabbitear2"></div>
  249. <div id="rabbiteye1"></div><div id="rabbiteye2"></div>
  250. <div id="rabbitnose">◢</div>
  251. <div id="rabbitmouth1"></div><div id="rabbitmouth2"></div><div id="rabbitmouth3"></div>
  252. </div>
  253.  
  254. <!-- BEAR -->
  255. <div id="bear">
  256. <div id="animaltext3"><a href="{text:Bear Link URL}">{text:Bear Link Text}</a></div>
  257. <div id="bearear1"></div><div id="bearear2"></div>
  258. <div id="beareye1"></div><div id="beareye2"></div>
  259. <div id="bearnose"></div>
  260. <div id="bearmouth1"></div><div id="bearmouth2"></div><div id="bearmouth3"></div>
  261. </div>
  262.  
  263. <!-- PANDA -->
  264. <div id="panda">
  265. <div id="animaltext4"><a href="{text:Panda Link URL}">{text:Panda Link Text}</a></div>
  266. <div id="pandaear1"></div><div id="pandaear2"></div>
  267. <div id="pandaeye1"></div><div id="pandaeye2"></div>
  268. <div id="pandanose"></div>
  269. <div id="pandamouth1"></div><div id="pandamouth2"></div><div id="pandamouth3"></div>
  270. </div>
  271. </div>
  272.  
  273. <!-- Part 3 End! -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!