API tools faq
paste
Advertisement
luciam

Tags page #4

luciam
May 14th, 2014
26,298
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.49 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------
  2. TAGS PAGE #04 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.  
  13. <html>
  14. <head>
  15. <title>Navigation</title><!---Change the browser title----->
  16.  
  17. <link rel="shortcut icon" href="{Favicon}" />
  18.  
  19.  
  20. <style type="text/css">
  21.  
  22.  
  23. ::-webkit-scrollbar-thumb:vertical {
  24. background-color: #666;/*Change the scrollbar color*/
  25. height:6px;
  26. }
  27. ::-webkit-scrollbar-corner {
  28. background-color: transparent;
  29. }
  30.  
  31. ::-webkit-scrollbar {
  32. margin-left: 5px;
  33. height:5px;
  34. width:5px;
  35. }
  36.  
  37.  
  38. body {
  39. background-color: #eee;/*Change the background color*/
  40. color: #999; /*Change the text color*/
  41. font-family: Calibri;
  42. font-size: 10px;
  43. letter-spacing: 0.1em;}
  44.  
  45.  
  46. .titulo {
  47. margin-bottom: 2px;
  48. padding: 5px 0px;
  49. width: 350px;
  50. height: 10px;
  51. font-family: Calibri;
  52. text-transform: uppercase;
  53. text-align:center;
  54. background-color: #fff;/*Change the title background color*/
  55. letter-spacing: 2px;
  56. color: #666; /*Change the title color*/
  57. font-size: 8px;
  58. }
  59.  
  60. .header img {
  61. width: 350px;
  62. height: 170px;
  63. }
  64.  
  65. .header {
  66. width: 330px;
  67. }
  68.  
  69. .header ul {
  70. margin-top: 5px;
  71. width: 360px;
  72. margin-left: -40px;
  73. font-family: consolas;
  74. list-style-type: none;
  75. }
  76.  
  77. .header ul li {
  78. width: 83px;
  79. display:inline-block;
  80. background-color: #fff; /*Change the main links background color*/
  81. text-align: center;
  82. }
  83.  
  84. .header ul li a {
  85. padding: 5px;
  86. letter-spacing: 2px;
  87. display: inline-block;
  88. color: #666; /*Change the main links color*/
  89. text-decoration: none;
  90. font-size: 8px;
  91. text-transform: uppercase;
  92. }
  93.  
  94. .header ul li:hover {
  95. border-left: solid 10px #666; /*Change the main links left border color*/
  96. width: 73px;
  97. color: #999; /*Change the main links color when hover*/
  98. }
  99.  
  100.  
  101. .all {
  102. margin: 50px auto;
  103. width: 330px;
  104. }
  105.  
  106. .enlaces {
  107. height: 100px;
  108. width: 200px;
  109. margin-left: 0px;
  110. margin-top: 15px;
  111. position: absolute;
  112. }
  113.  
  114.  
  115.  
  116. .link label{
  117. color: #999; /*Change the list titles color*/
  118. letter-spacing: 2px;
  119. font-size: 8px;
  120. line-height: 14px;
  121. font-weight: bold;
  122. background-color: #ffffff; /*Change the list titles background color*/
  123. width:162px;
  124. padding: 5px;
  125. text-transform: uppercase;
  126. height: 15px;
  127. text-align: center;
  128. cursor: pointer;
  129. display: block;
  130. margin-bottom: 10px;
  131. }
  132.  
  133. .link label:hover {
  134. border-left: solid 10px #666; /*Change the list titles left border color*/
  135. width: 152px;
  136. color: #666; /*Change the list titles color when hover*/
  137. }
  138.  
  139. [type=radio]:checked ~ label {
  140. z-index: 2;
  141. border-left: solid 10px #666;/*Change the list titles left border color when checked*/
  142. color: #666;/*Change the list titles color when checked*/
  143. width: 152px;
  144. }
  145.  
  146. .link [type=radio] {
  147. display: none;
  148. }
  149.  
  150. .contenido {
  151. color: #999;
  152. background-color: #ffffff;
  153. float:right;
  154. width: 150px;
  155. margin-top: -30px;
  156. margin-left: 239px;
  157. height: 320px;
  158. padding: 10px;
  159. overflow: scroll;
  160. text-align: justify;
  161. position: absolute;
  162. top:30px;
  163. left:-60px;
  164. }
  165.  
  166. .contenido a {
  167. color: #999; /*Change the links color*/
  168. padding: 3px;
  169. font-size: 8px;
  170. margin-bottom: 2px;
  171. display: block;
  172. text-decoration: none;
  173. text-transform: uppercase;
  174. }
  175.  
  176. .contenido a:hover {
  177. letter-spacing: 2px;
  178. border-bottom: solid 2px #666; /*Change the links bottom border color when hover*/
  179. text-align:center;
  180. color: #666; /*Change the links color when hover*/
  181. font-weight: bold;
  182. padding: 2px;
  183.  
  184. }
  185.  
  186.  
  187. [type=radio]:checked ~ label ~ .contenido {
  188. z-index: 1;
  189. }
  190. </style>
  191.  
  192. </head>
  193. <body>
  194. <div class="all">
  195. <div class="header">
  196. <img src="http://static.tumblr.com/d4tdea8/vu7n5lgwi/ec.jpg"><!--------Top image URL here. To get an URL you should previously upload the image on
  197. http://www.tumblr.com/themes/upload_static_file and then copy here the link it gives you, between the "". Make it 350x170px --------->
  198. <div class="titulo">Navigation</div><!---Change the title--->
  199. <ul>
  200. <li><a href="/">home</a></li>
  201. <li><a href="/ask">message</a></li>
  202. <li><a href="http://tumblr.com/dashboard">dashboard</a></li>
  203. <li><a href="http://robbarya.tumblr.com">credit</a></li>
  204. </ul>
  205. </div>
  206.  
  207.  
  208. <div class="enlaces">
  209.  
  210.  
  211. <div class="link">
  212. <input type="radio" id="tab-1" name="tab-group-1" checked>
  213. <label for="tab-1">LIST TITLE 1</label>
  214. <!----Change the list title!---->
  215.  
  216. <div class="contenido">
  217.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  223. <a href="/tagged/tag" target="_blank">LINK</a>
  224. <a href="/tagged/tag" target="_blank">LINK</a>
  225. <a href="/tagged/tag" target="_blank">LINK</a>
  226. <a href="/tagged/tag" target="_blank">LINK</a>
  227. <a href="/tagged/tag" target="_blank">LINK</a>
  228. <a href="/tagged/tag" target="_blank">LINK</a>
  229. <a href="/tagged/tag" target="_blank">LINK</a>
  230. <a href="/tagged/tag" target="_blank">LINK</a>
  231. <!----You can erase these or add more!---->
  232.  
  233. </div>
  234. </div>
  235.  
  236. <div class="link">
  237. <input type="radio" id="tab-2" name="tab-group-1">
  238. <label for="tab-2">LIST TITLE 2</label>
  239.  
  240. <div class="contenido">
  241.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  260. <a href="/tagged/tag" target="_blank">LINK</a>
  261. <a href="/tagged/tag" target="_blank">LINK</a>
  262. <a href="/tagged/tag" target="_blank">LINK</a>
  263. <a href="/tagged/tag" target="_blank">LINK</a>
  264. <a href="/tagged/tag" target="_blank">LINK</a>
  265. <a href="/tagged/tag" target="_blank">LINK</a>
  266. <a href="/tagged/tag" target="_blank">LINK</a>
  267. <a href="/tagged/tag" target="_blank">LINK</a>
  268.  
  269. </div>
  270. </div>
  271.  
  272. <div class="link">
  273. <input type="radio" id="tab-3" name="tab-group-1">
  274. <label for="tab-3">LIST TITLE 3</label>
  275.  
  276. <div class="contenido">
  277.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  283. <a href="/tagged/tag" target="_blank">LINK</a>
  284. <a href="/tagged/tag" target="_blank">LINK</a>
  285. <a href="/tagged/tag" target="_blank">LINK</a>
  286. <a href="/tagged/tag" target="_blank">LINK</a>
  287. <a href="/tagged/tag" target="_blank">LINK</a>
  288. <a href="/tagged/tag" target="_blank">LINK</a>
  289. <a href="/tagged/tag" target="_blank">LINK</a>
  290. <a href="/tagged/tag" target="_blank">LINK</a>
  291.  
  292. </div>
  293. </div>
  294.  
  295. <div class="link">
  296. <input type="radio" id="tab-4" name="tab-group-1">
  297. <label for="tab-4">LIST TITLE 4</label>
  298.  
  299. <div class="contenido">
  300.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  306. <a href="/tagged/tag" target="_blank">LINK</a>
  307. <a href="/tagged/tag" target="_blank">LINK</a>
  308. <a href="/tagged/tag" target="_blank">LINK</a>
  309. <a href="/tagged/tag" target="_blank">LINK</a>
  310. <a href="/tagged/tag" target="_blank">LINK</a>
  311. <a href="/tagged/tag" target="_blank">LINK</a>
  312. <a href="/tagged/tag" target="_blank">LINK</a>
  313. <a href="/tagged/tag" target="_blank">LINK</a>
  314.  
  315. </div>
  316. </div>
  317.  
  318. <div class="link">
  319. <input type="radio" id="tab-5" name="tab-group-1">
  320. <label for="tab-5">LIST TITLE 5</label>
  321.  
  322. <div class="contenido">
  323.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  329. <a href="/tagged/tag" target="_blank">LINK</a>
  330. <a href="/tagged/tag" target="_blank">LINK</a>
  331. <a href="/tagged/tag" target="_blank">LINK</a>
  332. <a href="/tagged/tag" target="_blank">LINK</a>
  333. <a href="/tagged/tag" target="_blank">LINK</a>
  334. <a href="/tagged/tag" target="_blank">LINK</a>
  335. <a href="/tagged/tag" target="_blank">LINK</a>
  336. <a href="/tagged/tag" target="_blank">LINK</a>
  337.  
  338. </div>
  339. </div>
  340.  
  341. <div class="link">
  342. <input type="radio" id="tab-6" name="tab-group-1">
  343. <label for="tab-6">LIST TITLE 6</label>
  344.  
  345. <div class="contenido">
  346.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  352. <a href="/tagged/tag" target="_blank">LINK</a>
  353. <a href="/tagged/tag" target="_blank">LINK</a>
  354. <a href="/tagged/tag" target="_blank">LINK</a>
  355. <a href="/tagged/tag" target="_blank">LINK</a>
  356. <a href="/tagged/tag" target="_blank">LINK</a>
  357. <a href="/tagged/tag" target="_blank">LINK</a>
  358. <a href="/tagged/tag" target="_blank">LINK</a>
  359. <a href="/tagged/tag" target="_blank">LINK</a>
  360.  
  361. </div>
  362. </div>
  363.  
  364.  
  365.  
  366.  
  367. <div class="link">
  368. <input type="radio" id="tab-7" name="tab-group-1">
  369. <label for="tab-7">LIST TITLE 7</label>
  370.  
  371. <div class="contenido">
  372.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  378. <a href="/tagged/tag" target="_blank">LINK</a>
  379. <a href="/tagged/tag" target="_blank">LINK</a>
  380. <a href="/tagged/tag" target="_blank">LINK</a>
  381. <a href="/tagged/tag" target="_blank">LINK</a>
  382. <a href="/tagged/tag" target="_blank">LINK</a>
  383. <a href="/tagged/tag" target="_blank">LINK</a>
  384. <a href="/tagged/tag" target="_blank">LINK</a>
  385. <a href="/tagged/tag" target="_blank">LINK</a>
  386.  
  387.  
  388. </div>
  389. </div>
  390.  
  391.  
  392. <div class="link">
  393. <input type="radio" id="tab-8" name="tab-group-1">
  394. <label for="tab-8">LIST TITLE 8</label>
  395.  
  396. <div class="contenido">
  397.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  403. <a href="/tagged/tag" target="_blank">LINK</a>
  404. <a href="/tagged/tag" target="_blank">LINK</a>
  405. <a href="/tagged/tag" target="_blank">LINK</a>
  406. <a href="/tagged/tag" target="_blank">LINK</a>
  407. <a href="/tagged/tag" target="_blank">LINK</a>
  408. <a href="/tagged/tag" target="_blank">LINK</a>
  409. <a href="/tagged/tag" target="_blank">LINK</a>
  410. <a href="/tagged/tag" target="_blank">LINK</a>
  411.  
  412. </div>
  413. </div>
  414.  
  415. <div class="link">
  416. <input type="radio" id="tab-9" name="tab-group-1">
  417. <label for="tab-9">LIST TITLE 9</label>
  418.  
  419. <div class="contenido">
  420.  
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  427. <a href="/tagged/tag" target="_blank">LINK</a>
  428. <a href="/tagged/tag" target="_blank">LINK</a>
  429. <a href="/tagged/tag" target="_blank">LINK</a>
  430. <a href="/tagged/tag" target="_blank">LINK</a>
  431. <a href="/tagged/tag" target="_blank">LINK</a>
  432. <a href="/tagged/tag" target="_blank">LINK</a>
  433. <a href="/tagged/tag" target="_blank">LINK</a>
  434.  
  435. </div>
  436. </div>
  437.  
  438. <!----If you want to add another list copy everything from here----->
  439. <div class="link">
  440. <input type="radio" id="tab-10" name="tab-group-1">
  441. <label for="tab-10">LIST TITLE 10</label>
  442.  
  443. <div class="contenido">
  444.  
  445. <a href="/tagged/tag" target="_blank">LINK</a>
  446. <a href="/tagged/tag" target="_blank">LINK</a>
  447. <a href="/tagged/tag" target="_blank">LINK</a>
  448. <a href="/tagged/tag" target="_blank">LINK</a>
  449. <a href="/tagged/tag" target="_blank">LINK</a>
  450. <a href="/tagged/tag" target="_blank">LINK</a>
  451. <a href="/tagged/tag" target="_blank">LINK</a>
  452. <a href="/tagged/tag" target="_blank">LINK</a>
  453. <a href="/tagged/tag" target="_blank">LINK</a>
  454. <a href="/tagged/tag" target="_blank">LINK</a>
  455. <a href="/tagged/tag" target="_blank">LINK</a>
  456. <a href="/tagged/tag" target="_blank">LINK</a>
  457. <a href="/tagged/tag" target="_blank">LINK</a>
  458.  
  459. </div>
  460. </div>
  461. <!------To here. Make sure you change the tabs numbers from 10 to 11. 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-------->
  462.  
  463.  
  464.  
  465. </div></div></div>
  466.  
  467.  
  468. </div>
  469. </body>
  470. </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!