Advertisement
Jessicakim

Sakura no Hana - theme #003

Jun 12th, 2012
6,831
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.56 KB | None | 0 0
  1. <!---- sakura no hana theme made by madarathemes
  2. don't take off the credits
  3. don't copy
  4. don't use this theme as a base ---->
  5.  
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7.  
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9. <head>
  10.  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  12. <script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js"></script>
  13.  
  14. <script type="text/javascript">
  15. animatedcollapse.addDiv('jason', 'fade=1,height=80px')
  16. animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
  17. animatedcollapse.addDiv('michael', 'fade=1,height=120px')
  18. animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
  19. animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
  20. animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
  21. animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
  22. //$: Access to jQuery
  23. //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
  24. //state: "block" or "none", depending on state
  25. }
  26. animatedcollapse.init()
  27. </script>
  28.  
  29. <!-- DEFAULT COLORS -->
  30. <meta name="color:Background" content="#dddddd"/>
  31. <meta name="color:Scrollbar" content="#ddccaa"/>
  32. <meta name="color:Text" content="#000000"/>
  33. <meta name="color:Link" content="#bb9988"/>
  34. <meta name="color:Link Hover" content="#ffddcc"/>
  35. <meta name="color:Blockquote Border" content="#996666"/>
  36. <meta name="color:Blockquote Text" content="#696969"/>
  37. <meta name="color:Postbox" content="#ffffff"/>
  38. <meta name="color:Title" content="#996666"/>
  39. <meta name="color:Title Hover" content="#000000"/>
  40. <meta name="color:Notes Text" content="#000000"/>
  41. <meta name="color:Sidebar" content="#f9f9f9"/>
  42. <meta name="color:Navi" content="#bb9988"/>
  43. <meta name="color:Navi Box Hover" content="#996666"/>
  44. <meta name="color:Permalink Box" content="#ddccbb"/>
  45. <meta name="color:Permalink Text" content="#000000"/>
  46. <meta name="color:Sidebar Title" content="#bb9988"/>
  47. <meta name="color:Sidebar Title Underline" content="#ddddcc"/>
  48. <meta name="color:Pagination" content="#000000"/>
  49. <meta name="color:Pagination Link" content="#bb9988"/>
  50.  
  51. <!-- DEFAULT IMAGE -->
  52. <meta name="image:Background" content="http://static.tumblr.com/uobboj6/Cm2m5j518/tumblr_lzju29vxir1r9g6hvo3_100.png"/>
  53. <meta name="image:Sidebar" content="http://static.tumblr.com/uobboj6/6hEm5j4lk/tumblr_m5iinlwars1qa8ipco1_500.jpg"/>
  54.  
  55. <!-- DEFAULTS -->
  56. <meta name="if:Caption" content="0"/>
  57. <meta name="if:Tags" content="0"/>
  58. <meta name="if:EndlessScrolling" content="0"/>
  59.  
  60. <!-- DEFAULTS LINKS -->
  61. <meta name="text:Link1" content="/"/>
  62. <meta name="text:Link1 Title" content="Link 1"/>
  63. <meta name="text:Link2" content="/"/>
  64. <meta name="text:Link2 Title" content="Link 2"/>
  65. <meta name="text:Link3" content="/"/>
  66. <meta name="text:Link3 Title" content="Link 3"/>
  67. <meta name="text:Link4" content="/"/>
  68. <meta name="text:Link4 Title" content="Link 4"/>
  69. <meta name="text:Link5" content="/"/>
  70. <meta name="text:Link5 Title" content="Link 5"/>
  71. <meta name="text:Link6" content="/"/>
  72. <meta name="text:Link6 Title" content="Link 6"/>
  73. <meta name="text:Link7" content="/"/>
  74. <meta name="text:Link7 Title" content="Link 7"/>
  75.  
  76. <title>{Title}</title>
  77. <link rel="shortcut icon" href="{Favicon}">
  78. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  79.  
  80. {block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>{/block:IfEndlessScrolling}
  81.  
  82. <style type="text/css">
  83.  
  84. @font-face {
  85. font-family: "pixel";
  86. src: url('https://dl.dropboxusercontent.com/u/109376002/Pixel_Berry_08_84_Ltd.Edition.TTF');
  87. }
  88.  
  89. @font-face {
  90. font-family: "visitor";
  91. src: url('https://dl.dropboxusercontent.com/u/109376002/visitor2.ttf');
  92. }
  93.  
  94. iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  95.  
  96. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  97.  
  98. ::-webkit-scrollbar-thumb:vertical {
  99. background-color: {color:Scrollbar};
  100. height:100px;
  101. }
  102.  
  103. ::-webkit-scrollbar {
  104. height:25px;
  105. width:7px;
  106. background-color: #fff;
  107. }
  108.  
  109. body {
  110. background-color:{color:Background};
  111. background-image:url('{image:Background}');
  112. background-position: fixed;
  113. background-attachment:fixed;
  114. background-repeat:repeat;
  115. font: 11px 'arial';
  116. color: {color:Text};
  117. }
  118.  
  119. a:link,a:active,a:visited {
  120. text-decoration: none;
  121. color: {color:Link};
  122. -webkit-transition: all 0.5s ease-out;
  123. -moz-transition: all 0.5s ease-out;
  124. -o-transition: all 0.5s ease-out;
  125. }
  126.  
  127. a:hover {
  128. color: {color:Link Hover};
  129. -webkit-transition: all 0.5s ease-out;
  130. -moz-transition: all 0.5s ease-out;
  131. -o-transition: all 0.5s ease-out;
  132. }
  133.  
  134. blockquote {
  135. padding: 0px;
  136. padding-left: 5px;
  137. font: 11px arial;
  138. letter-spacing: 1px;
  139. margin-right: 2px;
  140. margin-left: 3px;
  141. border-left: 2px solid {color:Blockquote Border};
  142. background-color: transparent;
  143. color: {color:Blockquote Text};
  144. }
  145.  
  146. blockquote img{
  147. max-width: 390px;
  148. }
  149.  
  150. img {
  151. opacity: 0.8;
  152. filter:alpha(opacity=80);
  153. -moz-opacity: 0.8;
  154. -webkit-transition: all 0.9s ease;
  155. -moz-transition: all 0.9s ease;
  156. -o-transition: all 0.9s ease;
  157. }
  158.  
  159. img:hover {
  160. opacity: 1;
  161. filter:alpha(opacity=100);
  162. -moz-opacity: 1;
  163. -webkit-transition: all 0.9s ease;
  164. -moz-transition: all 0.9s ease;
  165. -o-transition: all 0.9s ease;
  166. }
  167.  
  168. #sidebar {
  169. position: fixed;
  170. float: left;
  171. top: 0px;
  172. margin-left: 60px
  173. }
  174.  
  175. #navigation{
  176. padding: 2px;
  177. margin-top: -10px;
  178. margin-left: 340px;
  179. }
  180.  
  181. #posts{
  182. width: 500px;
  183. padding: 5px;
  184. margin: 4px;
  185. margin-bottom:5px;
  186. font-family: 11px 'georgia';
  187. color: {color:Text};
  188. background: {color:Postbox};
  189. }
  190.  
  191. h1{
  192. font: 22px 'chaparral pro';
  193. text-align:left;
  194. margin-top:0px;
  195. margin-left:5px;
  196. margin-bottom:0px;
  197. }
  198.  
  199. h1 a{
  200. color:{color:Title};
  201. text-decoration:none;
  202. -webkit-transition: all 0.5s ease-in;
  203. -moz-transition: all 0.5s ease-in;
  204. -o-transition: all 0.5s ease-in;
  205. }
  206.  
  207. h1 a:hover{
  208. color:{color:Title Hover};
  209. -webkit-transition: all 0.5s ease-in;
  210. -moz-transition: all 0.5s ease-in;
  211. -o-transition: all 0.5s ease-in;
  212. }
  213.  
  214. .quote{
  215. font:18px 'Times New Roman';
  216. text-align: center;
  217. display:block;
  218. }
  219.  
  220. #audio{
  221. z-index:3;
  222. background: #000;
  223. display:block;
  224. margin-bottom:0px;
  225. }
  226.  
  227. .audiopic{
  228. opacity: 1;
  229. filter:alpha(opacity=100);
  230. -moz-opacity: 1;}
  231.  
  232. #audioborder{
  233. padding: 2px;
  234. border: 2px solid #000;
  235. background-color: #000;
  236. }
  237.  
  238. .borderask{
  239. padding: 2px;
  240. border: 2px solid #eee;
  241. background-color: #eee;
  242. }
  243.  
  244. #ask {
  245. text-align: left;
  246. background: #eee;
  247. margin-left: 55px;
  248. padding: 10px;
  249. position: relative;
  250. font: 12px 'trebuchet ms';
  251. color: #000;
  252. }
  253.  
  254. #ask p {margin:1px 1px;}
  255.  
  256. .notes {width:500px; padding: 0px; color: {color:Notes Text}; margin-top: 0px; margin-left: 15px; line-height: 15px; float:none; letter-spacing: 0px; text-transform:lowercase; font-family: trebuchet ms; font-size: 10px;}
  257.  
  258. li.notes {list-style:decimal; padding: 2px; margin: 2px; letter-spacing: 0px; text-transform:lowercase;}
  259.  
  260. #notes a{color: {color:Link}; letter-spacing: 0px; text-transform:lowercase; font-family: trebuchet ms; font-size: 10px;}
  261.  
  262. .sidepic{
  263. width:230px;
  264. height:1000px;
  265. padding:5px;
  266. background: {color:Sidebar};
  267. font: 11px 'consolas';
  268. text-align: center;
  269. display:block;
  270. }
  271.  
  272. .menu a{
  273. float:left;
  274. width: 25px;
  275. height:20px;
  276. margin-left:18px;
  277. padding:5px;
  278. padding-top:8px;
  279. background: {color:Navi};
  280. font: 12px 'visitor';
  281. text-align:center;
  282. display:block;
  283. margin-bottom:15px;
  284. color: #fff;
  285. text-decoration: none;
  286. -webkit-transition: all 0.5s ease-in;
  287. -moz-transition: all 0.5s ease-in;
  288. -o-transition: all 0.5s ease-in;
  289. border-radius: 100px;
  290. }
  291.  
  292. .menu a:hover{
  293. float:left;
  294. width: 25px;
  295. height:20px;
  296. margin-left:18px;
  297. padding:5px;
  298. padding-top:8px;
  299. background: {color:Navi Box Hover};
  300. font: 12px 'visitor';
  301. text-align:center;
  302. display:block;
  303. margin-bottom:15px;
  304. color: #fff;
  305. text-decoration: none;
  306. -webkit-transition: all 0.5s ease-in;
  307. -moz-transition: all 0.5s ease-in;
  308. -o-transition: all 0.5s ease-in;
  309. border-radius: 10px;
  310. }
  311.  
  312. .perma {
  313. width:100px;
  314. height:auto;
  315. padding:2px;
  316. padding-right:8px;
  317. color:transparent;
  318. background:{color:Permalink Box};
  319. margin-left:0px;
  320. margin-top:0px;
  321. z-index:300;
  322. filter:alpha(opacity=80);
  323. opacity:0;
  324. font-size:8px;
  325. font-family:'pixel';
  326. text-align:center;
  327. -webkit-transition-duration: .90s;
  328. position: absolute;
  329. border-radius: 25px 10px / 10px 25px;
  330. -moz-border-radius: 25px 10px / 10px 25px;
  331. }
  332.  
  333. .link:hover .perma {
  334. filter:alpha(opacity=30);
  335. opacity:99;
  336. width:100px;
  337. height:auto;
  338. padding:2px;
  339. padding-right:8px;
  340. color:{color:Permalink Text};
  341. background:{color:Permalink Box};
  342. margin-left:15px;
  343. margin-top:15px;
  344. z-index:300;
  345. font-size:8px;
  346. font-family:'pixel';
  347. text-align:center;
  348. -webkit-transition-duration: .90s;
  349. position: absolute;
  350. border-radius: 25px 10px / 10px 25px;
  351. -moz-border-radius: 25px 10px / 10px 25px;
  352. }
  353.  
  354. .border{
  355. margin-top:30px;
  356. border-radius: 250px;
  357. -moz-border-radius: 250px;
  358. }
  359.  
  360. .border:hover{
  361. margin-top:30px;
  362. border-radius: 0px;
  363. -moz-border-radius: 0px;
  364. }
  365.  
  366. .titulo{
  367. margin-left:10px;
  368. margin-right:10px;
  369. margin-top:15px;
  370. margin-bottom: 7px;
  371. text-align:center;
  372. border-bottom: 2px solid {color:Sidebar Title Underline};
  373. }
  374.  
  375. .titulo a{
  376. font-size:14px;
  377. font-family: 'georgia';
  378. color:{color:Sidebar Title};
  379. text-decoration:none;
  380. }
  381.  
  382. #pagination {
  383. margin-top: 60px;
  384. font-family:georgia;
  385. text-align:center;
  386. font-size:14px;
  387. color: {color:Pagination};
  388. }
  389.  
  390. #pagination a{
  391. color: {color:Pagination Link};
  392. text-decoration:none;
  393. }
  394.  
  395. {CustomCSS}
  396.  
  397. </style>
  398. {block:IfEndlessScrolling}<script type="text/javascript"
  399. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
  400. </script>
  401. <script type="text/javascript" language="javascript">
  402. $(function () {
  403. $('#scrlBotm').click(function () {
  404. $('html, body').animate({
  405. scrollTop: $(document).height()
  406. },
  407. 1500);
  408. return false;
  409. });
  410.  
  411. $('#scrlTop').click(function () {
  412. $('html, body').animate({
  413. scrollTop: '0px'
  414. },
  415. 1500);
  416. return false;
  417. });
  418. });
  419. </script>{/block:IfEndlessScrolling}
  420. </head>
  421.  
  422. <body>
  423.  
  424. <div id="sidebar" class="sidepic">
  425. <img src="{image:Sidebar}" width="210" class="border">
  426. <div class="titulo"><a href="/">{Title}</a></div>
  427. <center>{description}</center>
  428. <br>
  429. <div class="menu"><a href="/"><img src="http://static.tumblr.com/uobboj6/7lGm5j31f/home_icon_16.png"></a></div>
  430. <div class="menu"><a href="/ask"><img src="http://static.tumblr.com/uobboj6/qsNm5j31p/mail_2_icon_16.png"></a></div>
  431. <div class="menu"><a href="/archive"><img src="http://static.tumblr.com/uobboj6/4Z7m5j326/refresh_icon_16.png"></a></div>
  432. <div class="menu"><a href="http://madarathemes.tumblr.com/"><img src="http://static.tumblr.com/uobboj6/hLjm5j341/paper_airplane_icon_16.png"></a></div>
  433.  
  434. <a href="javascript:animatedcollapse.toggle('dog')"><b>MORE LINKS.</b></a>
  435. <div id="dog" style="display:none">
  436. <a href="{text:Link1}">{text:Link1 Title}</a> ·
  437. <a href="{text:Link2}">{text:Link2 Title}</a> ·
  438. <a href="{text:Link3}">{text:Link3 Title}</a> ·
  439. <a href="{text:Link4}">{text:Link4 Title}</a> ·
  440. <a href="{text:Link5}">{text:Link5 Title}</a> ·
  441. <a href="{text:Link6}">{text:Link6 Title}</a> ·
  442. <a href="{text:Link7}">{text:Link7 Title}</a></div>
  443.  
  444. {block:IfNotEndlessScrolling}<div id="pagination">{block:PreviousPage}<a href="{PreviousPage}">«</a> &nbsp;{/block:PreviousPage}{CurrentPage}/{TotalPages}{block:NextPage}&nbsp;<a href="{NextPage}">»</a>{/block:NextPage}</div>{/block:IfNotEndlessScrolling}
  445. </div>
  446.  
  447. <div id="navigation">
  448. <table width="40%" border="0">
  449. <tr>
  450. <td align="center">
  451. {block:IfEndlessScrolling}<div class = "autopagerize_page_element" >{/block:IfEndlessScrolling}
  452. {block:Posts}
  453. {block:IndexPage}<div class="link"><div class="perma">
  454. <a href="{Permalink}">{TimeAgo}</a> · {NoteCount}<br>
  455. {block:IfTags}{block:HasTags}{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}{/block:IfTags}
  456. </div>{/block:IndexPage}
  457. <table width="500" border="0">
  458. <tr>
  459. <td>
  460. <div id="posts">
  461.  
  462. {block:Text}
  463. {block:Title}<h1><a href="{Permalink}">▶ {Title}</a></h1>{/block:Title}
  464. {Body}
  465. {/block:Text}
  466.  
  467. {block:Photo}
  468. {block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-500}" border="0" width="500px"/></a>{/block:IndexPage}
  469. {block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" border="0" width="500px"/>{LinkCloseTag}{/block:PermalinkPage}
  470. {block:IfCaption} {block:Caption}
  471. {Caption}
  472. {/block:Caption}{/block:IfCaption}
  473.  
  474. {block:IfNotCaption}{block:PermalinkPage}{block:Caption}
  475. {Caption}
  476. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  477. {/block:Photo}
  478.  
  479. {block:Photoset}
  480. {Photoset-500}
  481. {block:IfCaption} {block:Caption}
  482. {Caption}
  483. {/block:Caption}{/block:IfCaption}
  484.  
  485. {block:IfNotCaption}{block:PermalinkPage}{block:Caption}
  486. {Caption}
  487. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  488. {/block:Photoset}
  489.  
  490. {block:Quote}
  491. <div class="quote">"{Quote}"</div>
  492. {block:Source}
  493. <div align="right">- {Source}</div>
  494. {/block:Source}
  495. {/block:Quote}
  496.  
  497. {block:Link}
  498. <h1><a href="{URL}" class="link" {Target}>{Name} →</a></h1>
  499. {block:Description}
  500. {Description}
  501. {/block:Description}
  502. {/block:Link}
  503.  
  504. {block:Chat}
  505. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  506. <div style="margin-left:16px;">{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}</div>
  507. {/block:Chat}
  508.  
  509. {block:Audio}
  510.  
  511. {block:IfCaption} <div style="float:right;display: block; margin-top:0px;z-index:4;">{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" id="audioborder" class="audiopic"/>{/block:AlbumArt}</div><div id="audio">{AudioPlayerBlack}</div>
  512. {block:Caption}
  513. {Caption}
  514. {/block:Caption}{/block:IfCaption}
  515.  
  516. {block:IfNotCaption}<div id="audio">{AudioPlayerBlack}</div>
  517. {block:PermalinkPage}{block:Caption}
  518. {Caption}
  519. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  520. {/block:Audio}
  521.  
  522. {block:Video}
  523. {Video-500}
  524. {block:IfCaption} {block:Caption}
  525. {Caption}
  526. {/block:Caption}{/block:IfCaption}
  527.  
  528. {block:IfNotCaption}{block:PermalinkPage}{block:Caption}
  529. {Caption}
  530. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  531. {/block:Video}
  532.  
  533. {block:Answer}
  534. <p><img src="{AskerPortraitURL-48}" border-left: 1px solid #f0f0f0; align="left" class="borderask" /> </a><b><div id="ask" align="right">{Asker}:</b> {Question}</div><br /></p>
  535. {Answer}
  536. {/block:Answer}
  537.  
  538. </div>
  539.  
  540. {block:PermalinkPage}{block:Date}<div class="notes"><br><span style="font-family: 'times new roman'; text-transform:uppercase;"><b> {Month} {DayOfMonthWithZero}, {Year} </b><br>▶ {NoteCountWithLabel}<br> →{block:RebloggedFrom}via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> ↔ source <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>←{/block:RebloggedFrom}
  541. <br>
  542. {block:HasTags}<b>Tagged</b> {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}<br>
  543. {block:PostNotes}{PostNotes}{/block:PostNotes}</div></span>{/block:Date}{/block:PermalinkPage}
  544.  
  545. </td>
  546. </tr>
  547. </table>
  548. {block:IndexPage}</div>{/block:IndexPage}
  549. {block:Posts}{block:IfEndlessScrolling}</div>{/block:IfEndlessScrolling}
  550. </td>
  551. </tr>
  552. </table>
  553. </div>
  554. {block:IfEndlessScrolling}<a id="scrlTop" title="Top" href="#" style="color:{color:Scrollbar}; font-size:16px; font-family: 'trebuchet ms'; position: fixed; bottom: 10px; right: 10px;">TOP ▲</a>{/block:IfEndlessScrolling}
  555. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement