API tools faq
paste
Advertisement
ochizukes

Page 002: Tabs (Custom)

ochizukes
May 8th, 2015
2,791
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 25.32 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Page 002. Optimized for Tumblr on desktop. Compatible with Google Chrome and Opera.
  4.  
  5. This page is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.
  6.  
  7. http://creativecommons.org/licenses/by-nc-nd/4.0/
  8.  
  9.  
  10. /********************************************************************/
  11.  
  12.  
  13. Lookout for notes throughout the code to help you customize this page!
  14.  
  15. 1. Create a sideblog and paste this code in the custom HTML
  16.  
  17. 2. Use the appearance options to customize your colors
  18.  
  19. 3. Once you've chosen the colors you want, add your information to the page
  20.  
  21. 4. Keep the sideblog open in another tab. Go to customize your main blog and add a page
  22.  
  23. 5. Select "Custom Layout", and paste this code into the blank space
  24.  
  25. 6. Scroll down to where the customizations begin (I've labelled it for you) and manually input the colors. An example of how to do this:
  26.  
  27. The first color you'll come across says background-color:{color:Scroll}; You would switch over to the tab where your sideblog is. In the appearance options find "Scroll" (everything is in alphabetical order). Click on that tab, and a box will appear with a spectrum and a number in the upper righthand corner. Replace {color:Scroll} with that number. Now, it would look something like:
  28.  
  29. background-color:#e7e7e7; MAKE SURE THERE IS A SEMI-COLON AT THE END!
  30.  
  31. Be careful not to get rid of any punctuation. For example, in:
  32.  
  33. background:-webkit-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); THERE IS A COMMA IN BETWEEN THE TWO COLORS! Watch out for that.
  34.  
  35. 7. Once you've added all of your colors, select "Update" and save your changes
  36.  
  37. That's it! Now you have a custom all-in-one page!
  38.  
  39. -->
  40.  
  41. <!DOCTYPE html><html>
  42. <head>
  43.  
  44. <title>1ST TITLE HERE</title> <!-- the title in the browser tab -->
  45.  
  46. <link rel="shortcut icon" href="PIXEL URL HERE"/> <!-- the small pixel next to the title-->
  47.  
  48. <!-- !DON'T TOUCH -->
  49. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  50. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  51. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  52. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  53. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" />
  54.  
  55. <!-- GOOGLE FONTS -- if you want to change the font, add it here! -->
  56.  
  57. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet' type='text/css'>
  58.  
  59. <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic,500italic' rel='stylesheet' type='text/css'>
  60.  
  61. <!-- so you can edit the colors in the appearance options... -->
  62.  
  63. <meta name="color:Active Tab BG" content="#d8f3eb"/>
  64. <meta name="color:Active Tab Text" content="#ffffff"/>
  65. <meta name="color:Blockquote BG" content="#fbfbfb"/>
  66. <meta name="color:Blockquote Border" content="#e5e5e5"/>
  67. <meta name="color:Blockquote Text" content="#b8b8b8"/>
  68. <meta name="color:Borders" content="#ffffff"/>
  69. <meta name="color:FAQ BG" content="#ffffff"/>
  70. <meta name="color:Following BG" content="#f8f8f8"/>
  71. <meta name="color:Following Border" content="#ebe3f8"/>
  72. <meta name="color:Gradient Top" content="#fff4fa"/>
  73. <meta name="color:Gradient Bottom" content="#cff5eb"/>
  74. <meta name="color:Info Subtitle BG" content="#f8f8f8"/>
  75. <meta name="color:Info Subtitle Text" content="#f5c9d9"/>
  76. <meta name="color:Link" content="#cfc3ea"/>
  77. <meta name="color:Links BG" content="#fbfbfb"/>
  78. <meta name="color:Links Text" content="#bdd3df"/>
  79. <meta name="color:Scroll" content="#e8e1f5"/>
  80. <meta name="color:Shadow" content="#ffffff"/>
  81. <meta name="color:Side Links" content="#d3cae7"/>
  82. <meta name="color:Tab Text" content="#ccede4"/>
  83. <meta name="color:Text" content="#a5a5a5"/>
  84. <meta name="color:Title" content="#ffffff"/>
  85.  
  86. <!-- now the customization begins -->
  87.  
  88. <style type="text/css">
  89.  
  90. /************************* SCROLLBAR CUSTOMIZATION *************************/
  91.  
  92. ::-webkit-scrollbar-track {
  93.    
  94.     background-color:{color:Scroll}; /* the scrollbar color */
  95.    
  96.     /* !don't touch; the below makes the scroll's background transparent */
  97.     background-clip:padding-box; border:3px solid rgb(0, 0, 0); border:3px        solid rgba(0, 0, 0, 0); -webkit-background-clip:padding-box;
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb {
  101.    
  102.     background-color:{color:Scroll}; /* the scrollbar color */
  103.    
  104.     border-radius:5px; /* how round your scrollbar is; the higher the number,     the rounder it is */
  105.    
  106.     /* !don't touch; the below makes the scroll's background transparent */
  107.     background-clip:padding-box; border:0px solid rgb(0, 0, 0); border:0px        solid rgba(255, 0, 0, 0); -webkit-background-clip: padding-box;
  108. }
  109.  
  110. ::-webkit-scrollbar { width:5px; } /* how thick your scrollbar is; recommended values are 5px and 7px */
  111.  
  112. /*************************** GRADIENT BACKGROUND ***************************/
  113.  
  114. html {
  115.    
  116.     background:-webkit-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); /* your BG in safari */
  117.    
  118.     background: -o-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); /* your BG in opera */
  119.    
  120.     background: -moz-linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); /* your BG in mozilla firefox */
  121.    
  122.     background: linear-gradient({color:Gradient Top}, {color:Gradient Bottom}); /* standard gradient BG code */
  123.    
  124.     height:100%; /* removing this will break the gradient BG */
  125. }
  126.  
  127. body {
  128.    
  129.     color:{color:Text}; /* general text color [info paragraphs, link subtitles     and FAQ questions] */
  130.    
  131.     font:11px ubuntu; /* !don't touch, this keeps the line-height stable */
  132.    
  133.     letter-spacing:1px; /* space between letters in general text */
  134.    
  135.     line-height:17px; /* space between lines in general text */
  136.    
  137.     /* !don't touch the bottom three */
  138.     margin:0; overflow-x:hidden; padding:0;
  139. }
  140.  
  141. /********************************** LINKS **********************************/
  142.  
  143. a {
  144.    
  145.     color:{color:Link}; /* link color */
  146.    
  147.     text-decoration:none; /* your options are none, underline, overline, and      line-through */
  148. }
  149.  
  150. /****************************** FAQ ANSWERS ******************************/
  151.  
  152. blockquote {
  153.    
  154.     background:{color:Blockquote BG}; /* background color */
  155.    
  156.     border-left:1px dashed {color:Blockquote Border}; /* border color */
  157.    
  158.     color:{color:Blockquote Text}; /* text color */
  159.    
  160.     /* !don't touch, these dictate the blockquote positioning */
  161.     margin-left:12px; padding-top:1px; padding-left:12px; padding-bottom:1px;     padding-right:0; width:90%; word-wrap:break-word;
  162. }
  163.  
  164. /********************************* SIDEBAR ********************************/
  165.  
  166. #sidebar {
  167.    
  168.     margin-left:-570px; /* how far it is from the left of the tabs box */
  169.    
  170.     margin-top:130px; /* !don't touch; how far it is from the top */
  171. }
  172.  
  173. /********** PORTRAIT IMAGE **********/
  174.  
  175. .portrait {
  176.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the portrait background. I usually use white [255, 255, 255] and black     [0, 0, 0]. the last number is the transparency, 0 being completely gone       and 1 being completely there. you can use decimals! */
  177.    
  178.     border:1px solid {color:Borders}; /* image border color */
  179.    
  180.     border-radius:5px; /* how round the image is */
  181.    
  182.     /* shadow */
  183.     -webkit-box-shadow:6px 6px 0px -1px {color:Shadow};
  184.     box-shadow:6px 6px 0px -1px {color:Shadow};
  185.    
  186.     display:block; /* !don't touch; keeps things in place */
  187.     margin:0 auto; /* !don't touch; centers the image */
  188.    
  189.     margin-top:20px; margin-bottom:30px; /* !don't touch */
  190.    
  191.     padding:13px; /* how large the background is */
  192.    
  193.     width:110px; /* image size */
  194. }
  195.  
  196. /**** INDEX, MESSAGE, ARCHIVE, ETC ****/
  197.  
  198. .navigate {
  199.    
  200.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the navigation background. I usually use white [255, 255, 255] and         black [0, 0, 0]. the last number is the transparency, 0 being completely      gone and 1 being completely there. you can use decimals! */
  201.    
  202.     border:1px solid {color:Borders}; /* navigation border color */
  203.    
  204.     border-radius:5px; /* how round the nav box is */
  205.    
  206.     /* shadow */
  207.     -webkit-box-shadow:6px 6px 0px -1px {color:Shadow};
  208.     box-shadow:6px 6px 0px -1px {color:Shadow};
  209.    
  210.     display:block; /* !don't touch; keeps things in place */
  211.     margin:0 auto; /* !don't touch; centers the image */
  212.    
  213.     height:112px; /* how tall the nav box is */
  214.    
  215.     padding:13px; /* how large the background is */
  216.    
  217.     width:110px; /* how wide the nav box is */
  218. }
  219.  
  220. .navi {
  221.    
  222.     background-color:{color:FAQ BG}; /* background color */
  223.    
  224.     font-size:10px; /* link text size */
  225.    
  226.     margin-bottom:3px; /* spacing between links */
  227.    
  228.     padding:9px; /* how thick the link boxes are */
  229.    
  230.     text-align:center; /* if the text falls to the left, center, or right */
  231.    
  232.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  233. }
  234.  
  235. .navi a { color:{color:Side Links}; } /* link color */
  236.  
  237. /**********************************  TITLE **********************************/
  238.  
  239. .title {
  240.    
  241.     color:{color:Title}; /* title color */
  242.    
  243.     display:block; /* !don't touch; keeps things in place */
  244.    
  245.     font:15px ubuntu; /* title font and size */
  246.    
  247.     letter-spacing:1px; /* space between letters */
  248.    
  249.     margin-top:30px; /* !don't touch */
  250.    
  251.     text-align:center; /* if the text falls to the left, center, or right */
  252.    
  253.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  254. }
  255.  
  256. /****************************** OUTER TABS BOX ******************************/
  257.  
  258. .tabs {
  259.    
  260.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the navigation background. I usually use white [255, 255, 255] and         black [0, 0, 0]. the last number is the transparency, 0 being completely      gone and 1 being completely there. you can use decimals! */
  261.    
  262.     border:1px solid {color:Borders}; /* navigation border color */
  263.    
  264.     border-radius:5px; /* how round the nav box is */
  265.    
  266.     /* shadow */
  267.     -webkit-box-shadow:6px 6px 0px -1px {color:Shadow};
  268.     box-shadow:6px 6px 0px -1px {color:Shadow};
  269.    
  270.     display:block; /* !don't touch; keeps things in place */
  271.     margin:0 auto; /* !don't touch; centers the image */
  272.     margin-top:-405px; /* !don't touch */
  273.    
  274.     margin-bottom:25px;/* space between the tabs box and the inbox */
  275.    
  276.     padding:13px; padding-top:3px; /* size of the background */
  277.    
  278.     width:350px; /* size of the tabs box */
  279. }
  280.  
  281. /* !don't touch */
  282. .tab-links:after { clear:both; content:''; display:block; }
  283. .tab-links li { float:left; list-style:none; margin-right:47px; }
  284.  
  285. /********************************** TABS **********************************/
  286.  
  287. /**************** NONACTIVE ****************/
  288.  
  289. .tab-links a {
  290.    
  291.     background:{color:FAQ BG}; /* bg color; same as the rest of the box */
  292.    
  293.     border-radius:3px 3px 0px 0px; /* how round the tab corners are */
  294.    
  295.     color:{color:Tab Text}; /* text color */
  296.    
  297.     display:inline-block; /*!don't touch; keep things in place */
  298.    
  299.     font:11px ubuntu; /* font family and size */
  300.    
  301.     /* !don't touch */
  302.     margin-left:-40px;
  303.     padding:9px 15px;
  304.    
  305.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  306.    
  307.     transition:all linear 0.15s; /* !don't touch */
  308. }
  309.  
  310. /***** NONACTIVE TABS ON HOVER + ACTIVE TAB *****/
  311.  
  312. .tab-links a:hover, li.active a, li.active a:hover {
  313.    
  314.     background:{color:Active Tab BG}; /* background color */
  315.    
  316.     color:{color:Active Tab Text}; /* text color */
  317.    
  318.     text-decoration:none; /* your options are none, underline, overline, and      line-through */
  319. }
  320.  
  321. /****************************** INNER TABS BOX ******************************/
  322.  
  323. .tab-content {
  324.    
  325.     background:{color:FAQ BG}; /* background color */
  326.    
  327.     border-radius:5px; border-top-left-radius:0px; /* how rounded inner           corners are */
  328.    
  329.     font:10px open sans; /* font family and size */
  330.    
  331.     height:300px; /* how tall the tabs box is */
  332.    
  333.     letter-spacing:1px; /* spacing between letters */
  334.    
  335.     line-height:18px; /* spacing between lines */
  336.    
  337.     margin-top:-11px; /* !don't touch */
  338.    
  339.     overflow-y:scroll; /* enables scrolling */
  340.    
  341.     padding:13px; padding-top:0px; padding-bottom:0px; /* !don't touch */
  342. }
  343.  
  344. /* !don't touch */
  345. .tab { display:none; }
  346. .tab.active { display:block; }
  347.  
  348. /************************ ABOUT + QUESTION SUBTITLES ************************/
  349.  
  350. .h {
  351.    
  352.     font-size:10px; /* text size */
  353.    
  354.     letter-spacing:1px; /* spacing between letters */
  355.    
  356.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  357. }
  358.  
  359. /****************************** LINK SUBTITLES ******************************/
  360.  
  361. .hl, .hr {
  362.    
  363.     font-size:10px; /* font size */
  364.    
  365.     letter-spacing:1px; /* spacing between letters */
  366.    
  367.     text-align:center; /* if the text falls to the left, center, or right */
  368.    
  369.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  370.    
  371.     width:144px; /* must match the width of the link boxes */
  372. }
  373.  
  374. /******************************** LINK BOXES ********************************/
  375.  
  376. .ll, .lr {
  377.    
  378.     background:{color:Links BG}; /* background color */
  379.    
  380.     margin-bottom:5px; /* vertical space between boxes */
  381.    
  382.     padding:6px; /* background size */
  383.    
  384.     width:144px; /* link box size; must match the width of link subtitles */
  385. }
  386.  
  387. .ll a, .lr a { color:{color:Links Text}; } /* text color */
  388.  
  389. /******************************** BLOGROLL ********************************/
  390.  
  391. #blogroll { margin-left:-6px; margin-top:12px; } /* !don't touch */
  392.  
  393. .blogicon {
  394.  
  395.     background:{color:Following BG}; /* background color */
  396.    
  397.     border:1px dashed {color:Following Border}; /* border color */
  398.    
  399.     border-radius:3px; /* how round the icon is */
  400.    
  401.     margin-left:2px; margin-bottom:2px; /* space between icons */
  402.    
  403.     padding:9px; /* background size */
  404. }
  405.  
  406. /********************************* ASK BOX *********************************/
  407.  
  408. .inbox {
  409.    
  410.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the portrait background. I usually use white [255, 255, 255] and black     [0, 0, 0]. the last number is the transparency, 0 being completely gone       and 1 being completely there. you can use decimals! */
  411.    
  412.     border:1px solid {color:Borders}; /* image border color */
  413.    
  414.     border-radius:5px; /* how round the image is */
  415.    
  416.     /* shadow */
  417.     -webkit-box-shadow:6px 6px 0px -1px {color:Shadow};
  418.     box-shadow:6px 6px 0px -1px {color:Shadow};
  419.    
  420.     display:block; /* !don't touch; keeps things in place */
  421.     margin:0 auto; /* !don't touch; centers the image */
  422.     overflow:hidden; /* !don't touch */
  423.    
  424.     padding:13px; /* background size */
  425. }
  426.  
  427. /********************************* TOOLTIPS *********************************/
  428.  
  429. #s-m-t-tooltip {
  430.     background:{color:FAQ BG}; /* background color */
  431.    
  432.     border-radius:2px; /* how round the box is */
  433.    
  434.     color:{color:Side Links}; /* text color */
  435.    
  436.     font-size:9px; /* font size */
  437.    
  438.     letter-spacing:1px; /* space between letters */
  439.    
  440.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  441.    
  442.     /* !don't touch */
  443.     display:block;
  444.     margin:20px 10px 10px 10px;
  445.     max-width:100px;
  446.     padding:6px; padding-bottom:3px;
  447.     word-wrap:break-word;
  448.     z-index:999999;
  449. }
  450.  
  451. {CustomCSS}
  452. </style>
  453.  
  454. <!-- Tabs Script !don't touch -->
  455.  
  456. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  457.  
  458. <script>
  459.    
  460.    jQuery(document).ready(function() {
  461.    jQuery('.tabs .tab-links a').on('click', function(e)  {
  462.        var currentAttrValue = jQuery(this).attr('href');
  463.  
  464.        // Show/Hide Tabs
  465.        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
  466.  
  467.        // Change/remove current tab to active
  468.        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  469.  
  470.        e.preventDefault();
  471.    });
  472. });
  473.    
  474. </script>
  475.  
  476. <!-- End Tabs Script -->
  477.  
  478. <!-- Tooltips -->
  479.  
  480. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  481.  
  482. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  483.  
  484. <script>
  485.    (function($){
  486.        $(document).ready(function(){
  487.            $("[title]").style_my_tooltips();
  488.        });
  489.    })(jQuery);
  490. </script>
  491.  
  492. <!-- End Tooltips -->
  493.  
  494. </head>
  495. <body>
  496.  
  497. <!-- now we begin editing the content -->
  498.  
  499. <!--------------------------------- SIDEBAR --------------------------------->
  500.  
  501. <div id="sidebar">
  502.  
  503. <img class="portrait" src="https://33.media.tumblr.com/82f2e49c0928ab58aabbe9f3d6a326ea/tumblr_inline_nnzuql1HMU1sjbgbx_500.gif" alt=""/><!-- portrait image; paste URL in src="" between quotations -->
  504.    
  505. <div class="navigate"><!-- side links below; don't remove the credit! -->
  506.    
  507.     <div class="navi"><a href="/">return</a></div>
  508.     <div class="navi"><a href="http://tumblr.com">leave</a></div>
  509.     <div class="navi"><a href="http://maomuthemes.tumblr.com">credit</a></div>
  510.    
  511. </div><!-- end navigate -->
  512.  
  513. <div class="title">2ND TITLE HERE</div><!-- tabs box title -->
  514.    
  515. </div><!-- end sidebar -->
  516.  
  517. <!------------------------------ MAIN CONTENT ------------------------------>
  518.  
  519. <div class="tabs">
  520.  
  521.     <ul class="tab-links">
  522.    
  523.         <li class="active"><a href="#tab1">Info</a></li><!-- 1st tab title -->
  524.        
  525.         <li><a href="#tab2">links</a></li><!-- 2nd tab title -->
  526.        
  527.         <li><a href="#tab3">FAQ</a></li><!-- 3rd tab title -->
  528.        
  529.         <li><a href="#tab4">Blogroll</a></li><!-- 4th tab title -->
  530.        
  531.     </ul><!-- end tab links -->
  532.  
  533.     <div class="tab-content">
  534.    
  535. <!---------------------------------- INFO ---------------------------------->
  536.    
  537.         <div id="tab1" class="tab active">
  538.        
  539.             <p class="h"><img src="" alt=""/> <!-- if you want a cute pixel next to the text; paste URL in src="" between quotations -->
  540.            
  541.             <font style="background:{color:Info Subtitle BG}; color:{color:Info Subtitle Text}; padding:0px 4px 0px 4px;"> <!-- bg and text colors -->
  542.            
  543.             name: your name here </font></p> <!-- content -->
  544.            
  545.             <p class="h"><img src="" alt=""/> <!-- pixel -->
  546.            
  547.             <font style="background:{color:Info Subtitle BG}; color:{color:Info Subtitle Text}; padding:0px 4px 0px 4px;"> <!-- bg and text colors -->
  548.            
  549.             age: your age here </font></p> <!-- content -->
  550.            
  551.             <p class="h"><img src="" alt=""/>  <!-- pixel -->
  552.            
  553.             <font style="background:{color:Info Subtitle BG}; color:{color:Info Subtitle Text}; padding:0px 4px 0px 4px;"> <!-- bg and text colors -->
  554.            
  555.             location: your location here </font></p> <!-- content -->
  556.            
  557.             <p>First paragraph. Add as many as you want!</p>
  558.            
  559.             <p>Second pargraph. Here is how you <i>italicize</i>, <b>bold</b>, make a <blockquote>blockquote</blockquote> <s>strikethrough</s>, <small>shrink text</small>, or <big>enlarge</big> it.</p>
  560.            
  561.             <p>Third paragraph. The scrollbar will appear once the text exceeds the length of the box, no worries!</p>
  562.            
  563.         </div><!-- End Info -->
  564.    
  565. <!------------------------------ LINKS / TAGS ------------------------------>
  566.  
  567.         <div id="tab2" class="tab">
  568.        
  569.         <table><tr>
  570.        
  571.         <!-- left side; odd numbered boxes -->
  572.        
  573.         <td valign="top">
  574.        
  575.             <div class="hl"><img src="" alt=""/> 01: section</div><!-- section title + pixel; paste pixel URL in src="" between quotations -->
  576.            
  577.             <div class="ll"><!-- your links below; don't be afraid to add more links, the boxes actually look cool when they're uneven lengths -->
  578.                 <a href="URL HERE">+ link one</a><br>
  579.                 <a href="URL HERE">+ link two</a><br>
  580.                 <a href="URL HERE">+ link three</a><br>
  581.                 <a href="URL HERE">+ link four</a><br>
  582.                 <a href="URL HERE">+ link five</a><br>
  583.             </div><!-- end links -->
  584.            
  585.             <div class="hl"><img src="" alt=""/> 03: section</div><!-- section title + pixel -->
  586.            
  587.             <div class="ll"><!-- your links below -->
  588.                 <a href="URL HERE">+ link one</a><br>
  589.                 <a href="URL HERE">+ link two</a><br>
  590.                 <a href="URL HERE">+ link three</a><br>
  591.                 <a href="URL HERE">+ link four</a><br>
  592.                 <a href="URL HERE">+ link five</a><br>
  593.             </div><!-- end links -->
  594.            
  595.             <div class="hl"><img src="" alt=""/> 05: section</div><!-- section title + pixel -->
  596.            
  597.             <div class="ll"><!-- your links below -->
  598.                 <a href="URL HERE">+ link one</a><br>
  599.                 <a href="URL HERE">+ link two</a><br>
  600.                 <a href="URL HERE">+ link three</a><br>
  601.                 <a href="URL HERE">+ link four</a><br>
  602.                 <a href="URL HERE">+ link five</a><br>
  603.             </div><!-- end links -->
  604.          
  605.         </td><!-- end left -->
  606.        
  607.         <!-- right side; even numbered boxes -->
  608.        
  609.         <td valign="top">
  610.        
  611.             <div class="hr"><img src="" alt=""/> 02: section</div><!-- section title + pixel -->
  612.            
  613.             <div class="lr"><!-- your links below -->
  614.                 <a href="URL HERE">+ link one</a><br>
  615.                 <a href="URL HERE">+ link two</a><br>
  616.                 <a href="URL HERE">+ link three</a><br>
  617.                 <a href="URL HERE">+ link four</a><br>
  618.                 <a href="URL HERE">+ link five</a><br>
  619.             </div><!-- end links -->
  620.            
  621.             <div class="hr"><img src="" alt=""/> 04: section</div><!-- section title + pixel -->
  622.            
  623.             <div class="lr"><!-- your links below -->
  624.                 <a href="URL HERE">+ link one</a><br>
  625.                 <a href="URL HERE">+ link two</a><br>
  626.                 <a href="URL HERE">+ link three</a><br>
  627.                 <a href="URL HERE">+ link four</a><br>
  628.                 <a href="URL HERE">+ link five</a><br>
  629.             </div><!-- end links -->
  630.            
  631.             <div class="hr"><img src="" alt=""/> 06: section</div><!-- section title + pixel -->
  632.            
  633.             <div class="lr"><!-- your links below -->
  634.                 <a href="URL HERE">+ link one</a><br>
  635.                 <a href="URL HERE">+ link two</a><br>
  636.                 <a href="URL HERE">+ link three</a><br>
  637.                 <a href="URL HERE">+ link four</a><br>
  638.                 <a href="URL HERE">+ link five</a><br>
  639.             </div><!-- end links -->
  640.          
  641.         </td><!-- end right -->
  642.        
  643.         </tr></table><!-- end table -->
  644.            
  645.         </div><!-- End Links/Tags -->
  646.        
  647. <!---------------------------------- FAQ ---------------------------------->
  648.  
  649.         <div id="tab3" class="tab">
  650.        
  651.             <!-- Question 1 -->
  652.        
  653.             <p class="h"><img src="URL HERE" alt=""/> Q: QUESTION HERE</p>
  654.             <blockquote>A: ANSWER HERE</blockquote>
  655.            
  656.             <!-- Question 2 -->
  657.        
  658.             <p class="h"><img src="URL HERE" alt=""/> Q: QUESTION HERE</p>
  659.             <blockquote>A: ANSWER HERE</blockquote>
  660.                
  661.             <!-- Question 3 -->
  662.            
  663.             <p class="h"><img src="URL HERE" alt=""/> Q: QUESTION HERE</p>
  664.             <blockquote>A: ANSWER HERE</blockquote>
  665.            
  666.             <!-- Question 4 -->
  667.            
  668.             <p class="h"><img src="URL HERE" alt=""/> Q: QUESTION HERE</p>
  669.             <blockquote>A: ANSWER HERE</blockquote>
  670.            
  671.             <!-- Question 5 -->
  672.            
  673.             <p class="h"><img src="URL HERE" alt=""/> Q: QUESTON HERE</p>
  674.             <blockquote>A: ANSWER HERE</blockquote>
  675.            
  676.             <!-- To add another question, copy and paste everything underneath Question 5 from <p class="q"> to the end </blockquote> and fill it in. -->
  677.            
  678.         </div><!-- End FAQ -->
  679.    
  680. <!-------------------------------- BLOGROLL -------------------------------->
  681.    
  682. <!-- you don't really need to edit this -->    
  683.    
  684.    <div id="tab4" class="tab">
  685.    
  686.        <div id="blogroll">
  687.            {block:Following}
  688.                {block:Followed}
  689.                        <a title="{FollowedName}" target="_blank" href="{FollowedURL}"><img class="blogicon" src="{FollowedPortraitURL-40}" alt=""/></a>
  690.                {/block:Followed}
  691.            {/block:Following}
  692.        </div>
  693.    
  694.    </div><!-- End Blogroll -->
  695.        
  696.    </div><!-- end tab content -->
  697. </div><!-- end tabs -->
  698.  
  699. <!--------------------------------- ASK BOX --------------------------------->
  700.  
  701. <!-- make sure you change YOURURLHERE to your URL -->
  702.  
  703. <iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com"></iframe><!-- End Ask Box -->
  704.  
  705. </body>
  706. </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!