Advertisement
sexstilinski

blogroll page 01

Sep 20th, 2015
1,262
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.39 KB | None | 0 0
  1. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  3. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  4. <script>
  5. (function($){
  6. $(document).ready(function(){
  7. $("[title]").style_my_tooltips({
  8. tip_follows_cursor:true,
  9. tip_delay_time:200,
  10. tip_fade_speed:300
  11. });
  12. });
  13. })(jQuery);
  14. </script>
  15.  
  16. <!--
  17.  
  18. THEME BY SPIDERMN
  19.  
  20. FEEL FREE TO EDIT AS YOU PLEASE, BUT DO NOT STEAL
  21.  
  22. DO NOT TOUCH THE CREDIT
  23.  
  24.  
  25. changing the accent color instructions:
  26. 1. press 'ctrl' and the 'f' key twice on your keyboard ('⌘' + 'f' for mac users)
  27. 2. in the box that comes up enter "#63697d" in the find tab and in the replace tab enter the color code you want to change it to (you can find the color code of your icon using this website: http://html-color-codes.info/colors-from-image/)
  28. 3. click 'all' and save your html
  29.  
  30. -->
  31.  
  32. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  33.  
  34. <html>
  35. <head>
  36.  
  37.     <title>{title} - blogroll</title>
  38.     <link rel="shortcut icon" href="{Favicon}">
  39.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  40.     <meta name="description" content="" />
  41.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  42.    
  43.  
  44. <style type="text/css">
  45.  
  46. ::-webkit-scrollbar {height:0px; width:3px; background:#ffffff;}
  47. ::-webkit-scrollbar-thumb:vertical {height:auto; width:3px; background:#313131;}
  48. ::selection {background:#313131; color:#ffffff; padding-left:3px;}
  49. ::-webkit-selection {background:#313131; color:#ffffff;}
  50. ::-moz-selection {background:#313131; color:#ffffff;}
  51. ::-o-selection {background:#313131; color:#ffffff;}
  52. .bt::-webkit-scrollbar {background:#313131;}
  53.  
  54. body {
  55. margin:0px;
  56. background:#fff;
  57. font-size:10px;
  58. font-family:verdana;
  59. color:#000;
  60. line-height: 100%;
  61. }
  62.    
  63. a {
  64. color:#000;
  65. font-style:normal;
  66. text-decoration:none;
  67. }
  68.  
  69. li {margin-left:-20px !important;}
  70.  
  71. .h {
  72. height:120px;
  73. margin:0px auto;
  74. background:#63697d;
  75. text-align:center;
  76. text-transform:lowercase;
  77. width:100%;
  78. display:absolute;
  79. padding:4px 0px;
  80. }
  81.  
  82. .ht {
  83. margin-top:-90px;
  84. }
  85.  
  86. .hh {
  87. margin-left:270px;
  88. font-size:35px;
  89. color:#ffffff;
  90. text-align:left;
  91. text-transform:lowercase;
  92. letter-spacing:0px;
  93. display:inline;
  94. }
  95.  
  96. .l {
  97. margin-top:-10px;
  98. margin-right:22px;
  99. text-align:right;
  100. }
  101.  
  102. .l a {
  103. margin-left:5px;
  104. font-size:13px;
  105. color:#ffffff;
  106. text-transform:lowercase;
  107. letter-spacing:1px;
  108. padding:4px;
  109. display:inline;
  110. -webkit-transition: all 0.4s ease-in;
  111. -moz-transition: all 0.4s ease-in;
  112. -o-transition: all 0.4s ease-in;
  113. }
  114.  
  115. .l a:hover {
  116. background:#ffffff;
  117. color:#63697d;
  118. -webkit-transition: all 0.4s ease-in;
  119. -moz-transition: all 0.4s ease-in;
  120. -o-transition: all 0.4s ease-in;
  121. }
  122.  
  123. .icon img {
  124. width:100px;
  125. height:100px;
  126. }
  127.  
  128. .icon {
  129. margin-left:120px;
  130. margin-top:-65px;
  131. background:#ffffff;
  132. padding:8px;
  133. border:2px solid #63697d;
  134. }
  135.  
  136. .container {
  137. margin-top:15px;
  138. margin-left:32%;
  139. height:auto;
  140. width:350px;
  141. padding-top:56px;
  142. }
  143.  
  144. .boxc {
  145. height:485px;
  146. width:485px;
  147. padding:20px;
  148. border:3px solid #fbfbfb;
  149. }
  150.  
  151. .box {
  152. height:500px;
  153. width:492px;
  154. overflow-y:auto;
  155. }
  156.  
  157. .box img {
  158. margin:5px;
  159. margin-left:13px;
  160. height:50px;
  161. width:50px;
  162. background:#ffffff;
  163. border:2px solid #fbfbfb;
  164. padding:4px;
  165. }
  166.  
  167. #s-m-t-tooltip {
  168. max-width:300px;
  169. margin:15px;
  170. padding:4px;
  171. border-radius:0px;
  172. background:#63697d;
  173. color:#ffffff;
  174. z-index:999999;
  175. font-size:8px;
  176. font-style:none;
  177. letter-spacing:2px;
  178. font-family:arial;
  179. text-transform:uppercase;
  180. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  181. }
  182.  
  183. .credit a {
  184. font:verdana;
  185. font-size:11px;
  186. position:fixed;
  187. color:#000000;
  188. font-weight:bold;
  189. bottom:14px;
  190. right:14px;
  191. }
  192.  
  193. </style>  
  194. </head>
  195.  
  196. <div class="h"></div>
  197. <div id="icon"><img class="icon" src="http://i.imgur.com/WFKkqpO.png"></div>
  198. <div class="ht">
  199. <div class="hh">blogroll.</div>
  200. <div class="l"><a href="/">index.</a><a href="/ask">inbox.</a><a href="/">link 1.</a><a href="/">link 2.</a></div>
  201. </div>
  202.  
  203. <div class="container">
  204. <div class="boxc">
  205. <div class="box">
  206. {block:Following}
  207. {block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"></a>{/block:Followed}
  208. {/block:Following}
  209. </div>
  210. </div>
  211. </div>
  212.  
  213. <div class="credit"><a href="http://spidermn.tumblr.com">cr.</a></div>
  214. </br></br></br>
  215. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement