API tools faq
paste
Advertisement
jaesoonie

THEME #31 JIMIN

jaesoonie
Sep 21st, 2013
5,318
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.96 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------------------------------------
  2.  
  3.  
  4. ᴛʜᴇᴍᴇ #31; ᴍᴀᴅᴇ ʙʏ >SOONJUN<. [ʏᴏɴɢ.ᴄᴏ.ᴠᴜ]
  5. sᴏᴏɴᴊᴜɴᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  6. ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ.
  7. ᴀɴʏ ǫᴜᴇsᴛɪᴏɴs ᴀᴛ ᴀʟʟ ᴄᴏᴍᴇ ᴀsᴋ.
  8.  
  9.  
  10. ----------------------------------------------------------------------->
  11.  
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  13. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15. <head>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{favicon}">
  18. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script>
  21. $(document).ready(function() {
  22. //
  23. $('a.poplight[href^=#]').click(function() {
  24. var popID = $(this).attr('rel'); //Get Popup Name
  25. var popURL = $(this).attr('href'); //Get Popup href to define size
  26. var query= popURL.split('?');
  27. var dim= query[1].split('&');
  28. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  29. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://s5.postimage.org/ypgcl25pv/close.png" class="btn_close" title="Close Window" alt="Close" style="background-color: #f1f1f1; padding: 2px;" /></a>');
  30. var popMargTop = ($('#' + popID).height() + 80) / 2;
  31. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  32. //Apply Margin to Popup
  33. $('#' + popID).css({
  34. 'margin-top' : -popMargTop,
  35. 'margin-left' : -popMargLeft
  36. });
  37. $('body').append('<div id="fade"></div>');
  38. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  39. return false;
  40. });
  41. $('a.close, #fade').live('click', function() {
  42. $('#fade , .popup_block').fadeOut(function() {
  43. $('#fade, a.close').remove(); //fade them both out
  44. });
  45. return false;
  46. });
  47. });
  48. </script>
  49. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  50. </script>
  51.  
  52. <meta name="font:body" content="trebuchet ms, sans-serif"/>
  53. <meta name="color:background" content="#ffffff" />
  54. <meta name="color:title" content="#666666" />
  55. <meta name="color:text" content="#9b9898" />
  56. <meta name="color:bold" content="#6f6e6e" />
  57. <meta name="color:italic" content="#b9b8b8" />
  58. <meta name="color:description" content="#666666" />
  59. <meta name="color:navigation links" content="#f5f5f5" />
  60. <meta name="color:navigation links hover" content="#444444" />
  61. <meta name="color:hyperlinks" content="#a2a2a2"/>
  62. <meta name="color:hyperlinks hover" content="#dadada" />
  63. <meta name="color:caption bg" content="#fafafa" />
  64. <meta name="color:info bg" content="#181818" />
  65. <meta name="color:info" content="#f0eeee" />
  66.  
  67. <meta name="text:Link1" content="/" />
  68. <meta name="text:Link1 Title" content="link 1" />
  69. <meta name="text:Link2" content="/" />
  70. <meta name="text:Link2 Title" content="link 2" />
  71. <meta name="text:Link3" content="/" />
  72. <meta name="text:Link3 Title" content="link 3" />
  73. <meta name="text:Link4" content="/" />
  74. <meta name="text:Link4 Title" content="link 4" />
  75. <meta name="text:Link5" content="/" />
  76. <meta name="text:Link5 Title" content="link 5" />
  77. <meta name="text:Link6" content="/" />
  78. <meta name="text:Link6 Title" content="link 6" />
  79.  
  80. <meta name="if:blogroll" content="0"/>
  81. <meta name="text:RollLink Title" content="blogroll" />
  82.  
  83. <meta name="if:2columns210" content="0"/>
  84. <meta name="if:2columns250" content="0"/>
  85. <meta name="if:250px" content="0"/>
  86. <meta name="if:400px" content="0"/>
  87. <meta name="if:500px" content="1"/>
  88.  
  89. <meta name="if:infinitescroll" content="0">
  90. <meta name="if:caption" content="1">
  91. <meta name="if:greyscale" content="0"/>
  92. <meta name="text:opacity value" content="1" />
  93.  
  94. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  95. </script>
  96. {block:if2columns210}
  97. {block:indexpage}
  98. <script type="text/javascript">
  99. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  100. $(document).ready(function() {
  101. function photosetResize() {
  102. $('iframe.photoset').each(function(){
  103. var newSize = 210;
  104. var newSrc = $(this).attr('src').replace('500',newSize);
  105. $(this).attr('src', newSrc).width(newSize);
  106. var high = $(this).css('height');
  107. var calculate = parseInt(high, 10)* newSize/500;
  108. $(this).css('height', calculate);
  109. });
  110. }
  111. photosetResize();
  112. });
  113. </script>
  114. {/block:indexpage}
  115. {/block:if2columns210}
  116.  
  117. <script type="text/javascript"
  118. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  119. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  120. <script>
  121. (function($){
  122. $(document).ready(function(){
  123. $("[title]").style_my_tooltips();
  124. });
  125. })(jQuery);
  126. </script>
  127.  
  128. <style type="text/css">
  129.  
  130. iframe#tumblr_controls {
  131. right:0px !important;
  132. position:fixed !important;
  133. -webkit-filter:invert(100%);
  134. opacity:0.2;
  135. z-index:99;
  136. -webkit-transition-duration:0.8s;
  137. -moz-transition-duration: 0.8s;}
  138. iframe#tumblr_controls:hover {opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  139.  
  140.  
  141. ::-webkit-scrollbar-track {background-color:#fff;}
  142. ::-webkit-scrollbar-thumb {background-color:#f0f0f0;}
  143. ::-webkit-scrollbar {width:7px;height:7px;}
  144.  
  145. ::selection {color: #bbb; background: #f5f5f5; }
  146. ::-moz-selection {color: #bbb; background: #f5f5f5; }
  147. ::-webkit-selection {color: #bbb; background: #f5f5f5; }
  148.  
  149. body{
  150. background-color: {color:background};
  151. font-family:trebuchet ms;
  152. font-family:{font:body};
  153. line-height:100%;
  154. color:{color:text};
  155. word-wrap: break-word;
  156. font-size:10px;}
  157.  
  158. li {list-style:square;}
  159.  
  160. a { text-decoration:none;
  161. cursor:pointer;
  162. color:{color:hyperlinks};
  163. -webkit-transition: all 0.7s ease-in-out;
  164. -moz-transition: all 0.7s ease-in-out;
  165. -o-transition: all 0.7s ease-in-out;
  166. -ms-transition: all 0.7s ease-in-out;
  167. transition: all 0.7s ease-in-out;}
  168.  
  169. a:link, a:active, a:visited {
  170. color: {color:hyperlinks};
  171. -webkit-transition: all 0.7s ease-in-out;
  172. -moz-transition: all 0.7s ease-in-out;
  173. -o-transition: all 0.7s ease-in-out;
  174. -ms-transition: all 0.7s ease-in-out;
  175. transition: all 0.7s ease-in-out;}
  176.  
  177. a:hover {color:{color:hyperlinks hover};}
  178.  
  179. b, strong {
  180. font-weight:heavy;
  181. color:{color:bold};}
  182.  
  183. i, em {
  184. font-weight:light;
  185. color:{color:italic};}
  186.  
  187. blockquote {
  188. margin: 5px;
  189. padding:0px 3px 0px 3px;
  190. line-height:90%;
  191. border-left: 1px solid #ddd;}
  192.  
  193. blockquote img {
  194. {block:indexpage}
  195. width:190px;
  196. {/block:indexpage}
  197. {block:permalinkpage}
  198. width:410px;
  199. {/block:permalinkpage}
  200. overflow: auto;}
  201.  
  202. #posts img {
  203. {block:if2columns210}
  204. max-width:200px;
  205. height:auto;
  206. {/block:if2columns210}
  207. {block:if250px}
  208. max-width:240px;
  209. height:auto;
  210. {/block:if250px}
  211. {block:if400px}
  212. max-width:390px;
  213. height:auto;
  214. {/block:if400px}
  215. {block:if500px}
  216. max-width:490px;
  217. height:auto;
  218. {/block:if500px}
  219. {block:permalinkpage}width:auto;height:auto;{/block:permalinkpage};}
  220.  
  221. #caption{
  222. margin-top:2px;
  223. padding: 3px 10px 3px 10px;
  224. background-color:{color:caption bg};}
  225.  
  226. pre, xmp, plaintext, listing {
  227. display: block;
  228. white-space: pre;
  229. background: {color:bg block};
  230. padding: 5px;
  231. word-wrap: break-word;
  232. font: 9px consolas;}
  233.  
  234. #entry{
  235. padding:30px 10px 50px 0px;
  236. margin-left: 440px;
  237. {block:indexpage}
  238. {block:if2columns210}
  239. width:730px;float:center;
  240. {/block:if2columns210}
  241. {block:if2columns250}
  242. width:760px;float:center;
  243. {/block:if2columns250}
  244. {block:if250px}
  245. width:250px;
  246. {/block:if250px}
  247. {block:if400px}
  248. width:400px;
  249. {/block:if400px}
  250. {block:if500px}
  251. width:500px;
  252. {/block:if500px}
  253. {/block:indexpage}
  254. {block:permalinkpage}
  255. width:550px;padding:50px 10px 50px 0px;
  256. {/block:permalinkpage}}
  257.  
  258. #posts{
  259. line-height:90%;
  260. {block:indexpage}
  261. {block:if2columns210}
  262. width:210px;margin-left:35px;margin-bottom:35px;
  263. {/block:if2columns210}
  264. {block:if2columns250}
  265. width:250px;margin-left:25px;margin-bottom:25px;
  266. {/block:if2columns250}
  267. {block:if250px}
  268. width:250px;margin-bottom:20px;
  269. {/block:if250px}
  270. {block:if400px}
  271. width:400px;margin-bottom:25px;
  272. {/block:if400px}
  273. {block:if500px}
  274. width:500px; margin-bottom:25px;
  275. {/block:if500px}
  276. {/block:indexpage}
  277. {block:PermalinkPage}
  278. width:500px;margin-bottom:20px;
  279. {/block:PermalinkPage}}
  280.  
  281. #opandgrey{
  282. opacity:{text:opacity value};
  283. -webkit-transition-duration:0.8s;
  284. -moz-transition-duration: 0.8s;
  285. transition: all 0.8s ease-in-out;
  286. {block:ifgreyscale}
  287. 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");
  288. filter: gray;
  289. -webkit-filter: grayscale(100%);
  290. -webkit-transition-duration:0.8s;
  291. -moz-transition-duration: 0.8s;
  292. transition: all 0.8s ease-in-out;
  293. {/block:ifgreyscale}}
  294.  
  295. #opandgrey:hover{{block:indexpage}opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;-webkit-filter: grayscale(0%);{/block:indexpage}}
  296.  
  297. #text {padding: 3px 6px 3px 6px;text-align:justify;}
  298.  
  299. #sidebar {
  300. position: fixed;
  301. top: 150px;
  302. width:180px;
  303. left:240px;
  304. z-index:222;}
  305.  
  306. #title {
  307. font-family:times;
  308. font-style:oblique;
  309. letter-spacing:-1px;
  310. font-size:30px;
  311. width:180px;
  312. text-align:center;
  313. position:relative;
  314. line-height:80%;
  315. color:{color:title};}
  316.  
  317. #description {
  318. font-size:10px;
  319. text-align: justify;
  320. color:{color:description};
  321. font-family:calibri;
  322. letter-spacing:1px;
  323. padding: 5px;
  324. width: 170px;
  325. height:auto;
  326. line-height:120%;
  327. margin-top:2px;}
  328.  
  329. #navigation{
  330. width: 180px;
  331. margin-top:2px;
  332. z-index:33;
  333. position:relative;
  334. text-align:center;
  335. -webkit-transition: all 0.7s ease-in-out;
  336. -moz-transition: all 0.7s ease-in-out;
  337. -o-transition: all 0.7s ease-in-out;
  338. -ms-transition: all 0.7s ease-in-out;
  339. transition: all 0.7s ease-in-out;}
  340.  
  341. #navigation a{
  342. display:inline-block;
  343. font-size:10px;
  344. padding:2px;
  345. font-family:helvetica;
  346. width: 12px;
  347. color:#666;
  348. margin:2px;
  349. text-align:center;
  350. background:{color:navigation links};
  351. box-shadow: 0px 0px 1px #eee;
  352. border-radius: 2px;
  353. cursor:pointer;}
  354.  
  355. #navigation a:hover {color:#fff;background:{color:navigation links hover};}
  356.  
  357. #pagination {
  358. display:inline-block;
  359. text-align:center;
  360. font-size:10px;
  361. font-family:calibri;
  362. font-style:oblique;
  363. color:{color:description};
  364. width:170px;
  365. padding:5px;
  366. margin-top:2px;
  367. {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}}
  368.  
  369. #pagination a{color:{color:description};}
  370.  
  371. .info {
  372. position:absolute;
  373. text-transform:uppercase;
  374. text-align: center;
  375. letter-spacing:1px;
  376. font-family: consolas;
  377. font-size:8px;
  378. color:{color:info};
  379. opacity:0;
  380. background:{color:info bg};
  381. {block:if2columns210}
  382. width:210px;
  383. {/block:if2columns210}
  384. {block:if2columns250}
  385. width:250px;
  386. {/block:if2columns250}
  387. {block:if250px}
  388. width:250px;
  389. {/block:if250px}
  390. {block:if400px}
  391. width:400px;
  392. {/block:if400px}
  393. {block:if500px}
  394. width:500px;
  395. {/block:if500px}
  396. line-height:150%;
  397. {block:PermalinkPage}
  398. display:none;
  399. {/block:PermalinkPage}
  400. -webkit-transition: all 0.8s ease-in-out;
  401. -moz-transition: all 0.8s ease-in-out;}
  402.  
  403. .infotext{
  404. position:relative;
  405. z-index:333;
  406. text-transform:uppercase;
  407. text-align: left;
  408. letter-spacing:1px;
  409. font-family: consolas;
  410. font-size:8px;
  411. color:{color:info};
  412. padding:7px;
  413. background:{color:info bg};
  414. margin-bottom:-15px;
  415. margin-top:-15px;
  416. border-top: 1px solid #f5f5f5;
  417. {block:if2columns210}
  418. width:196px;
  419. {/block:if2columns210}
  420. {block:if2columns250}
  421. width:236px;
  422. {/block:if2columns250}
  423. {block:if250px}
  424. width:236px;
  425. {/block:if250px}
  426. {block:if400px}
  427. width:386px;
  428. {/block:if400px}
  429. {block:if500px}
  430. width:486px;
  431. {/block:if500px}
  432. opacity:0;
  433. {block:PermalinkPage}
  434. display:none;
  435. {/block:PermalinkPage}
  436. -webkit-transition: all 0.8s ease-in-out;
  437. -moz-transition: all 0.8s ease-in-out;}
  438.  
  439. #posts:hover .info, #posts:hover .infotext {
  440. opacity:1;
  441. -webkit-transition: all 0.8s ease-in-out;
  442. -moz-transition: all 0.8s ease-in-out;}
  443.  
  444. .info a, .infotext a{
  445. color:{color:info};
  446. -webkit-transition: all 0.7s ease-in-out;
  447. -moz-transition: all 0.7s ease-in-out;
  448. -o-transition: all 0.7s ease-in-out;
  449. -ms-transition: all 0.7s ease-in-out;
  450. transition: all 0.7s ease-in-out;}
  451.  
  452. .info a:hover{text-shadow: 1px 1px 2px #ddd;}
  453.  
  454. #infoperm{
  455. font-family: calibri;
  456. font-size:9px;
  457. text-transform:uppercase;
  458. letter-spacing:0px;
  459. text-align:left;
  460. margin-top:10px;
  461. padding-left: 13px;
  462. padding-right: 13px;
  463. padding-top: 8px;
  464. padding-bottom: 8px;
  465. background-color: #f9f9f9;
  466. {block:permalinkpage}width:475px;{/block:permalinkpage}}
  467.  
  468. #tagperm{
  469. font-family:calibri;
  470. text-transform:normal;
  471. font-size:9px;
  472. letter-spacing: 1px;
  473. text-align:left;
  474. margin-top: 3px;
  475. padding-top: 3px;
  476. background-color: #f8f8f8;}
  477.  
  478. #notecount{
  479. font-family:consolas;
  480. text-transform:normal;
  481. font-size:11px;
  482. letter-spacing: 1px;
  483. text-align:center;
  484. margin-top: 6px;
  485. margin-bottom: 10px;
  486. padding: 2px;
  487. background-color: #f8f8f8;}
  488.  
  489. #infoperm a {{color:hyperlinks};}
  490. #tagperm a {{color:hyperlinks};}
  491. #tagperm a:hover {color:{color:hyperlinks hover};}
  492.  
  493. .pnotes {
  494. background:transparent;
  495. max-height:250px;
  496. width:500px;
  497. text-align: left;
  498. overflow:auto;
  499. line-height:15px;
  500. padding:5px;
  501. margin-left: -20px;}
  502.  
  503. .pnotes img{width:16px;}
  504.  
  505. .pnotes li{list-style-type:none; border-bottom: 1px solid #ebebeb;padding:4px;margin-right: 20px;margin-bottom:2px;}
  506.  
  507. ol.notes {margin: 25px 0px;}
  508.  
  509. img.avatar {
  510. vertical-align: -4px;
  511. width: 16px;
  512. height: 16px;
  513. padding: 1px;}
  514.  
  515. .posttitle{
  516. color:{color:title};
  517. font-family: times;
  518. font-style:oblique;
  519. text-transform: lowercase;
  520. letter-spacing: -1px;
  521. line-height: 100%;
  522. text-align:justify;
  523. padding-bottom: 4px;
  524. padding-top: 5px;
  525. padding-left: 4px;
  526. {block:if2columns210}
  527. font-size:22px;
  528. {/block:if2columns210}
  529. {block:if2columns250}
  530. font-size:24px;
  531. {/block:if2columns250}
  532. {block:if250px}
  533. font-size:24px;
  534. {/block:if250px}
  535. {block:if400px}
  536. font-size:25px;
  537. {/block:if400px}
  538. {block:if500px}
  539. font-size:25px;
  540. {/block:if500px}}
  541.  
  542. #asker {
  543. color:{color:title};
  544. font-family:cambria;
  545. font-style:oblique;
  546. text-transform: lowercase;
  547. letter-spacing: 0px;
  548. line-height: 100%;
  549. text-align:left;
  550. padding:7px;
  551. font-size:22px;
  552. -webkit-transition: all 0.8s ease-in-out;
  553. -moz-transition: all 0.8s ease-in-out;}
  554.  
  555. #asker img{width:30px;}
  556.  
  557. #questions {
  558. text-align:justify;
  559. color: #777;
  560. font-style:oblique;
  561. padding:10px;
  562. font-family:cambria;
  563. font-size:11px;
  564. overflow:auto;
  565. background: #f5f5f5;
  566. margin-top:0px;
  567. -webkit-transition: all 0.8s ease-in-out;
  568. -moz-transition: all 0.8s ease-in-out;}
  569.  
  570. #asker a {color:{color:title};
  571. -webkit-transition: all 0.8s ease-in-out;
  572. -moz-transition: all 0.8s ease-in-out;}
  573. #asker a:hover {color:#ddd;
  574. -webkit-transition: all 0.8s ease-in-out;
  575. -moz-transition: all 0.8s ease-in-out;}
  576.  
  577. #quote {
  578. color:#888;
  579. font: oblique 15px cambria;
  580. letter-spacing:0px;
  581. line-height: 100%;
  582. padding: 15px;
  583. background:#f5f5f5;
  584. text-align:justify;
  585. margin-bottom: 10px;}
  586.  
  587. #source {font: 9px calibri; text-align: right;background:#fff;padding: 5px; margin-top:15px;color:#888;}
  588.  
  589. .label {color:{color:bold};font-weight:bold;letter-spacing:1px;font-size:9px;text-transform:uppercase;font-family:calibri;}
  590. ul.chat{margin-bottom:12px;margin-top:0px;padding:0px;}
  591. .chat li{
  592. text-align:justify;
  593. list-style-type: none;
  594. margin-top:2px;
  595. padding:8px;
  596. background-color:{color:caption bg};
  597. border: 1px solid #f5f5f5;}
  598.  
  599. .audio {background-color:#f5f5f5;height:47px;margin-bottom:10px;}
  600. .audio-player{height:26px;width:26px; margin-top: 7px; margin-left: 7px;overflow:hidden;opacity:0.5;border: 3px solid #f9f9f9; position:absolute; z-index:2; }
  601. .audio-album { position:absolute; width:32px; border: 7px solid #efefef;}
  602. .audio-info { height: 30px;margin-left:45px; padding:10px 10px 10px 10px;text-align:left; font-family:calibri;font-size:9px;line-height:110%;}
  603.  
  604. #s-m-t-tooltip {
  605. display: block;
  606. background: #444;
  607. font-size: 8px;
  608. font-family: calibri;
  609. letter-spacing: 1px;
  610. text-transform: uppercase;
  611. line-height:100%;
  612. color: #fff;
  613. text-align: center;
  614. margin-left: 18px;
  615. padding:4px;
  616. min-width: 40px;
  617. max-width: 200px;
  618. z-index: 999999;}
  619.  
  620. #fade {
  621. display: none;
  622. background: #fff;
  623. position: fixed; left: 0; top: 0;
  624. width: 100%; height: 100%;
  625. opacity: .80;
  626. z-index: 999;}
  627.  
  628.  
  629. .popup_block{
  630. display: none;
  631. background: #fff;
  632. padding:30px;
  633. float: left;
  634. position: fixed;
  635. top: 50%; left: 50%;
  636. z-index: 99999;
  637. border: 1px solid #f3f3f3;
  638. max-height:400px;
  639. overflow:auto;}
  640.  
  641. img.btn_close {float: right;margin: -10px -10px 0 0;display:none;}
  642. *html .popup_block {position: absolute;}
  643.  
  644. #pics {
  645. width:300px;
  646. background:#f7f7f7;
  647. padding:10px;
  648. margin:10px;}
  649.  
  650. #pics img{
  651. background:#fff;
  652. border: 1px solid #f4f4f4;
  653. padding: 10px;
  654. width:40px;
  655. height:40px;
  656. margin:5px;
  657. -webkit-transition:all 0.7s ease-in-out;
  658. -moz-transition:all 0.7s ease-in-out;
  659. -o-transition:all 0.7s ease-in-out;
  660. transition:all 0.7s ease-in-out;}
  661.  
  662. #pics img:hover{
  663. opacity:.7;
  664. -webkit-transition:all 0.5s ease-in-out;
  665. -moz-transition:all 0.5s ease-in-out;
  666. -o-transition:all 0.5s ease-in-out;
  667. transition:all 0.5s ease-in-out;}
  668.  
  669.  
  670. #cr{font-size:10px;right:15px;bottom:15px;position:fixed;font-family:calibri;letter-spacing:1px;background:#f7f7f7;padding: 2px 5px 3px 5px;border-radius:3px;z-index:99;}
  671. a.cr {color:#bbb;}
  672.  
  673.  
  674. </style>
  675.  
  676. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  677. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  678. <script type="text/javascript">
  679. $(window).load(function () {
  680. $('#entry').masonry({
  681. itemSelector : "#posts",
  682. },
  683. function() { $('#entry').masonry({ appendedContent: $(this) }); },
  684. // trigger Masonry as a callback
  685. function( newElements ) {
  686. var $newElems = $( newElements ).css({ opacity: 0 });
  687. // ensure that images load before adding to masonry layout
  688. $newElems.imagesLoaded(function(){
  689. $newElems.animate({ opacity: 1 });
  690. $container.masonry( 'appended', $newElems, true );
  691. });
  692. }
  693. );
  694. });
  695. </script>
  696.  
  697. </head>
  698. <body>
  699.  
  700. <div id="content">
  701. <div id="sidebar">
  702. <div id="title">{Title}</div>
  703. <div id="description">
  704. {block:Description}{Description}{/block:Description}
  705. </div>
  706. <div id="navigation">
  707. <a href="/" title="home">&bull;</a><a href="/ask" title="ask">&bull;</a>{block:ifLink1}<a href="{text:Link1}" title="{text:Link1 Title}">&bull;</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link2}" title="{text:Link2 Title}">&bull;</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link3}" title="{text:Link3 Title}">&bull;</a>{/block:ifLink3}{block:ifLink4}<a href="{text:Link4}" title="{text:Link4 Title}">&bull;</a>{/block:ifLink4}{block:ifLink5}<a href="{text:Link5}" title="{text:Link5 Title}">&bull;</a>{/block:ifLink5}{block:ifLink6}<a href="{text:Link6}" title="{text:Link6 Title}">&bull;</a>{/block:ifLink6}{block:ifblogroll}<a href="#?w=340" rel="01" class="poplight" title="{text:RollLink Title}">&bull;</a>{/block:ifblogroll}
  708. </div>
  709.  
  710. <div id="pagination">
  711. {block:Pagination}
  712. {block:PreviousPage}<a href="{PreviousPage}">newer </a>{/block:PreviousPage} - {CurrentPage} of {TotalPages} - {block:NextPage}<a href="{NextPage}"> older</a>{/block:NextPage}
  713. {/block:Pagination}
  714. </div>
  715.  
  716. </div>
  717.  
  718. <div id="entry">
  719. {block:Posts}
  720. <div id="posts">
  721.  
  722. {block:Text}
  723. {block:Title}
  724. <div class="posttitle">{Title}</div>
  725. {/block:Title}
  726. <div id="text">{Body}<br/></div>
  727. <div class="infotext">
  728. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  729. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  730. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  731. {/block:Text}
  732.  
  733. {block:Link}
  734. <a href="{URL}" class="link" {Target}><div class="posttitle">{Name} &rarr;</div></a>
  735. {block:Description}<div id="text">{Description}<br/></div>{/block:Description}
  736. <div class="infotext">
  737. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  738. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  739. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  740. {block:Link}
  741.  
  742. {block:Photo}
  743. {block:indexpage}
  744. <div id="opandgrey">
  745. <div class="info">
  746. <div style="padding:15px;">
  747. {TimeAgo}<br>
  748. <span style="font-size:13px;">{block:Date}<a href="{Permalink}" title="permalink">{DayofMonth}.{Month}.{Year}</a> {/block:Date}</span>
  749. {block:RebloggedFrom} <br><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom}
  750. {block:NoteCount} <br><span style="font-size:12px;">{NoteCountWithLabel}</span>{/block:NoteCount}
  751. <br> <span style="background:#fff; padding:0px 3px 0px 3px;"><a href="{ReblogURL}" title="reblog this post" style="color:#666;">reblog</a></span>
  752. {block:HasTags}<br><span style="background:#fff; padding:0px 3px 0px 3px;color:#666;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div></div>
  753. <center><img src="{PhotoURL-500}" style="{block:if2columns210}max-width:210px;{/block:if2columns210}{block:if2columns250}max-width:250px;{/block:if2columns250}{block:if250px}max-width:250px;
  754. {/block:if250px}{block:if400px}max-width:400px;
  755. {/block:if400px}{block:if500px}max-width:500px;
  756. {/block:if500px}"/></center>
  757. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  758. </div>
  759. {/block:indexpage}
  760. {block:permalinkpage}
  761. <center><img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px;"></center>
  762. {block:Caption}<br><div id="caption">{Caption}</div>{/block:Caption}
  763. {/block:permalinkpage}
  764. {/block:Photo}
  765.  
  766. {block:Photoset}
  767. {block:indexpage}
  768. <div id="opandgrey">
  769. <div class="info">
  770. <div style="padding:15px;">
  771. {TimeAgo}<br>
  772. <span style="font-size:13px;">{block:Date}<a href="{Permalink}" title="permalink">{DayofMonth}.{Month}.{Year}</a> {/block:Date}</span>
  773. {block:RebloggedFrom} <br><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom}
  774. {block:NoteCount} <br><span style="font-size:12px;">{NoteCountWithLabel}</span>{/block:NoteCount}
  775. <br> <span style="background:#fff; padding:0px 3px 0px 3px;"><a href="{ReblogURL}" title="reblog this post" style="color:#666;">reblog</a></span>
  776. {block:HasTags}<br><span style="background:#fff; padding:0px 3px 0px 3px;color:#666;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div></div>
  777. <center>{block:if2columns210}{Photoset-500}{/block:if2columns210}{block:if2columns250}{Photoset-250}{/block:if2columns250}{block:if250px}{Photoset-250}
  778. {/block:if250px}{block:if400px}{Photoset-400}
  779. {/block:if400px}{block:if500px}{Photoset-500}
  780. {/block:if500px}</center>
  781. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  782. </div>
  783. {/block:indexpage}
  784. {block:permalinkpage}
  785. <center>{Photoset-500}</center>
  786. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  787. {/block:permalinkpage}
  788. {/block:Photoset}
  789.  
  790. {block:Quote}
  791. <div id="quote">{Quote}<br><div id="source">---{Source}</small></div></div>
  792. <div class="infotext">
  793. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  794. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  795. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  796. {/block:Quote}
  797.  
  798. {block:Chat}
  799. {block:Title}<div class="posttitle">{Title}</div>{/block:Title}
  800. <ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  801. {/block:Label}
  802. <div class="infotext">
  803. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  804. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  805. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  806. {/block:Chat}
  807.  
  808.  
  809. {block:Audio}
  810. <div class="audio">
  811. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}" style="width:32px;">{/block:AlbumArt}
  812. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  813. <div class="audio-info">
  814. {block:TrackName} <div style="font-family:libre baskerville;font-style:oblique; font-size:12px;">{TrackName}</div><br>{/block:TrackName}
  815. {block:PlayCount} {FormattedPlayCount} plays<br>{/block:PlayCount}
  816. </div></div>
  817. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}<br>
  818. <div class="infotext">
  819. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  820. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  821. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  822. {/block:Audio}
  823.  
  824. {block:Video}
  825. {block:if2columns400}{Video-400}{/block:if2columns400}{block:if3columns250}{Video-250}{/block:if3columns250}{block:if2columns250}{Video-250}{/block:if2columns250}{block:indexpage}{block:if250px}{Video-250}{/block:if250px}{block:if400px}{Video-400}{/block:if400px}{block:if500px}{Video-500}{/block:if500px}
  826. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  827. <div class="infotext">
  828. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  829. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  830. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  831. {/block:indexpage}
  832. {block:permalinkpage}
  833. <center>{Video-500}</center>
  834. {block:Caption}{Caption}{/block:Caption}
  835. {/block:permalinkpage}
  836. {block:Video}
  837.  
  838. {block:Answer}
  839. <div id="asker"><img src="{AskerPortraitURL-30}" style="vertical-align:-10px;border-right:1px solid #f3f3f3;padding-right:7px;"> {Asker}</div><div id="questions">{Question}</div><div id="text">{Answer}</div>
  840. <div class="infotext">
  841. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo} on {ShortMonth} {DayofMonth}</a> {/block:Date}
  842. {block:RebloggedFrom} · <a href="{ReblogParentURL}">{ReblogParentName}</a> · <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  843. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  844. {/block:Answer}
  845.  
  846.  
  847. {block:permalinkpage}
  848. <div id="infoperm">
  849. {block:Date}{Month} {DayOfMonth}, {Year} at {24Hour}:{Minutes}{/block:Date}
  850. {block:RebloggedFrom} / <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}
  851. {block:ContentSource} / <b>source:</b> <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}
  852.  
  853. {block:HasTags}
  854. <div id="tagperm">
  855. <b>Tagged as:</b>{block:Tags} <a href="{TagURL}"> <small>#</small>{Tag}</a> {/block:Tags}</div>{/block:HasTags} </div>
  856.  
  857. <div id="notecount">{block:NoteCount}<p>{NoteCountWithLabel}{/block:NoteCount}</div>
  858.  
  859. <div class="pnotes">
  860. {block:PostNotes}
  861. {PostNotes-16}
  862. {/block:PostNotes}
  863.  
  864. </div>{/block:permalinkpage}</div>
  865. {/block:Posts}
  866. </div>
  867.  
  868. {block:ifnot2columns210}
  869. {block:ifinfinitescroll}
  870. {block:indexpage}
  871. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  872. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  873. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  874. <script type="text/javascript">
  875. $(window).load(function(){
  876. var $wall = $('#entry');
  877. $wall.imagesLoaded(function(){
  878. $wall.masonry({
  879. itemSelector: '#posts',
  880. isAnimated : false
  881. });
  882. });
  883.  
  884. $wall.infinitescroll({
  885. navSelector : '#page-nav',
  886. nextSelector : '#page-nav a',
  887. itemSelector : '#posts',
  888. bufferPx : 2000,
  889. debug : false,
  890. errorCallback: function() {
  891. $('#infscr-loading').fadeOut('normal');
  892. }},
  893. function( newElements ) {
  894. var $newElems = $( newElements );
  895. $newElems.hide();
  896. $newElems.imagesLoaded(function(){
  897. $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  898. });
  899. }); $('#content').show(500);
  900. });
  901. </script>
  902. {/block:indexpage}
  903. {/block:ifinfinitescroll}
  904. {/block:ifnot2columns210}
  905.  
  906. {block:if2columns210}
  907. {block:ifinfinitescroll}
  908. {block:indexpage}
  909. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  910. <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  911. <script src="/jquery.masonry.min.js" type="text/javascript"></script>
  912. <script src="/jquery.infinitescroll.min.js" type="text/javascript" ></script>
  913. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  914. <script type="text/javascript">
  915. $(document).ready(function() {
  916. $('iframe.photoset').each(function() {
  917. var i = this;
  918. $(i).attr("onload", "ps_resize(this)");
  919. var s = $(i).attr("src");
  920. s = s.replace(/\/500\//, "/210/");
  921. $(i).attr("src", s);
  922. });
  923. $(function(){
  924. var $container = $('#entry');
  925. $container.imagesLoaded(function(){
  926. $container.masonry({
  927. itemSelector: '#posts',
  928. });
  929. });
  930. $container.infinitescroll({
  931. navSelector : '#page-nav',
  932. nextSelector : '#page-nav a',
  933. itemSelector : '#posts',
  934. loading: {
  935. finishedMsg: '~ THE END ~',
  936. img: '',
  937. text: '....'
  938. }
  939. },
  940. function( newElements ) {
  941. $(newElements).find('iframe.photoset').each(function() {
  942. var i = this;
  943. $(i).attr("onload", "ps_resize(this)");
  944. var s = $(i).attr("src");
  945. s = s.replace(/\/500\//, "/210/");
  946. $(i).attr("src", s);
  947. });
  948. var $newElems = $( newElements ).css({ opacity: 0 });
  949. $newElems.imagesLoaded(function(){
  950. $newElems.animate({ opacity: 1 });
  951. $container.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  952. });
  953. }
  954. );
  955. });
  956. });
  957.  
  958. function ps_resize(i) {
  959. $(i).contents().find("body").imagesLoaded(function() {
  960. $(i).attr("width", 210);
  961. $(i).attr("height", $(this).height());
  962. var $container = $('#entry');
  963. $container.imagesLoaded(function(){
  964. $container.masonry({
  965. itemSelector: '#posts',
  966. });
  967. });
  968. });
  969. return false;
  970. }
  971. </script>
  972. <script type="text/javascript">
  973. (function($, undefined) {
  974. $.extend($.infinitescroll.prototype,{
  975. _callback_masonry: function infscr_callback_masonry (newElements) {
  976. $(this).masonry('appended',$(newElements));
  977. }
  978. });
  979. })(jQuery);
  980. </script>
  981.  
  982. {/block:indexpage}
  983. {/block:ifinfinitescroll}
  984. {/block:if2columns210}
  985.  
  986.  
  987.  
  988. </body>
  989.  
  990. <div id="01" class="popup_block">
  991. <div id="pics">
  992. <center>
  993. {block:Following}{block:Followed}<a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-40}" /></a>{/block:Followed}{/block:Following}
  994. </center>
  995. </div>
  996. </div>
  997. <div id="cr"><a href="http://soonjunthemes.tumblr.com/" class="cr" title="theme created by soonjun"> theme. </a></div>
  998. </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!