API tools faq
paste
Advertisement
luciam

Tags page #3

luciam
Mar 18th, 2014
18,760
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.69 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------
  2. TAGS PAGE #03 BY: http://robbarya.tumblr.com (INSTRUCTIONS IN CODE)
  3. ...................................................
  4. ...................................................
  5.  
  6. TERMS OF USE:
  7. - DON'T CLAIM AS YOUR OWN
  8. - DON'T REMOVE OR MOVE THE CREDIT
  9. - DON'T REDISTRIBUTE
  10. - DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
  11. --------------------------------------------->
  12. <html>
  13. <head>
  14. <title>Navigation</title><!---Change the browser title----->
  15. <link rel="shortcut icon" href="{Favicon}" />
  16.  
  17.  
  18. <style type="text/css">
  19.  
  20.  
  21. ::-webkit-scrollbar-thumb:vertical {
  22. background-color: #ccc; /*Change the scrollbar color*/
  23. height:6px;
  24. }
  25. ::-webkit-scrollbar-corner {
  26. background-color: transparent;
  27. }
  28.  
  29. ::-webkit-scrollbar {
  30. margin-left: 5px;
  31. height:5px;
  32. width:5px;
  33. }
  34.  
  35.  
  36. body {background-color: #eee;/*Change the background color*/
  37. color: #999; /*Change the text color*/
  38. font-family: Calibri;
  39. font-size: 10px;
  40. letter-spacing: 0.1em;}
  41.  
  42.  
  43. .titulo {
  44. color: #d1d1d1;/*Change the title color*/
  45. z-index: 2;
  46. margin-top: 0px;
  47. padding: 10px;
  48. width: 430px;
  49. height: 16px;
  50. font-family: Century Gothic, calibri;
  51. font-size: 13px;
  52. margin-bottom: -30px;
  53. font-weight: bold;
  54. text-transform: uppercase;
  55. text-align:center;
  56. letter-spacing: 0.4em;
  57. }
  58.  
  59.  
  60. .imagen {
  61. height: 80px;
  62. width: 80px;
  63. border:solid 10px #ffffff;/*Change the image border color*/
  64. margin-top: 40px;
  65. }
  66.  
  67. .imagen:hover {
  68. border-color: #d8edfe;/*Change the image border hover color*/
  69. }
  70.  
  71. .all {
  72. margin:130px auto;
  73. width: 400px;
  74. }
  75.  
  76. .tagslinks {
  77. float:right;
  78. margin-top: -110px;
  79. margin-right: 190px;
  80. }
  81.  
  82. .tagslinks ul {list-style-type: none;}
  83. .tagslinks ul li a {
  84. line-height: 15px;
  85. letter-spacing: 0.2em;
  86. font-size: 8px;
  87. text-decoration:none;
  88. color: #ccc; /*Change the main links color*/
  89. background-color: #ffffff; /*Change the main links background color*/
  90. width:90px;
  91. padding: 5px;
  92. text-transform: uppercase;
  93. height: 15px;
  94. text-align: center;
  95. display: block;
  96. }
  97.  
  98.  
  99. .tagslinks ul li a:hover {
  100. background-color: #d8edfe; /*Change the main links background hover color*/
  101. text-align: right;
  102. color: #fff;/*Change the main links hover color*/
  103. }
  104.  
  105.  
  106. .enlaces {
  107. height: 100px;
  108. width: 200px;
  109. margin-left: 0px;
  110. margin-top: 10px;
  111. position: absolute;
  112. }
  113.  
  114.  
  115. .link label{
  116. color: #ccc; /*Change the list titles color*/
  117. background-color: #ffffff; /*Change the list titles background color*/
  118. width:200px;
  119. padding: 5px;
  120. text-transform: uppercase;
  121. height: 15px;
  122. text-align: center;
  123. cursor: pointer;
  124. display: block;
  125. }
  126.  
  127. .link label:hover {
  128. color: #fff; /*Change the list titles hover color*/
  129. background-color: #d8edfe;/*Change the list titles background hover color*/
  130. text-align: right;
  131. }
  132.  
  133.  
  134. .link a:hover
  135. {text-decoration:underline;}
  136.  
  137. .link [type=radio] {
  138. display: none;
  139. }
  140.  
  141. .contenido {
  142. background-color: #ffffff; /*Change the tags links background*/
  143. float:right;
  144. width: 200px;
  145. margin-top: -140px;
  146. margin-left: 280px;
  147. height: 305px;
  148. padding: 15px;
  149. overflow: scroll;
  150. text-align: justify;
  151. position: absolute;
  152. top:30px;
  153. left:-60px;
  154. }
  155.  
  156. .contenido a {
  157. color: #ccc; /*Change the tags links color*/
  158. transition: none;
  159. display: block;
  160. text-decoration: none;
  161. text-transform: lowercase;
  162. letter-spacing: 0.2em;
  163. }
  164.  
  165. .contenido a:hover {
  166. color: #ccc; /*Change the tags links hover color*/
  167. }
  168.  
  169.  
  170. [type=radio]:checked ~ label {
  171. z-index: 2;
  172. color: #fff; /*Change the checked list title color*/
  173. background-color: #d8edfe; /*Change the checked list title background color*/
  174. text-align: right;
  175. text-decoration: none!important;
  176. }
  177.  
  178. [type=radio]:checked ~ label ~ .contenido {
  179. z-index: 1;
  180. }
  181. </style>
  182.  
  183. </head>
  184. <body>
  185. <div class="all">
  186. <div class="titulo">Navigation</div>
  187. <a href="/"><img src= "http://static.tumblr.com/d4tdea8/VuPn1our9/chloe_moretz_marie_claire_photoshoot_clean_01__1__copia.jpg" class="imagen"></a><!--------Top image URL here. To get an URL you should previously upload the image on
  188. http://www.tumblr.com/themes/upload_static_file and then copy here the link it gives you, between the "". Make it 80x80px --------->
  189.  
  190. <div class="tagslinks">
  191. <ul>
  192. <li><a href="/">home</a></li>
  193. <li><a href="/ask">message</a></li>
  194. <li><a href="http://tumblr.com/dashboard">dashboard</a></li>
  195. <li><a href="http://robbarya.tumblr.com">credit</a></li>
  196. </ul>
  197. </div>
  198.  
  199. <div class="enlaces">
  200.  
  201.  
  202. <div class="link">
  203. <input type="radio" id="tab-1" name="tab-group-1" checked>
  204. <label for="tab-1">LIST TITLE 1</label>
  205. <!----Change the list title!---->
  206.  
  207. <div class="contenido">
  208.  
  209. <a href="/tagged/tag" target="_blank">LINK</a>
  210. <a href="/tagged/tag" target="_blank">LINK</a>
  211. <a href="/tagged/tag" target="_blank">LINK</a>
  212. <a href="/tagged/tag" target="_blank">LINK</a>
  213. <a href="/tagged/tag" target="_blank">LINK</a>
  214. <a href="/tagged/tag" target="_blank">LINK</a>
  215. <a href="/tagged/tag" target="_blank">LINK</a>
  216. <a href="/tagged/tag" target="_blank">LINK</a>
  217. <a href="/tagged/tag" target="_blank">LINK</a>
  218. <a href="/tagged/tag" target="_blank">LINK</a>
  219. <a href="/tagged/tag" target="_blank">LINK</a>
  220. <a href="/tagged/tag" target="_blank">LINK</a>
  221. <a href="/tagged/tag" target="_blank">LINK</a>
  222. <!----You can erase these or add more!---->
  223.  
  224. </div>
  225. </div>
  226.  
  227. <div class="link">
  228. <input type="radio" id="tab-2" name="tab-group-1">
  229. <label for="tab-2">LIST TITLE 2</label>
  230.  
  231. <div class="contenido">
  232.  
  233. <a href="/tagged/tag" target="_blank">LINK</a>
  234. <a href="/tagged/tag" target="_blank">LINK</a>
  235. <a href="/tagged/tag" target="_blank">LINK</a>
  236. <a href="/tagged/tag" target="_blank">LINK</a>
  237. <a href="/tagged/tag" target="_blank">LINK</a>
  238. <a href="/tagged/tag" target="_blank">LINK</a>
  239. <a href="/tagged/tag" target="_blank">LINK</a>
  240. <a href="/tagged/tag" target="_blank">LINK</a>
  241. <a href="/tagged/tag" target="_blank">LINK</a>
  242. <a href="/tagged/tag" target="_blank">LINK</a>
  243. <a href="/tagged/tag" target="_blank">LINK</a>
  244. <a href="/tagged/tag" target="_blank">LINK</a>
  245. <a href="/tagged/tag" target="_blank">LINK</a>
  246. <a href="/tagged/tag" target="_blank">LINK</a>
  247. <a href="/tagged/tag" target="_blank">LINK</a>
  248. <a href="/tagged/tag" target="_blank">LINK</a>
  249. <a href="/tagged/tag" target="_blank">LINK</a>
  250. <a href="/tagged/tag" target="_blank">LINK</a>
  251. <a href="/tagged/tag" target="_blank">LINK</a>
  252. <a href="/tagged/tag" target="_blank">LINK</a>
  253. <a href="/tagged/tag" target="_blank">LINK</a>
  254. <a href="/tagged/tag" target="_blank">LINK</a>
  255. <a href="/tagged/tag" target="_blank">LINK</a>
  256. <a href="/tagged/tag" target="_blank">LINK</a>
  257. <a href="/tagged/tag" target="_blank">LINK</a>
  258. <a href="/tagged/tag" target="_blank">LINK</a>
  259.  
  260. </div>
  261. </div>
  262.  
  263. <div class="link">
  264. <input type="radio" id="tab-3" name="tab-group-1">
  265. <label for="tab-3">LIST TITLE 3</label>
  266.  
  267. <div class="contenido">
  268.  
  269. <a href="/tagged/tag" target="_blank">LINK</a>
  270. <a href="/tagged/tag" target="_blank">LINK</a>
  271. <a href="/tagged/tag" target="_blank">LINK</a>
  272. <a href="/tagged/tag" target="_blank">LINK</a>
  273. <a href="/tagged/tag" target="_blank">LINK</a>
  274. <a href="/tagged/tag" target="_blank">LINK</a>
  275. <a href="/tagged/tag" target="_blank">LINK</a>
  276. <a href="/tagged/tag" target="_blank">LINK</a>
  277. <a href="/tagged/tag" target="_blank">LINK</a>
  278. <a href="/tagged/tag" target="_blank">LINK</a>
  279. <a href="/tagged/tag" target="_blank">LINK</a>
  280. <a href="/tagged/tag" target="_blank">LINK</a>
  281. <a href="/tagged/tag" target="_blank">LINK</a>
  282.  
  283. </div>
  284. </div>
  285.  
  286. <div class="link">
  287. <input type="radio" id="tab-4" name="tab-group-1">
  288. <label for="tab-4">LIST TITLE 4</label>
  289.  
  290. <div class="contenido">
  291.  
  292. <a href="/tagged/tag" target="_blank">LINK</a>
  293. <a href="/tagged/tag" target="_blank">LINK</a>
  294. <a href="/tagged/tag" target="_blank">LINK</a>
  295. <a href="/tagged/tag" target="_blank">LINK</a>
  296. <a href="/tagged/tag" target="_blank">LINK</a>
  297. <a href="/tagged/tag" target="_blank">LINK</a>
  298. <a href="/tagged/tag" target="_blank">LINK</a>
  299. <a href="/tagged/tag" target="_blank">LINK</a>
  300. <a href="/tagged/tag" target="_blank">LINK</a>
  301. <a href="/tagged/tag" target="_blank">LINK</a>
  302. <a href="/tagged/tag" target="_blank">LINK</a>
  303. <a href="/tagged/tag" target="_blank">LINK</a>
  304. <a href="/tagged/tag" target="_blank">LINK</a>
  305.  
  306. </div>
  307. </div>
  308.  
  309. <div class="link">
  310. <input type="radio" id="tab-5" name="tab-group-1">
  311. <label for="tab-5">LIST TITLE 5</label>
  312.  
  313. <div class="contenido">
  314.  
  315. <a href="/tagged/tag" target="_blank">LINK</a>
  316. <a href="/tagged/tag" target="_blank">LINK</a>
  317. <a href="/tagged/tag" target="_blank">LINK</a>
  318. <a href="/tagged/tag" target="_blank">LINK</a>
  319. <a href="/tagged/tag" target="_blank">LINK</a>
  320. <a href="/tagged/tag" target="_blank">LINK</a>
  321. <a href="/tagged/tag" target="_blank">LINK</a>
  322. <a href="/tagged/tag" target="_blank">LINK</a>
  323. <a href="/tagged/tag" target="_blank">LINK</a>
  324. <a href="/tagged/tag" target="_blank">LINK</a>
  325. <a href="/tagged/tag" target="_blank">LINK</a>
  326. <a href="/tagged/tag" target="_blank">LINK</a>
  327. <a href="/tagged/tag" target="_blank">LINK</a>
  328.  
  329. </div>
  330. </div>
  331.  
  332. <div class="link">
  333. <input type="radio" id="tab-6" name="tab-group-1">
  334. <label for="tab-6">LIST TITLE 6</label>
  335.  
  336. <div class="contenido">
  337.  
  338. <a href="/tagged/tag" target="_blank">LINK</a>
  339. <a href="/tagged/tag" target="_blank">LINK</a>
  340. <a href="/tagged/tag" target="_blank">LINK</a>
  341. <a href="/tagged/tag" target="_blank">LINK</a>
  342. <a href="/tagged/tag" target="_blank">LINK</a>
  343. <a href="/tagged/tag" target="_blank">LINK</a>
  344. <a href="/tagged/tag" target="_blank">LINK</a>
  345. <a href="/tagged/tag" target="_blank">LINK</a>
  346. <a href="/tagged/tag" target="_blank">LINK</a>
  347. <a href="/tagged/tag" target="_blank">LINK</a>
  348. <a href="/tagged/tag" target="_blank">LINK</a>
  349. <a href="/tagged/tag" target="_blank">LINK</a>
  350. <a href="/tagged/tag" target="_blank">LINK</a>
  351.  
  352. </div>
  353. </div>
  354.  
  355.  
  356.  
  357.  
  358. <div class="link">
  359. <input type="radio" id="tab-7" name="tab-group-1">
  360. <label for="tab-7">LIST TITLE 7</label>
  361.  
  362. <div class="contenido">
  363.  
  364. <a href="/tagged/tag" target="_blank">LINK</a>
  365. <a href="/tagged/tag" target="_blank">LINK</a>
  366. <a href="/tagged/tag" target="_blank">LINK</a>
  367. <a href="/tagged/tag" target="_blank">LINK</a>
  368. <a href="/tagged/tag" target="_blank">LINK</a>
  369. <a href="/tagged/tag" target="_blank">LINK</a>
  370. <a href="/tagged/tag" target="_blank">LINK</a>
  371. <a href="/tagged/tag" target="_blank">LINK</a>
  372. <a href="/tagged/tag" target="_blank">LINK</a>
  373. <a href="/tagged/tag" target="_blank">LINK</a>
  374. <a href="/tagged/tag" target="_blank">LINK</a>
  375. <a href="/tagged/tag" target="_blank">LINK</a>
  376. <a href="/tagged/tag" target="_blank">LINK</a>
  377.  
  378.  
  379. </div>
  380. </div>
  381.  
  382.  
  383. <div class="link">
  384. <input type="radio" id="tab-8" name="tab-group-1">
  385. <label for="tab-8">LIST TITLE 8</label>
  386.  
  387. <div class="contenido">
  388.  
  389. <a href="/tagged/tag" target="_blank">LINK</a>
  390. <a href="/tagged/tag" target="_blank">LINK</a>
  391. <a href="/tagged/tag" target="_blank">LINK</a>
  392. <a href="/tagged/tag" target="_blank">LINK</a>
  393. <a href="/tagged/tag" target="_blank">LINK</a>
  394. <a href="/tagged/tag" target="_blank">LINK</a>
  395. <a href="/tagged/tag" target="_blank">LINK</a>
  396. <a href="/tagged/tag" target="_blank">LINK</a>
  397. <a href="/tagged/tag" target="_blank">LINK</a>
  398. <a href="/tagged/tag" target="_blank">LINK</a>
  399. <a href="/tagged/tag" target="_blank">LINK</a>
  400. <a href="/tagged/tag" target="_blank">LINK</a>
  401. <a href="/tagged/tag" target="_blank">LINK</a>
  402.  
  403. </div>
  404. </div>
  405.  
  406. <!----If you want to add another list copy everything from here----->
  407. <div class="link">
  408. <input type="radio" id="tab-9" name="tab-group-1">
  409. <label for="tab-9">LIST TITLE 9</label>
  410.  
  411. <div class="contenido">
  412.  
  413. <a href="/tagged/tag" target="_blank">LINK</a>
  414. <a href="/tagged/tag" target="_blank">LINK</a>
  415. <a href="/tagged/tag" target="_blank">LINK</a>
  416. <a href="/tagged/tag" target="_blank">LINK</a>
  417. <a href="/tagged/tag" target="_blank">LINK</a>
  418. <a href="/tagged/tag" target="_blank">LINK</a>
  419. <a href="/tagged/tag" target="_blank">LINK</a>
  420. <a href="/tagged/tag" target="_blank">LINK</a>
  421. <a href="/tagged/tag" target="_blank">LINK</a>
  422. <a href="/tagged/tag" target="_blank">LINK</a>
  423. <a href="/tagged/tag" target="_blank">LINK</a>
  424. <a href="/tagged/tag" target="_blank">LINK</a>
  425. <a href="/tagged/tag" target="_blank">LINK</a>
  426.  
  427. </div>
  428. </div>
  429. <!------To here. Make sure you change the tabs numbers from 9 to 10. Keep the tab-group-1 (it's the only one you shouldn't change). Always increase the number if you want to add more lists-------->
  430.  
  431.  
  432.  
  433. </div>
  434. </body>
  435. </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!