API tools faq
paste
Advertisement
paigeh987

Theme 17 - neonbike themes

paigeh987
Aug 11th, 2014
2,669
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. Theme 17 by Paige @ neonbikethemes.tumblr.com
  7.  
  8. Rules:
  9. - No stealing code or design
  10. - You can edit the code but don't remove the credit
  11. - if you can, like or reblog the post of this theme
  12.  
  13. -->
  14.  
  15. <meta name="color:background" content="#ededed" />
  16. <meta name="color:links" content="#363636" />
  17. <meta name="color:text" content="#363636" />
  18. <meta name="color:posts" content="#ffffff" />
  19. <meta name="color:border" content="#363636" />
  20. <meta name="color:post info" content="#ffffff" />
  21.  
  22. <meta name="image:background" content="" />
  23.  
  24. <meta name="text:link1" content="index" />
  25. <meta name="text:link1 url" content="/" />
  26. <meta name="text:link2" content="contact" />
  27. <meta name="text:link2 url" content="/ask" />
  28. <meta name="text:link3" content="" />
  29. <meta name="text:link3 url" content="/" />
  30. <meta name="text:link4" content="" />
  31. <meta name="text:link4 url" content="/" />
  32. <meta name="text:link5" content="" />
  33. <meta name="text:link5 url" content="/" />
  34. <meta name="text:link6" content="" />
  35. <meta name="text:link6 url" content="/" />
  36.  
  37. <meta name="if:Background Image" content="0"/>
  38. <meta name="if:Infinite scroll" content="0"/>
  39. <meta name="if:hide captions" content="1"/>
  40. <meta name="if:400px posts" content="0"/>
  41. <meta name="if:grayscale posts" content="0"/>
  42.  
  43.  
  44. {block:Description}
  45. <meta name="description" content="{MetaDescription}" />
  46. {/block:Description}
  47. <meta charset="utf-8">
  48. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  49. <title>{Title}</title>
  50. <link rel="shortcut icon" href="{Favicon}">
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  52. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  53.  
  54.  
  55. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  56.  
  57. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  58.  
  59. <script>
  60. (function($){
  61. $(document).ready(function(){
  62. $("a[title]").style_my_tooltips({
  63. tip_follows_cursor:true,
  64. tip_delay_time:60,
  65. tip_fade_speed:100,
  66. attribute:"title"
  67. });
  68. });
  69. })(jQuery);
  70. </script>
  71.  
  72.  
  73. <style type="text/css">
  74.  
  75. #s-m-t-tooltip {
  76. max-width:300px;
  77. padding:8px;
  78. margin:10px 0px 0px 10px;
  79. background-color:{color:background};
  80. font-family:tahoma; /*font */
  81. font-size:8px; /*font size */
  82. font-style:italic; /* can be italic, normal, etc. */
  83. letter-spacing:2px; /*letter spacing */
  84. text-transform:none; /* can be uppercase, lowercase, none*/
  85. color:{color:text}; /*text color */
  86. z-index:999999999999999999999999999999999999;
  87. }
  88.  
  89. ::-webkit-scrollbar {
  90. width: 7px;height: 0px;}
  91. ::-webkit-scrollbar-button:start:decrement,
  92. ::-webkit-scrollbar-button:end:increment {
  93. height: 5px;display: block;background-color: {color:background};}
  94. ::-webkit-scrollbar-track-piece {
  95. background-color: {color:background};}
  96. ::-webkit-scrollbar-thumb:vertical {
  97. height: 3px;
  98. background-color: {color:border};
  99. border-left:3px solid {color:background};
  100. border-right:3px solid {color:background};
  101. }
  102.  
  103. /* ----------------------------- GENERAL -------------------------- */
  104.  
  105. #content {
  106. margin-left:auto;
  107. margin-right:auto;
  108. {block:Ifnot400pxposts}
  109. width: 690px;
  110. {/block:Ifnot400pxposts}
  111. {block:If400pxposts}
  112. width:990px;
  113. {/block:If400pxposts}
  114. margin-top:60px;
  115. margin-bottom:80px;
  116. }
  117.  
  118. body {
  119. background: {color:Background};
  120. {block:IfBackgroundImage}
  121. background-image: url('{image:background}');
  122. background-repeat: repeat;
  123. {/block:IfBackgroundImage}
  124. {block:IfnotBackgroundImage}
  125. {/block:IfnotBackgroundImage}
  126. color: {color:text};
  127. font-family: helvetica;
  128. font-size: 10px;
  129. margin: 0;
  130. word-wrap: break-word;
  131. padding: 0;
  132. }
  133. a {
  134. color: {color:links};
  135. text-decoration: none;
  136. }
  137.  
  138. blockquote {
  139. background: {color:posts};
  140. border-left: 1px solid {color:border};
  141. margin-left: 10px;
  142. padding-left: 10px;
  143. }
  144.  
  145. iframe, img, embed, object, video {
  146. max-width: 100%;
  147. }
  148.  
  149. img {
  150. height: auto;
  151. width: auto;
  152. margin-bottom:0px;
  153. max-width:100%;
  154. }
  155.  
  156. b{
  157. font-weight:bold;
  158. }
  159.  
  160. ul{
  161. list-style-type:square;
  162. }
  163.  
  164. ol{
  165. list-style-type:lower-roman;
  166. }
  167.  
  168. h3{
  169. font-size:13px;
  170. letter-spacing:3px;
  171. font-style:italic;
  172. line-height:125%;
  173. }
  174.  
  175. .caption{
  176. background:{color:posts};
  177. padding:10px;
  178. margin-top:3px;
  179. margin-bottom:3px;
  180. }
  181.  
  182. /* ---------------------------- SIDEBAR ----------------------------- */
  183.  
  184. #sidebar {
  185. {block:Ifnot400pxposts}
  186. width:310px;
  187. {/block:Ifnot400pxposts}
  188. {block:If400pxposts}
  189. width:460px;
  190. {/block:If400pxposts}
  191. position:static;
  192. margin-right:20px;
  193. margin-bottom:20px;
  194. }
  195.  
  196. #sidebar a {
  197. color: {color:sidebar links};
  198. }
  199.  
  200. #title{
  201. text-align:right;
  202. font-size:18px;
  203. text-transform:lowercase;
  204. font-style:italic;
  205. letter-spacing:8px;
  206. margin-top:4px;
  207. margin-bottom:10px;
  208. }
  209.  
  210. #title a{
  211. color:{color:text};
  212. }
  213.  
  214. #description{
  215. position:relative;
  216. vertical-align:text-top;
  217. text-align:justify;
  218. letter-spacing:inter-word;
  219. padding:30px;
  220. background:{color:posts};
  221. }
  222.  
  223. #links{
  224. font-size:9px;
  225. position:relative;
  226. float:right;
  227. text-transform:lowercase;
  228. text-align:right;
  229. margin-top:15px;
  230. margin-bottom:15px;
  231. -webkit-transition: all .3s ease-in-out;
  232. -moz-transition: all .3s ease-in-out;
  233. -o-transition: all .3s ease-in-out;
  234. -ms-transition: all .3s ease-in-out;
  235. transition: all .3s ease-in-out;
  236. }
  237.  
  238. .link{
  239. background:transparent;
  240. position:relative;
  241. display:inline-block;
  242. padding:3px;
  243. padding-left:6px;
  244. padding-right:6px;
  245. letter-spacing:1px;
  246. font-style:italic;
  247. color:{color:text};
  248. margin-left:5px;
  249. text-align:center;
  250. -webkit-transition: all .3s ease-in-out;
  251. -moz-transition: all .3s ease-in-out;
  252. -o-transition: all .3s ease-in-out;
  253. -ms-transition: all .3s ease-in-out;
  254. transition: all .3s ease-in-out;
  255. }
  256.  
  257. .link:hover{
  258. background:{color:border};
  259. color:{color:post info};
  260. -webkit-transition: all .3s ease-in-out;
  261. -moz-transition: all .3s ease-in-out;
  262. -o-transition: all .3s ease-in-out;
  263. -ms-transition: all .3s ease-in-out;
  264. transition: all .3s ease-in-out;
  265. }
  266.  
  267. .link a{
  268. -webkit-transition: all .3s ease-in-out;
  269. -moz-transition: all .3s ease-in-out;
  270. -o-transition: all .3s ease-in-out;
  271. -ms-transition: all .3s ease-in-out;
  272. transition: all .3s ease-in-out;
  273. }
  274.  
  275. /* -------------------------- PAIGNATION ---------------------------- */
  276.  
  277. .pagibutton{
  278. position:relative;
  279. display:inline-block;
  280. background:{color:posts};
  281. padding:15px;
  282. font-style:italic;
  283. text-transform:lowercase;
  284. letter-spacing:1px;
  285.  
  286. }
  287.  
  288.  
  289. /* ----------------------------- POSTS ------------------------------ */
  290.  
  291. article {
  292. background:{color:posts};
  293. margin-right:20px;
  294. margin-bottom:20px;
  295. padding: 30px;
  296. border-bottom:2px solid {color:border};
  297. {block:Ifnot400pxposts}
  298. width: 250px;
  299. {/block:Ifnot400pxposts}
  300. {block:If400pxposts}
  301. width:400px;
  302. {/block:If400pxposts}
  303. {block:Ifgrayscaleposts}
  304. -webkit-filter: grayscale(100%);
  305. -webkit-transition: all 0.4s ease-in-out;
  306. -moz-transition: all 0.4s ease-in-out;
  307. -o-transition: all 0.4s ease-in-out;
  308. -ms-transition: all 0.4s ease-in-out;
  309. transition: all 0.4s ease-in-out;
  310. {/block:Ifgrayscaleposts}
  311. }
  312.  
  313. article:hover{
  314. {block:Ifgrayscaleposts}
  315. -webkit-filter: grayscale(0%);
  316. -webkit-transition: all 0.4s ease-in-out;
  317. -moz-transition: all 0.4s ease-in-out;
  318. -o-transition: all 0.4s ease-in-out;
  319. -ms-transition: all 0.4s ease-in-out;
  320. transition: all 0.4s ease-in-out;
  321. {/block:Ifgrayscaleposts}
  322. }
  323.  
  324. article img{
  325. margin-bottom:0px;
  326. }
  327.  
  328. .post{}
  329.  
  330.  
  331. /* ---------------------------- POST INFO ------------------------- */
  332.  
  333. .postinfo{
  334. position:absolute;
  335. bottom:0px;
  336. margin-bottom:30px;
  337. {block:Ifnot400pxposts}
  338. width:250px;
  339. {/block:Ifnot400pxposts}
  340. {block:If400pxposts}
  341. width:400px;
  342. {/block:If400pxposts}
  343. z-index:999;
  344. color:{color:post info};
  345. opacity:0;
  346. -webkit-transition: all .3s ease-in-out;
  347. -moz-transition: all .3s ease-in-out;
  348. -o-transition: all .3s ease-in-out;
  349. -ms-transition: all .3s ease-in-out;
  350. transition: all .3s ease-in-out;
  351. }
  352.  
  353. article:hover .postinfo{
  354. opacity:1;
  355. -webkit-transition: all .3s ease-in-out;
  356. -moz-transition: all .3s ease-in-out;
  357. -o-transition: all .3s ease-in-out;
  358. -ms-transition: all .3s ease-in-out;
  359. transition: all .3s ease-in-out;
  360. }
  361.  
  362. .postinfo a{
  363. color:{color:post info};
  364.  
  365. }
  366.  
  367. .info{
  368. padding:10px;
  369. text-transform:lowercase;
  370. text-align:left;
  371. font-weight:500;
  372. font-size:9px;
  373. letter-spacing:1px;
  374. background:{color:border};
  375. opacity:1;
  376. -webkit-transition: all .3s ease-in-out;
  377. -moz-transition: all .3s ease-in-out;
  378. -o-transition: all .3s ease-in-out;
  379. -ms-transition: all .3s ease-in-out;
  380. transition: all .3s ease-in-out;
  381. }
  382.  
  383. .info:hover{
  384. opacity:.7;
  385. -webkit-transition: all .3s ease-in-out;
  386. -moz-transition: all .3s ease-in-out;
  387. -o-transition: all .3s ease-in-out;
  388. -ms-transition: all .3s ease-in-out;
  389. transition: all .3s ease-in-out;
  390. }
  391.  
  392. .tags {
  393. text-align:right;
  394. padding-bottom:10px;
  395. }
  396.  
  397. .tag{
  398. position:relative;
  399. display:inline-block;
  400. background:{color:border};
  401. margin-left:5px;
  402. margin-top:5px;
  403. padding:6px;
  404. text-transform:lowercase;
  405. font-size:9px;
  406. letter-spacing:1px;
  407. text-align:left;
  408. font-weight:500;
  409. opacity:1;
  410. -webkit-transition: all .3s ease-in-out;
  411. -moz-transition: all .3s ease-in-out;
  412. -o-transition: all .3s ease-in-out;
  413. -ms-transition: all .3s ease-in-out;
  414. transition: all .3s ease-in-out;
  415. }
  416.  
  417. .tag:hover{
  418. opacity:.7;
  419. -webkit-transition: all .3s ease-in-out;
  420. -moz-transition: all .3s ease-in-out;
  421. -o-transition: all .3s ease-in-out;
  422. -ms-transition: all .3s ease-in-out;
  423. transition: all .3s ease-in-out;
  424. }
  425.  
  426. .notes {
  427. clear: both;
  428. padding: 0;
  429. }
  430.  
  431. .permalinkinfo{
  432. background:{color:border};
  433. padding:30px;
  434. color:{color:post info};
  435. line-height:150%;
  436. margin-top:20px;
  437. }
  438.  
  439. .permalinkinfo a{
  440. color:{color:post info};
  441. }
  442.  
  443. /* ---------------------------- POST NOTES -------------------------- */
  444.  
  445. ol.notes {
  446. display:block;
  447. text-align:left;
  448. list-style-type: none;
  449. max-height:500px;
  450. overflow:scroll;
  451. }
  452.  
  453. ol.notes li.note{
  454. padding:5px;
  455. padding-bottom:10px;
  456. }
  457.  
  458. .pagenotes {
  459. text-align:left;
  460. text-transform:lowercase;
  461. font-size:9px;
  462. font-style:italic;
  463. }
  464.  
  465. .pagenotes img{
  466. padding-right:5px;
  467. padding-top:5px;
  468. margin-bottom:-5px;
  469. }
  470.  
  471. /* ------------------------------ POSTS ----------------------------- */
  472.  
  473. /* QUESTION POSTS */
  474.  
  475. .question{
  476. padding:10px;
  477. font-style:italic;
  478. }
  479.  
  480. .asker{
  481. text-transform:uppercase;
  482. font-weight:bold;
  483. background:{color:background};
  484. padding:14px;
  485. text-align:right;
  486. }
  487.  
  488. .askerimg{
  489. position:relative;
  490. float:left;
  491. }
  492.  
  493. /* QUOTE POST */
  494.  
  495. .quote{
  496. font-size:10px;
  497. line-height:190%;
  498. margin-bottom:15px;
  499. text-transform:uppercase;
  500. letter-spacing:2px;
  501. }
  502.  
  503. .quotesource{
  504. text-align:right;
  505. }
  506.  
  507.  
  508. /* LINK POST */
  509.  
  510. .linkpost{
  511. font-size:13px;
  512. text-transform:lowercase;
  513. text-align:right;
  514. letter-spacing:2px;
  515. font-style:italic;
  516. }
  517.  
  518.  
  519. /* CHAT POST */
  520.  
  521. .chat {
  522. text-align: left;
  523. line-height:200%;
  524. }
  525.  
  526.  
  527. /* AUDIO POST */
  528.  
  529. .tumblr_audio_player {
  530. height: 30px;
  531. width:100%;
  532. }
  533.  
  534. .trackname{
  535. margin-left:150px;
  536. font-size:15px;
  537. text-transform:lowercase;
  538. letter-spacing:2px;
  539. font-style:italic;
  540. height:20px;
  541. padding-top:65px;
  542. padding-bottom:65px;
  543. text-align:center;
  544. background:{color:background};
  545. }
  546.  
  547. .albumart{
  548. position:relative;
  549. float:left;
  550. width:150px;
  551. height:150px;
  552. }
  553.  
  554. .button{
  555. position:absolute;
  556. left:60px;
  557. top:60px;
  558. width:30px;
  559. height:30px;
  560. }
  561.  
  562. .player{
  563. height:30px;
  564. }
  565.  
  566.  
  567. /* ---------------------------- CREDIT ----------------------------- */
  568.  
  569. #cred {
  570. position:fixed;
  571. bottom:15px;
  572. left:15px;
  573. font-size:9px;
  574. padding:5px;
  575. text-transform:uppercase;
  576. }
  577.  
  578.  
  579.  
  580. /*Custom CSS*/
  581. {CustomCSS}
  582. </style>
  583. </head>
  584. <body>
  585.  
  586. <!--Content holder-->
  587. <div id="content">
  588.  
  589.  
  590. <!--Sidebar/sidebar-->
  591. <div id="sidebar">
  592.  
  593. <div id="title"><a href="/">{Title}</a></div>
  594.  
  595. <div id="description">{description}</div>
  596.  
  597. <div id="links">
  598. {block:Iflink1}
  599. <a href="{text:link1 url}">
  600. <div class="link">{text:link1}</div></a>
  601. {/block:Iflink1}
  602. {block:Iflink2}
  603. <a href="{text:link2 url}">
  604. <div class="link">{text:link2}</div></a>
  605. {/block:Iflink2}
  606. {block:Iflink3}
  607. <a href="{text:link3 url}">
  608. <div class="link">{text:link3}</div></a>
  609. {/block:Iflink3}
  610. {block:Iflink4url}
  611. <a href="{text:link4 url}">
  612. <div class="link">{text:link4}</div></a>
  613. {/block:Iflink4}
  614. {block:Iflink5}
  615. <a href="{text:link5 url}">
  616. <div class="link">{text:link5}</div></a>
  617. {/block:Iflink5}
  618. {block:Iflink6}
  619. <a href="{text:link6 url}">
  620. <div class="link">{text:link6}</div></a>
  621. {/block:Iflink6}
  622. </div>
  623.  
  624. </div>
  625.  
  626.  
  627.  
  628.  
  629. {block:PostNotes}
  630. <article>
  631. NOTES:
  632. <div class="pagenotes">{PostNotes-16}</div>
  633. </article>
  634. {/block:PostNotes}
  635.  
  636.  
  637. {block:Posts}
  638. <article>
  639.  
  640. <div class="post">
  641.  
  642. <!--Unique code for each post type-->
  643. {block:Text}
  644. <div class="text">
  645. {block:Title}<h3>
  646. <a href="{Permalink}">{Title}</a></h3>{/block:Title}
  647. {Body}
  648. {/block:Text}
  649.  
  650. {block:Photo}
  651. <div class="photo">
  652. {LinkOpenTag}
  653. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  654. {block:Ifhidecaptions}
  655. {block:PermalinkPage}
  656. {block:Caption}
  657. <div class="caption">{Caption}</div>
  658. {/block:Caption}
  659. {/block:PermalinkPage}
  660. {/block:Ifhidecaptions}
  661. {block:Ifnothidecaptions}
  662. {block:Caption}
  663. <div class="caption">{Caption}</div>
  664. {/block:Caption}
  665. {/block:Ifnothidecaptions}
  666. {/block:Photo}
  667.  
  668. {block:Photoset}
  669. {block:If400pxposts}
  670. {Photoset-400}
  671. {/block:If400pxposts}
  672. {block:IfNOT400pxposts}
  673. {Photoset-250}
  674. {/block:Ifnot400pxposts}
  675.  
  676. {block:Ifhidecaptions}
  677. {block:PermalinkPage}
  678. {block:Caption}
  679. <div class="caption">{Caption}</div>
  680. {/block:Caption}
  681. {/block:PermalinkPage}
  682. {/block:Ifhidecaptions}
  683. {block:Ifnothidecaptions}
  684. {block:Caption}
  685. <div class="caption">{Caption}</div>
  686. {/block:Caption}
  687. {/block:Ifnothidecaptions}
  688. {/block:Photoset}
  689.  
  690. {block:Quote}
  691. <div class="quote">{Quote}</div>
  692. {block:Source}
  693. <div class="quotesource">- {Source}</div>
  694. {/block:Source}
  695. {/block:Quote}
  696.  
  697. {block:Link}
  698. <div class="linkpost">
  699. <a href="{URL}">{Name}</a></div>
  700. {block:Description}{Description}{/block:Description}
  701. {/block:Link}
  702.  
  703. {block:Chat}
  704. <div class="chat">
  705. {block:Title}
  706. <h3><a href="{Permalink}">{Title}</a></h3>
  707. {/block:Title}
  708. {block:Lines}
  709. {block:Label}
  710. {Label}
  711. {/block:Label}
  712. {Line}<br>
  713. {/block:Lines}
  714. </div>
  715. {/block:Chat}
  716.  
  717. {block:Audio}
  718. <div class="audio">
  719.  
  720. {block:AlbumArt}<div class="albumart">
  721. <img src="{AlbumArtURL}"/>
  722. <div class="button">
  723. <div class="player">{AudioPlayerBlack}</div></div>
  724. </div>{/block:AlbumArt}
  725.  
  726. {block:TrackName}
  727. <div class="trackname">
  728. <a href="{Permalink}">{TrackName}</a></div>
  729. {/block:TrackName}
  730.  
  731. {block:Ifhidecaptions}
  732. {block:PermalinkPage}
  733. {block:Caption}
  734. <div class="caption">{Caption}</div>
  735. {/block:Caption}
  736. {/block:PermalinkPage}
  737. {/block:Ifhidecaptions}
  738. {block:Ifnothidecaptions}
  739. {block:Caption}
  740. <div class="caption">{Caption}</div>
  741. {/block:Caption}
  742. {/block:Ifnothidecaptions}
  743. {/block:Audio}
  744.  
  745. {block:Video}
  746. <div class="video">
  747. {block:Ifnot400pxposts}
  748. <div class="video-player">{Video-250}</div>
  749. {block:Ifnot400pxposts}
  750. {block:If400pxposts}
  751. <div class="video-player">{Video-400}</div>
  752. {/block:If400pxposts}
  753.  
  754. {block:Ifhidecaptions}
  755. {block:PermalinkPage}
  756. {block:Caption}
  757. <div class="caption">{Caption}</div>
  758. {/block:Caption}
  759. {/block:PermalinkPage}
  760. {/block:Ifhidecaptions}
  761. {block:Ifnothidecaptions}
  762. {block:Caption}
  763. <div class="caption">{Caption}</div>
  764. {/block:Caption}
  765. {/block:Ifnothidecaptions}
  766. {/block:Video}
  767.  
  768. {block:Answer}
  769. <div class="askerimg"><img src="{AskerPortraitURL-40}"/></div>
  770. <div class="asker">{Asker}</div>
  771. <div class="question">{Question}</div>
  772. <div class="caption">{Answer}</div>
  773. {/block:Answer}
  774.  
  775.  
  776. </div>
  777.  
  778.  
  779. {block:IndexPage}
  780. <div class="postinfo">
  781.  
  782. <div class="tags">
  783. {block:HasTags}
  784. {block:Tags}
  785. <a href="{TagURL}"><div class="tag">{Tag}</div></a>
  786. {/block:Tags}
  787. {/block:HasTags}
  788. </div>
  789.  
  790. <a href="{Permalink}">
  791. <div class="info">
  792. {block:Date}
  793. {ShortDayOfWeek} {12Hour}:{Minutes} {AmPm}
  794. {/block:Date}
  795. {block:NoteCount}
  796. + {NoteCount}
  797. {/block:NoteCount}
  798. </div>
  799. </a>
  800.  
  801. </div>
  802.  
  803. {/block:IndexPage}
  804.  
  805.  
  806. {block:PermalinkPage}
  807. <div class="permalinkinfo">
  808. {block:Date}
  809. {ShortDayOfWeek} {12Hour}:{Minutes} {AmPm}
  810. {/block:Date}
  811.  
  812. {block:NoteCount}
  813. + {NoteCount}
  814. {/block:NoteCount}
  815.  
  816. <br>{block:RebloggedFrom}
  817. <a href="{ReblogParentURL}">Via</a>
  818. & {/block:RebloggedFrom}
  819. {block:ContentSource}
  820. <a href="{SourceURL}">Source</a>
  821. {/block:ContentSource}
  822.  
  823. <br>{block:HasTags}
  824. Filed Under:
  825. {block:Tags}
  826. <a href="{TagURL}">{Tag}, </a>
  827. {/block:Tags}
  828. {/block:HasTags}
  829. </div>
  830. {/block:PermalinkPage}
  831.  
  832.  
  833. </article>
  834.  
  835. {/block:Posts}
  836.  
  837.  
  838. <!--Pagination-->
  839. {block:Pagination}
  840. <div class="pagination">
  841. {block:PreviousPage}
  842. <a href="{PreviousPage}"><div class="pagibutton">← previous</div></a>
  843. {/block:PreviousPage}
  844. {block:NextPage}
  845. <a href="{NextPage}"><div class="pagibutton">next →</div></a>
  846. {/block:NextPage}
  847. </div>
  848. {/block:Pagination}
  849.  
  850.  
  851.  
  852. </div>
  853.  
  854.  
  855. <div id="cred"><a href="http://neonbikethemes.tumblr.com" title="neonbike themes">N</a></div>
  856.  
  857.  
  858. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  859. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  860. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  861. {block:IfInfiniteScroll}
  862. <script src="http://static.tumblr.com/kfhytre/cSgn7lmk0/jq.txt"></script>
  863. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  864. {/block:IfInfiniteScroll}
  865.  
  866. <!--Code for infinite scroll and grid layout-->
  867. <script>
  868. (function() {
  869. var $tumblelog = $('#content');
  870. {block:IfInfiniteScroll}
  871. $tumblelog.infinitescroll({
  872. navSelector : ".pagination",
  873. nextSelector : ".pagination a:first",
  874. itemSelector : "article",
  875. bufferPx : 50,
  876. done : "",
  877. loading: {
  878. img : "",
  879. msgText: ""
  880. },
  881. },
  882. function( newElements ) {
  883. var $newElems = $( newElements ).css({ opacity: 0 });
  884. $newElems.imagesLoaded(function(){
  885. $newElems.animate({ opacity: 1 });
  886. $tumblelog.masonry( 'appended', $newElems);
  887. });
  888. }
  889. );
  890. {/block:IfInfiniteScroll}
  891. $tumblelog.imagesLoaded( function(){
  892. $tumblelog.masonry({
  893. columnWidth: function( containerWidth ) {
  894. return containerWidth / 100;
  895. }
  896. });
  897. });
  898. })();
  899. </script>
  900.  
  901. </body>
  902. </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!