API tools faq
paste
the49thname

Navigation 04

the49thname
Jun 2nd, 2017
2,265
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.58 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 04
  6.  
  7. themes by ro (the49thname) / the49ththeme.tumblr.com
  8. masonry script by shythemes / shythemes.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 xlmns="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. <!-- font awesome script -->
  29.  
  30. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  31.  
  32. <!-- jquery scripts -->
  33.  
  34. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  35.  
  36. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  37.  
  38. <!-- tooltip scripts -->
  39.  
  40. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  41.  
  42. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43.  
  44. <script>
  45. (function($){
  46. $(document).ready(function(){
  47. $("a[title]").style_my_tooltips({
  48. tip_follows_cursor:true,
  49. tip_delay_time:90,
  50. tip_fade_speed:600,
  51. attribute:"title"
  52. });
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57. <style type="text/css">
  58.  
  59. #tumblr_controls, .tmblr-iframe {display:none!important;}
  60.  
  61. ::-webkit-scrollbar-thumb {
  62. z-index:9999;
  63. position:relative;
  64. height:auto;
  65. background-color:#fff; /* change scrollbar thumb colour */
  66. }
  67.  
  68. ::-webkit-scrollbar {
  69. height:5px;
  70. width:5px;
  71. background-color:#121212; /* change scrollbar background colour */
  72. }
  73.  
  74. /* basics */
  75.  
  76. body {
  77. color:#fff; /* change text colour */
  78. background-color:#121212; /* change background colour */
  79. font-family:'Roboto', sans-serif;
  80. font-size:10px; /* change text font size */
  81. margin:0;
  82. line-height:14px;
  83. letter-spacing:1px;
  84. text-align:justify;
  85. word-wrap:break-word;
  86. background-image:url('URL GOES HERE'); /* add background image */
  87. background-position:left top;
  88. background-attachment:fixed;
  89. background-repeat:repeat;
  90. }
  91.  
  92. a {
  93. color:#888; /* change link colour */
  94. text-transform:uppercase;
  95. text-decoration:none;
  96. -moz-transition-duration:1s;
  97. -webkit-transition-duration:1s;
  98. -o-transition-duration:1s;
  99. }
  100.  
  101. a:hover {
  102. color:#fff; /* change link hover colour */
  103. -moz-transition-duration:1s;
  104. -webkit-transition-duration:1s;
  105. -o-transition-duration:1s;
  106. }
  107.  
  108. /* navigation */
  109.  
  110. #navbar {
  111. position:fixed;
  112. top:0;
  113. left:0;
  114. width:100%;
  115. height:50px;
  116. background-color:#000; /* change navbar background colour */
  117. text-align:center;
  118. z-index:9999;
  119. }
  120.  
  121. #title {
  122. width:180px;
  123. margin:8px auto 0px auto;
  124. padding:10px 15px;
  125. font-size:20px;
  126. color:#fff; /* change title colour */
  127. letter-spacing:5px;
  128. text-transform:uppercase;
  129. font-weight:700;
  130. border-left:1px solid #fff; /* change title left border colour */
  131. border-right:1px solid #fff; /* change title right border colour */
  132. }
  133.  
  134. .nav {position:absolute;top:15px;font-size:20px;}
  135.  
  136. #navbar ul, #navbar li {margin:0px!important;padding:0px!important;}
  137.  
  138. #navone {left:50%;margin-left:-260px;}
  139.  
  140. #navtwo {right:50%;margin-right:-260px;}
  141.  
  142. .nav a {
  143. padding:0px 10px;
  144. color:#fff; /* change navigation links colour */
  145. display:inline-block;
  146. }
  147.  
  148. .nav a:hover {color:#888;} /* change navigation links hover colour */
  149.  
  150. /* posts */
  151.  
  152. #content {width:70%;margin:100px auto 50px auto;}
  153.  
  154. .tagscont {
  155. float:left;
  156. width:270px;
  157. margin:20px;
  158. opacity:0;
  159. z-index:-1;
  160. transition-duration:1.5s;
  161. -moz-transition-duration:1.5s;
  162. -webkit-transition-duration:1.5s;
  163. -o-transition-duration:1.5s;
  164. }
  165.  
  166. h2 {
  167. color:#000; /* change tags heading colour */
  168. background-color:#fff; /* change tags heading background colour */
  169. font-size:12px; /* change tags heading font size */
  170. letter-spacing:3px;
  171. text-transform:uppercase;
  172. text-align:left; /* change tags heading font alignment */
  173. padding:10px;
  174. margin-top:0px;
  175. margin-bottom:0px;
  176. }
  177.  
  178. .tags {text-align:left;} /* change tags font alignment */
  179.  
  180. .tags a {
  181. color:#fff; /* change tags colour */
  182. background-color:#000; /* change tags background colour */
  183. font-size:9px; /* change tags font size */
  184. text-transform:uppercase;
  185. overflow:hidden;
  186. display:block;
  187. padding:10px;
  188. -moz-transition-duration:1s;
  189. -webkit-transition-duration:1s;
  190. -o-transition-duration:1s;
  191. }
  192.  
  193. .tags a:hover {
  194. color:#fff; /* change tags hover colour */
  195. background-color:#888; /* change tags background hover colour */
  196. -moz-transition-duration:1s;
  197. -webkit-transition-duration:1s;
  198. -o-transition-duration:1s;
  199. }
  200.  
  201. /* extras */
  202.  
  203. #s-m-t-tooltip {
  204. z-index:9999999999;
  205. color:#fff; /* change tooltip text colour */
  206. background:#000; /* change tooltip background colour */
  207. border:1px solid #fff; /* change tooltip border colour */
  208. font-size:9px;
  209. line-height:11px;
  210. font-family:'Roboto Condensed', sans-serif;
  211. text-align:left;
  212. text-transform:uppercase;
  213. max-width:150px;
  214. word-wrap:break-word;
  215. padding:2px 5px 2px 5px;
  216. display:block;
  217. margin:24px 14px 7px 12px;
  218. }
  219.  
  220. ::selection {
  221. color:#000; /* change selection text colour */
  222. background:#fff; /* change selection background colour */
  223. }
  224.  
  225. /* credit - do not remove, alter, or move to another page */
  226.  
  227. #credit {
  228. position:fixed;
  229. bottom:14px;
  230. right:10px;
  231. text-align:center;
  232. z-index:9999;
  233. }
  234.  
  235. #credit a {
  236. font-size:10px;
  237. color:#121212;
  238. background-color:#fff;
  239. padding:4px;
  240. -moz-transition-duration:1s;
  241. -webkit-transition-duration:1s;
  242. -o-transition-duration:1s;
  243. }
  244.  
  245. #credit a:hover {
  246. color:#fff;
  247. background-color:#121212;
  248. -moz-transition-duration:1s;
  249. -webkit-transition-duration:1s;
  250. -o-transition-duration:1s;
  251. }
  252.  
  253. </style>
  254. </head>
  255. <body>
  256.  
  257. <div id="navbar">
  258. <div id="title">Navigation</div>
  259. <div id="navone" class="nav">
  260. <a href="/" title="home"><c class="fa fa-home"></c></a>
  261. <a href="/ask" title="ask"><c class="fa fa-envelope"></c></a>
  262. <a href="/archive" title="past"><c class="fa fa-calendar"></c></a>
  263. </div>
  264. <div id="navtwo" class="nav">
  265. <!-- you can edit your custom links here (the symbols on the right hand side of the title). simply copy and paste the relevant urls where it says "LINK NO. URL" and add in a summary of the link location (e.g. "admin's blog") where it says "LINK NO. HOVER TEXT". -->
  266. <a href="LINK 1 URL" title="LINK 1 HOVER TEXT"><c class="fa fa-star-o"></c></a>
  267. <a href="LINK 2 URL" title="LINK 2 HOVER TEXT"><c class="fa fa-star-half-o"></c></a>
  268. <a href="LINK 3 URL" title="LINK 3 HOVER TEXT"><c class="fa fa-star"></c></a>
  269. </div>
  270. </div>
  271.  
  272. <div id="content">
  273.  
  274. <!-- here is where you can edit your tags. simply replace TAG NAME with the relevant tag, and replace #TAG NAME with the relevant tag. you can delete a tag by delete everything from <a href... to the closing </a> tag. to add another tag, copy the line of code below:
  275.  
  276. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  277.  
  278. and make sure to add it before the first closing </div> for the tags container -->
  279.  
  280. <div class="tagscont">
  281. <h2>Title</h2>
  282. <div class="tags">
  283. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  284. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  285. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  286. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  287. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  288. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  289. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  290. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  291. </div>
  292. </div>
  293.  
  294. <div class="tagscont">
  295. <h2>Title</h2>
  296. <div class="tags">
  297. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  298. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  299. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  300. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  301. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  302. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  303. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  304. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  305. </div>
  306. </div>
  307.  
  308. <div class="tagscont">
  309. <h2>Title</h2>
  310. <div class="tags">
  311. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  312. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  313. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  314. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  315. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  316. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  317. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  318. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  319. </div>
  320. </div>
  321.  
  322. <div class="tagscont">
  323. <h2>Title</h2>
  324. <div class="tags">
  325. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  326. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  327. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  328. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  329. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  330. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  331. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  332. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  333. </div>
  334. </div>
  335.  
  336. <div class="tagscont">
  337. <h2>Title</h2>
  338. <div class="tags">
  339. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  340. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  341. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  342. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  343. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  344. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  345. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  346. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  347. </div>
  348. </div>
  349.  
  350. <div class="tagscont">
  351. <h2>Title</h2>
  352. <div class="tags">
  353. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  354. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  355. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  356. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  357. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  358. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  359. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  360. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  361. </div>
  362. </div>
  363.  
  364. <!-- to delete a tags section, delete everything from <div class="tagscont"> to the second closing </div>
  365.  
  366. to add more tags sections, copy the following section of code:
  367.  
  368. <div class="tagscont">
  369. <h2>Title</h2>
  370. <div class="tags">
  371. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  372. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  373. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  374. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  375. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  376. <a href="/tagged/TAG NAME" target="_blank">#TAG NAME</a>
  377. </div>
  378. </div>
  379.  
  380. and paste it somewhere before the closing #content </div> just below these instructions -->
  381.  
  382. </div> <!-- #content end -->
  383.  
  384. <!-- masonry script -->
  385.  
  386. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  387.  
  388. <script type="text/javascript">
  389. $(document).ready(function(){
  390. var $container = $('#content');
  391. $container.masonry({ itemSelector: '.tagscont' });
  392. $container.imagesLoaded(function(){
  393. $container.masonry();
  394. $container.find('.tagscont').animate({ opacity: 1, zIndex: 1 });
  395. });
  396. });
  397. </script>
  398.  
  399. <div id="credit"><a href="http://the49thname.tumblr.com/" title="made by the49thname">49</a>
  400. </div>
  401.  
  402. </body>
  403. </html>
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!