API tools faq
paste
Advertisement
mogimochi

Tagslist [01] Kou Prince

mogimochi
Sep 21st, 2012
25,811
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Tag Page 01 Kou Prince
  8. by yukoki/yokoris
  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 theme 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} - tags</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{background-color:#ccc;}/**scrollbar bg**/
  30. ::-webkit-scrollbar-thumb:vertical {
  31. width: 10px;
  32. border-radius: 100px;
  33. -moz-border-radius: 100px;
  34. -webkit-border-radius: 100px;
  35. -o-border-radius: 100px;
  36. background-color: #4f9ec2;/**scrollbar**/
  37. }
  38.  
  39. body {
  40. background-color: #ffffff; /**background colour!**/
  41. background-attachment: fixed;
  42. margin: 0;
  43. word-wrap: break-word;
  44. }
  45. a { text-decoration:none; }
  46.  
  47. /** --------------------------- SIDEBAR --------------------------- **/
  48.  
  49. #left {
  50. position: fixed;
  51. top: 0;
  52. width: 200px;
  53. left: 25px;
  54. padding: 140px 20px 0 20px;
  55. height: 100%;
  56. background-image: url(http://media.tumblr.com/b46ceb559a4e2b70dce7d4558c28343f/tumblr_inline_mx7l62GCBr1rshr70.jpg);
  57. /** ^^ background image for the sidebar**/
  58. }
  59.  
  60. .pic {
  61. width: 180px;
  62. height: 180px;
  63. border-radius: 200px;
  64. -moz-border-radius: 200px;
  65. -webkit-border-radius: 200px;
  66. position: relative;
  67. z-index: 3;
  68. border-top: 10px solid #beedff; /**sidebar pic top border**/
  69. border-right: 10px solid #beedff; /**sidebar pic right border**/
  70. border-bottom: 10px solid #4d9dc1; /**sidebar pic bottom border**/
  71. border-left: 10px solid #4d9dc1; /**sidebar pic left border**/
  72. transition: 0.6s;
  73. -moz-transition: 0.6s;
  74. webkit-transition: 0.6s;
  75. -o-transition: 0.6s;
  76. }
  77. .pic:hover {
  78. /** WHEN HOVERED **/
  79. border-bottom: 10px solid #beedff; /**sidebar pic bottom border**/
  80. border-left: 10px solid #beedff; /**sidebar pic left border**/
  81. border-top: 10px solid #4d9dc1;/**sidebar pic top border**/
  82. border-right: 10px solid #4d9dc1;/**sidebar pic right border**/
  83. }
  84.  
  85. .bt { /** BLOG TITLE **/
  86. position: absolute;
  87. font-family: courier new;
  88. margin: -40px 0 0 55px;
  89. font-size: 9px;
  90. width: 200px;
  91. text-align: center;
  92. text-transform: uppercase;
  93. width: 90px;
  94. z-index: 10;
  95. padding: 2px 0;
  96. opacity: 0.8;
  97. border-radius: 5px;
  98. -moz-border-radius: 5px;
  99. -webkit-border-radius: 5px;
  100. border: 1px solid #ddd; /** blog title border **/
  101. color: #aaa; /** blog title text **/
  102. background-color: #fff; /** blog title background **/
  103. }
  104.  
  105. /** ------------------------ TEAR DROP LINKS ----------------------- **/
  106.  
  107. .tear1, .tear2, .tear3, .tear4 {
  108. z-index: 5;
  109. width: 30px;
  110. height: 30px;
  111. border-radius: 30px 30px 30px 0;
  112. -moz-border-radius: 30px 30px 30px 0;
  113. webkit-border-radius: 30px 30px 30px 0;
  114. background-color: #4e9dc1; /** tear drop links background **/
  115. position: absolute;
  116. -webkit-transform: rotate(135deg);
  117. transition: 0.6s;
  118. -moz-transition: 0.6s;
  119. webkit-transition: 0.6s;
  120. -o-transition: 0.6s;
  121. }
  122. .tear1 { margin: 70px 5px; }
  123. .tear2 { margin: 130px 55px; }
  124. .tear3 { margin: 40px 105px; }
  125. .tear4 { margin: 90px 155px; }
  126. .tear1:hover, .tear2:hover, .tear3:hover, .tear4:hover {
  127. background-color: #beedff; /** tear drop links hover background **/
  128. }
  129. .tear1:hover { margin: 80px 5px; }
  130. .tear2:hover { margin: 140px 55px; }
  131. .tear3:hover { margin: 50px 105px; }
  132. .tear4:hover { margin: 100px 155px; }
  133.  
  134. .line1, .line2, .line3, .line4 {
  135. z-index: 1;
  136. background-color: #beedff; /** tear drop line colour **/
  137. width: 3px;
  138. position: absolute;
  139. margin-top: -100px;
  140. }
  141.  
  142. .line1 { margin-left: 17.5px; height: 190px; }
  143. .line2 { margin-left: 67.5px; height: 250px; }
  144. .line3 { margin-left: 117.5px; height: 160px; }
  145. .line4 { margin-left: 168px; height: 210px; }
  146.  
  147.  
  148. /** --------------------------- CONTENT ----------------------------- **/
  149.  
  150. #content {
  151. margin: 20px 290px;
  152. width: 700px; /** increase this to have more columns **/
  153. }
  154.  
  155. .tagblock {
  156. background-color: #eaeaea; /** fandom block background **/
  157. width: 270px;
  158. padding: 10px;
  159. margin: 0 20px 20px 0;
  160. float: left;
  161. }
  162.  
  163. .tagheader {
  164. font-family: courier new;
  165. font-size: 10px;
  166. text-transform: uppercase;
  167. letter-spacing: 1px;
  168. margin-bottom: 2px;
  169. padding: 3px 90px 3px 10px;
  170. background-color: #4c9cc0; /** fandom title background colour **/
  171. color: #ffffff; /** fandom title colour **/
  172. }
  173.  
  174. .tag {
  175. padding: 2.4px 5px;
  176. font-family: consolas;
  177. font-size: 10px;
  178. margin-top: 2px;
  179. background-color: #ffffff; /** tag background colour **/
  180. color: #cccccc; /** tag colour **/
  181. transition: 0.8s;
  182. -moz-transition: 0.8s;
  183. webkit-transition: 0.8s;
  184. -o-transition: 0.8s;
  185. }
  186.  
  187. .tag:hover {
  188. background-color: #ffffff; /** tag hover background colour **/
  189. color: #000000; /** tag hover colour **/
  190. padding-left: 10px;
  191. }
  192.  
  193. .tagpicture {
  194. position: absolute;
  195. width: 60px;
  196. height: 60px;
  197. margin: 0px 196px;
  198. border: 7px solid #4c9cc0; /** fandom icon border **/
  199. }
  200.  
  201. #s-m-t-tooltip {
  202. max-width: 150px;
  203. padding: 3px 5px;
  204. margin: 20px 14px 7px 10px;
  205. font-family: consolas;
  206. font-style: italic;
  207. font-size: 10px;
  208. line-height: 11px;
  209. letter-spacing: 1px;
  210. z-index: 999;
  211. background-color: #000; /** tooltip background colour **/
  212. color: #fff; /** tooltip colour **/
  213. }
  214.  
  215. {CustomCSS}
  216.  
  217. </style>
  218.  
  219. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  220. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  221. <script>
  222. (function($){
  223. $(document).ready(function(){
  224. $("a[title]").style_my_tooltips({
  225. tip_follows_cursor:true,
  226. tip_delay_time:0,
  227. tip_fade_speed:0,
  228. attribute:"title"
  229. });
  230. });
  231. })(jQuery);
  232. </script>
  233.  
  234. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  235.  
  236. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  237. <script type="text/javascript">
  238. $(window).load(function () {
  239. $('#content').masonry({
  240. itemSelector : ".tagblock",
  241. },
  242. function() { $('#content').masonry({ appendedContent: $(this) }); }
  243. );
  244. });
  245. </script>
  246.  
  247. </head>
  248. <body>
  249.  
  250.  
  251. <!-------------------------- RENDER IMAGE ----------------------------->
  252. <img style="position:fixed;z-index:-1;width:400px;bottom:0;right:0;" src=""><!--image link in between those apostrophes!-->
  253.  
  254. <!---------------------------- SIDEBAR -------------------------------->
  255. <div id="left">
  256.  
  257. <div class="bt">tags list</div> <!-- 'tags list' -->
  258.  
  259. <img class="pic" src="http://24.media.tumblr.com/9b010a25acd72bdaa9684c0d75524d45/tumblr_moalcyU9xt1stge76o2_250.png"><!--image link in between those apostrophes!-->
  260.  
  261. <div class="line1"></div>
  262. <div class="line2"></div>
  263. <div class="line3"></div>
  264. <div class="line4"></div>
  265.  
  266. <a title="home" href="/"><div class="tear1"></div></a>
  267. <a title="message" href="/ask"><div class="tear2"></div></a>
  268. <a title="archive" href="/archive"><div class="tear3"></div></a>
  269. <a title="credit" href="http://yukoki.tumblr.com"><div class="tear4"></div></a>
  270.  
  271. </div><!--left-->
  272.  
  273. <!----------------------------- CONTENT --------------------------------
  274.  
  275. a normal tag block looks like the following:
  276.  
  277. <div class="tagblock">
  278. <img class="tagpicture" src="http://media.tumblr.com/b6d28aaab32bc3ad369fd6a68ef5d986/tumblr_inline_mux6egnHO71rfdus5.jpg">
  279. <div class="tagheader">fandom #01</div>
  280. <a href="/tagged/"><div class="tag">tag 01</div></a>
  281. <a href="/tagged/"><div class="tag">tag 02</div></a>
  282. <a href="/tagged/"><div class="tag">tag 03</div></a>
  283. <a href="/tagged/"><div class="tag">tag 04</div></a>
  284. </div>
  285.  
  286. if you don't want the tag picture, simply delete off the entire line 238.
  287. your tag links should look like: <a href="/tagged/tag">...</a>
  288.  
  289. Don't forget to close all divs and links!!
  290.  
  291. -->
  292.  
  293. <div id="content">
  294.  
  295. <div class="tagblock">
  296. <img class="tagpicture" src="http://media.tumblr.com/b6d28aaab32bc3ad369fd6a68ef5d986/tumblr_inline_mux6egnHO71rfdus5.jpg"> <!--fandom icon-->
  297. <div class="tagheader">fandom #01</div> <!--fandom title-->
  298. <a href="/tagged/"><div class="tag">tag 01</div></a>
  299. <a href="/tagged/"><div class="tag">tag 02</div></a>
  300. <a href="/tagged/"><div class="tag">tag 03</div></a>
  301. <a href="/tagged/"><div class="tag">tag 04</div></a>
  302. </div>
  303.  
  304. <div class="tagblock">
  305. <img class="tagpicture" src="http://media.tumblr.com/2caaf0868d2d532ec038763928dada09/tumblr_inline_mux6flvIqn1rfdus5.jpg">
  306. <div class="tagheader">fandom #02</div>
  307. <a href="/tagged/"><div class="tag">tag 01</div></a>
  308. <a href="/tagged/"><div class="tag">tag 02</div></a>
  309. <a href="/tagged/"><div class="tag">tag 03</div></a>
  310. <a href="/tagged/"><div class="tag">tag 04</div></a>
  311. <a href="/tagged/"><div class="tag">tag 05</div></a>
  312. <a href="/tagged/"><div class="tag">tag 06</div></a>
  313. </div>
  314.  
  315.  
  316. <div class="tagblock">
  317. <img class="tagpicture" src="http://media.tumblr.com/739af1c2fa8d29874594e8b9f1141955/tumblr_inline_mux6lpaK3O1rfdus5.jpg">
  318. <div class="tagheader">fandom #03</div>
  319. <a href="/tagged/"><div class="tag">tag 01</div></a>
  320. <a href="/tagged/"><div class="tag">tag 02</div></a>
  321. <a href="/tagged/"><div class="tag">tag 03</div></a>
  322. <a href="/tagged/"><div class="tag">tag 04</div></a>
  323. <a href="/tagged/"><div class="tag">tag 05</div></a>
  324. </div>
  325.  
  326.  
  327. <div class="tagblock">
  328. <img class="tagpicture" src="http://media.tumblr.com/c64a390aff8fc610fc3ec751b177cff6/tumblr_inline_mux7b5qItB1rfdus5.jpg">
  329. <div class="tagheader">fandom #04</div>
  330. <a href="/tagged/"><div class="tag">tag 01</div></a>
  331. <a href="/tagged/"><div class="tag">tag 02</div></a>
  332. <a href="/tagged/"><div class="tag">tag 03</div></a>
  333. <a href="/tagged/"><div class="tag">tag 04</div></a>
  334. <a href="/tagged/"><div class="tag">tag 05</div></a>
  335. <a href="/tagged/"><div class="tag">tag 06</div></a>
  336. <a href="/tagged/"><div class="tag">tag 07</div></a>
  337. <a href="/tagged/"><div class="tag">tag 08</div></a>
  338. </div>
  339.  
  340.  
  341. <div class="tagblock">
  342. <img class="tagpicture" src="http://media.tumblr.com/c9b122392f437cd0a3f0a1debedd00b1/tumblr_inline_muxfyfoUdy1rfdus5.jpg">
  343. <div class="tagheader">fandom #05</div>
  344. <a href="/tagged/"><div class="tag">tag 01</div></a>
  345. <a href="/tagged/"><div class="tag">tag 02</div></a>
  346. <a href="/tagged/"><div class="tag">tag 03</div></a>
  347. </div>
  348.  
  349.  
  350. <div class="tagblock">
  351. <img class="tagpicture" src="http://media.tumblr.com/70ce4b838fbfa5fe270dd931e814606f/tumblr_inline_muxggnZB901rfdus5.jpg">
  352. <div class="tagheader">fandom #06</div>
  353. <a href="/tagged/"><div class="tag">tag 01</div></a>
  354. <a href="/tagged/"><div class="tag">tag 02</div></a>
  355. <a href="/tagged/"><div class="tag">tag 03</div></a>
  356. <a href="/tagged/"><div class="tag">tag 04</div></a>
  357. <a href="/tagged/"><div class="tag">tag 05</div></a>
  358. </div>
  359.  
  360.  
  361. <div class="tagblock">
  362. <img class="tagpicture" src="http://media.tumblr.com/c27bb8ee5c09f31a9ed4d2e5b3474878/tumblr_inline_muxjp8EbHU1rfdus5.jpg">
  363. <div class="tagheader">fandom #07</div>
  364. <a href="/tagged/"><div class="tag">tag 01</div></a>
  365. <a href="/tagged/"><div class="tag">tag 02</div></a>
  366. <a href="/tagged/"><div class="tag">tag 03</div></a>
  367. <a href="/tagged/"><div class="tag">tag 04</div></a>
  368. <a href="/tagged/"><div class="tag">tag 05</div></a>
  369. <a href="/tagged/"><div class="tag">tag 06</div></a>
  370. <a href="/tagged/"><div class="tag">tag 07</div></a>
  371. <a href="/tagged/"><div class="tag">tag 08</div></a>
  372. <a href="/tagged/"><div class="tag">tag 09</div></a>
  373. <a href="/tagged/"><div class="tag">tag 10</div></a>
  374. </div>
  375.  
  376.  
  377. <div class="tagblock">
  378. <img class="tagpicture" src="http://media.tumblr.com/6cd66b3eb613bcc129fe90fac4921f27/tumblr_inline_muxk93Bb5O1rfdus5.jpg">
  379. <div class="tagheader">fandom #08</div>
  380. <a href="/tagged/"><div class="tag">tag 01</div></a>
  381. <a href="/tagged/"><div class="tag">tag 02</div></a>
  382. <a href="/tagged/"><div class="tag">tag 03</div></a>
  383. <a href="/tagged/"><div class="tag">tag 04</div></a>
  384. <a href="/tagged/"><div class="tag">tag 05</div></a>
  385. <a href="/tagged/"><div class="tag">tag 06</div></a>
  386. <a href="/tagged/"><div class="tag">tag 07</div></a>
  387. </div>
  388.  
  389.  
  390. <div class="tagblock">
  391. <img class="tagpicture" src="http://media.tumblr.com/1505b7a73a1b4cb61e40ea358d969cb4/tumblr_inline_muxkavAzbJ1rfdus5.jpg">
  392. <div class="tagheader">fandom #09</div>
  393. <a href="/tagged/"><div class="tag">tag 01</div></a>
  394. <a href="/tagged/"><div class="tag">tag 02</div></a>
  395. <a href="/tagged/"><div class="tag">tag 03</div></a>
  396. <a href="/tagged/"><div class="tag">tag 04</div></a>
  397. <a href="/tagged/"><div class="tag">tag 05</div></a>
  398. <a href="/tagged/"><div class="tag">tag 06</div></a>
  399. <a href="/tagged/"><div class="tag">tag 07</div></a>
  400. <a href="/tagged/"><div class="tag">tag 08</div></a>
  401. <a href="/tagged/"><div class="tag">tag 09</div></a>
  402. </div>
  403.  
  404.  
  405. </div><!--content-->
  406.  
  407. </body>
  408. </html>
  409.  
  410. </body>
  411. </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!