bychloethemes

Airy Blue Theme - by Chloe

Oct 18th, 2015
606
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.75 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <!------------------------------------------
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10.  
  11. Airy Blue Theme by Chloe | @dontbrag | @bychloethemes
  12.  
  13. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.
  14.  
  15. If I find any of this anywhere me & my squad (aka @fruitelf and @costalies) will personally drag ur name thru the dirt do not test us.
  16.  
  17. For html help go to @htmlqueens
  18.  
  19. ------------------------------------------->
  20.  
  21. <meta name="image:Background" content="" title="Background Image"/>
  22.  
  23. <meta name="color:Background" content="#fff"/>
  24.  
  25. <meta name="color:Text" content="#666"/>
  26. <meta name="color:Accent" content="#92b6d5" />
  27.  
  28. <meta name="if:Tiled Background" content="1"/>
  29. <meta name="if:Post Borders" content="1" />
  30. <meta name="if:Link Icons" content="0" />
  31.  
  32. <meta name="text:Link 1" content="link 1" />
  33. <meta name="text:URL 1" content="http://" />
  34. <meta name="text:Link 1 Icon" content="star-o" />
  35. <meta name="text:Link 2" content="link 2" />
  36. <meta name="text:URL 2" content="http://" />
  37. <meta name="text:Link 1 Icon" content="paw" />
  38. <meta name="text:Link 3" content="link 3" />
  39. <meta name="text:URL 3" content="http://" />
  40. <meta name="text:Link 1 Icon" content="flash" />
  41.  
  42. <meta charset="UTF-8" />
  43. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  44. <link rel="shortcut icon" href="{Favicon}">
  45. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  46. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  47. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  48. <link href='//fonts.googleapis.com/css?family=Quicksand:400|PT+Sans:400,700' rel='stylesheet' type='text/css'>
  49. <style type="text/css">
  50. #tumblr_controls {
  51. top:28px!important;
  52. right:0px!important;
  53. -webkit-filter: invert(100%);
  54. position:fixed!important;
  55. }
  56. ::-webkit-scrollbar {
  57. background-color:#fff;
  58. height: 7px;
  59. width: 7px;
  60. }
  61. ::-webkit-scrollbar-thumb {
  62. background-color:{color:Accent};
  63. border:2px solid #fff;
  64. }
  65. body{
  66. background:{color:background} url({image:Background})
  67. {block:IfTiledBackground}
  68. repeat fixed;
  69. {/block:IfTiledBackground}
  70. {block:IfNotTiledbackground}
  71. no-repeat center center fixed;
  72. -webkit-background-size:cover;
  73. -moz-background-size:cover;
  74. -ms-background-size:cover;
  75. -o-background-size:cover;
  76. background-size:cover;
  77. {/block:IfNotTiledbackground}
  78. color:{color:text};
  79. font-size:13px;
  80. font-family: 'PT Sans', sans-serif;
  81. font-weight:400;
  82. }
  83. a {
  84. text-decoration:none;
  85. color:{color:Text};
  86. }
  87. iframe, img, embed, object, video {
  88. max-width: 100%;
  89. }
  90. img {
  91. height: auto;
  92. width: auto;
  93. vertical-align:middle;
  94. }
  95. #infscr-loading {
  96. position:absolute;
  97. bottom:30px;
  98. width:200px;
  99. margin-left:50%;
  100. left:-100px;
  101. text-align:center;
  102. }
  103. #infscr-loading img{
  104. }
  105. #top, #left {
  106. background:{color:Accent};
  107. position:fixed;
  108. }
  109. #top {
  110. height:28px;
  111. width:100%;
  112. z-index:99;
  113. top:0;
  114. }
  115. #left {
  116. width:28px;
  117. height:100%;
  118. top:11px;
  119. z-index:999;
  120. left:0;
  121. }
  122. #sidebar {
  123. width:300px;
  124. left:80px;
  125. bottom:100px;
  126. position:fixed;
  127. text-align:center;
  128. padding: 0;
  129. margin:0;
  130. z-index:999;
  131. background:{color:background};
  132. }
  133. #sidebar h1 {
  134. font-weight:normal;
  135. font-size:2.8em;
  136. margin:0;
  137. font-family: 'Quicksand', sans-serif;
  138. }
  139. ul#navlinks {
  140. list-style-type:none;
  141. font-size:12px;
  142. margin: 5px 0;
  143. padding:0;
  144. z-index:99;
  145. text-align:center;
  146. }
  147. {block:IfNotLinkIcons}
  148. ul#navlinks .fa:before {
  149. display:none;
  150. }
  151. {/block:IfNotLinkIcons}
  152. {block:IfLinkIcons}
  153. ul#navlinks .fa {
  154. margin-right:5px;
  155. }
  156. {/block:IfLinkIcons}
  157. ul#navlinks li {
  158. line-height:16px;
  159. display:inline-block;
  160. text-transform:uppercase;
  161. text-align:center;
  162. padding: 2px;
  163. margin:2px;
  164. font-family: 'PT Sans', sans-serif;
  165. }
  166. ul#navlinks a {
  167. color:{color:accent};
  168. -webkit-transition: all 0.3s ease-in-out;
  169. -moz-transition: all 0.3s ease-in-out;
  170. -o-transition: all 0.3s ease-in-out;
  171. transition: all 0.3s ease-in-out;
  172. }
  173. ul#navlinks a:hover {
  174. color:{color:text};
  175. -webkit-transition: all 0.3s ease-in-out;
  176. -moz-transition: all 0.3s ease-in-out;
  177. -o-transition: all 0.3s ease-in-out;
  178. transition: all 0.3s ease-in-out;
  179. }
  180. #sidebar p {
  181. margin:3px auto;
  182. width:300px;
  183. }
  184. #wrapper {
  185. margin-left:calc(50% + 100px);
  186. -webkit-transform: translate(-50%, 0%);
  187. -moz-transform: translate(-50%, 0%);
  188. -ms-transform: translate(-50%, 0%);
  189. -o-transform: translate(-50%, 0%);
  190. transform: translate(-50%, 0%);
  191. margin-top:30px;
  192. {block:IndexPage}
  193. width:576px;
  194. {/block:IndexPage}
  195. {block:PermalinkPage}
  196. width:500px;
  197. {/block:PermalinkPage}
  198. }
  199. #posts {
  200. margin-top:88px;
  201. padding-left:8px;
  202. }
  203. .credit {
  204. width:16px;
  205. height:14px;
  206. color: {color:Text};
  207. position:fixed;
  208. bottom: 15px;
  209. right: 15px;
  210. line-height: 14px;
  211. font-size:12px;
  212. padding:3px 4px;
  213. overflow: hidden;
  214. z-index:999999999999999999;
  215. text-align:left;
  216. font-family:'PT Sans', sans-serif;
  217. border-bottom:1px solid {color:accent};
  218. -webkit-transition: all 0.5s ease-in-out 0.2s;
  219. -moz-transition: all 0.5s ease-in-out 0.2s;
  220. -o-transition: all 0.5s ease-in-out 0.2s;
  221. transition: all 0.5s ease-in-out 0.2s;
  222. }
  223. .fa-diamond {
  224. position:absolute;
  225. right:5px;
  226. }
  227. .credit:hover {
  228. width:130px;
  229. color:{color:text};
  230. -webkit-transition: all 0.5s ease-in-out;
  231. -moz-transition: all 0.5s ease-in-out;
  232. -o-transition: all 0.5s ease-in-out;
  233. transition: all 0.5s ease-in-out;
  234. }
  235. .credit a .wordy {
  236. color:{color:text};
  237. text-decoration: none;
  238. font-size:14px;
  239. }
  240. .credit a:hover {
  241. cursor:help;
  242. }
  243. .credit .wordy {
  244. opacity:0;
  245. visibility:hidden;
  246. -webkit-transition: all 0.2s ease-in-out;
  247. -moz-transition: all 0.2s ease-in-out;
  248. -o-transition: all 0.2s ease-in-out;
  249. transition: all 0.2s ease-in-out;
  250. }
  251. .credit:hover .wordy {
  252. opacity: 1;
  253. visibility: visible;
  254. -webkit-transition: all 0.5s ease-in-out 0.5s;
  255. -moz-transition: all 0.5s ease-in-out 0.5s;
  256. -o-transition: all 0.5s ease-in-out 0.5s;
  257. transition: all 0.5s ease-in-out 0.5s;
  258. }
  259. article {
  260. margin-bottom:60px;
  261. position:relative;
  262. {block:IndexPage}
  263. width:250px;
  264. {/block:IndexPage}
  265. {block:PermalinkPage}
  266. width:500px;
  267. {/block:PermalinkPage}
  268. }
  269. {block:IfPostBorders}
  270. .photos {
  271. outline:8px solid {color:Accent};
  272. outline-offset:0px;
  273. }
  274. .photo-wrap {
  275. outline:2px solid #fff;
  276. outline-offset:0px;
  277. }
  278. {/block:IfPostBorders}
  279. article a {
  280. color:{color:Accent};
  281. }
  282. article h2 {
  283. margin:0;
  284. font-size:1.3em;
  285. font-family:'Quicksand', sans-serif;
  286. font-weight:bold;
  287. }
  288. article p {
  289. margin:10px 0;
  290. }
  291. article blockquote {
  292. margin: 5px 0 5px 10px;
  293. border-left:2px solid {color:Accent};
  294. padding-left:10px;
  295. }
  296. article ul, article ol {
  297. padding-left:25px;
  298. }
  299. .quote-post cite {
  300. text-align:right;
  301. display:block;
  302. margin:5px 5px 10px 5px;
  303. }
  304. ul.chat-list {
  305. padding:0;
  306. list-style-type:none;
  307. }
  308. ul.chat-list li {
  309. line-height:17px;
  310. }
  311. ul.chat-list .label {
  312. color:{color:Accent};
  313. }
  314. .album-art img {
  315. {block:IndexPage}
  316. width:80px;
  317. height:80px;
  318. {/block:IndexPage}
  319. float:left;
  320. margin-right:10px;
  321. {block:PermalinkPage}
  322. width:120px;
  323. height:120px;
  324. {/block:PermalinkPage}
  325. }
  326. .audio-info {
  327. {block:IndexPage}
  328. min-height:80px;
  329. {/block:IndexPage}
  330. {block:PermalinkPage}
  331. min-height:120px;
  332. line-height:140%;
  333. {/block:PermalinkPage}
  334. margin-bottom:10px;
  335. }
  336. .tumblr_audio_player {
  337. position: absolute;
  338. {block:IndexPage}
  339. top: 25px;
  340. left: 25px;
  341. {/block:IndexPage}
  342. {block:PermalinkPage}
  343. top: 45px;
  344. left: 45px;
  345. {/block:PermalinkPage}
  346. width: 30px;
  347. height: 30px;
  348. border-radius: 50%;
  349. opacity: 0.8;
  350. }
  351. .photo-mask {
  352. width:100%;
  353. height:100%;
  354. position:absolute;
  355. opacity:0;
  356. visibility:hidden;
  357. -webkit-transition: all 0.3s ease-in;
  358. -moz-transition: all 0.3s ease-in;
  359. -o-transition: all 0.3s ease-in;
  360. transition: all 0.3s ease-in;
  361. background:rgba(255, 255, 255, 0.95);
  362. {block:IfNotPostBorders}
  363. outline:2px solid {color:accent};
  364. outline-offset:-2px;
  365. {/block:IfNotPostBorders}
  366. }
  367. article:hover .photo-mask {
  368. opacity:1;
  369. visibility:visible;
  370. -webkit-transition: all 0.3s ease-in;
  371. -moz-transition: all 0.3s ease-in;
  372. -o-transition: all 0.3s ease-in;
  373. transition: all 0.3s ease-in;
  374. }
  375. .photo-info {
  376. top:50%;
  377. left:50%;
  378. padding: 7px;
  379. position:relative;
  380. text-align:center;
  381. -webkit-transform: translate(-50%, -50%);
  382. -moz-transform: translate(-50%, -50%);
  383. -ms-transform: translate(-50%, -50%);
  384. -o-transform: translate(-50%, -50%);
  385. transform: translate(-50%, -50%);
  386. color:{color:Accent};
  387. width:90%;
  388. }
  389. .photo-info a {
  390. background:transparent;
  391. color:{color:Accent};
  392. padding:2px 5px;
  393. margin:3px ;
  394. line-height:200%;
  395. font-family: 'PT Sans', sans-serif;
  396. -webkit-transition: all 0.4s ease-in-out;
  397. -moz-transition: all 0.4s ease-in-out;
  398. -o-transition: all 0.4s ease-in-out;
  399. transition: all 0.4s ease-in-out;
  400. }
  401. .photo-info .fa {
  402. margin-right:3px;
  403. }
  404. .photo-info a:hover {
  405. color:#fff;
  406. background:{color:accent};
  407. -webkit-transition: all 0.4s ease-in-out;
  408. -moz-transition: all 0.4s ease-in-out;
  409. -o-transition: all 0.4s ease-in-out;
  410. transition: all 0.4s ease-in-out;
  411. }
  412. .other_perma {
  413. text-align:right;
  414. color:{color:Accent};
  415. padding:3px 10px;
  416. font-family: 'PT Sans', sans-serif;
  417. }
  418.  
  419. .extra-info {
  420. position: fixed;
  421. padding: 0 30px;
  422. line-height: 20px;
  423. width: 120px;
  424. text-align: left;
  425. top: 0px;
  426. left: 100%;
  427. }
  428. .extra-info .fa {
  429. color:{color:Accent};
  430. }
  431. ol.notes {
  432. padding: 0px;
  433. margin: 20px 0;
  434. list-style-type: none;
  435. }
  436. ol.notes a {
  437. border-bottom:0;
  438. }
  439. ol.notes li.note {
  440. padding: 3px;
  441. margin-bottom:3px;
  442. }
  443. ol.notes li.note img.avatar {
  444. float:right;
  445. border-radius:50%;
  446. }
  447. ol.notes li.note blockquote {
  448. border-color: {color:text};
  449. padding-left: 6px;
  450. margin: 6px;
  451. }
  452. ol.notes li.note blockquote a {
  453. text-decoration: none;
  454. }
  455. a:focus {
  456. outline:none;
  457. }
  458. #image {
  459. </style>
  460. </head>
  461. <body>
  462. <div id="top"></div>
  463. <div id="left"></div>
  464.  
  465.  
  466. <div id="sidebar">
  467. <h1>{Title}</h1>
  468. <ul id="navlinks">
  469. <a href="/"><li><i class="fa fa-refresh"></i>home</li></a>
  470. {block:AskEnabled}
  471. <a href="/ask"><li><i class="fa fa-commenting-o"></i>ask</li></a>
  472. {/block:AskEnabled}
  473. {block:SubmissionsEnabled}
  474. <a href="/submit"><li><i class="fa fa-copy"></i>submit</li></a>
  475. {/block:SubmissionsEnabled}
  476. {block:IfLink1}
  477. <a href="{text:URL 1}"><li><i class="fa fa-{text:Link 1 Icon}"></i>{text:Link 1}</li></a>
  478. {/block:IfLink1}
  479. {block:IfLink2}
  480. <a href="{text:URL 2}"><li><i class="fa fa-{text:Link 2 Icon}"></i>{text:Link 2}</li></a>
  481. {/block:IfLink2}
  482. {block:IfLink3}
  483. <a href="{text:URL 3}"><li><i class="fa fa-{text:Link 3 Icon}"></i>{text:Link 3}</li></a>
  484. {/block:IfLink3}
  485. <a href="/archive"><li><i class="fa fa-eye"></i>archive</li></a>
  486. <a href="http://dontbrag.tumblr.com" target="_blank"><li><i class="fa fa-copyright"></i>theme</li></a>
  487. </ul>
  488. {block:Description}
  489. <p>{Description}</p>
  490. {/block:Description}
  491. </div>
  492.  
  493.  
  494. <div id="wrapper">
  495. <div id="posts">
  496. {block:Posts}
  497. <article>
  498. {block:Text}
  499. <div class="text-post">
  500. {block:Title}<h2>{Title}</h2>{/block:Title}
  501. {Body}
  502. </div>
  503. {block:IndexPage}
  504. <div class="other_perma">
  505. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  506. </div>
  507. {/block:IndexPage}
  508. {/block:Text}
  509.  
  510. {block:Photo}
  511. <div class="photo-post">
  512. {block:IndexPage}
  513. <div class="photo-mask">
  514. <div class="photo-info"><a href="{Permalink}" target="_blank"><i class="fa fa-clock-o"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a> <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i> REBLOG</a> <br><a href="{Permalink}" target="_blank"><i class="fa fa-copy"></i> {NoteCount}</a></div>
  515. </div>
  516. <div class="photo-wrap"><img src="{PhotoURL-250}" class="photos"></div>
  517. {/block:IndexPage}
  518. {block:PermalinkPage}
  519. <div class="photo-wrap"><img src="{PhotoURL-500}" class="photos"></div>
  520. {block:Caption}{Caption}{/block:Caption}
  521. {/block:PermalinkPage}
  522. </div>
  523. {/block:Photo}
  524.  
  525. {block:Photoset}
  526. <div class="photoset-post">
  527. {block:IndexPage}
  528. {Photoset-250}
  529. <div class="other_perma">
  530. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  531. </div>
  532. {/block:IndexPage}
  533. {block:PermalinkPage}
  534. {Photoset-500}
  535. {block:Caption}{Caption}{/block:Caption}
  536. {/block:PermalinkPage}
  537. </div>
  538. {/block:Photoset}
  539.  
  540. {block:Quote}
  541. <div class="quote-post">
  542. <h2><span style="color:{color:Accent};">❝</span> {Quote} <span style="color:{color:Accent};">❞</span></h2>
  543. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  544. </div>
  545. {block:IndexPage}
  546. <div class="other_perma">
  547. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  548. </div>
  549. {/block:IndexPage}
  550. {/block:Quote}
  551.  
  552. {block:Link}
  553. <div class="link-post">
  554. <h2><a href="{URL}" {Target}>{Name} &nbsp;<i class="fa fa-angle-right"></i></a></h2>
  555. {block:Description}{Description}{/block:Description}
  556. </div>
  557. {block:IndexPage}
  558. <div class="other_perma">
  559. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  560. </div>
  561. {/block:IndexPage}
  562. {/block:Link}
  563.  
  564. {block:Chat}
  565. <div class="chat-post">
  566. {block:Title}<h2>{Title}</h2>{/block:Title}
  567. <ul class="chat-list">
  568. {block:Lines}
  569. <li class="{Alt}">
  570. {block:Label}<span class="label">{Label}</span>{/block:Label}
  571. {Line}</li>
  572. {/block:Lines}
  573. </ul>
  574. </div>
  575. {block:IndexPage}
  576. <div class="other_perma">
  577. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  578. </div>
  579. {/block:IndexPage}
  580. {/block:Chat}
  581.  
  582. {block:Audio}
  583. <div class="audio">
  584. {block:AlbumArt}
  585. <div class="album-art">
  586. <img src="{AlbumArtURL}">
  587. </div>
  588. {/block:AlbumArt}
  589. <div class="audio-info">
  590. Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  591. Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  592. Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br>
  593. Plays: {FormattedPlayCount}</div>
  594. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  595. </div>
  596. {block:IndexPage}
  597. <div class="other_perma">
  598. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  599. </div>
  600. {/block:IndexPage}
  601. {block:PermalinkPage}
  602. {block:Caption}{Caption}{/block:Caption}
  603. {/block:PermalinkPage}
  604. {/block:Audio}
  605.  
  606. {block:Video}
  607. <div class="video-post">
  608. {block:IndexPage}
  609. {Video-250}
  610. {/block:IndexPage}
  611. {block:PermalinkPage}
  612. {Video-500}
  613. {block:Caption}{Caption}{/block:Caption}
  614. {/block:PermalinkPage}
  615. </div>
  616. {block:IndexPage}
  617. <div class="other_perma">
  618. <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
  619. </div>
  620. {/block:IndexPage}
  621. {/block:Video}
  622.  
  623. {block:PermalinkPage}
  624.  
  625. {block:PostNotes}
  626. <div id="notes">
  627. {PostNotes-16}
  628. </div>
  629. {/block:PostNotes}
  630. {/block:PermalinkPage}
  631.  
  632. </article>
  633. {block:PermalinkPage}
  634.  
  635. <div class="extra-info">
  636. {block:Date}<i class="fa fa-clock-o"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
  637. {block:NoteCount}<br><i class="fa fa-files-o"></i> {NoteCount}{/block:NoteCount}
  638. {block:RebloggedFrom}<br><i class="fa fa-retweet"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  639. {block:ContentSource}<br><i class="fa fa-copyright"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
  640. {block:HasTags}<br><i class="fa fa-tag"></i> {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}
  641. </div>
  642. {/block:PermalinkPage}
  643. {/block:Posts}
  644. </div><!--end posts-->
  645. </div><!--end wrapper-->
  646.  
  647. {block:Pagination}
  648. <div class="pagination" style="visibility:hidden;">
  649. {block:PreviousPage}
  650. <a href="{PreviousPage}">previous</a>
  651. {/block:PreviousPage}
  652. {block:NextPage}
  653. <a href="{NextPage}" id="next">next</a>
  654. {/block:NextPage}
  655. </div>
  656. {/block:Pagination}
  657. <div class="credit">
  658. <a class="mine" target="_blank" href="http://dontbrag.tumblr.com"><i class="fa fa-diamond"></i>&nbsp;<span class="wordy">By Chloe Themes</span></a>
  659. </div>
  660. {block:IndexPage}
  661. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  662. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  663. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  664. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  665. <script>
  666. (function () {
  667. var $tumblelog = $('#posts');
  668. $tumblelog.imagesLoaded(function () {
  669. $tumblelog.masonry({
  670. itemSelector: 'article',
  671. isAnimated:true,
  672. columnWidth:250,
  673. gutterWidth:60,
  674. });
  675. });
  676. $tumblelog.infinitescroll({
  677. navSelector : "div.pagination",
  678. nextSelector : ".pagination a#next",
  679. itemSelector : "article",
  680. loading: {
  681. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  682. img : "http://static.tumblr.com/yxfeliq/ZQFnvhfad/dontbrag-loading.gif",
  683. msg: null,
  684. msgText: ""
  685. },
  686. },
  687.  
  688. function( newElements ) {
  689. var $newElems = $(newElements)
  690. $newElems.hide();
  691. $newElems.imagesLoaded(function(){
  692. $tumblelog.masonry( 'appended', $newElems, {
  693. isAnimated: true,
  694. animationOptions: {
  695. duration: 250,
  696. easing: 'linear',
  697. queue: false
  698. }
  699. },
  700. function(){
  701. $newElems.fadeIn('slow');
  702. }
  703. );
  704. });
  705. });
  706. })();
  707. </script>
  708. {/block:IndexPage}
  709. <div style="display:none;"><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5109324";
  710. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  711. fhs.src = "http://freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  712. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  713. </script>
  714. </div>
  715. <!--/////////End Masonry//////////-->
  716.  
  717. </body>
  718. </html>
Advertisement
Add Comment
Please, Sign In to add comment