API tools faq
paste
the49thname

Navigation 02

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