API tools faq
paste
Advertisement
mogimochi

Tagslist [03] Waíse heill

mogimochi
Sep 12th, 2013
14,169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Tag Page 03
  8. by yukoki/houtarubi
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim page as your own.
  14.  
  15. ---------------------------------------------------------------------------
  16. Please look out for notes throughout the code
  17. to help you in customizing the page!!
  18. ---------------------------------------------------------------------------
  19.  
  20. -->
  21.  
  22. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}" />
  25.  
  26. <style type="text/css">
  27.  
  28. ::-webkit-scrollbar { width: 5px; }
  29. ::-webkit-scrollbar-track-piece {
  30. background-color: #f4f9c5;/**this changes the scrollbar background**/
  31. }
  32. ::-webkit-scrollbar-thumb:vertical {
  33. width: 10px;
  34. border-radius: 100px;
  35. -moz-border-radius: 100px;
  36. -webkit-border-radius: 100px;
  37. -o-border-radius: 100px;
  38. background-color: #cde362;/**this changes the scrollbar itself**/
  39. }
  40.  
  41.  
  42. body {
  43. background-color: #fff;
  44. background-image: url(http://25.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o3_250.png); /**put your background image link within the ()s!!**/
  45. background-attachment: fixed;
  46. margin: 0;
  47. word-wrap: break-word;
  48. }
  49. a { text-decoration: none; }
  50.  
  51. #main {margin-top: 30px;text-align: center;}
  52.  
  53. /** -------------------------- HEADER QUOTE --------------------------- **/
  54. .t {
  55. z-index: 1;
  56. font-family: consolas;
  57. font-size: 9px;
  58. text-transform: uppercase;
  59. text-align: center;
  60. padding: 20px;
  61. letter-spacing: 7px; /**spacing between the text**/
  62. color: #888; /**colour of the quote**/
  63. text-shadow: -2px 0 0 #c5a771; /**colour of the text shadow**/
  64. border: 1px solid #C2C2C2; /**borders of the quote header**/
  65. background-color: #F5F5F5; /**background colour of the quote header**/
  66. }
  67.  
  68. #n {
  69. margin-top: 10px;
  70. margin-bottom: 5px;
  71. margin-left: auto;
  72. margin-right: auto;
  73. text-align: center;
  74. }
  75.  
  76. /** ---------------------------- NAVIGATION --------------------------- **/
  77. #n a {
  78. color: #fff; /**nav links' text colour**/
  79. background-color: #ea8370; /**background colour of the nav links**/
  80. padding: 2px 4px;
  81. font-family: consolas;
  82. font-size: 10px;
  83. letter-spacing: 1px;
  84. margin: 0 3px;
  85. line-height: 25px;
  86. border: 1px solid #fff;
  87. transition: linear 0.3s;
  88. -moz-transition: linear 0.3s;
  89. -webkit-transition: linear 0.3s;
  90. -o-transition: linear 0.3s;
  91. }
  92.  
  93. #n a:hover {
  94. background-color: #fff; /**nav links text hover colour**/
  95. color: #888; /**nav links background hover colour**/
  96. font-style: italic; /**delete if you don't want it to become italic**/
  97. border: 1px solid #dfdfdf; /**border of nav links when hovered**/
  98. }
  99.  
  100. /** --------------------------- "TAGS LIST" --------------------------- **/
  101. #tt {
  102. font-family: courier new;
  103. font-size: 32px;
  104. font-style: italic;
  105. color: #4fa983; /**change the colour of 'TAGS LIST'**/
  106. text-shadow: -2px 2px 0 #73d1ac;
  107. /**change the colour of 'TAGS LIST''s text shadow**/
  108. }
  109.  
  110. /** ----------------------------- 「 and 」 --------------------------- **/
  111. .g {
  112. font-style: normal;
  113. color: #fff; /** colour of 「 and 」**/
  114. }
  115.  
  116. #content {
  117. z-index: 10;
  118. height: 440px;
  119. overflow: auto;
  120. position: relative;
  121. z-index: 10;
  122. /**---------------------------------------------------------------------**/
  123. width: 635px;
  124. /** change the width for the following sizes
  125. 3 columns, 200px blocks - 635px
  126. 2 columns, 200px blocks - 425px
  127. 1 column , 500px blocks - 510px
  128. ------------------------------------------------------------------------**/
  129. }
  130.  
  131. .tagblock {
  132. float: left;
  133. margin: 5px;
  134. /**---------------------------------------------------------------------**/
  135. width: 200px;
  136. /** change the width for the following sizes
  137. 3 columns, 200px blocks - 200px
  138. 2 columns, 200px blocks - 200px
  139. 1 column , 500px blocks - 500px
  140. ------------------------------------------------------------------------**/
  141. }
  142.  
  143. .head {
  144. color: #ffffff; /**tag header text**/
  145. background-color: #72d1a9; /**tag header background**/
  146. padding: 5px 10px;
  147. text-transform: uppercase;
  148. font-family: consolas;
  149. font-size: 11px;
  150. letter-spacing: 1px;
  151. }
  152. .li {
  153. margin-top: 4px;
  154. color: #000000; /** tag lines text colour **/
  155. background-color: #F5F5F5; /** tag lines background **/
  156. border-left: 0 solid #eff3c0;/** tag lines border background **/
  157. padding: 5px;
  158. text-transform: uppercase;
  159. font-family: consolas;
  160. font-size: 10px;
  161. letter-spacing: 1px;
  162. padding-left: 20px;
  163. text-align: left;
  164. -webkit-transition: all 0.4s ease-in-out;
  165. -moz-transition: all 0.4s ease-in-out;
  166. -o-transition: all 0.4s ease-in-out;
  167. -ms-transition: all 0.4s ease-in-out;
  168. transition: all 0.4s ease-in-out;
  169. }
  170. .li:hover {
  171. background-color: #fff; /** tag lines hover background **/
  172. color: #888888; /** tag lines hover text colour **/
  173. border-left: 10px solid #eff3c0; /** tag lines borders hover bg **/
  174. }
  175. .pagination {display: none;}
  176.  
  177. {CustomCSS}
  178.  
  179. </style>
  180.  
  181. <!-------------------------------------------------------------------------
  182. delete from line 181 (prev line) to </script> at 196
  183. if you do not wish for multiple columns!!
  184. -------------------------------------------------------------------------->
  185.  
  186. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  187. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  188. <script type="text/javascript">
  189. $(window).load(function () {
  190. $('#content').masonry({
  191. itemSelector : ".tagblock",
  192. },
  193. function() { $('#content').masonry({ appendedContent: $(this) }); }
  194. );
  195. });
  196. </script>
  197.  
  198. </head>
  199. <body>
  200.  
  201. <img style="position: fixed;z-index:2;bottom:0;right:0;width:350px;" src="http://media.tumblr.com/d223339b5263f4312351308ce565af70/tumblr_inline_mszt3cH4cM1qz4rgp.png">
  202. <!-------------------------------------------------------------------------
  203. Above's where you put your right corner image link.
  204. Delete it if you don't have one.
  205. Make sure it goes:
  206. <img style="position: fixed;z-index:2;bottom:0;right:0;width:350px;" src="imglinkhere">
  207. -------------------------------------------------------------------------->
  208.  
  209. <div id="main">
  210.  
  211. <div id="tt"><span class="g">「</span> TAGS LIST <span class="g">」</span></div><!--tt-->
  212.  
  213. <div class="t"><!--the quote header's quote!!!-->
  214. <!------------------------------------------------------------------------>
  215. 私は、私にとって貴重である人を保護するために私の力を使用しています。
  216. <!------------------------------------------------------------------------>
  217. </div><!--t-->
  218.  
  219. <div id="n">
  220. <a href="/">return</a>
  221. <a href="/help">message</a>
  222. <a href="/archive">archive</a>
  223. <a href="http://tumblr.com">dashboard</a>
  224. <a href="http://yukoki.tumblr.com">credit</a>
  225. <!-------------------------------------------------------------------------
  226. Add more links here: <a href="linkurl">link</a>
  227. PLEASE NEVER REMOVE MY CREDIT THO D:<
  228. -------------------------------------------------------------------------->
  229. </div>
  230.  
  231. <center><div id="content">
  232.  
  233. <!-------------------------------------------------------------------------
  234. ~ EXAMPLE TAG BLOCK ~
  235. copy and paste the entire block to add more
  236.  
  237. <div class="tagblock">
  238. <div class="head">tag header</div>
  239. <a href="/tagged/one"><div class="li">one</div></a>
  240. <a href="/tagged/two"><div class="li">two</div></a>
  241. <a href="/tagged/three"><div class="li">three</div></a>
  242. <a href="/tagged/four"><div class="li">four</div></a>
  243. <a href="/tagged/five"><div class="li">five</div></a>
  244. </div><!--tagblock-->
  245.  
  246. <!------------------------------------------------------------------------>
  247.  
  248. <div class="tagblock">
  249. <div class="head">tag header #1</div>
  250. <a href="/tagged/"><div class="li">tag 1</div></a>
  251. <a href="/tagged/"><div class="li">tag 2</div></a>
  252. <a href="/tagged/"><div class="li">tag 3</div></a>
  253. <a href="/tagged/"><div class="li">tag 4</div></a>
  254. <a href="/tagged/"><div class="li">tag 5</div></a>
  255. <a href="/tagged/"><div class="li">tag 6</div></a>
  256. <a href="/tagged/"><div class="li">tag 7</div></a>
  257. </div><!--tagblock-->
  258.  
  259. <div class="tagblock">
  260. <div class="head">tag header #2</div>
  261. <a href="/tagged/"><div class="li">tag 1</div></a>
  262. <a href="/tagged/"><div class="li">tag 2</div></a>
  263. <a href="/tagged/"><div class="li">tag 3</div></a>
  264. <a href="/tagged/"><div class="li">tag 4</div></a>
  265. <a href="/tagged/"><div class="li">tag 5</div></a>
  266. </div><!--tagblock-->
  267.  
  268. <div class="tagblock">
  269. <div class="head">tag header #3</div>
  270. <a href="/tagged/"><div class="li">tag 1</div></a>
  271. <a href="/tagged/"><div class="li">tag 2</div></a>
  272. <a href="/tagged/"><div class="li">tag 3</div></a>
  273. <a href="/tagged/"><div class="li">tag 4</div></a>
  274. <a href="/tagged/"><div class="li">tag 5</div></a>
  275. <a href="/tagged/"><div class="li">tag 6</div></a>
  276. <a href="/tagged/"><div class="li">tag 7</div></a>
  277. <a href="/tagged/"><div class="li">tag 8</div></a>
  278. </div><!--tagblock-->
  279.  
  280. <div class="tagblock">
  281. <div class="head">tag header #4</div>
  282. <a href="/tagged/"><div class="li">tag 1</div></a>
  283. <a href="/tagged/"><div class="li">tag 2</div></a>
  284. <a href="/tagged/"><div class="li">tag 3</div></a>
  285. </div><!--tagblock-->
  286.  
  287. <div class="tagblock">
  288. <div class="head">tag header #5</div>
  289. <a href="/tagged/"><div class="li">tag 1</div></a>
  290. <a href="/tagged/"><div class="li">tag 2</div></a>
  291. <a href="/tagged/"><div class="li">tag 3</div></a>
  292. <a href="/tagged/"><div class="li">tag 4</div></a>
  293. <a href="/tagged/"><div class="li">tag 5</div></a>
  294. <a href="/tagged/"><div class="li">tag 6</div></a>
  295. </div><!--tagblock-->
  296.  
  297. <div class="tagblock">
  298. <div class="head">tag header #6</div>
  299. <a href="/tagged/"><div class="li">tag 1</div></a>
  300. <a href="/tagged/"><div class="li">tag 2</div></a>
  301. <a href="/tagged/"><div class="li">tag 3</div></a>
  302. <a href="/tagged/"><div class="li">tag 4</div></a>
  303. </div><!--tagblock-->
  304.  
  305. <div class="tagblock">
  306. <div class="head">tag header #7</div>
  307. <a href="/tagged/"><div class="li">tag 1</div></a>
  308. <a href="/tagged/"><div class="li">tag 2</div></a>
  309. <a href="/tagged/"><div class="li">tag 3</div></a>
  310. <a href="/tagged/"><div class="li">tag 4</div></a>
  311. <a href="/tagged/"><div class="li">tag 5</div></a>
  312. <a href="/tagged/"><div class="li">tag 6</div></a>
  313. <a href="/tagged/"><div class="li">tag 7</div></a>
  314. </div><!--tagblock-->
  315.  
  316. <div class="tagblock">
  317. <div class="head">tag header #8</div>
  318. <a href="/tagged/"><div class="li">tag 1</div></a>
  319. <a href="/tagged/"><div class="li">tag 2</div></a>
  320. </div><!--tagblock-->
  321.  
  322. <div class="tagblock">
  323. <div class="head">tag header #9</div>
  324. <a href="/tagged/"><div class="li">tag 1</div></a>
  325. <a href="/tagged/"><div class="li">tag 2</div></a>
  326. <a href="/tagged/"><div class="li">tag 3</div></a>
  327. <a href="/tagged/"><div class="li">tag 4</div></a>
  328. <a href="/tagged/"><div class="li">tag 5</div></a>
  329. </div><!--tagblock-->
  330.  
  331. <div class="tagblock">
  332. <div class="head">tag header #10</div>
  333. <a href="/tagged/"><div class="li">tag 1</div></a>
  334. <a href="/tagged/"><div class="li">tag 2</div></a>
  335. <a href="/tagged/"><div class="li">tag 3</div></a>
  336. <a href="/tagged/"><div class="li">tag 4</div></a>
  337. </div><!--tagblock-->
  338.  
  339. </div><!--content--></center>
  340.  
  341. </div>
  342.  
  343. </body>
  344. </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!