API tools faq
paste
Advertisement
spaqhetti-tacos

Links layout 2 by spaqhetti-tacos

spaqhetti-tacos
Jul 23rd, 2013
699
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Layout for link page by spaqhetti-tacos, keep the credit please i worked hard on this!
  3.  
  4. HOW TO INSTALL:
  5. 1. go to your customize page and scroll all the way down.
  6. 2. you'll see "pages" and click it then click add a page.
  7. 3. then where it says "standard" click on the little arrow next to it and choose "custom".
  8. 4. after that, write down the url you want the page to have for ex: http://yourusername.tumblr.com/links
  9. 5. now paste the html code for the layout which is found right here so copy this code ya and paste there.
  10. 6. now go through this code and fix stuff like html colors background pictures! google html color codes to find them!
  11. 7. create page > save > save > and you're done enjoy!
  12. -->
  13.  
  14. <html>
  15. <head>
  16.  
  17. <script type="text/javascript"
  18. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  19. <script>
  20. $(document).ready(function() {
  21. //
  22. $('a.poplight[href^=#]').click(function() {
  23. var popID = $(this).attr('rel'); //Get Popup Name
  24. var popURL = $(this).attr('href'); //Get Popup href to define size
  25. var query= popURL.split('?');
  26. var dim= query[1].split('&');
  27. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  28. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  29. var popMargTop = ($('#' + popID).height() + 80) / 2;
  30. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  31. //Apply Margin to Popup
  32. $('#' + popID).css({
  33. 'margin-top' : -popMargTop,
  34. 'margin-left' : -popMargLeft
  35. });
  36. $('body').append('<div id="fade"></div>');
  37. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  38. return false;
  39. });
  40. $('a.close, #fade').live('click', function() {
  41. $('#fade , .popup_block').fadeOut(function() {
  42. $('#fade, a.close').remove(); //fade them both out
  43. });
  44. return false;
  45. });
  46. });
  47. </script>
  48.  
  49. <script type="text/javascript">
  50. </script>
  51.  
  52.  
  53. <style type="text/css">
  54.  
  55. #fade { /*--Transparent background layer--*/
  56. display: none; /*--hidden by default--*/
  57. background: #000;
  58. position: fixed; left: 0; top: 0;
  59. width: 100%; height: 100%;
  60. opacity: 0;
  61. z-index: 9999;
  62. }
  63. .popup_block{
  64. display: none; /*--hidden by default--*/
  65. padding: 20px;
  66. box-shadow: 0px 0px 1px #333;
  67. border: 5px solid #fff;
  68. background-color: #eee;
  69. float: left;
  70. font-family: "calibri";
  71. color: #000;
  72. font-size: 15px;
  73. position: fixed;
  74. top: 60%; left: 55.5%;
  75. z-index: 999999999999999999999999999999999999999999;
  76. transition: all 0.4s ease-out;
  77. -o-transition-transition: all 0.4s ease-out;
  78. -webkit-transition: all 0.4s ease-out;
  79. -moz-transition: all 0.4s ease-out;
  80. /*--CSS3 Box Shadows--*/
  81. -webkit-box-shadow: 0px 0px 0px #fff;
  82. -moz-box-shadow: 0px 0px 0px #fff;
  83. box-shadow: 0px 0px 3px #333;
  84. /*--CSS3 Rounded Corners--*/
  85. }
  86.  
  87. img.btn_close {
  88. float: right;
  89. margin: 5 0px 0 0;
  90. }
  91.  
  92. /*--Making IE6 Understand Fixed Positioning--*/
  93.  
  94. *html #fade {
  95.  
  96. position: absolute;
  97.  
  98. }
  99.  
  100. *html .popup_block {
  101.  
  102. position: absolute;
  103.  
  104. }
  105.  
  106. ::-webkit-scrollbar {width: 2px; height: 4px; background: #fff; }
  107.  
  108. ::-webkit-scrollbar-thumb { background-color: #919191; -webkit-border-radius: 1ex; }
  109.  
  110.  
  111.  
  112. a:link, a:active, a:visited{
  113. color: #000;
  114. text-decoration: none;
  115. -webkit-transition: color 0.3s ease-in;
  116. -moz-transition: color 0.3s ease-in;
  117. }
  118.  
  119. a:hover {
  120. text-decoration: none;
  121. text-shadow: 0px 0px 6px #fff;
  122. font-style:;
  123. color: #ddd;
  124. }
  125.  
  126.  
  127.  
  128. @font-face { font-family: "rose"; src: url('http://static.tumblr.com/zux19tj/NaYmhkpum/anjelika_rose_1_.ttf'); }
  129.  
  130.  
  131. @font-face { font-family: "ekhlas"; src: url('http://static.tumblr.com/vtg00tr/lLzmopqqe/dandelion_in_the_spring.ttf'); }
  132.  
  133.  
  134.  
  135. #title {
  136. position:fixed !important;
  137. z-index: 2;
  138. overflow: hidden;
  139. opacity: 1;
  140. width: 850px;
  141. height: 30px;
  142. color: #000;
  143. background: #fff; /*--change the background color--*/
  144. padding: 10px;
  145. margin-left: 190px;
  146. margin-top: 20px;
  147. text-align: center;
  148. letter-spacing: 3px;
  149. font-size: 37px; /*--change the font size--*/
  150. font-family: "ekhlas";
  151. border: 1px solid #ddd; /*--color for border of title and also increase or decrease the number to make the border bigger--*/
  152. box-shadow: 0px 0px 3px #333; /*--shadow for the box color--*/
  153. text-transform: uppercase;
  154. -webkit-border-top-right-radius: 6px;
  155. -webkit-border-bottom-right-radius: 6px;
  156. -webkit-border-bottom-left-radius: 6px;
  157. -webkit-border-top-left-radius: 6px;
  158. -webkit-transition: all .5s ease-in-out;
  159. -moz-transition: all .5s ease-in-out;
  160. -o-transition: all .5s ease-in-out;
  161. transition: all .5s ease-in-out;
  162. }
  163.  
  164.  
  165.  
  166. #tags{
  167. position:fixed !important;
  168. overflow: hidden;
  169. z-index:3;
  170. opacity: 3;
  171. width: 460px;
  172. height: 90px;
  173. color: ;
  174. box-shadow: 0px 0px 1px #333; /*--color for the shadow change it if you want (behind the #)--*/
  175. border: 5px solid #fff; /*--increase the px number to make the border bigger or change the color after #--*/
  176. background-color: #eee; /*--change the background color--*/
  177. padding: 6px;
  178. line-height:48px;
  179. text-align:center;
  180. margin-left: 480px;
  181. margin-top: 140px;
  182. font-family: "rose";
  183. font-size: 21px; /*--change the font size--*/
  184. }
  185.  
  186.  
  187.  
  188.  
  189. #other{
  190. position:fixed !important;
  191. overflow: hidden;
  192. z-index:3;
  193. opacity: 3;
  194. width: 460px;
  195. height: 90px;
  196. color: ;
  197. box-shadow: 0px 0px 1px #333; /*--color for the shadow change it if you want (behind the #)--*/
  198. border: 5px solid #fff; /*--increase or decrease the px number to make the border bigger or smaller or change the color after the #--*/
  199. background-color: #eee; /*--change the background color--*/
  200. padding: 6px;
  201. line-height:48px;
  202. text-align:center;
  203. margin-left: 480px;
  204. margin-top: 280px;
  205. font-family: "rose";
  206. font-size: 21px; /*--change the font size--*/
  207. }
  208.  
  209. #extra{
  210. position:fixed !important;
  211. overflow: hidden;
  212. z-index:3;
  213. opacity: 3;
  214. width: 460px;
  215. height: 90px;
  216. color: ;
  217. box-shadow: 0px 0px 1px #333; /*--color for the shadow change it if you want (behind the #)--*/
  218. border: 5px solid #fff; /*--increase or decrease the px number to make the border bigger or smaller or change the color after the #--*/
  219. background-color: #eee; /*--change the background color--*/
  220. padding: 6px;
  221. line-height:48px;
  222. text-align:center;
  223. margin-left: 480px;
  224. margin-top: 420px;
  225. font-family: "rose";
  226. font-size: 21px; /*--change the font size--*/
  227. }
  228.  
  229.  
  230.  
  231.  
  232. #link1 {
  233. position:fixed !important;
  234. overflow: hidden;
  235. z-index:3;
  236. opacity: 2;
  237. width: 125px;
  238. height: 24px;
  239. color: #ddd:
  240. padding: 4px;
  241. padding-top:3px;
  242. text-align: center;
  243. border: 3px solid #ccc; /*--increase or decrease the px number to make the border bigger or smaller or change the color after the #--*/
  244. background-color:#fff; /*--change the background color--*/
  245. box-shadow: 0px 0px 2px #333;
  246. margin-left: 250px;
  247. margin-top: 140px;
  248. font-family: "rose";
  249. font-size: 20px;
  250. line-height: 20px;
  251. border-radius: 5px;
  252. }
  253.  
  254. #link2 {
  255. position:fixed !important;
  256. overflow: hidden;
  257. z-index:3;
  258. opacity: 2;
  259. width: 125px;
  260. height: 24px;
  261. color: #ddd:
  262. padding: 4px;
  263. padding-top:3px;
  264. text-align: center;
  265. border: 3px solid #ccc; /*--increase or decrease the px number to make the border bigger or smaller or change the color after the #--*/
  266. background-color:#fff; /*--change the background color--*/
  267. box-shadow: 0px 0px 2px #333;
  268. margin-left: 250px;
  269. margin-top: 200px;
  270. font-family: "rose";
  271. font-size: 20px;
  272. line-height: 20px;
  273. border-radius: 5px;
  274. }
  275.  
  276. #link3 {
  277. position:fixed !important;
  278. overflow: hidden;
  279. z-index:3;
  280. opacity: 2;
  281. width: 125px;
  282. height: 24px;
  283. color: #ddd:
  284. padding: 4px;
  285. padding-top:3px;
  286. text-align: center;
  287. border: 3px solid #ccc; /*--increase or decrease the px number to make the border bigger or smaller or change the color after the #--*/
  288. background-color:#fff;/*--change the background color--*/
  289. box-shadow: 0px 0px 2px #333;
  290. margin-left: 250px;
  291. margin-top: 260px;
  292. font-family: "rose";
  293. font-size: 20px;
  294. line-height: 20px;
  295. border-radius: 5px;
  296. }
  297.  
  298.  
  299. #link4{
  300. position:fixed !important;
  301. overflow: hidden;
  302. z-index:3;
  303. opacity: 2;
  304. width: 125px;
  305. height: 24px;
  306. color: #ddd:
  307. padding: 4px;
  308. padding-top:3px;
  309. text-align: center;
  310. border: 3px solid #ccc; /*--increase or decrease the px number to make the border bigger or smaller or change the color after the #--*/
  311. background-color:#fff; /*--change the background color--*/
  312. box-shadow: 0px 0px 2px #333;
  313. margin-left: 250px;
  314. margin-top: 320px;
  315. font-family: "rose";
  316. font-size: 20px;
  317. line-height: 20px;
  318. border-radius: 5px;
  319. }
  320.  
  321.  
  322. /*--DON'T TOUCH THIS PLEASE --*/
  323. #credit {
  324. position:fixed !important;
  325. overflow: hidden;
  326. opacity: 1;
  327. width: 20px;
  328. height: 15px;
  329. color: #000:
  330. padding: 0px;
  331. padding-top: 7px;
  332. border: 1px solid #ddd;
  333. background-color:white;
  334. margin-left: -16px;
  335. margin-top: -16px;
  336. font-family: "calibri";
  337. font-size: 15px;
  338. line-height: 8px;
  339. text-align: center;
  340. border-radius:2p;
  341. }
  342.  
  343. .sideback{
  344. position:fixed;
  345. margin-left:210px;
  346. top: 130px;
  347. background: #ddd;
  348. background-image:url("http://24.media.tumblr.com/c86b9569b947d5b82d8cdd0ec8996c9f/tumblr_moxg7kiXC81rec3f5o1_500.jpg"); /*--change the background image by putting another url between the two " " or keep it!--*/
  349. height:265px;
  350. border: 3px solid #fff;
  351. -moz-box-shadow:10px 10px 5px #ddd;
  352. -webkit-box-shadow:10px 10px 5px #ddd;
  353. box-shadow:0px 0px 2px #333;
  354. opacity:5;
  355. width:200px;
  356. border-bottom:3px solid #fff;
  357. border-left: 3px solid #fff;
  358. border-right: 3px solid #fff;
  359. }
  360.  
  361. .sideback1{
  362. position:fixed;
  363. margin-left:450px;
  364. top: 130px;
  365. background-image:url("http://24.media.tumblr.com/c86b9569b947d5b82d8cdd0ec8996c9f/tumblr_moxg7kiXC81rec3f5o1_500.jpg");/*--change the background image by putting another url between the two " " or keep it!--*/
  366. background-size:cover;
  367. height:445px;
  368. border: 3px solid #fff;
  369. -moz-box-shadow:10px 10px 5px #ddd;
  370. -webkit-box-shadow:10px 10px 5px #ddd;
  371. box-shadow:0px 0px 2px #333;
  372. opacity:5;
  373. width:530px;
  374. border-bottom:3px solid #fff;
  375. border-left: 3px solid #fff;
  376. border-right: 3px solid #fff;
  377. }
  378.  
  379.  
  380.  
  381. body {
  382. background-image:url("http://static.tumblr.com/ko3o6ju/OC6lsn1qx/wood.jpg");/*--change the background image by putting another url between the two " " or keep it!--*/
  383. background-size: cover;
  384. margin: 0;
  385. padding: 20px;
  386. }
  387.  
  388. /*I RECCOMMEND TO NOT TOUCH ANY OF THIS LOLz*/
  389. #infscr-loading{
  390. bottom: -70px;
  391. position: absolute;
  392. left: 50%;
  393. margin-left:-8px;
  394. width:16px;
  395. height:11px;
  396. overflow:hidden;
  397. margin-bottom: 50px;
  398. }
  399.  
  400. #postnotes{
  401. text-align: justify;}
  402.  
  403. #postnotes blockquote{
  404. border: 0px;}
  405.  
  406. blockquote{
  407. padding:0px 0px 2px 5px;
  408. margin:0px 0px 2px 10px;
  409. border-left: 1px dotted #555555;
  410. }
  411.  
  412. blockquote p, ul{
  413. margin:0px;
  414. padding:0px;
  415. }
  416.  
  417. a img{border: 0px;}
  418.  
  419.  
  420. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  421.  
  422. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  423. .user_7 .label, .user_8 .label, .user_9 .label {color:{color:text};}
  424.  
  425. .notes img{width:20px; position:relative; top:3px;}
  426. <--ses-->
  427. small{font-size: 90%;}
  428.  
  429.  
  430. </style>
  431.  
  432.  
  433.  
  434. <div id="title">
  435. PUT YOUR TITLE HERE
  436. </div>
  437.  
  438.  
  439. <div id="link1">
  440. <a href="PUT LINK1 HERE">link1 title</a>
  441. </div>
  442.  
  443.  
  444. <div id="link2">
  445. <a href="PUT LINK2 HERE">link2 title</a>
  446. </div>
  447.  
  448. <div id="link3">
  449. <a href="PUT LINK3 HERE">link3 title</a>
  450. </div>
  451.  
  452. <div id="link4">
  453. <a href="http://spaqhetti-tacos.tumblr.com">Credit</a>
  454. </div>
  455.  
  456. <div id="credit">
  457. <a href="http://spaqhetti-tacos.tumblr.com">©</a>
  458. </div>
  459.  
  460.  
  461.  
  462. <div id="tags">
  463. <center><div style="font-family:ekhlas; text-transform:uppercase; color:#000; font-size:30px;">title here</center>
  464. <a href="link here">Title 1</a> -
  465. <a href="link here">Title 2</a> -
  466. <a href="link here">Title 3</a> -
  467. <a href="link here">Title 4</a> -
  468. <a href="link here">Title 5</a> -
  469. <a href="link here">Title 6</a>
  470.  
  471. </div>
  472.  
  473.  
  474.  
  475.  
  476. <div id="other">
  477.  
  478. <center><div style="font-family:ekhlas; text-transform:uppercase; color:#000; font-size:30px;">title here</center>
  479. <a href="link here">Title 1</a> -
  480. <a href="link here">Title 2</a> -
  481. <a href="link here">Title 3</a> -
  482. <a href="link here">Title 4</a> -
  483. <a href="link here">Title 5</a> -
  484. <a href="link here">Title 6</a>
  485.  
  486. </div>
  487.  
  488. <div id="extra">
  489.  
  490. <center><div style="font-family:ekhlas; text-transform:uppercase; color:#000; font-size:30px;">title here</center>
  491. <a href="link here">Title 1</a> -
  492. <a href="link here">Title 2</a> -
  493. <a href="link here">Title 3</a> -
  494. <a href="link here">Title 4</a> -
  495. <a href="link here">Title 5</a> -
  496. <a href="link here">Title 6</a>
  497.  
  498.  
  499. </div>
  500.  
  501.  
  502.  
  503.  
  504.  
  505. <div class="sideback"></div>
  506. <div class="sideback1"></div>
  507.  
  508. </body>
  509.  
  510.  
  511. </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!