API tools faq
paste
xmisa0923

playlist

xmisa0923
Sep 23rd, 2013
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.69 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <!-- PAGE TITLE--><title>{Title} -- Tomodachis</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
  10.  
  11. <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
  12.  
  13. <style type="text/css">
  14.  
  15. /*
  16.  
  17. You can get colour hexcodes at http://colorpicker.com/ !!
  18.  
  19. MADE BY: BAKAOTHEMES @ TUMBLR
  20.  
  21. Do not remove credit. Mild/heavy css/html editing allowed. Do not claim as your own, or redistribute.
  22.  
  23. */
  24.  
  25. ::selection, ::-webkit-selection{
  26. background-color: transparent;
  27. color: #50CED5;
  28. text-shadow: none !important;
  29. }
  30.  
  31. body {
  32. background-color:#fff;
  33. background-image: url('http://i.imgur.com/09bDxk4.png');
  34. /*Background Image*/
  35. background-attachment:fixed;
  36. font-family:courier;
  37. font-size:12px;
  38. margin:0px;
  39. }
  40.  
  41. a {
  42. text-decoration:none;
  43. color:#000000; /*Link/Name Color */
  44. -webkit-transition: all 0.4s ease-in-out;
  45. -moz-transition: all 0.4s ease-in-out;
  46. -o-transition: all 0.4s ease-in-out;
  47. transition: all 0.4s ease-in-out;
  48. }
  49.  
  50. a:hover {
  51. color:#fff; /*Link/Name Color on Hover*/
  52. }
  53.  
  54. #all {
  55. margin:0 auto;
  56. width:600px;
  57. }
  58.  
  59.  
  60.  
  61.  
  62. #content {
  63. margin-top:130px;
  64. width:496px;
  65. overflow-y:auto;
  66. }
  67.  
  68. @-moz-document url-prefix() {
  69. #content {
  70. width:515px;
  71. }
  72. }
  73.  
  74. #member {
  75. float:left;
  76. width:100px;
  77. padding:5px;
  78. height:200px; /*You can change the height of the family member section according to their height. MAKE SURE TO CHANGE #DESC HEIGHT AS WELL.*/
  79. background-color:#fff; /*Member Background*/
  80. margin:0px 5px;
  81. border:2px dotted #dff0e2; /*Member Border*/
  82. margin-bottom:10px;
  83. }
  84.  
  85. #desc {
  86. font-size:10px;
  87. padding:2px;
  88. text-align:justify;
  89. color:#666; /*Description Text*/
  90. margin-top:4px;
  91. border-top:1px dashed #dff0e2;
  92. height:60px; /*#DESC HEIGHT!!
  93. Keep it 140px less than #member height.*/
  94. overflow-y:auto;
  95. }
  96.  
  97. #member img {
  98. width:80px;
  99. height:80px;
  100. border:10px solid #000000; /*Member Icon Border*/
  101. opacity:.9;
  102. -webkit-transition: all 0.4s ease-in-out;
  103. -moz-transition: all 0.4s ease-in-out;
  104. -o-transition: all 0.4s ease-in-out;
  105. transition: all 0.4s ease-in-out;
  106. }
  107.  
  108. #member img:hover {
  109. opacity:.5;
  110. }
  111.  
  112. #brackets {
  113. width:2px;
  114. font-size:25px;
  115. color:#c4eacb; /*Squiggly bracket color*/
  116. }
  117.  
  118. #more {
  119. background-color:#fff;
  120. margin-top:0px;
  121. height:45px;
  122. padding:10px;
  123. width:586px;
  124. overflow-y:auto;
  125. border-width:0px 2px 1px 2px; /* Header Title/Description Border*/
  126. border-style:dotted dashed; /*Header Border Style*/
  127. border-color:#000000; /*Header Border Color*/
  128. }
  129.  
  130. #title {
  131. margin-top:20px;
  132. text-align:center;
  133. color:#9aefc7; /*Header Title Color*/
  134. font-size:16px;
  135. font-family: 'Oswald', sans-serif;
  136. letter-spacing:1px;
  137. }
  138.  
  139. #more a{
  140. display:inline;
  141. height:auto;
  142. border:none;
  143. width:auto;
  144. color:#888; /*Header Description Link Color (header cred link)*/
  145. background-color:transparent;
  146. opacity:1;
  147. font-size:10px;
  148. line-height:auto;
  149. text-transform:none;
  150. -webkit-transition: all 0.4s ease-in-out;
  151. -moz-transition: all 0.4s ease-in-out;
  152. -o-transition: all 0.4s ease-in-out;
  153. transition: all 0.4s ease-in-out;
  154. }
  155.  
  156. #name a{
  157. width:60px;
  158. font-size:10px;
  159. text-shadow: 2px 2px 5px #aaa; /*Name Text Shadow*/
  160. }
  161.  
  162. table {
  163. border-spacing:0;
  164. border-collapse:collapse;
  165. }
  166.  
  167. #middle {
  168. width:100px;
  169. text-align:center;
  170. }
  171.  
  172. </style>
  173.  
  174. <!-- DO NOT TOUCH THIS PART. YOU MAY EDIT ABOVE THIS. -->
  175. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  176.  
  177. <script>
  178. $(function(){
  179. var $container = $('#content');
  180. $container.imagesLoaded(function(){
  181. $container.masonry({
  182. itemSelector: '#member',
  183. });
  184. });
  185. $container.infinitescroll({
  186. itemSelector : "#member",
  187. navSelector : "div.pagination",
  188. nextSelector : ".pagination a#next",
  189. loadingImg : "",
  190. loadingText : "<em></em>",
  191. bufferPx : 10000,
  192. extraScrollPx: 12000,
  193. },
  194. // trigger Masonry as a callback
  195. function( newElements ) {
  196. var $newElems = $( newElements ).css({ opacity: 0 });
  197. // ensure that images load before adding to masonry layout
  198. $newElems.imagesLoaded(function(){
  199. $newElems.animate({ opacity: 1 });
  200. $container.masonry( 'appended', $newElems, true );
  201. });
  202. }
  203. );
  204. });
  205. </script>
  206.  
  207. <!-- YOU MAY EDIT BELOW THIS -->
  208.  
  209.  
  210. </head>
  211.  
  212.  
  213.  
  214. <body>
  215.  
  216. <div style="position:fixed; bottom:2px; right:2px; font-size:10px;"><a href="http://bakao.co.vu/" style="color:#000; text-shadow: 0px 0px 5px #FFF; text-transform:uppercase; letter-spacing:1px;">© Bakao</a></div>
  217.  
  218. <table id="all" cellspacing="0" cellpadding="0">
  219. <tr>
  220. <td>
  221.  
  222.  
  223.  
  224.  
  225. <center style="margin-top:-29px;"><a href="/">Home</a>
  226. <a href="/ask">Message</a>
  227. <a href="/archive">Past</a>
  228.  
  229.  
  230. <!-- For more links just add: "<a href="url">Name</a>" below
  231. For links in your blog (aka your "about" page, or ask page) just add
  232. the last part.
  233. + About page – <a href="/about">About</a> (or whatever the url is)-->
  234. <a href="/">Link 1</a>
  235. <a href="/">Link 2</a>
  236. <a href="/">Link 3</a>
  237. <a href="/">Link 4</a>
  238.  
  239.  
  240. </center>
  241. <div id="more">
  242.  
  243. <div id="title">
  244. <!-- Title -->
  245. Playlist
  246. </div>
  247.  
  248. <center>
  249. <!-- Description -->
  250.  
  251. </center>
  252. </div>
  253. </div>
  254.  
  255. <center><div id="content">
  256.  
  257. <!-- For more profiles just copy and paste from "Start Member" to "End Member".-->
  258.  
  259. <!-- Start Member -->
  260. <div id="member">
  261.  
  262. <!-- Family member URL here and icon URL-->
  263. <a href="URLHERE"><img src="IMAGE URL"></a>
  264.  
  265. <table id="middle"><tr><td id="brackets">{</td><td id="name"><div style="margin-top:5px;">
  266.  
  267. <!-- Name and URL here -->
  268. <a href="URLHERE">NAME</a>
  269.  
  270. </div></td><td id="brackets">}</td></tr></table>
  271.  
  272. <div id="desc">
  273. <!-- Family Member Summary -->MEMBER DESCRIPTION
  274. </div>
  275. </div>
  276. <!-- End Member -->
  277.  
  278. <!-- Start Member -->
  279. <div id="member">
  280.  
  281. <!-- Family member URL here and icon URL-->
  282. <a href="URLHERE"><img src="http://puu.sh/4rv3o.png"></a>
  283.  
  284. <table id="middle"><tr><td id="brackets">{</td><td id="name"><div style="margin-top:5px;">
  285.  
  286. <!-- Name and URL here -->
  287. <a href="URLHERE">NAME</a>
  288.  
  289. </div></td><td id="brackets">}</td></tr></table>
  290.  
  291. <div id="desc">
  292. <!-- Family Member Summary -->MEMBER DESCRIPTION
  293. </div>
  294. </div>
  295. <!-- End Member -->
  296.  
  297. <!-- Start Member -->
  298. <div id="member">
  299.  
  300. <!-- Family member URL here and icon URL-->
  301. <a href="URLHERE"><img src="IMAGE URL"></a>
  302.  
  303. <table id="middle"><tr><td id="brackets">{</td><td id="name"><div style="margin-top:5px;">
  304.  
  305. <!-- Name and URL here -->
  306. <a href="URLHERE">NAME</a>
  307.  
  308. </div></td><td id="brackets">}</td></tr></table>
  309.  
  310. <div id="desc">
  311. <!-- Family Member Summary -->MEMBER DESCRIPTION
  312. </div>
  313. </div>
  314. <!-- End Member -->
  315.  
  316. <!-- Start Member -->
  317. <div id="member">
  318.  
  319. <!-- Family member URL here and icon URL-->
  320. <a href="URLHERE"><img src="IMAGE URL"></a>
  321.  
  322. <table id="middle"><tr><td id="brackets">{</td><td id="name"><div style="margin-top:5px;">
  323.  
  324. <!-- Name and URL here -->
  325. <a href="URLHERE">NAME</a>
  326.  
  327. </div></td><td id="brackets">}</td></tr></table>
  328.  
  329. <div id="desc">
  330. <!-- Family Member Summary -->MEMBER DESCRIPTION
  331. </div>
  332. </div>
  333. <!-- End Member -->
  334.  
  335. <!-- Start Member -->
  336. <div id="member">
  337.  
  338. <!-- Family member URL here and icon URL-->
  339. <a href="URLHERE"><img src="IMAGE URL"></a>
  340.  
  341. <table id="middle"><tr><td id="brackets">{</td><td id="name"><div style="margin-top:5px;">
  342.  
  343. <!-- Name and URL here -->
  344. <a href="URLHERE">NAME</a>
  345.  
  346. </div></td><td id="brackets">}</td></tr></table>
  347.  
  348. <div id="desc">
  349. <!-- Family Member Summary -->MEMBER DESCRIPTION
  350. </div>
  351. </div>
  352. <!-- End Member -->
  353.  
  354. </div></center>
  355.  
  356. </td>
  357. </tr>
  358. </table>
  359. </body>
  360. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!