API tools faq
paste
the49thname

Navigation 01

the49thname
Sep 19th, 2015
3,090
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.31 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. <head>
  4.  
  5. <!-- navigation 01
  6.  
  7. themes by ro (the49thname) / the49ththeme.tumblr.com
  8. all-in-one base code by neonbikethemes / neonbikethemes.tumblr.com
  9. don't remove the credit, use as a base code, or claim as your own work.
  10. edit as much as you want, and feel free to send me any queries/problems.
  11.  
  12. -->
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16. <title>{Title}</title>
  17.  
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <meta name="description" content="{MetaDescription}" />
  23.  
  24. <!-- fonts - do not remove -->
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
  27.  
  28. <!-- all-in-one scripts - do not remove -->
  29.  
  30. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  31.  
  32. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  33.  
  34. <!-- tooltip script -->
  35.  
  36. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  37. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  38. <script>
  39. (function($){
  40. $(document).ready(function(){
  41. $("a[title]").style_my_tooltips({
  42. tip_follows_cursor:true,
  43. tip_delay_time:90,
  44. tip_fade_speed:600,
  45. attribute:"title"
  46. });
  47. });
  48. })(jQuery);
  49. </script>
  50.  
  51. <style type="text/css">
  52.  
  53. ::-webkit-scrollbar-thumb {
  54. z-index:9999999;
  55. position:relative;
  56. height:auto;
  57. background-color:#888; /* change scrollbar thumb colour */
  58. }
  59.  
  60. ::-webkit-scrollbar {
  61. height:5px;
  62. width:5px;
  63. background-color:#f6f6f6; /* change scrollbar background colour */
  64. }
  65.  
  66. /* basics */
  67.  
  68. body {
  69. color:#888; /* change text colour */
  70. background-color:#f6f6f6; /* change background color */
  71. font-family: 'Roboto', sans-serif;
  72. font-size:10px; /* change font size */
  73. margin:0;
  74. line-height:14px;
  75. letter-spacing:1px;
  76. text-align:justify;
  77. word-wrap:break-word;
  78. }
  79.  
  80. blockquote {
  81. padding:5px 0px 5px 5px;
  82. border-left:1px solid #ccc; /* change blockquote border colour */
  83. margin-left:20px;
  84. }
  85.  
  86. b, strong {color:#000;} /* change bold colour */
  87.  
  88. i, em {color:#ccc;} /* change italic colour */
  89.  
  90. u {color:#888;text-transform:none;} /* change underline colour */
  91.  
  92. a {
  93. color:#ccc; /* change link colour */
  94. text-transform:uppercase;
  95. text-decoration:none;
  96. line-height:14px;
  97. -moz-transition-duration:1s;
  98. -webkit-transition-duration:1s;
  99. -o-transition-duration:1s;
  100. }
  101.  
  102. a:hover {
  103. color:#888; /* change link hover colour */
  104. -moz-transition-duration:1s;
  105. -webkit-transition-duration:1s;
  106. -o-transition-duration:1s;
  107. }
  108.  
  109. p {margin:10px;}
  110.  
  111. h1 {
  112. font-size:14px;
  113. font-family: 'Roboto', sans-serif;
  114. text-align:left;
  115. text-transform:uppercase;
  116. letter-spacing:1px;
  117. color:#fff; /* change heading text colour */
  118. background-color:#ccc; /* change heading bg colour */
  119. padding:10px;
  120. margin-top:0px;
  121. }
  122.  
  123. /* borders */
  124.  
  125. #border1 {
  126. top:0;
  127. left:0;
  128. width:100%;
  129. height:70px;
  130. background-color:#fff; /* change top border bg colour */
  131. z-index:9;
  132. position:fixed;
  133. }
  134.  
  135. #border2 {
  136. top:0;
  137. right:0;
  138. width:30px;
  139. height:100%;
  140. background-color:#fff; /* change right border bg colour */
  141. z-index:9;
  142. position:fixed;
  143. }
  144.  
  145. #border3 {
  146. bottom:0;
  147. left:0;
  148. width:100%;
  149. height:30px;
  150. background-color:#fff; /* change bottom border bg colour */
  151. z-index:9;
  152. position:fixed;
  153. }
  154.  
  155. #border4 {
  156. top:0;
  157. left:0;
  158. width:30px;
  159. height:100%;
  160. background-color:#fff; /* change left border bg colour */
  161. z-index:9;
  162. position:fixed;
  163. }
  164.  
  165. /* header */
  166.  
  167. #top {
  168. position:fixed;
  169. top:0px;
  170. left:0px;
  171. width:100%;
  172. height:50px;
  173. z-index:9999;
  174. overflow:hidden;
  175. }
  176.  
  177. .title {
  178. float:left;
  179. color:#888; /* change header title text colour */
  180. font-family: 'Roboto Condensed', sans-serif;
  181. font-size:40px;
  182. font-weight:700;
  183. text-transform:uppercase;
  184. letter-spacing:8px;
  185. padding:10px;
  186. margin-top:17px;
  187. margin-left:30px;
  188. }
  189.  
  190. #nav {
  191. position:absolute;
  192. margin-top:8px;
  193. margin-left:300px;
  194. text-align:left;
  195. }
  196.  
  197. .tabs {
  198. width:100%;
  199. margin-left:0px;
  200. display:inline-block;
  201. }
  202.  
  203. .tab-links:after {
  204. display:block;
  205. clear:both;
  206. content:'';
  207. }
  208.  
  209. .tab-links li {
  210. display:inline-block;
  211. padding:10px;
  212. list-style:none;
  213. text-transform:uppercase;
  214. }
  215.  
  216. .tab-links a {
  217. font-family: 'Roboto Condensed', sans-serif;
  218. font-size:14px;
  219. text-transform:uppercase;
  220. letter-spacing:1px;
  221. color:#ccc; /* change header link colour */
  222. padding:8px 4px;
  223. -moz-transition-duration:1s;
  224. -webkit-transition-duration:1s;
  225. -o-transition-duration:1s;
  226. }
  227.  
  228. .tab-links a:hover {
  229. color:#888; /* change header link hover colour */
  230. -moz-transition-duration:1s;
  231. -webkit-transition-duration:1s;
  232. -o-transition-duration:1s;
  233. }
  234.  
  235. li.active a, li.active a:hover {
  236. color:#888; /* change header link selected colour */
  237. -moz-transition-duration:1s;
  238. -webkit-transition-duration:1s;
  239. -o-transition-duration:1s;
  240. }
  241.  
  242. .tab-content {}
  243. .tab {display:none;}
  244. .tab.active {display:block;}
  245.  
  246. /* posts */
  247.  
  248. .tabcontent {
  249. width:100%;
  250. position:static;
  251. margin-left:auto;
  252. margin-right:auto;
  253. margin-top:70px;
  254. text-align:justify;
  255. background:transparent;
  256. }
  257.  
  258. #container {
  259. width:600px;
  260. height:100%;
  261. margin-left:auto;
  262. margin-right:auto;
  263. padding:20px 0px;
  264. }
  265.  
  266. #posts {
  267. background-color:#fff; /* change post colour */
  268. width:500px;
  269. padding:50px;
  270. margin-left:auto;
  271. margin-right:auto;
  272. margin-top:40px;
  273. margin-bottom:40px;
  274. }
  275.  
  276. #posts li {margin:0px 10px;}
  277.  
  278. h2 {
  279. color:#fff; /* change tags header colour */
  280. background-color:#ccc; /* change tags header bg colour */
  281. width:480px;
  282. font-size:12px;
  283. font-weight:700;
  284. letter-spacing:3px;
  285. text-transform:uppercase;
  286. text-align:left;
  287. padding:10px;
  288. margin-top:0px;
  289. }
  290.  
  291. .tags {text-align:left;overflow:auto;margin-bottom:10px;}
  292.  
  293. .tags a {
  294. color:#888; /* change tags colour */
  295. background-color:#f6f6f6; /* change tags bg colour */
  296. font-size:10px;
  297. font-weight:bold;
  298. text-transform:uppercase;
  299. width:149px;
  300. overflow:hidden;
  301. display:inline-block;
  302. padding:5px 5px 5px 10px;
  303. -moz-transition-duration:1s;
  304. -webkit-transition-duration:1s;
  305. -o-transition-duration:1s;
  306. }
  307.  
  308. .tags a:hover {
  309. color:#fff; /* change tags hover colour */
  310. background-color:#eee; /* change tags bg hover colour */
  311. -moz-transition-duration:1s;
  312. -webkit-transition-duration:1s;
  313. -o-transition-duration:1s;
  314. }
  315.  
  316. #blogrollcont {text-align:center;}
  317.  
  318. #blogroll {display:inline-block;margin:7px;}
  319.  
  320. #blogroll img {
  321. opacity:0.7;
  322. -moz-transition-duration:1s;
  323. -webkit-transition-duration:1s;
  324. -o-transition-duration:1s;
  325. }
  326.  
  327. #blogroll:hover img {
  328. opacity:1;
  329. -moz-transition-duration:1s;
  330. -webkit-transition-duration:1s;
  331. -o-transition-duration:1s;
  332. }
  333.  
  334. #profileimg {
  335. width:150px;
  336. height:150px;
  337. float:right;
  338. margin:10px 20px 0px 0px;
  339. }
  340.  
  341. #profiledesc {
  342. position:relative;
  343. width:250px;
  344. height:relative;
  345. padding:10px;
  346. margin:25px 0px 30px 20px;
  347. color:#888; /* change profile desc text colour */
  348. background-color:#f6f6f6; /* change profile desc bg colour */
  349. text-transform:uppercase;
  350. font-size:9px;
  351. text-align:left;
  352. }
  353.  
  354. #profiledesc b {
  355. color:#000; /* change profile desc bold colour */
  356. }
  357.  
  358. /* extras */
  359.  
  360. #s-m-t-tooltip {
  361. z-index:9999999999;
  362. color:#fff; /* change tooltips text colour */
  363. background-color:#888; /* change tooltips bg colour */
  364. font-size:9px;
  365. line-height:11px;
  366. font-family: 'Roboto Condensed', sans-serif;
  367. letter-spacing:1px;
  368. text-transform:uppercase;
  369. max-width:150px;
  370. word-wrap:break-word;
  371. padding:2px 5px 2px 5px;
  372. display:block;
  373. margin:24px 14px 7px 12px;
  374. }
  375.  
  376. ::selection {
  377. color:#fff; /* change selection text colour */
  378. background-color:#888; /* change selection text bg colour */
  379. }
  380.  
  381. /* credit - do not remove, alter, or move to another page */
  382.  
  383. #credit {
  384. position:fixed;
  385. bottom:54px;
  386. right:50px;
  387. width:relative;
  388. height:relative;
  389. text-align:center;
  390. z-index:9999999;
  391. }
  392.  
  393. #credit a {
  394. font-size:10px;
  395. color:#fff;
  396. background-color:#888;
  397. padding:4px;
  398. -moz-transition-duration:1s;
  399. -webkit-transition-duration:1s;
  400. -o-transition-duration:1s;
  401. }
  402.  
  403. #credit a:hover {
  404. color:#888;
  405. background-color:#fff;
  406. -moz-transition-duration:1s;
  407. -webkit-transition-duration:1s;
  408. -o-transition-duration:1s;
  409. }
  410.  
  411. </style>
  412. </head>
  413. <body>
  414.  
  415. <div id="border1"></div>
  416. <div id="border2"></div>
  417. <div id="border3"></div>
  418. <div id="border4"></div>
  419.  
  420. <div id="top">
  421.  
  422. <div class="title">navigation</div>
  423.  
  424. <div id="nav">
  425. <div class="tabs">
  426. <ul class="tab-links">
  427. <li><a href="/">Home</a></li>
  428.  
  429. <!-- you can change the tab link names below to whatever you wish i.e. about, edits, etc. if you wish to add a link to an extra tab please copy and paste:
  430.  
  431. - FROM HERE - <li><a href="#tabno.">Tab No.</a></li> - TO HERE -
  432.  
  433. to add another tab please scroll down to after --- TAB 4 --- for instructions
  434.  
  435. -->
  436.  
  437. <li class="active"><a href="#tab1">About</a></li>
  438. <li><a href="#tab2">Tags</a></li>
  439. <li><a href="#tab3">Blogroll</a></li>
  440. <li><a href="#tab4">Tab 4</a></li>
  441. </ul>
  442. </div>
  443. </div>
  444.  
  445. </div>
  446.  
  447. <div class="tabs">
  448.  
  449. <!-- --------------------------- TAB 1 -------------------------- -->
  450.  
  451. <div class="tab-content">
  452.  
  453. <div id="tab1" class="tab active">
  454. <div class="tabcontent">
  455. <div id="container">
  456. <div id="posts">
  457.  
  458. <h1>About</h1>
  459. <div id="profileimg"><img src="https://68.media.tumblr.com/b7aa2edb4906d8ee70468bef8ea4a904/tumblr_inline_nt2xbuITHm1rrt3vb_540.png" style="width:150px;"></a></div>
  460. <div id="profiledesc">
  461. <p><b>Name:</b>
  462. <br><b>Age:</b>
  463. <br><b>Gender:</b>
  464. <br><b>Nationality:</b>
  465. <br><b>Occupation:</b>
  466. <br><b>Interests:</b>
  467. <br><b>Blog type:</b>
  468. </p>
  469. </div>
  470.  
  471. <p>You can put more content here.</p>
  472.  
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477.  
  478. <!-- -------------------------- TAB 2 -------------------------- -->
  479.  
  480. <div id="tab2" class="tab">
  481. <div class="tabcontent">
  482. <div id="container">
  483. <div id="posts">
  484.  
  485. <!-- to add more tags copy and paste:
  486.  
  487. - FROM HERE -
  488. <h2>Name</h2>
  489. <div class="tags">
  490. <a href="URL goes here" target="_blank">#Tag</a>
  491. <a href="URL goes here" target="_blank">#Tag</a>
  492. <a href="URL goes here" target="_blank">#Tag</a>
  493. <a href="URL goes here" target="_blank">#Tag</a>
  494. <a href="URL goes here" target="_blank">#Tag</a>
  495. <a href="URL goes here" target="_blank">#Tag</a>
  496. </div>
  497. - TO HERE -
  498.  
  499. -->
  500.  
  501. <h2>Name</h2>
  502. <div class="tags">
  503. <a href="URL goes here" target="_blank">#Tag</a>
  504. <a href="URL goes here" target="_blank">#Tag</a>
  505. <a href="URL goes here" target="_blank">#Tag</a>
  506. <a href="URL goes here" target="_blank">#Tag</a>
  507. <a href="URL goes here" target="_blank">#Tag</a>
  508. <a href="URL goes here" target="_blank">#Tag</a>
  509. </div>
  510.  
  511. <h2>Name</h2>
  512. <div class="tags">
  513. <a href="URL goes here" target="_blank">#Tag</a>
  514. <a href="URL goes here" target="_blank">#Tag</a>
  515. <a href="URL goes here" target="_blank">#Tag</a>
  516. <a href="URL goes here" target="_blank">#Tag</a>
  517. <a href="URL goes here" target="_blank">#Tag</a>
  518. <a href="URL goes here" target="_blank">#Tag</a>
  519. </div>
  520.  
  521. <h2>Name</h2>
  522. <div class="tags">
  523. <a href="URL goes here" target="_blank">#Tag</a>
  524. <a href="URL goes here" target="_blank">#Tag</a>
  525. <a href="URL goes here" target="_blank">#Tag</a>
  526. <a href="URL goes here" target="_blank">#Tag</a>
  527. <a href="URL goes here" target="_blank">#Tag</a>
  528. <a href="URL goes here" target="_blank">#Tag</a>
  529. </div>
  530.  
  531. <h2>Name</h2>
  532. <div class="tags">
  533. <a href="URL goes here" target="_blank">#Tag</a>
  534. <a href="URL goes here" target="_blank">#Tag</a>
  535. <a href="URL goes here" target="_blank">#Tag</a>
  536. <a href="URL goes here" target="_blank">#Tag</a>
  537. <a href="URL goes here" target="_blank">#Tag</a>
  538. <a href="URL goes here" target="_blank">#Tag</a>
  539. </div>
  540.  
  541. </div>
  542. </div>
  543. </div>
  544. </div>
  545.  
  546. <!-- -------------------------- TAB 3 -------------------------- -->
  547.  
  548. <div id="tab3" class="tab">
  549. <div class="tabcontent">
  550. <div id="container">
  551. <div id="posts">
  552.  
  553. <div id="blogrollcont">
  554. {block:Following}{block:Followed}
  555. <div id="blogroll" class="following"><a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-40}"/></a></div>
  556. {/block:Followed}{/block:Following}
  557. </div>
  558.  
  559. </div>
  560. </div>
  561. </div>
  562. </div>
  563.  
  564. <!-- -------------------------- TAB 4 -------------------------- -->
  565.  
  566. <div id="tab4" class="tab">
  567. <div class="tabcontent">
  568. <div id="container">
  569. <div id="posts">
  570.  
  571. <h1>Title</h1>
  572. <p>Content goes here. You can make this tab a page full of memes, whatever you want really.</p>
  573.  
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578.  
  579. <!-- if you would like to add more tabs please copy and paste:
  580.  
  581. - FROM HERE - <div id="tabno." class="tab">
  582. <div class="tabcontent">
  583. <div id="container">
  584. <div id="posts">
  585.  
  586. <h1>Title</h1>
  587. <p>Content goes here. [tab 4]</p>
  588.  
  589. </div>
  590. </div>
  591. </div>
  592. </div> - TO HERE -
  593.  
  594. Remember to change the name "tabno." to the next number along from your last tab e.g. tab5 if your last tab number was "tab4". Also remember to add a link to the tab(s) you have added (scroll up to the nav section for instructions).
  595.  
  596. -->
  597.  
  598. <!-- END OF TABS -->
  599.  
  600. </div>
  601. </div>
  602. </div>
  603. </div>
  604.  
  605. <!-- all-in-one jquery - DO NOT REMOVE -->
  606.  
  607. <script>
  608. $(document).ready(function() {
  609. $('.tabs .tab-links a').on('click', function(e) {
  610. var currentAttrValue = $(this).attr('href');
  611.  
  612. // Show/Hide Tabs
  613. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  614.  
  615. // Change/remove current tab to active
  616. $(this).parent('li').addClass('active').siblings().removeClass('active');
  617.  
  618. e.preventDefault();
  619. });
  620. });
  621. </script>
  622.  
  623. <script>
  624. $(document).ready(function() {
  625. $('#filterOptions li a').click(function() {
  626. // fetch the class of the clicked item
  627. var ourClass = $(this).attr('class');
  628.  
  629. // reset the active class on all the buttons
  630. $('#filterOptions li').removeClass('active');
  631. // update the active state on our clicked button
  632. $(this).parent().addClass('active');
  633.  
  634. if(ourClass == 'all') {
  635. // show all our items
  636. $('#ourHolder').children('div.item').show();
  637. }
  638. else {
  639. // hide all elements that don't share ourClass
  640. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  641. // show all elements that do share ourClass
  642. $('#ourHolder').children('div.' + ourClass).show();
  643. }
  644. return false;
  645. });
  646. });
  647. </script>
  648.  
  649. <div id="credit"><a href="http://the49thname.tumblr.com/" title="made by the49thname">49</a>
  650. </div>
  651.  
  652. </body>
  653. </html>
  654. <!--
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!