API tools faq
paste
Advertisement
florels

about me/links/blogroll page

florels
Jul 7th, 2013
1,168
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.83 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.  
  3. <!-------------------------------------------------------------------------
  4.             about me,
  5.                blogroll,
  6.        and links page
  7.             by florels.tumblr.com
  8.  feel free to edit as you please, for any questions,
  9.                                just shoot me a message xo      
  10. -------------------------------------------------------------------------->
  11.  
  12.  
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16.  
  17.  
  18. <title>{Title}</title> <!--tab title name-->
  19. <link rel="shortcut icon" href="{Favicon}"/> <!--favicon-->
  20.  
  21.  
  22.  
  23. <script type="text/javascript"
  24.    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
  25.     </script>
  26.      <script type="text/javascript" language="javascript">
  27.          $(function () {
  28.              $('#scrlBotm').click(function () {
  29.                  $('html, body').animate({
  30.                      scrollTop: $(document).height()
  31.                  },
  32.                  1500);
  33.                  return false;
  34.              });
  35.  
  36.              $('#scrlTop').click(function () {
  37.                  $('html, body').animate({
  38.                      scrollTop: '0px'
  39.                  },
  40.                  1500);
  41.                  return false;
  42.              });
  43.          });
  44. </script>
  45.  
  46. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  47. <script>
  48.     (function($){
  49.         $(document).ready(function(){
  50.             $("[title]").style_my_tooltips();
  51.         });
  52.     })(jQuery);
  53. </script>
  54.  
  55.  
  56. <head>
  57.  
  58.  
  59.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  60.     <title>{Title}</title>
  61.     {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  62.     <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  63.    
  64.     <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
  65.     <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic' rel='stylesheet' type='text/css'>
  66.  
  67.  
  68.      
  69.     <style type="text/css">
  70.  
  71. ::-webkit-scrollbar {width: 5px; height: 0px; background:#ffffff;}
  72. ::-webkit-scrollbar-thumb {background:#d880a6;} /* scrollbar colour */
  73.  
  74.  
  75.  
  76.  
  77.     a {
  78.     color:#d880a6; /* link colour */
  79. -moz-transition-duration:0.3s;
  80. -webkit-transition-duration:0.3s;
  81. -o-transition-duration:0.3s;}
  82.    
  83.     a:hover {
  84.     color:#ffffff; /* link hover colour */
  85.     background:#000000; /* link hover background colour */
  86. -moz-transition-duration:0.3s;
  87. -webkit-transition-duration:0.3s;
  88. -o-transition-duration:0.3s;}
  89.    
  90.     #s-m-t-tooltip {
  91.     display:block;
  92.     background:#000000;
  93.     font-size:7px;
  94.     font-family:'Noto Sans';
  95.     letter-spacing:1px;
  96.     text-transform:uppercase;
  97.     line-height:100%;
  98.     color:#ffffff;
  99.     text-align:center;
  100.     margin-left:18px;
  101.     padding:4px;
  102.     min-width:45px;
  103.     max-width: ;
  104.     z-index:9999;}
  105.  
  106.  
  107.  
  108.  
  109. #body{
  110.     background:#ffffff;}
  111.    
  112. #box {
  113.     position:absolute;
  114.     top:200px;
  115.     left:50%;
  116.     margin-left:-245px;
  117.     height:auto;
  118.     font-size:11px; /* main font size */
  119.     text-align:justify;
  120.     width:440px; /* main width */
  121.     border:5px solid #000000; /* main border colour and width */
  122.     font-family:'Noto Sans'; /* main font family */
  123.     padding:10px;
  124.     color:#000000;}
  125.  
  126. #sidebar {
  127.     position:absolute;
  128.     font-family:'Noto sans'; /* sidebar font family */
  129.     color:#ffffff; /* sidebar text colour */
  130.     font-size:9px; /* sidebar font size */
  131.     width:160px; /* sidebar width */
  132.     left:50%;
  133.     margin-top:110px;
  134.     margin-left:-450px;
  135.     padding: 13px;
  136.     background:#000000; /* sidebar background colour */
  137.     height:120px;
  138.     text-align:justify;
  139.     word-spacing:1px;}
  140.  
  141. #sidebar a{
  142.     color:#ffffff;}
  143.  
  144. .title {
  145.     font-family:'Playfair Display'; /* title font family */
  146.     color:#ffffff; /* title text colour */
  147.     letter-spacing:2px;
  148.     font-size:17px;
  149.     margin-left:20px;
  150.     margin-top:20px;
  151.     border:2px solid #ffffff; /* title border colour and width */
  152.     padding:5px;
  153.     width:210px;
  154.     background:#000000; /* title background colour */
  155.     text-align:center;}
  156.  
  157. .heading {
  158.     font-size:25px; /* section heading text size */
  159.     color:#000000; /* section heading text colour */
  160.     margin-bottom:15px;
  161.     font-family:'Playfair Display'; /* section heading font family */
  162.     font-style:italic; /* italic */
  163.     position:relative;
  164.     border-bottom:2px solid #000000;}
  165.  
  166. #navlinks {
  167.     background-color: #000000;
  168.     font-family:'Noto Sans';
  169.     text-transform:normal;
  170.     width: 115px;
  171.     padding:5px;
  172.     margin-left:15px;
  173.     display:block;
  174.     text-align: center;
  175.     letter-spacing: 1px;
  176.     font-weight: normal;}
  177.  
  178. .navlinks li{
  179.     list-style:none;
  180.     margin-left:-15px;
  181.     width:110px;}
  182.  
  183. #linkslinks {
  184.     display:inline-block;
  185.     width:422px;
  186.     margin-top:20px;}
  187.  
  188. #links {
  189.     font-family:'Noto Sans';
  190.     display:block;
  191.     text-align:center;}
  192.  
  193. #linkslinks a.links {
  194.     display:inline-block;
  195.     text-align:center;
  196.     text-transform: uppercase; /* uppercase */
  197.     line-height: 100%;
  198.     width:130px;
  199.     color: #ffffff; /* links colour */
  200.     font-size:9px; /* links font size */
  201.     font-family:'Noto Sans'; /* links font family */
  202.     padding:20px;
  203.     background:#000000; /* links background colour */
  204.     margin-bottom:20px;
  205.     margin-left:20px;
  206.     border:1px solid transparent;}
  207.  
  208. #linkslinks a.links:hover {
  209.     background:#ffffff;
  210.     color:#000000;
  211.     border:1px solid #000000;}
  212.  
  213. #blogrollicons {
  214.     width:420px;
  215.     padding:10px;  
  216.     margin:10px;}
  217.  
  218. #blogrollicons  img{
  219.     background:#ffffff;
  220.     border:1px solid #000000;
  221.     padding:10px;
  222.     width:30px;
  223.     height:30px;
  224.     opacity:1;
  225.     margin:5px;
  226. -webkit-transition:all 0.3s ease-in-out;
  227. -moz-transition:all 0.3s ease-in-out;
  228. -o-transition:all 0.3s ease-in-out;
  229. transition:all 0.3s ease-in-out;}
  230.  
  231.  
  232.     {CustomCSS}
  233.  
  234.     </style></head>
  235.  
  236. <body>
  237.  
  238.  
  239. <div id="sidebar">
  240. <div class="title">blog name</div>
  241. <p>
  242. <u>name:</u> NAME <!--name here-->
  243. <br><u>age:</u> AGE <!--age here-->
  244. <br><u>location:</u> LOCATION <!--location here-->
  245. <!--you can also add in a hit counter and an online user code here-->
  246. </div>
  247.  
  248.  
  249.  
  250. <div id="box">
  251. <div id="nav">
  252.  
  253. <br>
  254.  
  255. <table>
  256. <tr>
  257. <td valign="top"><ul class="navlinks"><li>
  258. &rarr; <a href="#aboutme" title="ABOUT ME">about me</a></li></ul>
  259.  
  260. <ul class="navlinks"><li>
  261. &rarr; <a href="/" title="BLOG">back to blog</a></li></ul>
  262.  
  263. <td valign="top"><ul class="navlinks"><li>
  264. &rarr; <a href="#links" title="LINKS">links</a></li></ul>
  265.  
  266. <ul class="navlinks"><li>
  267. &rarr; <a href="/ask" title="CONTACT">contact</a></li></ul>
  268.  
  269. <td valign="top"><ul class="navlinks"><li>
  270. &rarr; <a href="#blogroll" title="BLOGROLL">blogroll</a></li></ul>
  271.  
  272. <ul class="navlinks"><li>
  273. &rarr; <a href="http://florels.tumblr.com/" target="_blank" title="THEME">theme</a></li></ul>
  274. </tr>
  275. </table>
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284.  
  285. <!------------------------------about me---------------------------------->
  286.   <div id="one">
  287.   <a id="aboutme"></a><br><br><br><br>
  288. <div class="heading">about me</div>
  289. write whatever you want here! the description can be as long as you want and can include whatever you want, you can customize it as you wish :))))
  290. </div>
  291. <!----------------------------end about me-------------------------------->
  292.  
  293.  
  294.  
  295.  
  296.  
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303.  
  304. <!--------------------------------links----------------------------------->
  305.   <div id="two">
  306.   <a id="links"></a><br><br><br><br>
  307. <div class="heading">links</div>
  308. <div id="linkslinks">
  309. <a class="links" href="/" target="_blank">link name</a>
  310. <a class="links" href="/" target="_blank">link name</a>
  311. <a class="links" href="/" target="_blank">link name</a>
  312. <a class="links" href="/" target="_blank">link name</a>
  313. <a class="links" href="/" target="_blank">link name</a>
  314. </div>
  315. <!--feel free to add as many links as you want! just keep on copying and pasting the code-->
  316. <!------------------------------end links--------------------------------->
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324.  
  325.  
  326.  
  327.  
  328.  
  329. <!------------------------------blogroll---------------------------------->
  330.   <div id="three">
  331.   <a id="blogroll"></a><br><br><br><br>
  332. <div class="heading">blogroll</div>
  333. <div id="blogrollicons">
  334. <center>
  335. {block:Following}{block:Followed}<a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-30}" /></a>{/block:Followed}{/block:Following}
  336. </center>
  337. </div>
  338.  
  339. </div>
  340. <!----------------------------end blogroll-------------------------------->
  341.  
  342.  
  343. <br><br><br><br>
  344. </div></div></div>
  345.  
  346.  
  347. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  348. <script type="text/javascript">
  349. $(document).ready(function(){
  350.                 $(".contactLink").click(function(){
  351.                     if ($("#contactForm").is(":hidden")){
  352.                         $("#contactForm").slideDown("slow");
  353.                     }
  354.                     else{
  355.                         $("#contactForm").slideUp("slow");
  356.                     }
  357.                 });
  358.             });
  359.             function closeForm(){
  360.                 $("#messageSent").show("slow");
  361.                 setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
  362.            }
  363.  
  364. $(document).ready(function() {
  365.   function filterPath(string) {
  366.     return string
  367.       .replace(/^\//,'')
  368.       .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
  369.       .replace(/\/$/,'');
  370.   }
  371.   $('a[href*=#]').each(function() {
  372.     if ( filterPath(location.pathname) == filterPath(this.pathname)
  373.     && location.hostname == this.hostname
  374.    && this.hash.replace(/#/,'') ) {
  375.      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
  376.       var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
  377.        if ($target) {
  378.          var targetOffset = $target.offset().top;
  379.          $(this).click(function() {
  380.            $('html, body').animate({scrollTop: targetOffset}, 1000);
  381.            var d = document.createElement("div");
  382.         d.style.height = "101%";
  383.         d.style.overflow = "hidden";
  384.         document.body.appendChild(d);
  385.         window.scrollTo(0,scrollToM);
  386.         setTimeout(function() {
  387.         d.parentNode.removeChild(d);
  388.             }, 10);
  389.            return false;
  390.          });
  391.       }
  392.     }
  393.   });
  394. });
  395. /*! Smooth Scroll - v1.4.5 - 2012-07-22
  396. * Copyright (c) 2012 Karl Swedberg; Licensed MIT, GPL */
  397. </script>
  398.  
  399.  
  400. <a id="scrlTop" title="Back to Top" href="#" style="position: fixed; bottom: 5px; right:50%; margin-right:-275px;"><img src="http://media.tumblr.com/394b69ad95f12410b5cba8b4a0a5f787/tumblr_inline_mlmxsybez41qfamg6.png" width="50px"></a>
  401.  
  402.  
  403.  
  404. </body>
  405.  
  406.  
  407.  
  408. </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!