API tools faq
paste
alydae

blogroll i

alydae
Dec 2nd, 2015 (edited)
8,601
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. BLOGROLL I
  7. by alydae
  8.  
  9. released: december 2, 2015
  10. last updated: september 10, 2023
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15. - turn on following in settings for blogs to show
  16. - a revamped version can be found here
  17. https://enchantedthemes.tumblr.com/private/159715981421/tumblr_oolyfhpUMc1ujvrvy
  18.  
  19. thank you for using!!!
  20.  
  21. *base code by salazhar/azurethemes
  22.  
  23. -->
  24.  
  25. <title>blogroll</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28. <!---tooltips script--->
  29. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  30. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:200,
  37. tip_fade_speed:300
  38. }
  39. );
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <!-- custom font -->
  45.  
  46. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
  47.  
  48. <style type="text/css">
  49.  
  50. /*-- scrollbar --*/
  51.  
  52. ::-webkit-scrollbar {
  53. width:2px;
  54. height:8px;
  55. }
  56.  
  57. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  58.  
  59. /*--- tooltips ---*/
  60.  
  61. #s-m-t-tooltip {
  62. color:var(--text);
  63. background-color:var(--background);
  64. font-size:calc(var(--font-size) - 2px);
  65. font-family:'Open Sans', helvetica, sans-serif;
  66. letter-spacing:1px;
  67. text-transform:uppercase;
  68. text-align:center;
  69. position:absolute;
  70. padding:0px 5px 0px 5px;
  71. margin-top:30px;
  72. border:1px solid var(--borders);
  73. z-index:999;
  74. }
  75.  
  76. /*-- tumblr controls --*/
  77.  
  78. .tmblr-iframe, .iframe-controls–desktop {
  79. display:none!important;
  80. }
  81.  
  82. /*-- change all variables here --*/
  83.  
  84. :root {
  85. --background:#fff;
  86. --accent:#fafafa;
  87. --text:#666;
  88. --links:#444;
  89. --links-hover:#bad1e7;
  90. --title:#222;
  91. --borders:#eee;
  92. --font-size:10px;
  93. }
  94.  
  95. /*-- general customisation --*/
  96.  
  97. body {
  98. color:var(--text);
  99. background-color:var(--accent);
  100. font-style:normal;
  101. font-family:'Open Sans', helvetica, sans-serif;
  102. font-size:var(--font-size);
  103. text-decoration:none;
  104. line-height:180%;
  105. }
  106.  
  107. a {
  108. text-transform:uppercase;
  109. text-decoration:none;
  110. font-size:calc(var(--font-size) - 1px);
  111. font-weight:600;
  112. letter-spacing:1px;
  113. color:var(--links);
  114. transition-duration: 0.6s;
  115. -moz-transition-duration: 0.6s;
  116. -webkit-transition-duration: 0.6s;
  117. -o-transition-duration: 0.6s
  118. }
  119.  
  120. a:hover {
  121. color:var(--links-hover);
  122. cursor:pointer;
  123. transition-duration: 0.6s;
  124. -moz-transition-duration: 0.6s;
  125. -webkit-transition-duration: 0.6s;
  126. -o-transition-duration: 0.6s
  127. }
  128.  
  129. /*-- header --*/
  130.  
  131. #title {
  132. position:fixed;
  133. font-size:calc(var(--font-size) + 2px);
  134. line-height:18px;
  135. letter-spacing:1.5px;
  136. color:var(--title);
  137. font-weight:bold;
  138. top:50%;
  139. top:95px;
  140. left:50%;
  141. margin-left:-390px;
  142. margin-bottom:10px;
  143. }
  144.  
  145. #links {
  146. position:fixed;
  147. width:775px;
  148. font-weight:600;
  149. top:50%;
  150. top:95px;
  151. right:50%;
  152. margin-right:-1010px;
  153. margin-bottom:10px;
  154. }
  155.  
  156. /*-- blogroll --*/
  157.  
  158. #content {
  159. position:fixed;
  160. width:775px;
  161. max-height:405px;
  162. overflow-x:hidden;
  163. overflow-y:scroll;
  164. top:50%;
  165. top:125px;
  166. left:50%;
  167. margin-left:-390px;
  168. background:var(--background);
  169. border:1px solid var(--borders);
  170. }
  171.  
  172. #content img{
  173. margin-left:5px;
  174. width:42px;
  175. padding:10px;
  176. /* you can change the percentage of these for how much greyscale you want */
  177. -webkit-filter: grayscale(60%);
  178. -moz-filter: grayscale(60%);
  179. -o-filter: grayscale(60%);
  180. -ms-filter: grayscale(60%);
  181. /* or delete the above section if you don't want it at all */
  182. -webkit-transition-duration:.6s;
  183. -moz-transition-duration:.6s;
  184. -o-transition-duration:.6s;
  185. -ms-transition-duration:.6s;
  186. }
  187.  
  188. #content img:hover {
  189. border-radius:50%;
  190. /* same with this section. the default returns the colour to normal */
  191. -webkit-filter: grayscale(0%);
  192. -moz-filter: grayscale(0%);
  193. -o-filter: grayscale(0%);
  194. -ms-filter: grayscale(0%);
  195. /* or delete the above section if you don't want any colour changes upon hover */
  196. -webkit-transition-duration:.6s;
  197. -moz-transition-duration:.6s;
  198. -o-transition-duration:.6s;
  199. -ms-transition-duration:.6s;
  200. }
  201.  
  202. /*-- credit - DO NOT TOUCH --*/
  203.  
  204. .credit a {
  205. font-size:10px;
  206. bottom:15px;
  207. right:20px;
  208. position:fixed;
  209. letter-spacing:1px;
  210. text-transform:uppercase;
  211. text-decoration:none;
  212. }
  213.  
  214.  
  215. </style>
  216. </head>
  217. <body>
  218.  
  219. <div id="title">BLOGROLL</div>
  220. <div id="links">
  221. <a href="/">home.</a>&nbsp;&nbsp;
  222. <a href="/ask">ask.</a>&nbsp;&nbsp;
  223. <a href="/">link.</a>&nbsp;&nbsp;
  224. <a href="http://alydae.tumblr.com">credit.</a>
  225.  
  226. </div>
  227.  
  228. <div id="content">
  229.  
  230. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}">{/block:Followed}{/block:Following}
  231.  
  232. </div>
  233.  
  234. <!---credit - DO NOT TOUCH--->
  235. <div class="credit"><a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a></div>
  236.  
  237. </body>
  238. </html>
  239.  
  240. <!----
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!