API tools faq
paste
alydae

blogroll ii

alydae
May 21st, 2016 (edited)
5,564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. BLOGROLL II
  7. by alydae
  8.  
  9. released: may 21, 2016
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - turn on following in settings for blogs to show
  15. - direct questions to enchantedthemes.tumblr.com
  16.  
  17. thank you for using!!!
  18.  
  19. -->
  20.  
  21. <title>blogroll</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <!-- scripts - DO NOT TOUCH -->
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27.  
  28. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:200,
  35. tip_fade_speed:300
  36. }
  37. );
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <!-- custom font -->
  43.  
  44. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
  45.  
  46. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51. @keyframes fadein {
  52. from { opacity:0; }
  53. to { opacity:1; }
  54. }
  55.  
  56. @-moz-keyframes fadein {
  57. from { opacity:0; }
  58. to { opacity:1; }
  59. }
  60.  
  61. @-webkit-keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-ms-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-o-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. /*-- selection --*/
  77.  
  78. ::-moz-selection { background:var(--accent); color:var(--title); }
  79. ::selection { background:var(--accent); color:var(--title); }
  80.  
  81. /*-- scrollbar --*/
  82.  
  83. ::-webkit-scrollbar {
  84. width:1px;
  85. height:2px;
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  89.  
  90. /*-- tooltips --*/
  91.  
  92. #s-m-t-tooltip {
  93. color:var(--text);
  94. background-color:var(--accent);
  95. font-size:calc(var(--font-size) - 2px);
  96. font-family:'Open Sans', helvetica, sans-serif;
  97. letter-spacing:1px;
  98. text-transform:uppercase;
  99. text-align:center;
  100. line-height:180%;
  101. position:absolute;
  102. padding:0px 5px 0px 5px;
  103. margin-top:30px;
  104. border:1px solid var(--borders);
  105. z-index:9999;
  106. }
  107.  
  108. /*-- tumblr controls --*/
  109.  
  110. .tmblr-iframe, .iframe-controls–desktop {
  111. display:none !important;
  112. }
  113.  
  114. /*-- change all variables here --*/
  115.  
  116. :root {
  117. --background:#fff;
  118. --accent:#fafafa;
  119. --text:#666;
  120. --links:#444;
  121. --links-hover:#bad1e7;
  122. --title:#222;
  123. --borders:#eee;
  124. --font-size:10px;
  125. }
  126.  
  127. /*-- general customisation --*/
  128.  
  129. a, a:hover, #br img, #br img:hover {
  130. transition-duration: 0.6s;
  131. -moz-transition-duration: 0.6s;
  132. -webkit-transition-duration: 0.6s;
  133. -o-transition-duration: 0.6s
  134. }
  135.  
  136. body {
  137. background-color:var(--background);
  138. font-style:normal;
  139. font-family:'Open Sans', helvetica, sans-serif;
  140. font-size:var(--font-size);
  141. font-weight:400;
  142. text-decoration:none;
  143. line-height:250%;
  144. -moz-osx-font-smoothing:grayscale;
  145. -webkit-font-smoothing:antialiased;
  146. font-smoothing:antialiased;
  147. -webkit-animation: fadein 1.5s;
  148. -moz-animation: fadein 1.5s;
  149. -o-animation: fadein 1.5s;
  150. animation: fadein 1.5s;
  151. }
  152.  
  153. a { text-decoration:none; color:var(--links); }
  154. a:hover { color:var(--links-hover); cursor:pointer; }
  155.  
  156. /*-- evrything --*/
  157.  
  158. #container {
  159. width:calc(100px + 100px + 74px * 8); /* 8 is the number of blogs per row. change ONLY that number. */
  160. margin:0px auto;
  161. }
  162.  
  163. /*-- sidebar --*/
  164.  
  165. #sidebar {
  166. position:fixed;
  167. width:100px;
  168. top:50%;
  169. transform:translate(0%, -50%);
  170. text-align:center;
  171. }
  172.  
  173. .icon {
  174. height:50px;
  175. width:50px;
  176. margin:0px auto;
  177. }
  178.  
  179. .icon img {
  180. height:50px;
  181. width:50px;
  182. border-radius:50%;
  183. }
  184.  
  185. .title {
  186. margin-top:20px;
  187. padding:5px;
  188. text-transform:uppercase;
  189. font-size:15px;
  190. font-weight:bold;
  191. letter-spacing:1px;
  192. color:var(--title);
  193. }
  194.  
  195. .links { margin-top:5px; margin-left:5px; text-align:left; }
  196.  
  197. .links a {
  198. letter-spacing:0.5px;
  199. text-transform:uppercase;
  200. display:block;
  201. }
  202.  
  203. .links i { padding-right:10px; font-size:calc(var(--font-size) + 1px); }
  204.  
  205. /*-- blogs--*/
  206.  
  207. #br {
  208. width:calc(74px * 8); /* 8 is the number of blogs per row. change ONLY that number. */
  209. margin-top:100px;
  210. margin-left:200px;
  211. margin-bottom:100px;
  212. }
  213.  
  214. #br img {
  215. width:60px;
  216. padding:7px;
  217. border-radius:10px;
  218. -webkit-filter: grayscale(50%);
  219. -moz-filter: grayscale(50%);
  220. -o-filter: grayscale(50%);
  221. -ms-filter: grayscale(50%);
  222. }
  223.  
  224. #br img:hover {
  225. border-radius:50%;
  226. -webkit-filter: grayscale(0%);
  227. -moz-filter: grayscale(0%);
  228. -o-filter: grayscale(0%);
  229. -ms-filter: grayscale(0%);
  230. }
  231.  
  232. /*-- credit - DO NOT TOUCH --*/
  233.  
  234. .credit a {
  235. font-size:10px;
  236. bottom:15px;
  237. right:20px;
  238. position:fixed;
  239. text-transform:uppercase;
  240. }
  241.  
  242. </style>
  243. </head>
  244.  
  245.  
  246. <body>
  247.  
  248. <div id="container">
  249.  
  250. <div id="sidebar">
  251. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  252. <div class="icon"><img src="{PortraitURL-128}"/></div>
  253. <div class="title">blogroll</div> <!-- title -->
  254. <div class="links">
  255. <!-- this is where your header links are. feel free to add more. to change the icon, go to https://fontawesome.com/icons. leave the 'fa-fw' there. -->
  256. <a href="/"><i class="fas fa-home fa-fw"></i>return</a>
  257. <a href="/ask"><i class="far fa-envelope fa-fw"></i>inbox</a>
  258. <a href="/"><i class="fas fa-bars fa-fw"></i>link</a>
  259. <a href="/"><i class="far fa-star"></i>link</a>
  260. <!-- do not remove this one!!! -->
  261. <a href="https://enchantedthemes.tumblr.com"><i class="fas fa-code"></i>credit</a>
  262. </div>
  263. </div>
  264.  
  265. <div id="br">
  266. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-128}">{/block:Followed}{/block:Following}
  267. </div>
  268.  
  269. </div>
  270.  
  271.  
  272. <!-- credit - DO NOT TOUCH -->
  273.  
  274. <div class="credit">
  275. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  276. </div>
  277.  
  278.  
  279. </body>
  280. </html>
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!