API tools faq
paste
Advertisement
aksiane

Blogroll 1 (w/o filters)

aksiane
Sep 28th, 2014
1,354
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>B L O G R O L L</title>
  4.  
  5. <!--
  6. Blogroll 1 Theme by killluaa.tumblr.com
  7. How to edit everything is in the comments in the code.
  8. Use www.colorpicker.com to chose your colors--copy and paste the hex color.
  9. Message me if you need any help!
  10. -->
  11.  
  12. <style type="text/css">
  13.  
  14. ::-webkit-scrollbar-thumb {background-color: #000;}
  15. ::-webkit-scrollbar {width: 2px; height: 2px; background-color: #ababab;}
  16.  
  17. ::-moz-selection {
  18. color: #fff;}
  19. ::selection {
  20. color: #fff;}
  21.  
  22. body {
  23. font-size: 11px; /*font size*/
  24. font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; /*font*/
  25. color: #7a7a7a;
  26. background-color: #fff; /*background color*/
  27. background:url('http://static.tumblr.com/pxbnumn/Kyinckg7b/lala.png'); /*background image--remove the line above for no background image or replace the url to change the background image*/
  28. background-attachment: fixed;
  29. cursor: url(https://dl.dropboxusercontent.com/u/96214022/Theme%20Stuff/Cursors/crosshair.png) 6 6, auto;
  30. margin:0;
  31. padding:0;
  32. }
  33.  
  34. a {
  35. text-decoration: none;
  36. color: #D1ADDB; /*link text color*/
  37. cursor: url(https://dl.dropboxusercontent.com/u/96214022/Theme%20Stuff/Cursors/crosshair.png) 6 6, auto;
  38. letter-spacing:1px;
  39. font-style:italic;
  40. }
  41.  
  42. a:hover{
  43. text-decoration:underline;
  44. color: #ccc; /*link text color on hover*/
  45. }
  46.  
  47. #s-m-t-tooltip {
  48. display:inline-block;
  49. position:absolute;
  50. max-width:300px;
  51. margin:7px;
  52. padding:0px 4px;
  53. z-index:999;
  54. color:#fff; /*blog title text color*/
  55. background:#000; /*blog title background*/
  56. font-size:8px; /*blog title font size*/
  57. text-transform:lowercase;
  58. font-style:italic;
  59. box-shadow:2px 2px rgba(0,0,0,0.6);
  60. }
  61.  
  62. .center {
  63. position:relative;
  64. margin:0 auto;
  65. top:0px;
  66. display:block;
  67. width:470px;
  68. }
  69.  
  70. .cont {
  71. position:fixed;
  72. width:410px;
  73. padding:30px;
  74. min-height:100% !important;
  75. background-color: #000;/*blogroll background*/
  76. /*You can add a background image by pasting this
  77. background:url('IMAGE URL');
  78. directly below this comment. Replace the IMAGE URL with your image url*/
  79. z-index:1;
  80. }
  81.  
  82. .centercenter {
  83. position:relative;
  84. margin:0 auto;
  85. top:0px;
  86. display:block;
  87. width:470px;
  88. }
  89.  
  90. .contcont {
  91. position:relative;
  92. width:410px;
  93. padding:30px;
  94. min-height:100% !important;
  95. z-index:10;
  96. }
  97.  
  98. .roll {
  99. display:inline-block;
  100. width:126px;
  101. margin:5px;
  102. -webkit-transition: all 0.8s ease;
  103. transition: all 0.8s ease;
  104. -moz-transition: all 0.8s ease;
  105. -o-transition: all 0.8s ease;
  106. }
  107.  
  108. .contcont img {
  109. width:30px;
  110. height:30px;
  111. padding:5px;
  112. border:1px solid #fff;
  113. display:block;
  114. /*Delete starting from here if you dont want grayscale blogroll images*/
  115. -webkit-filter: grayscale(100%);
  116. -moz-filter: grayscale(100%);
  117. -o-filter: grayscale(100%);
  118. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  119. filter: gray;
  120. /*Stop deleting here*/
  121. opacity:.8;
  122. border-radius:30px;
  123. -webkit-border-radius:30px;
  124. -moz-border-radius:30px;
  125. -webkit-transition: all 0.8s ease;
  126. transition: all 0.8s ease;
  127. -moz-transition: all 0.8s ease;
  128. -o-transition: all 0.8s ease;
  129. float:left;
  130. }
  131.  
  132. .roll:hover img {
  133. opacity:1;
  134. -webkit-filter: grayscale(0%);
  135. -moz-filter: grayscale(0%);
  136. -o-filter: grayscale(0%);
  137. filter: none;
  138. }
  139.  
  140. .info {
  141. width:78px;
  142. padding:3px;
  143. display:inline-block;
  144. height:36px;
  145. text-align:center;
  146. overflow:hidden;
  147. font-size:9;
  148. }
  149.  
  150. .info a {
  151. font-size:9px;
  152. text-transform:uppercase;
  153. display:block;
  154. text-align:center;
  155. padding-bottom:3px;
  156. border-bottom:1px solid #ABABAB;
  157. margin-bottom:3px;
  158. }
  159.  
  160. .info a:hover {
  161. text-decoration:none;
  162. }
  163.  
  164. .thelinks {
  165. position:fixed;
  166. left:50%;
  167. margin-left:240px;
  168. }
  169.  
  170. .thelinks a {
  171. display:block;
  172. padding:1px 3px;
  173. margin-left:7px;
  174. }
  175.  
  176. .desc {
  177. line-height:10px;
  178. }
  179.  
  180. </style>
  181.  
  182. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  183. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  184. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  185.  
  186. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  187.  
  188. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  189.  
  190. </head>
  191.  
  192. <body>
  193. <div class="center">
  194. <div class="cont">
  195.  
  196. <div class="thelinks">
  197. <a href="/">go back</a> <!--link to index-->
  198. <a href="/ask">message</a> <!--link to ask page-->
  199. <a href="/">link 1</a><!--link 1-->
  200. <a href="/">link 2</a><!--link 2-->
  201. <a href="http://sayonaraheart.tumblr.com/post/87201415648">art credit</a><!--link 3-->
  202. <!--To add more links, copy this and paste it right before this comment:
  203.  
  204. <a href="LINK URL">LINK TITLE</a>
  205.  
  206. and replace the capitalized words with your link url and link title respectively
  207. -->
  208. <a href="http://killluaa.tumblr.com/">credit</a><!--dont delete this or else-->
  209. </div>
  210.  
  211.  
  212. </div>
  213.  
  214. </div>
  215.  
  216. <div class="centercenter"><div class="contcont">
  217. <div class="blogroll clearfix">
  218. {block:Following}{block:Followed}<span class="roll clear">
  219.  
  220. <a href="http://www.tumblr.com/follow/{FollowedName}" class="haha" value="{FollowedName}" title="follow?" target="_blank">
  221. <img src="{FollowedPortraitURL-30}">
  222. </a>
  223.  
  224. <div class="info">
  225. <a href="{FollowedURL}" target="_blank">{FollowedName}</a>
  226. <span class="desc">{FollowedTitle}</span>
  227. </div>
  228.  
  229. </span>{/block:Followed}{/block:Following}
  230. </div>
  231. </div></div>
  232.  
  233. <img src="http://static.tumblr.com/pxbnumn/qvwnb8et6/tumblr_n6c9u3xkbu1tb8i6no1_1280.png" style="width:250px;position:fixed !important;bottom:5px;left:50%;margin-left:-500px;"> <!--side image-->
  234.  
  235. <a style="display:block;position:fixed;bottom:5px;right:5px;" href="http://kurapika04.tumblr.com">thm</a>
  236. </body>
  237. </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!