API tools faq
paste
elevensaves

TAGS PAGE 01

elevensaves
Oct 22nd, 2014
1,890
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.06 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. <html>
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <head>
  7.  
  8. <title>tags page 01</title> <!-----CHANGE THE TITLE ON THE TAB HERE----->
  9.  
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12.  
  13. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic' rel='stylesheet' type='text/css'>
  14.  
  15. <style type="text/css">
  16.  
  17. ::-webkit-scrollbar-thumb {
  18. background-color: #ccddbb; /*CHANGE THE SCROLLBAR COLOUR*/
  19. height:auto;
  20. border-bottom:none;}
  21.  
  22. ::-webkit-scrollbar {
  23. height:9px;
  24. width:5px;
  25. background-color: #ccddbb; /*CHANGE THE SCROLLBAR COLOUR*/
  26. border: 2px solid #fcfcfc;}
  27.  
  28. ::selection {
  29. background-color: #ccddbb;/*CHANGE SELECTION BACKGROUND COLOUR (CLICK AND DRAG TO SEE IT)*/
  30. color: #fcfcfc;}
  31.  
  32. body {
  33. background-color: #fcfcfc; /*CHANGE BACKGROUND COLOUR*/}
  34.  
  35.  
  36. a {
  37. text-decoration: none;
  38. -webkit-transition: 0.5s;
  39. -moz-transition: 0.5s;
  40. transition: 0.5s;
  41. color: #000; /*CHANGE LINK COLOUR*/}
  42.  
  43. a: hover {
  44. text-decoration: none;
  45. -webkit-transition: 0.5s;
  46. -moz-transition: 0.5s;
  47. transition: 0.5s;
  48. color: white;}
  49.  
  50. /*SIDEBAR*/
  51.  
  52. .cont {
  53. position:fixed;
  54. height:120%;
  55. width:400px;
  56. margin-top:-20px;
  57. background:#eee; /*CHANGE SIDEBAR BACKGROUND COLOUR*/
  58. border-right:1px solid #ddd;}
  59.  
  60. #sidebar {
  61. position:fixed;
  62. margin-top:180px;
  63. margin-left:130px;}
  64. #sidebarimage {
  65. width 100px;}
  66. #sidebarimage img {
  67. width:100px;
  68. border:6px double #fff;/*CHANGE SIDEBAR IMAGE BORDER COLOUR, IF YOU DO NOT WANT THE BORDER, SIMPLY PUT "NONE" (NOT RECOMMENDED)*/}
  69. #sidebarimage img:hover {
  70. -moz-filter:grayscale(1);/*DELETE IF YOU DO NOT WANT THE SIDEBAR HOVER EFFECT, TO SATURATE, DECREASE NUMBER IN 0.1 STEPS*/
  71. -webkit-filter:grayscale(1);/*SAME AS ABOVE HERE*/
  72. -moz-transition-duration:0.5s;
  73. -webkit-transition-duration:0.5s;
  74. -o-transition-duration:0.5s;}
  75.  
  76. #text {
  77. width:106px;
  78. font-size:10px;
  79. font-family:calibri;/*CHANGE DESCRIPTION TEXT FONT*/
  80. text-align:justify;
  81. padding:3px;
  82. margin-top:5px;
  83. background:#fff;/*CHANGE DESCRIPTION BACKGROUND COLOUR*/
  84. }
  85.  
  86. .links {
  87. display:block;
  88. padding:5px;
  89. background:transparent;
  90. margin-top:210px;
  91. margin-left:387px;}
  92. .links a {
  93. display:block;
  94. border:1px solid #ddd;
  95. padding:7px 7px 7px 7px;
  96. border-radius:50%;
  97. background:#ccddbb;/*CHANGE SIDEBAR LINKS COLOUR*/
  98. margin-bottom:20px;
  99. -moz-transition-duration:0.6s;
  100. -webkit-transition-duration:0.6s;
  101. -o-transition-duration:0.6s;}
  102. .links a:hover {
  103. background:#fff;/*CHANGE SIDEBAR LINKS HOVER COLOUR*/
  104. -moz-transition-duration:0.6s;
  105. -webkit-transition-duration:0.6s;
  106. -o-transition-duration:0.6s;}
  107.  
  108. /*THIS IS THE CODING FOR ALL COLUMNS*/
  109.  
  110. #columnsi {
  111. width: 150px;
  112. height: 200px;
  113. margin-top: 110px;
  114. position: fixed;
  115. overflow-y: scroll;}
  116. #columnsii {
  117. width:150px;
  118. height:200px;
  119. margin-top:380px;
  120. position:fixed;
  121. overflow-y:scroll;}
  122.  
  123. #columni {margin-left: 500px;}
  124. #columnii {margin-left: 700px;}
  125. #columniii {margin-left: 900px;}
  126. #columniv {margin-left:1100px;}
  127.  
  128. /*THIS IS THE CODING FOR THE NAVIGATION LINKS*/
  129.  
  130. .linkage {
  131. width:100%;
  132. height:18px;
  133. font-family:calibri;/*CHANGE LINKS FONT*/}
  134. .linkage a {
  135. padding:4px 0px 4px 0px;
  136. background:#eee;/*CHANGE BACKGROUND COLOUR LINKS*/
  137. display:block;
  138. font-size:11px;/*CHANGE FONT COLOUR LINKS*/
  139. text-align:center;/*CHANGE TEXT ALIGN LINKS, OPTIONS: LEFT, CENTER, RIGHT*/
  140. letter-spacing:1px;
  141. text-transform:uppercase;/*OR LOWERCASE*/
  142. margin-top:5px;
  143. -webkit-transition: all 0.4s;
  144. -moz-transition: all 0.4s;
  145. -o-transition: all 0.4s;
  146. -ms-transition: all 0.4s;
  147. transition: all 0.4s;}
  148. .linkage a:hover {
  149. border:1px solid #eee;/*CHANGE BORDER COLOUR ON HOVER*/
  150. background:#fff;/*CHANGE BACKGROUND COLOUR ON HOVER*/
  151. }
  152. /*THIS IS THE CODING FOR THE COLUMN TITLES*/
  153.  
  154. .titles {
  155. font-family:'playfair display'; /*CHANGE TITLE FONT*/
  156. color: #444444; /*CHANGE TITLE COLOUR*/
  157. width:150px;
  158. font-size: 25px; /*CHANGE TITLE FONT SIZE*/
  159. font-style:italic;
  160. position: fixed;
  161. letter-spacing:-2px;
  162. margin-top:-40px;
  163. text-align:center;}
  164.  
  165. #s-m-t-tooltip {
  166. max-width:300px;
  167. padding:3px 4px;
  168. margin:20px 0px 0px 20px;
  169. background-color:#444;/*CHANGE HOVER TEXT BACKGROUND COLOUR*/
  170. color:#fff;
  171. font-family:calibri;
  172. font-size:8px;
  173. letter-spacing:1px;
  174. text-transform:uppercase;
  175. z-index:999999999999;}
  176.  
  177. /*DO NOT TOUCH THE FOLLOWING PART PLEASE*/
  178.  
  179. .cred, .cred a {
  180. width:auto;
  181. height:auto;
  182. bottom:15px;
  183. right:15px;
  184. padding:4px;
  185. z-index:1000000;
  186. font-size:8px;
  187. letter-spacing:1px;
  188. color:#444;
  189. position:fixed;
  190. text-align:center;
  191. font-family:trebuchet ms;
  192. text-transform:uppercase;
  193. background-color:white;}
  194. .cred a:hover {
  195. color:white;
  196. border-radius:100%;
  197. background-color:#444;}
  198.  
  199.  
  200. </style>
  201. </head>
  202. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  203. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  204. <script>
  205. (function($){
  206. $(document).ready(function(){
  207. $("a[title]").style_my_tooltips({
  208. tip_follows_cursor:true,
  209. tip_delay_time:90,
  210. tip_fade_speed:600,
  211. attribute:"title"
  212. });
  213. });
  214. })(jQuery);
  215. </script>
  216. <body>
  217.  
  218. <div class="cont">
  219. <div class="links">
  220. <a href="/" title="link 1"></a><!--THESE ARE YOUR SIDEBAR LINKS-->
  221. <a href="/" title="link 2"></a>
  222. <a href="/" title="link 3"></a>
  223. <a href="/" title="link 4"></a>
  224. <a href="/" title="link 5"></a>
  225. </div>
  226. </div>
  227.  
  228. <div id="sidebar">
  229. <div id="sidebarimage">
  230. <img src="http://31.media.tumblr.com/tumblr_mbj052vTda1qzipobo1_500.jpg"><!--CHANGE THE SIDEBAR IMAGE, REPLACE THE LINK WITH THE LINK TO YOUR IMAGE, LOOKS BEST IF IT'S SQUARE!!-->
  231. <div id="text">
  232. you can put a message here, in case you need to clarify something about your tagging system, or just a cute poem about plants. can be any length.
  233. </div>
  234. </div>
  235. </div>
  236.  
  237.  
  238. <!--FIRST COLUMN STARTS-->
  239.  
  240. <div id="columni">
  241. <div id="columnsi">
  242. <div class="titles">title one</div> <!--INSERT THE COLUMN TITLE WHERE IT SAYS "TITLE ONE/TWO/THREE ETC"--->
  243. <div class="linkage">
  244.  
  245. <a href="/tagged/">link</a>
  246.  
  247. <a href="/tagged/">link</a>
  248.  
  249. <a href="/tagged/">link</a>
  250.  
  251. <a href="/tagged/">link</a>
  252.  
  253. <a href="/tagged/">link</a>
  254.  
  255. <a href="/tagged/">link</a>
  256.  
  257. <a href="/tagged/">link</a>
  258.  
  259. <a href="/tagged/">link</a>
  260.  
  261. <a href="/tagged/">link</a>
  262.  
  263. <a href="/tagged/">link</a>
  264.  
  265. <a href="/tagged/">link</a>
  266.  
  267. <a href="/tagged/">link</a>
  268.  
  269.  
  270. </div>
  271.  
  272. <!--IF YOU DO NOT NEED AS MANY LINKS YOU CAN SIMPLY DELETE THE ONES THAT GO UNUSED (AT A CERTAIN POINT THE SCROLLBAR WILL DISAPPEAR), IF YOU NEED MORE COPY AND PASTE THE FOLLOWING CODE AND ADD ON
  273.  
  274. <a href="/tagged/">link</a>
  275.  
  276.  
  277. --->
  278.  
  279. </div>
  280. </div>
  281.  
  282. <!--FIRST COLUMN ENDS-->
  283.  
  284.  
  285. <!--SECOND COLUMN STARTS-->
  286.  
  287. <div id="columnii">
  288. <div id="columnsi">
  289.  
  290. <div class="titles">title two</div>
  291.  
  292. <div class="linkage">
  293.  
  294. <a href="/tagged/">link</a>
  295.  
  296. <a href="/tagged/">link</a>
  297.  
  298. <a href="/tagged/">link</a>
  299.  
  300. <a href="/tagged/">link</a>
  301.  
  302. <a href="/tagged/">link</a>
  303.  
  304. <a href="/tagged/">link</a>
  305.  
  306. <a href="/tagged/">link</a>
  307.  
  308. <a href="/tagged/">link</a>
  309.  
  310. <a href="/tagged/">link</a>
  311.  
  312. <a href="/tagged/">link</a>
  313.  
  314. <a href="/tagged/">link</a>
  315.  
  316. <a href="/tagged/">link</a>
  317.  
  318.  
  319. </div>
  320.  
  321. </div>
  322. </div>
  323.  
  324. <!--SECOND COLUMN ENDS-->
  325.  
  326.  
  327. <!--THIRD COLUMN STARTS-->
  328.  
  329. <div id="columniii">
  330. <div id="columnsi">
  331.  
  332. <div class="titles">title three</div>
  333.  
  334. <div class="linkage">
  335.  
  336. <a href="/tagged/">link</a>
  337.  
  338. <a href="/tagged/">link</a>
  339.  
  340. <a href="/tagged/">link</a>
  341.  
  342. <a href="/tagged/">link</a>
  343.  
  344. <a href="/tagged/">link</a>
  345.  
  346. <a href="/tagged/">link</a>
  347.  
  348. <a href="/tagged/">link</a>
  349.  
  350. <a href="/tagged/">link</a>
  351.  
  352. <a href="/tagged/">link</a>
  353.  
  354. <a href="/tagged/">link</a>
  355.  
  356. <a href="/tagged/">link</a>
  357.  
  358. <a href="/tagged/">link</a>
  359.  
  360.  
  361. </div>
  362.  
  363. </div>
  364. </div>
  365.  
  366. <!--THIRD COLUMN ENDS-->
  367.  
  368. <!--FOURTH COLUMN STARTS-->
  369.  
  370. <div id="columniv">
  371. <div id="columnsi">
  372. <div class="titles">title four</div>
  373.  
  374. <div class="linkage">
  375.  
  376. <a href="/tagged/">link</a>
  377.  
  378. <a href="/tagged/">link</a>
  379.  
  380. <a href="/tagged/">link</a>
  381.  
  382. <a href="/tagged/">link</a>
  383.  
  384. <a href="/tagged/">link</a>
  385.  
  386. <a href="/tagged/">link</a>
  387.  
  388. <a href="/tagged/">link</a>
  389.  
  390. <a href="/tagged/">link</a>
  391.  
  392. <a href="/tagged/">link</a>
  393.  
  394. <a href="/tagged/">link</a>
  395.  
  396. <a href="/tagged/">link</a>
  397.  
  398. <a href="/tagged/">link</a>
  399.  
  400.  
  401. </div>
  402.  
  403. </div>
  404. </div>
  405.  
  406. <!--FOURTH COLUMN ENDS-->
  407.  
  408. <!--FIFTH COLUMN STARTS-->
  409.  
  410. <div id="columni">
  411. <div id="columnsii">
  412. <div class="titles">title five</div>
  413.  
  414. <div class="linkage">
  415.  
  416. <a href="/tagged/">link</a>
  417.  
  418. <a href="/tagged/">link</a>
  419.  
  420. <a href="/tagged/">link</a>
  421.  
  422. <a href="/tagged/">link</a>
  423.  
  424. <a href="/tagged/">link</a>
  425.  
  426. <a href="/tagged/">link</a>
  427.  
  428. <a href="/tagged/">link</a>
  429.  
  430. <a href="/tagged/">link</a>
  431.  
  432. <a href="/tagged/">link</a>
  433.  
  434. <a href="/tagged/">link</a>
  435.  
  436. <a href="/tagged/">link</a>
  437.  
  438. <a href="/tagged/">link</a>
  439.  
  440.  
  441. </div>
  442.  
  443. </div>
  444. </div>
  445.  
  446. <!---FIFTH COLUMN ENDS-->
  447.  
  448. <!---SIXTH COLUMN STARTS--->
  449.  
  450. <div id="columnii">
  451. <div id="columnsii">
  452. <div class="titles">title six</div>
  453.  
  454. <div class="linkage">
  455.  
  456. <a href="/tagged/">link</a>
  457.  
  458. <a href="/tagged/">link</a>
  459.  
  460. <a href="/tagged/">link</a>
  461.  
  462. <a href="/tagged/">link</a>
  463.  
  464. <a href="/tagged/">link</a>
  465.  
  466. <a href="/tagged/">link</a>
  467.  
  468. <a href="/tagged/">link</a>
  469.  
  470. <a href="/tagged/">link</a>
  471.  
  472. <a href="/tagged/">link</a>
  473.  
  474. <a href="/tagged/">link</a>
  475.  
  476. <a href="/tagged/">link</a>
  477.  
  478. <a href="/tagged/">link</a>
  479.  
  480.  
  481. </div>
  482.  
  483. </div>
  484. </div>
  485.  
  486. <!--SIXTH COLUMN ENDS-->
  487.  
  488. <!--SEVENTH COLUMN STARTS-->
  489.  
  490. <div id="columniii">
  491. <div id="columnsii">
  492. <div class="titles">title seven</div>
  493.  
  494. <div class="linkage">
  495.  
  496. <a href="/tagged/">link</a>
  497.  
  498. <a href="/tagged/">link</a>
  499.  
  500. <a href="/tagged/">link</a>
  501.  
  502. <a href="/tagged/">link</a>
  503.  
  504. <a href="/tagged/">link</a>
  505.  
  506. <a href="/tagged/">link</a>
  507.  
  508. <a href="/tagged/">link</a>
  509.  
  510. <a href="/tagged/">link</a>
  511.  
  512. <a href="/tagged/">link</a>
  513.  
  514. <a href="/tagged/">link</a>
  515.  
  516. <a href="/tagged/">link</a>
  517.  
  518. <a href="/tagged/">link</a>
  519.  
  520.  
  521. </div>
  522.  
  523. </div>
  524. </div>
  525.  
  526. <!--SEVENTH COLUMN ENDS-->
  527.  
  528. <!--EIGHTH COLUMN STARTS-->
  529.  
  530. <div id="columniv">
  531. <div id="columnsii">
  532. <div class="titles">title eight</div>
  533.  
  534. <div class="linkage">
  535.  
  536. <a href="/tagged/">link</a>
  537.  
  538. <a href="/tagged/">link</a>
  539.  
  540. <a href="/tagged/">link</a>
  541.  
  542. <a href="/tagged/">link</a>
  543.  
  544. <a href="/tagged/">link</a>
  545.  
  546. <a href="/tagged/">link</a>
  547.  
  548. <a href="/tagged/">link</a>
  549.  
  550. <a href="/tagged/">link</a>
  551.  
  552. <a href="/tagged/">link</a>
  553.  
  554. <a href="/tagged/">link</a>
  555.  
  556. <a href="/tagged/">link</a>
  557.  
  558. <a href="/tagged/">link</a>
  559.  
  560.  
  561. </div>
  562.  
  563. </div>
  564. </div>
  565.  
  566. <!--EIGHTH COLUMN ENDS-->
  567.  
  568. <!--DO NOT TOUCH THE FOLLOWING PART PLEASE-->
  569.  
  570. <div class="cred"><a href="http://andysamberg.tk/" title="theme by julie">JT</a></div>
  571. </body>
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!