API tools faq
paste
Advertisement
lostmemento

[Old Page] Follow Forever v4 (Circles)

lostmemento
Mar 14th, 2012
2,134
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.  
  8. <!-- DO NOT REMOVE
  9.  
  10. FOLLOW FOREVER BLOG ROLL v4 MADE BY: http://lostmemento.tumblr.com (lmthemes)
  11.  
  12. -->
  13.  
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}"/> {/block:Description}
  20. <link rel="shortcut icon" href="{Favicon}" />
  21. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  23.  
  24. <style type="text/css">
  25. body {background-color: #f9f9f9;
  26. background-attachment: fixed;
  27. font-family: 'Tinos', Calibri, Helvetica;
  28. margin: 0px;}
  29.  
  30. a {text-decoration: none;}
  31.  
  32. #top {width: 100%;
  33. background-color: #fff; /* Edit this to change the background color of the top bar */
  34. font-size: 7px; /* Edit this to change how the font size of the top bar */
  35. letter-spacing: 1px; /* Edit this to change the letter spacing between letters of the text in the top bar */
  36. position: fixed;}
  37.  
  38. .fyi {color: #fafafa; /* Edit this to change the font color of where it says HOVER */
  39. position: absolute;
  40. font-size: 36px; /* Edit this to change teh font size of where it says HOVER */
  41. z-index: 0;
  42. margin-left: -15px; /* YOU MUST EDIT THIS if you change the font size this is to "center" the text */}
  43.  
  44. .icon {width: 100px;
  45. margin: auto;
  46. height: 100px;
  47. color: #7a7a7a; /* Edit this to change the text color of the top bar */}
  48.  
  49. .icon a:active, .icon a:visited, .icon a:link {color: #7a7a7a; /* Edit this to change the text color of the links in the top bar */}
  50.  
  51. .mainblogbox {width: 80px;
  52. margin: auto;
  53. text-align: center;
  54. margin-top: 30px;}
  55.  
  56. .ichover {height: 100px;
  57. width: 300px;}
  58.  
  59. .ichover:hover .lefticon {transition-duration: 2s;
  60. -moz-transition-duration: 2s;
  61. -webkit-transition-duration: 2s;
  62. -o-transition-duration: 2s;
  63. text-align: center;
  64. background-color: #fff; /* THIS SHOULD BE THE SAME AS THE #top SECTION'S BACKGROUND COLOR */
  65. width: 100px;
  66. height: 100px;
  67. margin-left: -100px;
  68. opacity: 1.0}
  69.  
  70. .ichover:hover .righticon {transition-duration: 2s;
  71. -moz-transition-duration: 2s;
  72. -webkit-transition-duration: 2s;
  73. -o-transition-duration: 2s;
  74. text-align: center;
  75. background-color: #fff; /* THIS SHOULD BE THE SAME AS THE #top SECTION'S BACKGROUND COLOR */
  76. width: 100px;
  77. height: 100px;
  78. margin-left: 100px;
  79. opacity: 1.0}
  80.  
  81. .lefticon, .righticon {position: absolute;
  82. transition-duration: 2s;
  83. -moz-transition-duration: 2s;
  84. -webkit-transition-duration: 2s;
  85. -o-transition-duration: 2s;
  86. text-align: center;
  87. background-color: transparent;
  88. color: white;
  89. width: 100px;
  90. height: 100px; z-index: 0; opacity: 0.0;}
  91.  
  92. .mainicon {margin-top: 25px;
  93. z-index: 1;
  94. position: relative;}
  95.  
  96. .mainhide {opacity: 1.0;
  97. transition-duration: 0.6s;
  98. -moz-transition-duration: 0.6s;
  99. -webkit-transition-duration: 0.6s;
  100. -o-transition-duration: 0.6s;}
  101.  
  102. .ichover:hover .mainhide {opacity: 0.0;
  103. transition-duration: 0.6s;
  104. -moz-transition-duration: 0.6s;
  105. -webkit-transition-duration: 0.6s;
  106. -o-transition-duration: 0.6s;}
  107.  
  108. /* REMOVING THE CREDIT VIOLATES THE TERMS OF USAGE */
  109. .credit {position: absolute;
  110. opacity: 0.0;
  111. text-align: center;
  112. width: 100px;
  113. z-index: 1;
  114. padding-top: 30px;
  115. transition-duration: 0.6s;
  116. -moz-transition-duration: 0.6s;
  117. -webkit-transition-duration: 0.6s;
  118. -o-transition-duration: 0.6s; }
  119.  
  120. .ichover:hover .credit {opacity: 1.0;
  121. transition-duration: 0.6s;
  122. -moz-transition-duration: 0.6s;
  123. -webkit-transition-duration: 0.6s;
  124. -o-transition-duration: 0.6s;
  125. background-color: #fff /* THIS SHOULD BE THE SAME AS THE #top SECTION'S BACKGROUND COLOR */}
  126.  
  127. /* ICON BOX */
  128. #container {height: 100%;
  129. margin: auto;
  130. padding: 10px;
  131. text-align: center;
  132. overflow-y: auto;
  133. padding-top: 130px /* Edit this to change how far the first icon is from the top bar */}
  134.  
  135. .iconsbox {width: 525px; /* Edit this to change how many icons are in a row */
  136. margin:auto;}
  137.  
  138. .iconsdesch {display: inline-block;
  139. border: 3px solid #fff; /* Edit this to change if there is a border and what color the border is */
  140. -webkit-border-radius: 150px;
  141. -moz-border-radius: 150px;
  142. border-radius: 150px;}
  143.  
  144. .iconsdesch img {-webkit-border-radius: 150px;
  145. -moz-border-radius: 150px;
  146. border-radius: 150px;}
  147.  
  148. .iconsdesch:hover .iconsdesc {opacity: 1.0;
  149. height: 30px;
  150. width: 30px;
  151. background-color: transparent;
  152. transition-duration: 0.6s;
  153. -moz-transition-duration: 0.6s;
  154. -webkit-transition-duration: 0.6s;
  155. -o-transition-duration: 0.6s;
  156. font-size: 7px;
  157. font-family: 'Tinos';
  158. letter-spacing: 1px;}
  159.  
  160. .iconsdesc {opacity: 0.0;
  161. position: absolute;
  162. height: 30px;
  163. width: 0px;
  164. font-size: 0px;
  165. transition-duration: 0.6s;
  166. -moz-transition-duration: 0.6s;
  167. -webkit-transition-duration: 0.6s;
  168. -o-transition-duration: 0.6s;
  169. margin-left: -17px;
  170. margin-top: -20px}
  171.  
  172. .iconsdesch:hover .iconsdesc img {height: 65px; width: 65px; position: relative; left: 5px;}
  173.  
  174. .iconsdesc img {height: 0px;
  175. border: 0px;}
  176.  
  177. .iconsdesch:hover .icslnk {width: 65px;
  178. padding: 5px;
  179. background-color: #fff;}
  180.  
  181. .icslnk a:link, .icslnk a:visited, .icslnk a:active {background-color: #fff;
  182. width: 30px;
  183. max-width: 30px;
  184. text-transform: uppercase;
  185. word-wrap: break-word;
  186. color: #151515}
  187.  
  188. #bottom {width: 100%; background-color: #fff; font-size: 7px; letter-spacing: 1px; position: fixed; bottom: 0px; text-align: center; padding: 10px 0px;}
  189.  
  190. #bottom a:link, #bottom a:visited, #bottom a:active {color: #151515}
  191. </style>
  192. </head>
  193.  
  194. <body>
  195.  
  196. <div id="top">
  197. <center><div class="ichover">
  198.  
  199. <div class="icon"><div class="fyi">HOVER</div>
  200.  
  201. <div class="lefticon"><div class="mainblogbox">
  202. <a href="/"><img src="{PortraitURL-24}" style="margin-bottom: 2px"><br>BACK</a></div></div>
  203.  
  204. <div class="righticon"><div class="mainblogbox">
  205. <a href="http://www.tumblr.com/dashboard"><img src="http://i42.tinypic.com/99fosh.png" height="24px" style="margin-bottom: 2px"><br>
  206. DASH</a></div></div>
  207.  
  208. <div class="credit"><a href="http://lmthemes.tumblr.com">
  209. <img src="http://static.tumblr.com/bkd4m5b/kRDm3vhr3/lmthemeslogoxsml_copy.png"><br>CREDIT</a></div>
  210.  
  211. <div class="mainhide"><img src="{PortraitURL-30}" class="mainicon" style="margin-bottom: 2px"><br>
  212. YOUR OWN TITLE HERE</div>
  213.  
  214. </div></div></center></div>
  215.  
  216.  
  217. <div id="container"> <div class="iconsbox">
  218.  
  219. {block:Following}
  220. {block:Followed}<div class="iconsdesch">
  221. <div class="iconsdesc"><a href="{FollowedURL}"><img src="{FollowedPortraitURL-96}" title="{FollowedName}"></a><br><div class="icslnk"><a href="{FollowedURL}">{FollowedName}</a></div></div>
  222. <img src="{FollowedPortraitURL-40}"></div>
  223. {/block:Followed}{/block:Following}
  224. </div> </div>
  225.  
  226.  
  227. </body></html>
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!