API tools faq
paste
Advertisement
aksiane

Blogroll 1 (w/ filters)

aksiane
Sep 28th, 2014
2,175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.37 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: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. #sort {
  181. margin-top:3px;
  182. margin-left:15px;
  183. border-left:1px solid #d6d6d6;
  184. }
  185.  
  186. #filters a {
  187. display:block;
  188. font-size:9px;
  189. padding:1px 3px;
  190. margin-right:7px;
  191. color:#ccc; /*filter link color*/
  192. font-style:normal;
  193. }
  194.  
  195. #filters a:hover {
  196. text-decoration:none;
  197. color:#f0f0f0; /*filter link color on hover*/
  198. }
  199.  
  200. </style>
  201.  
  202. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  203. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  204. <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>
  205.  
  206. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  207.  
  208. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  209.  
  210. <script type="text/javascript">
  211. $(document).ready(function(){
  212. $(".sub").hide();
  213. $('.cthrough').click(function(){
  214. $(".sub").slideToggle(500);
  215. });});
  216. </script>
  217.  
  218. <script>
  219. $(document).ready(function() {
  220. var classAdd=function(urls, tag) {
  221. for (var i = 0; i < urls.length; i++) {
  222. $(".haha[value='" + urls[i] + "']").parent().addClass(tag);
  223. }
  224. }
  225.  
  226. /*
  227. to add more filters copy the code below and paste it right above this comment
  228.  
  229. var FILTERTAG=["url1", "url2", "url3"];
  230. classAdd(FILTERTAG, "FILTERTAG");
  231.  
  232. replace the three FILTERTAGs with whatever you want (make sure you use no spaces).
  233. replace the urls with the urls you want to filter.
  234.  
  235.  
  236. here is an example of how it would look:
  237.  
  238. var theme=["yukoki", "maomuthemes", "ninpen", "7th-district", "gyapo", "theme-hunter", "nff-themes", "cixth", "farahmir"];
  239. classAdd(theme, "theme");
  240.  
  241. i made the FILTERTAG theme. then i added in all the urls with quotation marks around it and separated the urls with commas.
  242.  
  243. */
  244. });
  245.  
  246. </script>
  247.  
  248. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  249. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  250. <script>
  251. $(function(){
  252.  
  253. var $container = $('.blogroll');
  254.  
  255. $container.isotope({
  256. itemSelector : '.clear'
  257. });
  258.  
  259.  
  260. var $optionSets = $('#sort .option-set'),
  261. $optionLinks = $optionSets.find('a');
  262.  
  263. $optionLinks.click(function(){
  264. var $this = $(this);
  265. // don't proceed if already selected
  266. if ( $this.hasClass('selected') ) {
  267. return false;
  268. }
  269. var $optionSet = $this.parents('.option-set');
  270. $optionSet.find('.selected').removeClass('selected');
  271. $this.addClass('selected');
  272.  
  273. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  274. var options = {},
  275. key = $optionSet.attr('data-option-key'),
  276. value = $this.attr('data-option-filter');
  277. // parse 'false' as false boolean
  278. value = value === 'false' ? false : value;
  279. options[ key ] = value;
  280. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  281. // changes in layout modes need extra logic
  282. changeLayoutMode( $this, options )
  283. } else {
  284. // otherwise, apply new options
  285. $container.isotope( options );
  286. }
  287.  
  288. return false;
  289. });
  290.  
  291.  
  292. });
  293. </script>
  294.  
  295. </head>
  296.  
  297. <body>
  298. <div class="center">
  299. <div class="cont">
  300.  
  301. <div class="thelinks">
  302. <a href="/">go back</a> <!--link to index-->
  303. <a href="/ask">message</a> <!--link to ask page-->
  304. <a href="/">link 1</a><!--link 1-->
  305. <a href="/">link 2</a><!--link 2-->
  306. <a href="http://sayonaraheart.tumblr.com/post/87201415648">art credit</a><!--link 3-->
  307. <!--To add more links, copy this and paste it right before this comment:
  308.  
  309. <a href="LINK URL">LINK TITLE</a>
  310.  
  311. and replace the capitalized words with your link url and link title respectively
  312. -->
  313. <a href="http://killluaa.tumblr.com/">credit</a><!--dont delete this or else-->
  314. <a class="cthrough">filter by</a><!--link to slide open filters-->
  315.  
  316. <div class="sub">
  317. <div id="sort">
  318. <div id="filters" class="option-set clearfix" data-option-key="filter">
  319. <a href="#filter" data-option-filter=".clear">clear</a><!--dont delete this-it is the link you click when you want to clear the filters-->
  320.  
  321.  
  322. <!--To add filters, copy and paste this code below right before this comment:
  323.  
  324. <a href="#filter" data-option-filter=".FILTERTAG">FILTERNAME</a>
  325.  
  326. and replace the capitalized words with your filter tag (use the FILTERTAG from when we were listing the urls) and filter name respectively
  327.  
  328. here is an example:
  329.  
  330. <a href="#filter" data-option-filter=".theme">Theme Blogs</a>
  331.  
  332. I took the FILTERTAG from when we were listing the urls and put it in the FILTER TAG blank. Then I replaced FILTERNAME with Theme Blogs. For this code, a link will show up that says 'Theme Blogs'. If you click the 'Theme Blogs' link, then all the urls I had listed above would appear.
  333. -->
  334. </div>
  335. </div>
  336. </div>
  337. </div>
  338.  
  339.  
  340. </div>
  341.  
  342. </div>
  343.  
  344. <div class="centercenter"><div class="contcont">
  345. <div class="blogroll clearfix">
  346. {block:Following}{block:Followed}<span class="roll clear">
  347.  
  348. <a href="http://www.tumblr.com/follow/{FollowedName}" class="haha" value="{FollowedName}" title="follow?" target="_blank">
  349. <img src="{FollowedPortraitURL-30}">
  350. </a>
  351.  
  352. <div class="info">
  353. <a href="{FollowedURL}" target="_blank">{FollowedName}</a>
  354. <span class="desc">{FollowedTitle}</span>
  355. </div>
  356.  
  357. </span>{/block:Followed}{/block:Following}
  358. </div>
  359. </div></div>
  360.  
  361. <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-->
  362.  
  363. <a style="display:block;position:fixed;bottom:5px;right:5px;" href="http://kurapika04.tumblr.com">thm</a>
  364. </body>
  365. </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!