API tools faq
paste
Advertisement
thematchgirl

Theme 09: Socialita

thematchgirl
Apr 20th, 2013
2,774
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 28.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title>{title}</title>
  5.   <link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
  6.   <link rel="shortcut icon" href="{Favicon}">
  7.  </head>
  8.  
  9.     <meta name="color:background" content="#f5f5f5">
  10.     <meta name="color:title bg" content="#f5f5f5">
  11.     <meta name="color:chat bg" content="#f5f5f5">
  12.     <meta name="color:text" content="#3e3f3a">
  13.     <meta name="color:scrollbar" content="#a6d9d0">
  14.     <meta name="color:album art" content="#a6d9d0">
  15.     <meta name="color:link" content="#a6d9d0">
  16.     <meta name="color:bar 2" content="#a6d9d0">
  17.     <meta name="color:link hover border" content="#a6d9d0">
  18.     <meta name="color:pagination current page" content="#a6d9d0">
  19.     <meta name="color:music border" content="#a6d9d0">
  20.     <meta name="color:like bg" content="#a6d9d0">
  21.     <meta name="color:selection" content="#eb5a3b">
  22.     <meta name="color:bold" content="#eb5a3b">
  23.     <meta name="color:italic" content="#eb5a3b">
  24.     <meta name="color:bar 1" content="#eb5a3b">
  25.     <meta name="color:blockquote border" content="#eb5a3b">
  26.     <meta name="color:title border" content="#eb5a3b">
  27.     <meta name="color:chat border" content="#eb5a3b">
  28.     <meta name="color:ask avatar bg" content="#eb5a3b">
  29.     <meta name="color:info border" content="#eb5a3b">
  30.     <meta name="color:pagination" content="#eb5a3b">
  31.     <meta name="color:reblog bg" content="#eb5a3b">
  32.     <meta name="color:blockquote background" content="#f3f3f3">
  33.     <meta name="color:description background" content="#fff">
  34.     <meta name="color:additional link color" content="#fff">
  35.     <meta name="color:pagination color" content="#fff">
  36.     <meta name="color:reblog color" content="#fff">
  37.     <meta name="color:like color" content="#fff">
  38.     <meta name="color:post" content="#fff">
  39.     <meta name="color:date color" content="#fff">
  40.     <meta name="color:music" content="#fff">
  41.  
  42.  
  43.     <meta name="image:background" content="http://i.imgur.com/w8RJ7VC.png">
  44.     <meta name="image:sidebar" content="http://i.imgur.com/NIMDkwy.png">
  45.  
  46.     <meta name="text:Link1" content="" />
  47.     <meta name="text:Link1URL" content=""/>
  48.     <meta name="text:Link2" content="" />
  49.     <meta name="text:Link2URL" content=""/>
  50.     <meta name="text:Link3" content="" />
  51.     <meta name="text:Link3URL" content=""/>
  52.     <meta name="text:Link4" content="" />
  53.     <meta name="text:Link4URL" content=""/>
  54.     <meta name="text:Link5" content="" />
  55.     <meta name="text:Link5URL" content=""/>
  56.     <meta name="text:Link6" content="" />
  57.     <meta name="text:Link6URL" content=""/>
  58.     <meta name="text:Link7" content="" />
  59.     <meta name="text:Link7URL" content=""/>
  60.     <meta name="text:Music" content=""/>
  61.     <meta name="text:Twitter Code" content=""/>
  62.     <meta name="text:Artist" content=""/>
  63.     <meta name="text:Song Title" content=""/>
  64.  
  65.     <meta name="if:Captions" content="1" />
  66.     <meta name="if:FadingImages" content="1" />
  67.     <meta name="if:InfiniteScroll" content="0" />
  68.     <meta name="if:Tags" content="1" />
  69.     <meta name="if:Twitter" content="1" />
  70.     <meta name="if:LikedPosts" content="1" />
  71.     <meta name="if:Blogroll" content="1" />
  72.     <meta name="if:MusicPlayer" content="1" />
  73.     <meta name="if:500px" content="1" />
  74.     <meta name="if:400px" content="0" />
  75.     <meta name="if:250px" content="0" />
  76.  
  77. <style>
  78.  
  79. body {
  80.     font-family: PT Sans Narrow;
  81.     font-size: 13px;
  82.     background: url({image:background}) {color:background} fixed;
  83.     color: {color:text};
  84. }
  85.  
  86. /** SCROLLBAR **/
  87.  
  88. ::-webkit-scrollbar-thumb:horizontal {
  89.     background-color: {color:scrollbar};
  90.     width: auto;
  91.     height: 5px;
  92. }
  93.  
  94. ::-webkit-scrollbar-thumb:vertical {
  95.     background-color: {color:scrollbar};
  96.     height: auto;
  97.     width: 5px;
  98.     margin-left: 10px;
  99. }
  100.  
  101. ::-webkit-scrollbar {
  102.     height: 5px;
  103.     width: 5px;
  104.     background-color: {color:background};
  105. }
  106.  
  107. /** SELECTION **/
  108.  
  109. ::-moz-selection {
  110.     background-color: {color:selection};
  111.     color: {color:post};
  112. }
  113.  
  114. ::selection {
  115.     background-color: {color:selection};
  116.     color: {color:post};
  117. }
  118.  
  119. /** TEXT PROPERTIES **/
  120.  
  121. a {
  122.     text-transform: uppercase;
  123.     font-size: 11px;
  124.     color: {color:link};
  125.     text-decoration: none;
  126.     -webkit-transition: all 1s ease-in-out;
  127.     -moz-transition: all 1s ease-in-out;
  128.     -o-transition: all 1s ease-in-out;
  129.     -ms-transition: all 1s ease-in-out;
  130.     transition: all 1s ease-in-out;
  131. }
  132.  
  133. a:hover {
  134.     border-bottom: 2px solid {color:link hover border};
  135. }
  136.  
  137. b, strong {
  138.     color: {color:bold};
  139.     font-size: 11px;
  140.     text-transform: uppercase;
  141. }
  142.  
  143. i, em {
  144.     color: {color:italic};
  145. }
  146.  
  147. blockquote, pre {
  148.     background: {color:blockquote background};
  149.     border-left: 5px solid {color:blockquote border};
  150.     padding-left: 5px;
  151.     padding-right: 5px;
  152. }
  153.  
  154. pre {
  155.     word-break: break-word;
  156.     font-family: consolas;
  157. }
  158.  
  159. blockquote img {
  160.     max-width: 100%;
  161. }
  162.  
  163. blockquote:first-letter {
  164.     font-size: 20px;
  165.     font-weight: 700;
  166.     font-style: italic;
  167.     color: {color:bold};
  168.     margin: 2px;
  169. }
  170.  
  171. /** SIDEBAR PROPERTIES **/
  172.  
  173. #bar1 {
  174.     position: fixed;
  175.     top: 0;
  176.     left: 0;
  177.     height: 100%;
  178.     background: {color:bar 1};
  179.     width: 15px;
  180. }
  181.  
  182. #bar2 {
  183.     position: fixed;
  184.     top: 0;
  185.     left: 15px;
  186.     width: 30px;
  187.     background: {color:bar 2};
  188.     height: 100%;
  189. }
  190.  
  191. #sidebar {
  192.     width: 250px;
  193.     height: 500px;
  194.     display: block;
  195.     position: fixed;
  196.     top: 10%;
  197.     left: 45px;
  198.     background: {color:description background};
  199.     border: 10px solid {color:bar 2};
  200.     border-left: none;
  201.     border-radius: 0px 60px 60px 0px;
  202. }
  203.  
  204. #links {
  205.     position: absolute;
  206.     left: -45px;
  207.     top: 35px;
  208. }
  209.  
  210. .link, .links {
  211.     border-left: 15px solid {color:bar 2};
  212.     background: {color:bar 1};
  213.     padding-top: 10px;
  214.     padding-bottom: 10px;
  215.     padding-left: 5px;
  216.     padding-right: 5px;
  217.     color: {color:additional link color};
  218.     text-align: center;
  219.     width: 25px;
  220.     display: block;
  221.     -webkit-transition: all 1s ease-in-out;
  222.     -moz-transition: all 1s ease-in-out;
  223.     -o-transition: all 1s ease-in-out;
  224.     -ms-transition: all 1s ease-in-out;
  225.     transition: all 1s ease-in-out;
  226.     letter-spacing: 1px;
  227.     text-transform: uppercase;
  228.     cursor: pointer;
  229. }
  230.  
  231. .link:hover {
  232.     width: 270px;
  233.     padding: 5px;
  234. }
  235.  
  236. .die {
  237.     display: none;
  238. }
  239.  
  240. .link:hover .doom {
  241.     display: none;
  242. }
  243.  
  244. .link:hover .die {
  245.     display: block;
  246. }
  247.  
  248. .box {
  249.     padding: 5px;
  250.     margin: 10px;
  251.     margin-top: 5px;
  252.     background: {color:description background};
  253.     text-align: justify;
  254.     width: 220px;
  255.     height: 425px;
  256.     display: block;
  257.     overflow: auto;
  258.     border-radius: 0px 0px 60px 0px;
  259.     opacity: 0;
  260.     -webkit-transition: all 1s ease-in-out;
  261.     -moz-transition: all 1s ease-in-out;
  262.     -o-transition: all 1s ease-in-out;
  263.     -ms-transition: all 1s ease-in-out;
  264.     transition: all 1s ease-in-out;
  265. }
  266.  
  267. .box:hover {
  268.     opacity: 1;
  269. }
  270.  
  271. #sidebar:hover .box, #sidebar:hover .boxx {
  272.     opacity: 1;
  273. }
  274.  
  275. .boxx {
  276.     background: {color:bar 2};
  277.     padding: 7px;
  278.     width: 240px;
  279.     margin-top: 10px;
  280.     border-radius: 0px 30px 0px 0px;
  281.     color: #fff;
  282.     text-transform: uppercase;
  283.     font-size: 20px;
  284.     text-align: center;
  285.     letter-spacing: 2px;
  286.     opacity: 0;
  287.     -webkit-transition: all 1s ease-in-out;
  288.     -moz-transition: all 1s ease-in-out;
  289.     -o-transition: all 1s ease-in-out;
  290.     -ms-transition: all 1s ease-in-out;
  291.     transition: all 1s ease-in-out;
  292. }
  293.  
  294. .blogroll img {
  295.     margin: 10px;
  296.     outline: 1px solid {color:bar 2};
  297.     outline-offset: 4px;
  298. }
  299.  
  300. .instagram ol, .instagram ul {
  301.     list-style: none;
  302.     margin-left: -35px;
  303. }
  304.  
  305. .instagram img {
  306.     max-width: 200px;
  307. }
  308.  
  309. .instagram blockquote, .instagram p {
  310.     display: none;
  311. }
  312.  
  313. /** ENTRY **/
  314.  
  315. #entry {
  316.     margin-left: 370px;
  317.     margin-top: 40px;
  318.     {block:indexpage}{block:if500px}width:600px;{/block:if500px}{/block:indexpage}
  319.     {block:indexpage}{block:if400px}width:500px;{/block:if400px}{/block:indexpage}
  320.     {block:indexpage}{block:if250px}width:350px;{/block:if250px}{/block:indexpage}
  321. }
  322.  
  323. .post {
  324.     background:{color:post};
  325.     {block:permalinkpage}Width:500px;{/block:permalinkpage}
  326.     {block:indexpage}{block:if500px}Width:500px;{/block:if500px}{/block:indexpage}
  327.     {block:indexpage}{block:if400px}width:400px;{/block:if400px}{/block:indexpage}
  328.     {block:indexpage}{block:if250px}width:250px;{/block:if250px}{/block:indexpage}
  329.     padding:30px;
  330.     text-align:justify;
  331. }
  332.  
  333. .post img {
  334. max-width:100%;
  335. }
  336.  
  337. .quote {
  338.     font-size: 30px;
  339.     font-style: italic;
  340.     line-height: 18px;
  341. }
  342.  
  343. .quote:first-letter {
  344.     font-size: 45px;
  345.     font-weight: 700;
  346.     color: {color:bold};
  347.     margin-right: -20px;
  348. }
  349.  
  350. {block:iffadingimages}
  351. .photo {
  352.     opacity:.8;
  353.     -webkit-transition: all 1s ease-in-out;
  354.     -moz-transition: all 1s ease-in-out;
  355.     -o-transition: all 1s ease-in-out;
  356.     -ms-transition: all 1s ease-in-out;
  357.     transition: all 1s ease-in-out;
  358. }
  359.  
  360. .photo:hover {
  361.     opacity:1;
  362. }
  363. {/block:iffadingimages}
  364.  
  365. .title {
  366.     {block:permalinkpage}Width:490px;{/block:permalinkpage}
  367.     {block:indexpage}{block:if500px}Width:490px;{/block:if500px}{/block:indexpage}
  368.     {block:indexpage}{block:if400px}width:390px;{/block:if400px}{/block:indexpage}
  369.     {block:indexpage}{block:if250px}width:240px;{/block:if250px}{/block:indexpage}
  370.     padding:5px;
  371.     display:block;
  372.     margin-bottom:10px;
  373.     background:{color:title bg};
  374.     border-bottom:5px solid {color:title text};
  375.     color:{color:title text};
  376.     text-transform:uppercase;
  377.     font-size:30px;
  378.     text-align:center;
  379.     font-weight:700;
  380. }
  381.  
  382. .title a {
  383.     font-size: 30px;
  384. }
  385.  
  386. .title a:hover {
  387.     border: none;
  388. }
  389.  
  390. .chat ul {
  391.     list-style: none;
  392.     margin: 0;
  393.     padding: 0;
  394. }
  395.  
  396. .chat li {
  397.     padding: 3px;
  398.     text-align: justify;
  399.     border-bottom: 2px solid {color:chat border};
  400. }
  401.  
  402. .chat .odd {
  403.     background: transparent;
  404. }
  405.  
  406. .chat .even {
  407.     background: {color:chat bg};
  408. }
  409.  
  410. #albumart {
  411.     border: 5px solid {color:album art};
  412. }
  413.  
  414. #albumart img {
  415.     display: block;
  416. }
  417.  
  418. #audioplayer {
  419.     display: block;
  420.     width: 25px;
  421.     height: 25px;
  422.     padding: 37.5px;
  423.     padding-left: 10px;
  424.     padding-right: 65px;
  425.     overflow: hidden;
  426.     position: absolute;
  427.     background: #fff;
  428.     margin-top: 5px;
  429.     margin-left: 5px;
  430.     opacity: 0;
  431.     -webkit-transition: all 1s ease-in-out;
  432.     -moz-transition: all 1s ease-in-out;
  433.     -o-transition: all 1s ease-in-out;
  434.     -ms-transition: all 1s ease-in-out;
  435.     transition: all 1s ease-in-out;
  436. }
  437.  
  438. .post:hover #audioplayer {
  439.     opacity: .7;
  440. }
  441.  
  442. .satu {
  443.     background: {color:ask avatar bg};
  444.     padding: 5px;
  445. }
  446.  
  447. .dua {
  448.     text-align: justify;
  449.     border: 1px dashed {color:ask avatar bg};
  450.     padding: 5px;
  451.     {block:indexpage}{block:if500px}Width:390px;{/block:if500px}{/block:indexpage}
  452.     {block:indexpage}{block:if400px}width:290px;{/block:if400px}{/block:indexpage}
  453.     {block:indexpage}{block:if250px}width:140px;{/block:if250px}{/block:indexpage}
  454. }
  455.  
  456. /** ENTRY INFO **/
  457.  
  458. .noted {
  459.     -webkit-transition: all 1s ease-in-out;
  460.     -moz-transition: all 1s ease-in-out;
  461.     -o-transition: all 1s ease-in-out;
  462.     -ms-transition: all 1s ease-in-out;
  463.     transition: all 1s ease-in-out;
  464.     margin-bottom:60px;
  465.     border-top:5px solid {color:info border};
  466.     display:block;
  467.     {block:indexpage}{block:if500px}Width:560px;{/block:if500px}{/block:indexpage}
  468.     {block:indexpage}{block:if400px}width:460px;{/block:if400px}{/block:indexpage}
  469.     {block:indexpage}{block:if250px}width:310px;{/block:if250px}{/block:indexpage}
  470.     font-size:10px;
  471.     text-transform:uppercase;
  472.     color:{color:info border};
  473. }
  474.  
  475. .noted a {
  476.     color: {color:info border};
  477.     font-size: 10px;
  478. }
  479.  
  480. .date {
  481.     padding: 3px;
  482.     background: {color:info border};
  483.     color: {color:date color};
  484.     float: left;
  485.     margin-left: 10px;
  486.     margin-right: 5px;
  487.     vertical-align: top;
  488. }
  489.  
  490. .notedd {
  491.     float: right;
  492.     padding: 3px;
  493.     border-left: 4px solid {color:info border};
  494.     vertical-align: top;
  495. }
  496.  
  497. .infos {
  498.     width: 540px;
  499.     padding: 10px;
  500.     background: {color:info border};
  501.     color: {color:date color};
  502.     text-transform: uppercase;
  503.     border-radius: 0px 0px 30px 20px;
  504.     font-size: 10px;
  505. }
  506.  
  507. .infos a {
  508.     color: {color:date color};
  509. }
  510.  
  511. /** ENTRY BUTTON **/
  512.  
  513. #opt {
  514.     position: absolute;
  515.     z-index: 10000;
  516.     {block:indexpage}{block:if500px}margin-left:530px;{/block:if500px}{/block:indexpage}
  517.     {block:indexpage}{block:if400px}margin-left:430px;{/block:if400px}{/block:indexpage}
  518.     {block:indexpage}{block:if250px}margin-left:280px;{/block:if250px}{/block:indexpage}
  519.     margin-top:-30px;
  520. }
  521.  
  522. .opt1, .opt2 {
  523.     -webkit-transition: all 1s ease-in-out;
  524.     -moz-transition: all 1s ease-in-out;
  525.     -o-transition: all 1s ease-in-out;
  526.     -ms-transition: all 1s ease-in-out;
  527.     transition: all 1s ease-in-out;
  528.     width: 8px;
  529.     height: 8px;
  530.     text-align: center;
  531.     overflow: hidden;
  532.     text-transform: uppercase;
  533. }
  534.  
  535. .opt1 {
  536.     background: {color:reblog bg};
  537.     padding: 5px;
  538.     padding-left: 7px;
  539.     padding-bottom: 8px;
  540.     color: {color:reblog color};
  541. }
  542.  
  543. .opt2 {
  544.     background: {color:like bg};
  545.     margin-top: 3px;
  546.     padding-right: 13px;
  547.     padding-bottom: 10px;
  548.     color: {color:like color};
  549. }
  550.  
  551. .opt1:hover, .opt2:hover {
  552.     width: 60px;
  553.     height: 18px;
  554.     padding: 3px;
  555. }
  556.  
  557. .my-like {
  558.     cursor: pointer;
  559.     display: inline-block;
  560.     vertical-align: top;
  561. }
  562.  
  563. .my-liked, .my-like:hover {
  564.     color: red;
  565.     cursor: pointer;
  566.     display: inline-block;
  567.     vertical-align: top;
  568. }
  569.  
  570. /** PAGINATION **/
  571.  
  572. #pagination {
  573.     font-size: 18px;
  574.     width: 500px;
  575.     text-align: center;
  576.     margin-top: 20px;
  577.     text-transform: uppercase;
  578.     margin-bottom: 30px;
  579. }
  580.  
  581. .current_page {
  582.     background: {color:pagination current page};
  583.     padding: 10px;
  584.     color: {color:pagination color};
  585.     text-decoration: none;
  586. }
  587.  
  588. #pagination a {
  589.     font-size: 18px;
  590.     background: {color:pagination};
  591.     padding: 10px;
  592.     color: {color:pagination color};
  593.     text-decoration: none;
  594. }
  595.  
  596. .prev, .next {
  597.     background: {color:pagination};
  598.     padding: 10px;
  599.     color: {color:pagination color};
  600.     text-decoration: none;
  601. }
  602.  
  603. .prev {
  604.     float: left;
  605. }
  606.  
  607. .next {
  608.     float: right;
  609. }
  610.  
  611. /** SCROLL TO TOP BUTTON **/
  612.  
  613. #scrolltotop {
  614.     font-size: 50px;
  615.     color: {color:link};
  616.     position: fixed;
  617.     bottom: 10px;
  618.     right: 35px;
  619. }
  620.  
  621. #scrollToTop:link,
  622.     #scrollToTop:visited {
  623.     color: {color:link};
  624.     background-color: transparent;
  625.     display: none;
  626.     position: fixed;
  627.     bottom: 10px;
  628.     right: 35px;
  629.     font-size: 50px;
  630. }
  631.  
  632. /** MUSIC PLAYER **/
  633.  
  634. #music {
  635.     position: fixed;
  636.     top: 3%;
  637.     left: 50px;
  638. }
  639.  
  640. #music #button {
  641.     border-radius: 10px;
  642.     padding: 10px;
  643.     background: {color:music};
  644.     border: 2px solid {color:music border};
  645.     text-align: center;
  646.     width: 12px;
  647.     height: 12px;
  648.     overflow: hidden;
  649.     display: block;
  650.     -webkit-transition: all 1s ease-in-out;
  651.     -moz-transition: all 1s ease-in-out;
  652.     -o-transition: all 1s ease-in-out;
  653.     -ms-transition: all 1s ease-in-out;
  654.     transition: all 1s ease-in-out;
  655. }
  656.  
  657. #music img, #music object {
  658.     -webkit-transition: all 1s ease-in-out;
  659.     -moz-transition: all 1s ease-in-out;
  660.     -o-transition: all 1s ease-in-out;
  661.     -ms-transition: all 1s ease-in-out;
  662.     transition: all 1s ease-in-out;
  663.     margin-top: -8px;
  664. }
  665.  
  666. #music img {
  667.     margin-top: -12px;
  668.     margin-left: -3px;
  669. }
  670.  
  671. #music:hover img {
  672.     margin-top: -55px;
  673. }
  674.  
  675. #music:hover object {
  676.     margin-left: -25px;
  677. }
  678.  
  679. #music #info {
  680.     padding: 5px;
  681.     width: 150px;
  682.     border-radius: 10px;
  683.     background: {color:music};
  684.     border: 1px dashed {color:music border};
  685.     -webkit-transition: all 1s ease-in-out;
  686.     -moz-transition: all 1s ease-in-out;
  687.     -o-transition: all 1s ease-in-out;
  688.     -ms-transition: all 1s ease-in-out;
  689.     transition: all 1s ease-in-out;
  690.     z-index: 10000000000;
  691. }
  692.  
  693. /** CREDIT **/
  694.  
  695. #credit {
  696.     position: fixed;
  697.     bottom: 5px;
  698.     right: 5px;
  699.     padding: 5px;
  700.     padding-top: 0px;
  701.     padding-right: 0px;
  702.     background: {color:music};
  703.     border: 2px solid {color:music border};
  704.     color: {color:music border};
  705.     border-radius: 50%;
  706.     width: 20px;
  707.     height: 20px;
  708.     overflow: hidden;
  709.     -webkit-transition: all 1s ease-in-out;
  710.     -moz-transition: all 1s ease-in-out;
  711.     -o-transition: all 1s ease-in-out;
  712.     -ms-transition: all 1s ease-in-out;
  713.     transition: all 1s ease-in-out;
  714. }
  715.  
  716. #credit a {
  717.     color: {color:music border};
  718.     font-size: 20px;
  719. }
  720.  
  721. #credit:hover {
  722.     width: 100px;
  723.     border-radius: 10px;
  724.     border: none;
  725. }
  726.  
  727. #credit:hover a {
  728.     font-size: 14px;
  729. }
  730.  
  731. </style>
  732.  
  733. <!-- JAVASCRIPTS -->
  734.  
  735.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  736.  
  737.     <script>
  738.     window.onload = function () {
  739.     document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  740.     document.addEventListener( 'click', function ( event ) {
  741.         var myLike = event.target;
  742.         if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  743.             var frame = document.getElementById( 'my-like-frame' ),
  744.                 liked = ( myLike.className == 'my-liked' ),
  745.                 command = liked ? 'unlike' : 'like',
  746.                 reblog = myLike.getAttribute( 'data-reblog' ),
  747.                 id = myLike.getAttribute( 'data-id' ),
  748.                 oauth = reblog.slice( -8 );
  749.             frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  750.             liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  751.         };
  752.     }, false );
  753.     };
  754.     </script>
  755.  
  756.     <script>
  757.     $(document).ready(function(){
  758.     $(".blogroll").hide();
  759.     $(".instagram").hide();
  760.     $(".twitter").hide();
  761.     $(".blogrollt").hide();
  762.     $(".instagramt").hide();
  763.     $(".twittert").hide();
  764.       $(".1").hover(function(){
  765.        $(".blogroll").hide('slow');
  766.         $(".description").show('slow');
  767.         $(".instagram").hide('slow');
  768.         $(".twitter").hide('slow');
  769.         $(".blogrollt").hide('slow');
  770.         $(".descriptiont").show('slow');
  771.         $(".instagramt").hide('slow');
  772.         $(".twittert").hide('slow');
  773.       });
  774.       $(".2").hover(function(){
  775.         $(".blogroll").show('slow');
  776.         $(".description").hide('slow');
  777.         $(".instagram").hide('slow');
  778.         $(".twitter").hide('slow');
  779.         $(".blogrollt").show('slow');
  780.         $(".descriptiont").hide('slow');
  781.         $(".instagramt").hide('slow');
  782.         $(".twittert").hide('slow');
  783.       });
  784.       $(".3").hover(function(){
  785.         $(".blogroll").hide('slow');
  786.         $(".description").hide('slow');
  787.         $(".instagram").hide('slow');
  788.         $(".twitter").show('slow');
  789.         $(".blogrollt").hide('slow');
  790.         $(".descriptiont").hide('slow');
  791.         $(".instagramt").hide('slow');
  792.         $(".twittert").show('slow');
  793.       });
  794.       $(".4").hover(function(){
  795.         $(".blogroll").hide('slow');
  796.         $(".description").hide('slow');
  797.         $(".instagram").show('slow');
  798.         $(".twitter").hide('slow');
  799.         $(".blogrollt").hide('slow');
  800.         $(".descriptiont").hide('slow');
  801.         $(".instagramt").show('slow');
  802.         $(".twittert").hide('slow');
  803.       });
  804.     });
  805.     </script>
  806.  
  807.     {block:IfInfiniteScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script> {/block:IfInfiniteScroll}
  808.     <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  809.  
  810. <!-- BODY -->
  811.  
  812. <body>
  813.  
  814.     <!-- CREDIT -->
  815.  
  816.         <div id="credit">
  817.         <a href="http://hellolittlered.org">❄ the match girl</a>
  818.         </div>
  819.  
  820.     <!-- MUSIC PLAYER -->
  821.  
  822.         {block:ifmusicplayer}{block:indexpage}<div id="music">
  823.             <table><tr><td>
  824.                 <div id="info"><b>{text:artist}</b> - {text:song title}</div></td>
  825.             <td><table id="button">
  826.                 <tr><td><img src="http://media.tumblr.com/tumblr_m7vzdsjaAz1r6o8v2.gif"></td>
  827.                 <td>{text:music}
  828.             </td></tr></table>
  829.             </td></tr></table>
  830.         </div>{block:indexpage}{/block:ifmusicplayer}
  831.  
  832.     <!-- BACK TO TOP -->
  833.  
  834.         <div class="topp">
  835.             <a href="javascript:;" id="scrollToTop">▲</a>
  836.         </div>
  837.  
  838.     <!-- SIDEBAR -->
  839.  
  840.         <div id="bar1"></div>
  841.         <div id="bar2"></div>
  842.         <div id="sidebar" style="background:url({image:sidebar});">
  843.  
  844.             <!-- SIDEBAR LINKS -->
  845.  
  846.             <div id="links">
  847.                 <div class="1">
  848.                 <a class="links" href="/" title="refresh"><img src="http://i.imgur.com/o15fBdr.gif"></a>
  849.                 </div>
  850.                 {block:ifblogroll}<div class="2">
  851.                 <a class="links" title="blogroll"><img src="http://i.imgur.com/C6nzKl9.gif"></a>
  852.                 </div>{block:ifblogroll}
  853.                 {block:iftwitter}<div class="3">
  854.                 <a class="links" title="twitter"><img src="http://i.imgur.com/PuPPszP.gif"></a>
  855.                 </div>{block:iftwitter}
  856.                 {block:iflikedposts}<div class="4">
  857.                 <a class="links" title="liked posts"><img src="http://i.imgur.com/Uvuj99v.gif"></a>
  858.                 </div>{block:iflikedposts}
  859.                 <a class="link" href="/ask" title="send a message">
  860.                 <span class="doom"><img src="http://i.imgur.com/kw3CofX.gif"></span>
  861.                 <span class="die">ask me!</span>
  862.                 </a>
  863.                 <a class="link" href="/archive" title="archive">
  864.                 <span class="doom"><img src="http://i.imgur.com/yUVa3h1.gif"></span>
  865.                 <span class="die">archive</span>
  866.                 </a>
  867.                 {block:iflink1}<a class="link" href="{text:Link1URL}">
  868.                 <span class="doom"><img src="http://i.imgur.com/WB9uk5R.gif"></span>
  869.                 <span class="die">{text:Link1}</span>
  870.                 </a>{/block:iflink1}
  871.                 {block:iflink2}<a class="link" href="{text:Link2URL}">
  872.                 <span class="doom"><img src="http://i.imgur.com/WB9uk5R.gif"></span>
  873.                 <span class="die">{text:Link2}</span>
  874.                 </a>{/block:iflink2}
  875.                 {block:iflink3}<a class="link" href="{text:Link3URL}">
  876.                 <span class="doom"><img src="http://i.imgur.com/WB9uk5R.gif"></span>
  877.                 <span class="die">{text:Link3}</span>
  878.                 </a>{/block:iflink3}
  879.                 {block:iflink4}<a class="link" href="{text:Link4URL}">
  880.                 <span class="doom"><img src="http://i.imgur.com/WB9uk5R.gif"></span>
  881.                 <span class="die">{text:Link4}</span>
  882.                 </a>{/block:iflink4}
  883.                 {block:iflink5}<a class="link" href="{text:Link5URL}">
  884.                 <span class="doom"><img src="http://i.imgur.com/WB9uk5R.gif"></span>
  885.                 <span class="die">{text:Link5}</span>
  886.                 </a>{/block:iflink5}
  887.                 {block:iflink6}<a class="link" href="{text:Link6URL}"><span class="doom">
  888.                 <img src="http://i.imgur.com/WB9uk5R.gif"></span>
  889.                 <span class="die">{text:Link6}</span>
  890.                 </a>{/block:iflink6}
  891.  
  892.                 {block:iflink7}<a class="link" href="{text:Link7URL}">
  893.                 <span class="doom"><img src="http://i.imgur.com/WB9uk5R.gif"></span>
  894.                 <span class="die">{text:Link7}</span>
  895.                 </a>{/block:iflink7}
  896.             </div>
  897.  
  898.         <!-- TITLES -->
  899.  
  900.             <div class="boxx">
  901.                 <div class="descriptiont">{title}</div>
  902.                 {block:ifblogroll}{block:Following}<div class="blogrollt">BLOGROLL</div>{/block:Following}{/block:ifblogroll}
  903.                 {block:iftwitter}<div class="twittert">twitter</div>{/block:iftwitter}
  904.                 {block:iflikedposts}<div class="instagramt">liked posts</div>{/block:iflikedposts}
  905.             </div>
  906.  
  907.         <!-- TEXTS -->
  908.  
  909.             <div class="box">
  910.                 <!-- DESCRIPTION --><div class="description">{description}</div>
  911.                 <!-- BLOGROLL -->
  912.                 {block:ifblogroll}{block:Following}<div class="blogroll">
  913.                 {block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}"/></a>{/block:Followed}
  914.                 </div>{/block:Following}{/block:ifblogroll}
  915.                 <!-- TWITTER -->
  916.                 {block:iftwitter}<div class="twitter">
  917.                     {text:Twitter Code}
  918.                 </div>{/block:iftwitter}
  919.                 <!-- LIKED POSTS -->
  920.                 {block:iflikedposts}<div class="instagram">
  921.                 {block:Likes}
  922.                 <div class="item">
  923.                     {Likes limit="5" summarize="0" width="220"}
  924.                     <a href="http://www.tumblr.com/liked/by/{Name}">
  925.                     {lang:More liked posts}
  926.                     </a>
  927.                 </div>
  928.                 {/block:Likes}
  929.                 </div>{/block:iflikedposts}
  930.         </div>
  931.         </div>
  932.  
  933.     <!-- CONTENTS -->
  934.    
  935.     <div id="entry">
  936.     <div class= "autopagerize_page_element">
  937.     {block:Posts}
  938.     <div class="post">
  939.  
  940.         <!-- REBLOG AND LIKE BUTTON -->
  941.         {block:indexpage}<div id="opt">
  942.             <a href="{ReblogURL}"><div class="opt1"><img src="http://i.imgur.com/WB9uk5R.gif"> reblog!</div></a>
  943.             <div class="opt2"><div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"><img src="http://i.imgur.com/C6nzKl9.gif"> like!</div></div>
  944.         </div>{/block:indexpage}
  945.  
  946.         <!-- Text -->
  947.         {block:Text}
  948.         {block:Title}<a href="{Permalink}"><div class="title">{Title}</div></a>{/block:Title}
  949.         {Body}
  950.         {/block:Text}
  951.  
  952.         <!-- Photo -->
  953.         {block:Photo}
  954.         {LinkOpenTag}
  955.         {block:IndexPage}{block:if500px}<center><div class="photo"><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt=""></a></div></center>{/block:if500px}{/block:IndexPage}
  956.         {block:IndexPage}{block:if400px}<center><div class="photo"><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-400}" alt=""></a></div></center>{/block:if400px}{/block:IndexPage}
  957.         {block:IndexPage}{block:if250px}<center><div class="photo"><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-250}" alt=""></a></div></center>{/block:if250px}{/block:IndexPage}
  958.         {block:PermalinkPage}<center><div class="photo"><a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt=""></a></div></center>{/block:PermalinkPage}
  959.         {LinkCloseTag}
  960.         {block:IndexPage}{block:IfCaptions}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:IfCaptions}{/block:IndexPage}
  961.         {block:PermalinkPage}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:PermalinkPage}
  962.         {/block:Photo}
  963.  
  964.         <!-- Photoset -->
  965.         {block:Photoset}
  966.         {block:IndexPage}{block:if500px}<div class="photo"><center>{Photoset-500}</center></div>{/block:if500px}{/block:IndexPage}
  967.         {block:IndexPage}{block:if400px}<div class="photo"><center>{Photoset-400}</center></div>{/block:if400px}{/block:IndexPage}
  968.         {block:IndexPage}{block:if250px}<div class="photo"><center>{Photoset-250}</center></div>{/block:if250px}{/block:IndexPage}
  969.         {block:PermalinkPage}<center><div class="photo">{Photoset-500}</div></center>{/block:PermalinkPage}
  970.         {block:IndexPage}{block:IfCaptions}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:IfCaptions}{/block:IndexPage}
  971.         {block:PermalinkPage}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:PermalinkPage}
  972.         {/block:Photoset}
  973.          
  974.         <!-- Quote -->
  975.         {block:Quote}
  976.         <div class="quote">❝ {Quote}</div>
  977.         {block:Source}<p><b>→</b> {Source}</p>{/block:Source}
  978.         {/block:Quote}
  979.          
  980.         <!-- Link -->
  981.         {block:Link}
  982.         <div class="title"><a href="{URL}" target="_blank">{Name} →</a></div>
  983.         {block:Description}<p>{Description}</p>{/block:Description}
  984.         {/block:Link}
  985.  
  986.         <!-- Chat -->
  987.         {block:Chat}
  988.         {block:Title}<a href="{Permalink}"><div class="title">{Title}</div></a>{/block:Title}
  989.         <div class="chat">
  990.             <ul>
  991.                 {block:Lines}<li class="{Alt}">{block:Label} <b>{Label}</b> {/block:Label}{Line}</li>{/block:Lines}
  992.             </ul>
  993.         </div>
  994.         {/block:Chat}
  995.  
  996.         <!-- Audio -->
  997.         {block:Audio}
  998.         <table align="center"><tr><td><div id="audioplayer">{AudioPlayerWhite}</div>      
  999.             <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div></td><td>
  1000.             <div class="chat">
  1001.                 <ul>
  1002.                     <li class="odd"><b>Plays:</b>{PlayCountWithLabel} </li>
  1003.                     <li class="even">{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}</li>
  1004.                     <li class="odd">{block:Album}<b>Album:</b> {Album}{/block:Album}</li>
  1005.                     <li class="even">{block:TrackName}<b>Title:</b> {TrackName}{/block:TrackName}</li>
  1006.                 </ul>
  1007.             </div>
  1008.         </td></tr></table>
  1009.         {block:IndexPage}{block:IfCaptions}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:IfCaptions}{/block:IndexPage}
  1010.         {block:PermalinkPage}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:PermalinkPage}
  1011.         {/block:Audio}
  1012.  
  1013.         <!-- Video -->
  1014.         {block:Video}
  1015.         {block:IndexPage}{block:if500px}<center>{Video-500}</center>{/block:if500px}{/block:IndexPage}
  1016.         {block:IndexPage}{block:if400px}<center>{Video-400}</center>{/block:if400px}{/block:IndexPage}
  1017.         {block:IndexPage}{block:if250px}<center>{Video-250}</center>{/block:if250px}{/block:IndexPage}
  1018.         {block:PermalinkPage}<center>{Video-500}</center>{/block:PermalinkPage}
  1019.         {block:IndexPage}{block:IfCaptions}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:IfCaptions}{/block:IndexPage}
  1020.         {block:PermalinkPage}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:PermalinkPage}
  1021.         {/block:Video}
  1022.          
  1023.         <!-- Message -->
  1024.         {block:Answer}
  1025.         <table>
  1026.         <tr>
  1027.             <td class="satu"><img src="{AskerPortraitURL-128}" width="100px"><br><center>{Asker}</center></td>
  1028.             <td class="dua">{Question}</td>
  1029.         </tr>
  1030.         </table>
  1031.         {Answer}
  1032.         {/block:Answer}
  1033.  
  1034.     </div>
  1035.  
  1036.         <!-- INDEX PAGE INFO -->
  1037.  
  1038.         {block:IndexPage}
  1039.         <div class="noted">
  1040.             {block:Date}<a href="{Permalink}"><span class="date">{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</span></a>{/block:Date}
  1041.             {block:IfTags}{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{block:IfTags}
  1042.             {block:NoteCount}<span class="notedd">{NoteCountWithLabel}</span>{/block:NoteCount}
  1043.         </div>
  1044.         {/block:IndexPage}
  1045.  
  1046.         <!-- PERMALINK PAGE INFO -->
  1047.         {block:PermalinkPage}
  1048.         <div class="infos">
  1049.             {block:Date}This post was posted on {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}</span></a>{/block:Date}<br>
  1050.             {block:NoteCount}This post has {NoteCountWithLabel}{/block:NoteCount} {block:ContentSource}originally posted by <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource} {block:RebloggedFrom}and reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}<br>
  1051.             {block:HasTags}Tagged under {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}{/block:HasTags}
  1052.         </div>
  1053.         {/block:PermalinkPage}
  1054.  
  1055.         {block:PostNotes}{PostNotes}{/block:PostNotes}
  1056.         {block:Posts}
  1057.     </div>
  1058.  
  1059.         <!-- PAGE NUMBERS -->
  1060.  
  1061.         {block:IfNotInfiniteScroll}
  1062.         <center>
  1063.         {block:Pagination}
  1064.         <div id="pagination">
  1065.         {block:PreviousPage}<a href="{PreviousPage}" class="prev">PREV</a>{/block:PreviousPage}
  1066.         {block:JumpPagination length="8"}
  1067.         {block:CurrentPage}<span class="current_page">{PageNumber}</span> {/block:CurrentPage}
  1068.         {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a> {/block:JumpPage}
  1069.         {/block:JumpPagination}
  1070.         {block:NextPage}<a href="{NextPage}" class="next">NEXT</a>{/block:NextPage}
  1071.         </div>
  1072.         {/block:Pagination}
  1073.         </center>
  1074.         {/block:IfNotInfiniteScroll}
  1075.  
  1076.     </div>
  1077.  </body>
  1078. </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!