API tools faq
paste
the49thname

Navigation 03

the49thname
Nov 5th, 2015
2,885
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.65 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 03
  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 -->
  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:#ff4141; /* change scrollbar thumb colour */
  58. }
  59.  
  60. ::-webkit-scrollbar {height:5px;width:5px;background-color:transparent;}
  61.  
  62. /* basics */
  63.  
  64. body {
  65. color:#888; /* change text colour */
  66. background-color:#fff; /* change background colour */
  67. font-family:'Roboto', sans-serif;
  68. font-size:10px;
  69. margin:0;
  70. line-height:14px;
  71. letter-spacing:1px;
  72. text-align:justify;
  73. word-wrap:break-word;
  74. }
  75.  
  76. blockquote {
  77. margin:0px 0px 0px 20px;
  78. padding:2px 0px 2px 5px;
  79. border-left:1px solid #ff4141; /* change blockquote border colour */
  80. }
  81.  
  82. b, strong {color:#000;} /* change bold colour */
  83.  
  84. i, em {color:#ccc;} /* change italic colour */
  85.  
  86. u {color:#888;text-transform:none;} /* change underline colour */
  87.  
  88. a {
  89. color:#ccc; /* change link colour */
  90. text-transform:uppercase;
  91. text-decoration:none;
  92. -moz-transition-duration:1s;
  93. -webkit-transition-duration:1s;
  94. -o-transition-duration:1s;
  95. }
  96.  
  97. a:hover {
  98. color:#888; /* change link hover colour */
  99. -moz-transition-duration:1s;
  100. -webkit-transition-duration:1s;
  101. -o-transition-duration:1s;
  102. }
  103.  
  104. p {margin:10px;}
  105.  
  106. h1 {
  107. font-size:14px;
  108. font-family: 'Roboto', sans-serif;
  109. text-align:left;
  110. text-transform:uppercase;
  111. letter-spacing:1px;
  112. color:#fff; /* change heading text colour */
  113. background-color:#ff6767; /* change heading bg colour */
  114. padding:10px;
  115. margin-top:0px;
  116. }
  117.  
  118. /* sidebar */
  119.  
  120. .icon {
  121. width:80px;
  122. height:80px;
  123. position:fixed;
  124. top:100px;
  125. left:300px;
  126. box-sizing:border-box;
  127. z-index:9;
  128. }
  129.  
  130. .icon img {
  131. width:80px;
  132. height:80px;
  133. border-radius:20px;
  134. opacity:1;
  135. -moz-transition-duration:1s;
  136. -webkit-transition-duration:1s;
  137. -o-transition-duration:1s;
  138. }
  139.  
  140. #sidebar {
  141. position:fixed;
  142. top:190px;
  143. left:250px;
  144. width:150px;
  145. height:relative;
  146. background:transparent;
  147. text-align:center;
  148. display:block;
  149. z-index:9999;
  150. }
  151.  
  152. #nav {display:block;text-align:center;}
  153.  
  154. .tabs {
  155. width:100%;
  156. margin-left:0px;
  157. display:inline-block;
  158. }
  159.  
  160. .tab-links:after {
  161. display:block;
  162. clear:both;
  163. content:'';
  164. }
  165.  
  166. .tab-links li {
  167. list-style:none;
  168. text-transform:uppercase;
  169. margin-top:5px;
  170. margin-bottom:5px;
  171. }
  172.  
  173. .tab-links a {
  174. display:block;
  175. font-family: 'Roboto Condensed', sans-serif;
  176. font-size:10px;
  177. text-transform:uppercase;
  178. letter-spacing:2px;
  179. color:#888; /* change nav links text colour */
  180. background-color:#f6f6f6; /* change nav links bg colour */
  181. padding:8px;
  182. -moz-transition-duration:1s;
  183. -webkit-transition-duration:1s;
  184. -o-transition-duration:1s;
  185. }
  186.  
  187. .tab-links a:hover {
  188. color:#fff; /* change nav links text hover colour */
  189. background-color:#ff4141; /* change nav links bg hover colour */
  190. -moz-transition-duration:1s;
  191. -webkit-transition-duration:1s;
  192. -o-transition-duration:1s;
  193. }
  194.  
  195. li.active a, li.active a:hover {
  196. color:#fff; /* change nav links selected text colour */
  197. background-color:#ff4141; /* change nav links selected bg colour */
  198. -moz-transition-duration:1s;
  199. -webkit-transition-duration:1s;
  200. -o-transition-duration:1s;
  201. }
  202.  
  203. .tab-content {}
  204. .tab {display:none;}
  205. .tab.active {display:block;}
  206.  
  207. /* posts */
  208.  
  209. #container {
  210. position:fixed;
  211. left:500px;
  212. top:100px;
  213. width:600px;
  214. height:70%;
  215. border:1px solid #f6f6f6; /* change container border colour */
  216. overflow-x:hidden;
  217. overflow-y:auto;
  218. }
  219.  
  220. .tabcontent {
  221. position:static;
  222. margin-left:auto;
  223. margin-top:auto;
  224. width:100%;
  225. }
  226.  
  227. #posts {
  228. background-color:#fff; /* change posts bg colour */
  229. width:500px;
  230. margin-left:auto;
  231. margin-right:auto;
  232. padding:50px;
  233. line-height:14px;
  234. letter-spacing:1px;
  235. }
  236.  
  237. #posts ul, ol {margin-left:15px;padding:0px!important;}
  238.  
  239. #posts li {margin:0px 10px;}
  240.  
  241. #blogrollcont {text-align:center;}
  242.  
  243. #blogroll {display:inline-block;margin:7px;}
  244.  
  245. #blogroll img {
  246. opacity:0.7;
  247. -moz-transition-duration:1s;
  248. -webkit-transition-duration:1s;
  249. -o-transition-duration:1s;
  250. }
  251.  
  252. #blogroll:hover img {
  253. opacity:1;
  254. -moz-transition-duration:1s;
  255. -webkit-transition-duration:1s;
  256. -o-transition-duration:1s;
  257. }
  258.  
  259. h2 {
  260. color:#fff; /* change tags header colour */
  261. background-color:#ff6767; /* change tags header bg colour */
  262. width:480px;
  263. font-size:12px;
  264. font-weight:700;
  265. letter-spacing:3px;
  266. text-transform:uppercase;
  267. text-align:left;
  268. padding:10px;
  269. margin-top:0px;
  270. }
  271.  
  272. .tags {text-align:left;margin-bottom:10px;}
  273.  
  274. .tags a {
  275. color:#888; /* change tags colour */
  276. background-color:#f6f6f6; /* change tags bg colour */
  277. font-size:10px;
  278. font-weight:bold;
  279. text-transform:uppercase;
  280. width:149px;
  281. overflow:hidden;
  282. display:inline-block;
  283. padding:5px 5px 5px 10px;
  284. -moz-transition-duration:1s;
  285. -webkit-transition-duration:1s;
  286. -o-transition-duration:1s;
  287. }
  288.  
  289. .tags a:hover {
  290. color:#fff; /* change tags hover colour */
  291. background-color:#ff6767; /* change tags hover bg colour */
  292. -moz-transition-duration:1s;
  293. -webkit-transition-duration:1s;
  294. -o-transition-duration:1s;
  295. }
  296.  
  297. /* extras */
  298.  
  299. #s-m-t-tooltip {
  300. z-index:9999999999;
  301. color:#fff; /* change tooltips text colour */
  302. background:#ff4141; /* change tooltips bg colour */
  303. font-size:9px;
  304. line-height:11px;
  305. font-family: 'Roboto Condensed', sans-serif;
  306. letter-spacing:1px;
  307. text-transform:uppercase;
  308. max-width:150px;
  309. word-wrap:break-word;
  310. padding:2px 5px 2px 5px;
  311. display:block;
  312. margin:24px 14px 7px 12px;
  313. }
  314.  
  315. ::selection {
  316. color:#fff; /* change selection text colour */
  317. background:#ff41414; /* change selection bg colour */
  318. }
  319.  
  320. /* credit - do not remove, alter, or move to another page */
  321.  
  322. #credit {
  323. position:fixed;
  324. bottom:14px;
  325. right:10px;
  326. width:relative;
  327. height:relative;
  328. text-align:center;
  329. z-index:9999999;
  330. }
  331.  
  332. #credit a {
  333. font-size:10px;
  334. color:#fff;
  335. background-color:#ff4141;
  336. padding:4px;
  337. -moz-transition-duration:1s;
  338. -webkit-transition-duration:1s;
  339. -o-transition-duration:1s;
  340. }
  341.  
  342. #credit a:hover {
  343. color:#ff4141;
  344. background-color:#fff;
  345. -moz-transition-duration:1s;
  346. -webkit-transition-duration:1s;
  347. -o-transition-duration:1s;
  348. }
  349.  
  350. </style>
  351. </head>
  352. <body>
  353.  
  354. <!-- replace the url after "img src=" with your own icon's url -->
  355.  
  356. <div class="icon"><img src="https://68.media.tumblr.com/3dd89806f838c71259b375ac3974f67d/tumblr_inline_nt8dslXvuk1rrt3vb_540.png"></div>
  357.  
  358. <div id="sidebar">
  359. <div id="nav">
  360. <div class="tabs">
  361. <ul class="tab-links">
  362. <li><a href="/">Home</a></li>
  363. <li class="active"><a href="#tab1">Tags</a></li>
  364. <li><a href="#tab2">Blogroll</a></li>
  365.  
  366. <!-- you can change the tab names below to whatever you like, just erase "tab x" to e.g. "about"/"edits"/etc. -->
  367.  
  368. <li><a href="#tab3">Tab 3</a></li>
  369. <li><a href="#tab4">Tab 4</a></li>
  370. <li><a href="#tab5">Tab 5</a></li>
  371. </ul>
  372. </div>
  373. </div>
  374. </div> <!-- sidebar end -->
  375.  
  376. <div id="container">
  377.  
  378. <div class="tabs">
  379.  
  380. <!-- --------------------------- TAB 1 -------------------------- -->
  381.  
  382. <div class="tab-content">
  383. <div id="tab1" class="tab active">
  384.  
  385. <div class="tabcontent">
  386. <div id="posts">
  387.  
  388. <!-- to add more tags copy and paste:
  389.  
  390. - FROM HERE -
  391. <h2>Name</h2>
  392. <div class="tags">
  393. <a href="URL goes here" target="_blank">#Tag</a>
  394. <a href="URL goes here" target="_blank">#Tag</a>
  395. <a href="URL goes here" target="_blank">#Tag</a>
  396. <a href="URL goes here" target="_blank">#Tag</a>
  397. <a href="URL goes here" target="_blank">#Tag</a>
  398. <a href="URL goes here" target="_blank">#Tag</a>
  399. </div>
  400. - TO HERE -
  401.  
  402. -->
  403.  
  404. <h2>Name</h2>
  405. <div class="tags">
  406. <a href="URL goes here" target="_blank">#Tag</a>
  407. <a href="URL goes here" target="_blank">#Tag</a>
  408. <a href="URL goes here" target="_blank">#Tag</a>
  409. <a href="URL goes here" target="_blank">#Tag</a>
  410. <a href="URL goes here" target="_blank">#Tag</a>
  411. <a href="URL goes here" target="_blank">#Tag</a>
  412. </div>
  413.  
  414. <h2>Name</h2>
  415. <div class="tags">
  416. <a href="URL goes here" target="_blank">#Tag</a>
  417. <a href="URL goes here" target="_blank">#Tag</a>
  418. <a href="URL goes here" target="_blank">#Tag</a>
  419. <a href="URL goes here" target="_blank">#Tag</a>
  420. <a href="URL goes here" target="_blank">#Tag</a>
  421. <a href="URL goes here" target="_blank">#Tag</a>
  422. </div>
  423.  
  424. <h2>Name</h2>
  425. <div class="tags">
  426. <a href="URL goes here" target="_blank">#Tag</a>
  427. <a href="URL goes here" target="_blank">#Tag</a>
  428. <a href="URL goes here" target="_blank">#Tag</a>
  429. <a href="URL goes here" target="_blank">#Tag</a>
  430. <a href="URL goes here" target="_blank">#Tag</a>
  431. <a href="URL goes here" target="_blank">#Tag</a>
  432. </div>
  433.  
  434. <h2>Name</h2>
  435. <div class="tags">
  436. <a href="URL goes here" target="_blank">#Tag</a>
  437. <a href="URL goes here" target="_blank">#Tag</a>
  438. <a href="URL goes here" target="_blank">#Tag</a>
  439. <a href="URL goes here" target="_blank">#Tag</a>
  440. <a href="URL goes here" target="_blank">#Tag</a>
  441. <a href="URL goes here" target="_blank">#Tag</a>
  442. </div>
  443.  
  444. </div>
  445. </div>
  446. </div>
  447.  
  448. <!-- -------------------------- TAB 2 -------------------------- -->
  449.  
  450. <div id="tab2" class="tab">
  451. <div class="tabcontent">
  452. <div id="posts">
  453.  
  454. <div id="blogrollcont">
  455. {block:Following}{block:Followed}
  456. <div id="blogroll" class="following"><a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-40}"/></a></div>
  457. {/block:Followed}{/block:Following}
  458. </div>
  459.  
  460. </div>
  461. </div>
  462. </div>
  463.  
  464. <!-- -------------------------- TAB 3 -------------------------- -->
  465.  
  466. <div id="tab3" class="tab">
  467. <div class="tabcontent">
  468. <div id="posts">
  469.  
  470. <h1>Title</h1>
  471. <p>Content goes here.</p>
  472.  
  473. </div>
  474. </div>
  475. </div>
  476.  
  477. <!-- -------------------------- TAB 4 -------------------------- -->
  478.  
  479. <div id="tab4" class="tab">
  480. <div class="tabcontent">
  481. <div id="posts">
  482.  
  483. <h1>Title</h1>
  484. <p>Content goes here.</p>
  485.  
  486. </div>
  487. </div>
  488. </div>
  489.  
  490. <!-- -------------------------- TAB 5 -------------------------- -->
  491.  
  492. <div id="tab5" class="tab">
  493. <div class="tabcontent">
  494. <div id="posts">
  495.  
  496. <h1>Title</h1>
  497. <p>Content goes here.</p>
  498.  
  499. </div>
  500. </div>
  501. </div>
  502.  
  503. <!-- END OF TABS -->
  504.  
  505. </div>
  506. </div>
  507. </div>
  508. </div>
  509.  
  510. </div> <!-- container end -->
  511.  
  512. <!-- all-in-one jquery - do not remove -->
  513.  
  514. <script>
  515. $(document).ready(function() {
  516. $('.tabs .tab-links a').on('click', function(e) {
  517. var currentAttrValue = $(this).attr('href');
  518.  
  519. // Show/Hide Tabs
  520. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  521.  
  522. // Change/remove current tab to active
  523. $(this).parent('li').addClass('active').siblings().removeClass('active');
  524.  
  525. e.preventDefault();
  526. });
  527. });
  528. </script>
  529.  
  530. <script>
  531. $(document).ready(function() {
  532. $('#filterOptions li a').click(function() {
  533. // fetch the class of the clicked item
  534. var ourClass = $(this).attr('class');
  535.  
  536. // reset the active class on all the buttons
  537. $('#filterOptions li').removeClass('active');
  538. // update the active state on our clicked button
  539. $(this).parent().addClass('active');
  540.  
  541. if(ourClass == 'all') {
  542. // show all our items
  543. $('#ourHolder').children('div.item').show();
  544. }
  545. else {
  546. // hide all elements that don't share ourClass
  547. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  548. // show all elements that do share ourClass
  549. $('#ourHolder').children('div.' + ourClass).show();
  550. }
  551. return false;
  552. });
  553. });
  554. </script>
  555.  
  556. <div id="credit"><a href="http://the49thname.tumblr.com/" title="made by the49thname">49</a>
  557. </div>
  558.  
  559. </body>
  560. </html>
  561. <!--
Advertisement
Comments
  • User was banned
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!