API tools faq
paste
Advertisement
chillinobrien

Blogroll 04

chillinobrien
Apr 3rd, 2015
7,706
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-----------------------------------------------------------------------
  4.  
  5. * BLOGROLL #04 by saaraa @ cyantists.tumblr.com
  6.  
  7. - terms of use: http://cyantists.tumblr.com/terms
  8.  
  9. - I am no longer offering support for this theme
  10.  
  11. - enjoy!
  12.  
  13. ------------------------------------------------------------------------>
  14.  
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16. <head>
  17.  
  18. <title>blogroll</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  22. <script src="http://static.tumblr.com/ycrkdqn/ZFIn8dcjx/isotope.pkgd.min.js"></script>
  23. <script src="http://static.tumblr.com/ycrkdqn/epEn8dclr/isotope-docs.js"></script>
  24. <script type="text/javascript">
  25.  
  26. $( function() {
  27. // init Isotope
  28. var $container = $('.blogroll').isotope({
  29. // main isotope options
  30. itemSelector: '.blog',
  31. transitionDuration: '0.8s',
  32. getSortData: {
  33. name: '.name',
  34. title: '.title'}
  35. });
  36.  
  37. // bind sort button click
  38. $('#order').on( 'click', 'button', function() {
  39. var sortValue = $(this).attr('data-sort-value');
  40. $container.isotope({
  41. sortBy: sortValue
  42. });
  43. });
  44.  
  45. // change is-checked class on buttons
  46. $('.button-group').each( function( i, buttonGroup ) {
  47. var $buttonGroup = $( buttonGroup );
  48. $buttonGroup.on( 'click', 'button', function() {
  49. $buttonGroup.find('.is-checked').removeClass('is-checked');
  50. $( this ).addClass('is-checked');
  51. });
  52. });
  53.  
  54.  
  55. // store filter for each group
  56. var filters = {};
  57.  
  58. $('#filter').on( 'click', '.button', function() {
  59. var $this = $(this);
  60. // get group key
  61. var $buttonGroup = $this.parents('.button-group');
  62. var filterGroup = $buttonGroup.attr('data-filter-group');
  63. // set filter for group
  64. filters[ filterGroup ] = $this.attr('data-filter');
  65. // combine filters
  66. var filterValue = '';
  67. for ( var prop in filters ) {
  68. filterValue += filters[ prop ];
  69. }
  70. // set filter for Isotope
  71. $container.isotope({ filter: filterValue });
  72. });
  73.  
  74. // change is-checked class on buttons
  75. $('.button-group').each( function( i, buttonGroup ) {
  76. var $buttonGroup = $( buttonGroup );
  77. $buttonGroup.on( 'click', 'button', function() {
  78. $buttonGroup.find('.is-checked').removeClass('is-checked');
  79. $( this ).addClass('is-checked');
  80. });
  81. });
  82.  
  83. });
  84. </script>
  85.  
  86. <link href='http://static.tumblr.com/w3dcevg/M39nljecd/sosa.css' rel='stylesheet' type='text/css'>
  87.  
  88. <style style="text/css">
  89. /*** accent colour ***/
  90. a:hover, .button:hover, span:hover, .button:active, .links a:hover,
  91. .button.is-checked {color:#ff92c3;}
  92. ::-webkit-scrollbar-thumb:vertical {width:3px; background:#ff92c3;}
  93.  
  94. /* background */
  95. body {background:#f5f5f5;}
  96.  
  97. /* links, buttons and blog titles font */
  98. body, .links a, .button, .title {color:#b6b6b6;}
  99.  
  100. /* page title and blog names font */
  101. a {color:#969696;}
  102.  
  103. /** topbar and blogs background */
  104. ::-webkit-scrollbar, .credit a, .top, .button, span,
  105. .blog {background:#fff;}
  106.  
  107. body {margin:0px; font:8px calibri; text-transform:uppercase;
  108. letter-spacing:1px;}
  109.  
  110. a {text-decoration:none;}
  111.  
  112. ::-webkit-scrollbar {width:3px;}
  113. ::-webkit-scrollbar-thumb:vertical {width:3px;}
  114.  
  115. .container {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
  116. width:825px; height:515px;}
  117.  
  118. .top {padding:20px; padding-left:105px; width:700px; margin-bottom:4px;}
  119.  
  120. #order, #filter {display:inline-block;}
  121.  
  122. .links {width:200px; margin-top:-17px; margin-left:490px; text-align:right;
  123. padding-bottom:5px;}
  124.  
  125. .button, span {display:inline-block; border:none; text-align:center;
  126. padding:8px 0px 7px 0px; margin-left:10px; font:8px calibri;
  127. cursor:default; text-transform:uppercase; letter-spacing:1px;}
  128.  
  129. .button {cursor:pointer;}
  130.  
  131. span {margin-left:25px; margin-right:-5px;}
  132.  
  133. span.t {font:italic 18px georgia, Trebuchet MS; margin-left:-80px;
  134. text-transform:none; letter-spacing:0px; position:absolute; padding:0px;}
  135.  
  136. .links a {margin-left:10px;}
  137.  
  138. .button:active, .button.is-checked {outline:0;}
  139.  
  140. .blogroll {width:825px; position:relative; max-height:446px; overflow-y:scroll;}
  141.  
  142. .blogroll:after {content:''; display:block; clear:both;}
  143.  
  144. .blog {width:250px; height:26px; margin-right:4px; margin-bottom:4px;
  145. float:left; padding:10px;}
  146.  
  147. .blog a {width:250px; display:block;}
  148.  
  149. .blog a img {border-radius:50%; position:absolute; margin-top:0px;}
  150.  
  151. .name {margin-left:32px; font:italic 12px georgia, Trebuchet MS;
  152. text-transform:none; letter-spacing:0px; margin-top:1px}
  153.  
  154. .title {padding:0px 0px 2px 0px; margin-left:32px;}
  155.  
  156. span, span:hover, a, a:hover, .button, .button:hover, .button:active,
  157. .button.is-checked {transition:all 0.4s ease-in-out;
  158. -webkit-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out;
  159. -moz-transition:all 0.4s ease-in-out; -mt-transition:all 0.4s ease-in-out;}
  160.  
  161. /** PLEASE DO NOT ALTER OR REMOVE **/
  162. .credit {position:fixed; bottom:8px; right:8px; z-index:9999;}
  163. .credit a {padding:2px 4px 3px 4px;
  164. font-weight:bold; width:7px; overflow:hidden; display:block;}
  165. .credit a:hover {width:69px;}
  166. /** THANK YOU **/
  167.  
  168. </style>
  169.  
  170. <script>
  171. $(document).ready(function(){
  172. $('.url').addClass('fave');
  173. //copy and paste the line above to add more favourites
  174. //make sure to change the word url to a username
  175. });
  176. </script>
  177.  
  178. </head><body>
  179.  
  180.  
  181.  
  182. <div class="container">
  183.  
  184.  
  185. <div class="top">
  186.  
  187. <span class="t">following</span>
  188.  
  189. <!--- if you don't want to filter favourites, delete from here --->
  190. <div id="filter" class="button-group">&emsp;
  191. <button class="button is-checked" data-filter="*">show all</button>
  192. <button class="button" data-filter=".fave">favourites</button>
  193. </div>
  194. <!--- to here --->
  195.  
  196. <!--- if you don't want to be able to sort, delete from here --->
  197. <div id="order" class="button-group">
  198. <span><i>order by:</i></span>
  199. <button class="button is-checked" data-sort-value="">last updated</button>
  200. <button class="button" data-sort-value="name">name / url</button>
  201. <button class="button" data-sort-value="title">blog title</button>
  202. </div>
  203. <!--- to here --->
  204.  
  205. <div class="links">
  206. <a href="/">home</a>
  207. <a href="/ask">ask</a>
  208. <a href="/">link</a>
  209. </div>
  210.  
  211. </div>
  212.  
  213. {block:Following}
  214.  
  215. <div class="blogroll">
  216.  
  217. {block:Followed}<div class="blog {FollowedName}">
  218. <a href="{FollowedURL}" target="_blank">
  219. <div class="info">
  220. <img src="{FollowedPortraitURL-24}" />
  221. <div class="name">{FollowedName}</div>
  222. <div class="title">{FollowedTitle}</div>
  223. </div>
  224. </a>
  225. </div>{/block:Followed}
  226.  
  227. </div>
  228.  
  229. {/block:Following}
  230.  
  231. </div>
  232.  
  233. <!--- PLEASE DO NOT ALTER OR REMOVE --->
  234. <div class="credit"><a href="http://cyantists.tumblr.com">c.&nbsp;cyantists</a></div>
  235. <!--- THANK YOU --->
  236.  
  237.  
  238. </body></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!