API tools faq
paste
Advertisement
cornetespoir

Blogroll #2

cornetespoir
May 22nd, 2016
550
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.67 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. //Blogroll #2
  3.  
  4. by espoirthemes //
  5.  
  6.  
  7. +don't touch or remove the credit/egg
  8. +customizing instructions are throughout the code
  9. +the preview in the customization page might look kinda off, so you'll have to save and go to the page to make sure everything's working right
  10.  
  11. -->
  12. <!DOCTYPE html >
  13. <html>
  14. <head>
  15.  
  16. <title>Blogroll</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18.  
  19. <script type="text/javascript"
  20. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  21. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  22. <script>
  23. (function($){
  24. $(document).ready(function(){
  25. $("[title]").style_my_tooltips({
  26. tip_follows_cursor:true,
  27. tip_delay_time:200,
  28. tip_fade_speed:300
  29. }
  30. );
  31. });
  32. })(jQuery);
  33. </script>
  34.  
  35. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  36. <script>
  37. $(document).ready(function(){
  38. $('#press').click(function(){
  39. $('.panel').slideToggle('slow');
  40.  
  41. });
  42. });
  43.  
  44.  
  45. </script>
  46.  
  47. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  48.  
  49. </head>
  50.  
  51. <style type="text/css">
  52.  
  53. /*this is the follow/dashboard buttons */
  54. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop
  55. { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); filter: invert(100%); opacity:0.4; z-index:99999; top:2px;}
  56.  
  57. /*tool tips */
  58. #s-m-t-tooltip{
  59. max-width:300px;
  60. margin-top:20px;
  61. margin-left:20px;
  62.  
  63. border:1px solid white;
  64. box-shadow: 0px 0px 0px 2px #444;
  65. font-family:sans-serif;
  66. padding:5px 5px;
  67. background:#444;
  68. color:#fff;
  69. z-index:99999999;
  70. font-size:12px;
  71. letter-spacing:2px;
  72. }
  73.  
  74. ::-webkit-scrollbar {
  75. width:10px;
  76. height:10px;
  77.  
  78. }
  79. ::-webkit-scrollbar-thumb {
  80. background:#444;
  81. }
  82.  
  83. ::-webkit-scrollbar-track {
  84. background:#2b2b2b;
  85. border: 4px solid #fff;
  86.  
  87.  
  88. }
  89.  
  90.  
  91. body {
  92. margin:0;
  93. word-wrap:break-word;
  94. /*background color and image. image url goes between the '' */
  95. background:#fff url('');
  96. /*font size: try not to make it too tiny */
  97. font-size:14px;
  98. font-family:sans-serif;
  99. line-height:110%;
  100. overflow:hidden;
  101. }
  102. /*links */
  103. a {
  104. text-decoration:none; /*erase this if you want links to be underlined */
  105. color:#444; /*color of links */
  106.  
  107. }
  108.  
  109. /*blogroll container */
  110. #container {
  111. position:relative;
  112. margin:50px auto; /*increasing the first number will move the container further down */
  113. width:600px;
  114. height:80vh;
  115. background:white; /*background color */
  116. padding:20px;
  117. border:1px solid #ddd; /*border around container */
  118. overflow:auto;
  119.  
  120. }
  121.  
  122. /* this is styling for each of the blogs */
  123.  
  124. .follow {
  125. display:inline-block;
  126. padding:4px;
  127. margin:10px; /*this keeps the images and blog titles from being squished together */
  128. }
  129.  
  130. .follow img {
  131. border-radius:100%; /*remove this if you want square images */
  132. padding:2px;
  133. border:1px solid #eee; /*border around images */
  134. float:left;
  135. width:60px; /*size of images. looks best if it's 64px or under */
  136. height:60px; /*keep same as the width or the images will be stretched */
  137. clear:both;
  138.  
  139.  
  140. }
  141.  
  142. /*blog titles */
  143.  
  144. /*this is what it looks like normally. it's hidden until you hover over the image */
  145. .name {
  146. width:0px;
  147. opacity:0;
  148. min-height:20px;
  149. max-height:30px;
  150. overflow:hidden;
  151. float:right;
  152. transition:.8s;
  153. text-align:left;
  154. border-bottom:1px solid #ddd; /*border underneath the name */
  155. }
  156.  
  157. /* this is what the blog titles actually look like (after you hover over the image) */
  158. .follow:hover .name{
  159. opacity:1;
  160. transition:.8s;
  161. width:80px;
  162. }
  163.  
  164.  
  165. /*this is the menu icon at the top left of the screen */
  166. #sidebar {
  167. position:fixed;
  168. height:auto;
  169. width:auto;
  170. top:0px;
  171. padding:10px;
  172. padding-right:20px;
  173. padding-bottom:20px;
  174. left:0px;
  175. border-bottom-right-radius:100%; /*if you don't want it to be rounded, remove this line */
  176. background:#fff; /*color behind the menu icon */
  177. box-shadow:0px 0px 0px 1px #ddd; /*this is kind of like a border, so chang the 1px or #ddd to change the width and color */
  178.  
  179. }
  180. /*menu icon */
  181. #press {
  182. cursor:pointer;
  183. font-size:18px;
  184.  
  185. }
  186. /*this is the panel that shows up after you click on the menu icon */
  187. .panel {
  188. background:white; /*color of panel */
  189. padding:10px;
  190. width:200px; /*change the width of the panel */
  191. height:260px; /*looks best if it's around this height */
  192. overflow:auto;
  193. display:none;
  194. z-index:99;
  195. margin-left:100px; /*the bigger this number, the further from the left the panel will show up */
  196. border:1px solid #ddd; /*border */
  197. position:fixed;
  198. bottom:-8px;
  199.  
  200. }
  201.  
  202.  
  203. /*this is the styling of the individual links in the panel */
  204. .links {text-align:left}
  205.  
  206. .links li{
  207. list-style:none;
  208. position:relative;
  209. padding:10px;
  210. border-bottom:1px solid #eee; /*the border underneath each of the links */ }
  211.  
  212. .links li a:before{content:'☐ '; /*this is what appears before each of the links. you can change it to whatever symbol you want */}
  213. .links li a:hover:before{content:'☒ '; /*this is the symbol after you hover over the link, again, it can be whatever symbol you want */}
  214.  
  215.  
  216.  
  217. /*please don't touch the rest of the css */
  218. #egg { opacity:.8;right:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  219. font-family: "bitxmap";
  220. border:1px solid #444; z-index:4;
  221.  
  222. }
  223. #egg:hover { animation-name: egg;
  224. animation-duration: 1s;
  225. animation-iteration-count: infinite;}
  226. @keyframes egg{
  227. 0%{}
  228. 10%{transform:rotate(20deg)}
  229. 80%{transform:rotate(-20deg)}
  230. 100%{}
  231. }
  232. </style>
  233.  
  234. <body>
  235.  
  236. <!-- this is the panel that slides up from the bottom of the page -->
  237. <div class="panel">
  238. <p>
  239. <div class="links">
  240.  
  241. <!-- you can change any of these links. to add more, copy
  242.  
  243. <li><a href="URL">link</a></li>
  244.  
  245. and place it after the rest of the links. -->
  246. <li><a href="/">home</a></li>
  247. <li><a href="/ask">ask</a></li>
  248. <li><a href="/archive">archive</a></li>
  249. <li><a href="/link">link</a></li>
  250. <!-- to remove links, erase the whole line betwen <li> and </li> -->
  251. </div> </p> </div>
  252.  
  253.  
  254. <div id="sidebar">
  255. <a id="press" >
  256. <!-- if you don't want the menu icon, you can change the "fa fa-bars" to any other icon from Font Awesome. -->
  257. <i class="fa fa-bars" style="color:#888;"></i>
  258.  
  259. </a>
  260.  
  261.  
  262. </div>
  263.  
  264. <!-- there's no real need to change anything else after this, it's just the basic html for a blogroll -->
  265.  
  266.  
  267. <div id="container"> {block:Following} {block:Followed}
  268. <div class="follow"><img src="{FollowedPortraitURL-96}">
  269.  
  270. <div class="name"><a href="{FollowedURL}" title="{FollowedTitle}">{FollowedName}</a></div> </div> {/block:Followed} {/block:Following}
  271. </div>
  272.  
  273. <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
  274.  
  275.  
  276. </body>
  277.  
  278. </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!