API tools faq
paste
Advertisement
harreyeh

pages pack 2 - tags - 3 columns

harreyeh
Sep 27th, 2014
4,138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.03 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <title>{Title}</title>
  3.  
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <!---
  6.  
  7. navigation page by hardziam // themesbyzsu
  8.  
  9. --->
  10.  
  11.  
  12. <style type="text/css">
  13.  
  14.  
  15. #header{color:white; background:black;}
  16. .title{border-bottom:2px solid yellow;}
  17. .title:after{background:#aaa;}
  18.  
  19. #post h1{border-bottom:1px solid #000;}
  20. #post a{border-bottom:1px dotted #aaa; color:#aaa;}
  21. #post a:hover{color:#eee;}
  22. #post a:before{background:#ccc;}
  23.  
  24. /* sidebar */
  25. #box{background:#000;}
  26. #box a{color:white;}
  27.  
  28.  
  29.  
  30.  
  31. /* don't touch anything below unless you know what you're doing */
  32.  
  33. ::-webkit-scrollbar {background-color:black; border:2px solid #fff;height:5px; width:5px;}
  34. ::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
  35. ::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}
  36.  
  37.  
  38.  
  39. body {
  40. background: #fff;
  41. margin:0;width:100%;height:100%;
  42. font:11px Corbel;
  43. padding: 0;
  44. position:absolute;
  45. }
  46.  
  47. a {
  48. text-decoration:none;
  49. outline:none;
  50. color:gray;
  51. -webkit-transition: all 0.5s ease-in-out;
  52. -moz-transition: all 0.5s ease-in-out;
  53. -o-transition: all 0.5s ease-in-out;
  54. }
  55.  
  56. a:hover {
  57. color:#eee;
  58. -webkit-transition: all 0.5s ease-in-out;
  59. -moz-transition: all 0.5s ease-in-out;
  60. -o-transition: all 0.5s ease-in-out;
  61. }
  62.  
  63. #header{
  64. width:100%;
  65. top:0;left:0;
  66. padding:20px;
  67. padding-left:40px;
  68. position:fixed;
  69. height:40px;
  70. z-index:1000;
  71. }
  72.  
  73. .title{
  74. font-size:20px;
  75. text-transform:uppercase;
  76. display:inline-block;
  77. padding:10px;
  78. padding-top:4px;
  79. letter-spacing:5px;
  80. }
  81.  
  82. .title:after{
  83. width:500px;
  84. content:'';
  85. position:fixed;
  86. margin-top:34px;
  87. margin-left:9px;
  88. height:2px;
  89. }
  90.  
  91. #entries{
  92. width:760px;
  93. margin-left:20px;
  94. margin-top:80px;
  95. }
  96.  
  97. #post h1{
  98. font:10px corbel;
  99. text-align:left;
  100. letter-spacing:3px;
  101. padding:10px 20px;
  102. text-transform:uppercase;
  103. }
  104.  
  105. #post{
  106. width:200px;
  107. margin:20px;
  108. float:left;
  109. }
  110.  
  111. #post a{
  112. padding:7px;
  113. display:block;
  114. }
  115.  
  116. #post a:first-letter{
  117. text-transform:uppercase;
  118. }
  119.  
  120. #post a:before{
  121. width:7px;
  122. height:1px;
  123. position:absolute;
  124. margin-top:20px;
  125. margin-left:-7px;
  126. content:'';
  127. -moz-transition-duration:1s;
  128. -webkit-transition-duration:1s;
  129. -o-transition-duration:1s;
  130. }
  131.  
  132. #post a:hover{
  133. -moz-transition-duration:1s;
  134. -webkit-transition-duration:1s;
  135. -o-transition-duration:1s;
  136. }
  137.  
  138. #post a:hover:before{
  139. width:200px;
  140. transition-duration:1s;
  141. -moz-transition-duration:1s;
  142. -webkit-transition-duration:1s;
  143. -o-transition-duration:1s;
  144. }
  145.  
  146.  
  147. #box{
  148. width:110px;
  149. padding:20px;
  150. padding-top:70px;
  151. position:fixed;
  152. left:750px;
  153. top:0;
  154. z-index:9999;
  155. }
  156.  
  157. #box img{
  158. width:85px;
  159. padding:10px;
  160. padding-bottom:20px;
  161. }
  162.  
  163. #box span{
  164. font:9px Corbel;
  165. text-align:justify;
  166. margin-bottom:10px;
  167. }
  168.  
  169. #box a{
  170. display:block;
  171. font-size:10px;
  172. padding:6px;
  173. font-style:italic;
  174. color:#eee;
  175. text-align:center;
  176. }
  177.  
  178. #box:hover a{
  179. color:#999;
  180. }
  181.  
  182. #box a:hover{
  183. color:white;
  184. }
  185.  
  186. .hidden{display:none;}
  187. .unhidden{display:block;}
  188.  
  189. .search{
  190. height:26px;
  191. margin-left:-20px;
  192. width:150px;
  193. margin-bottom:-40px;
  194. overflow:hidden;
  195. background:#333;
  196. }
  197.  
  198. .search input{
  199. border:1px solid #333;
  200. background:#333;
  201. padding:2px;
  202. padding-left:5px;
  203. color:white;
  204. width:150px;
  205. padding-top:5px;
  206. font:10px Calibri;
  207. }
  208.  
  209.  
  210. #credit a{
  211. position:fixed;
  212. right:10px;
  213. bottom:10px;
  214. padding:6px;
  215. background:black;
  216. text-transform:uppercase;
  217. color:white;
  218. -moz-transition-duration:1s;
  219. -webkit-transition-duration:1s;
  220. -o-transition-duration:1s;
  221. }
  222.  
  223. #credit a:hover {
  224. background:white;
  225. color:black;
  226. -moz-transition-duration:0.5s;
  227. -webkit-transition-duration:0.5s;
  228. -o-transition-duration:0.5s;
  229. }
  230.  
  231.  
  232. </style>
  233.  
  234.  
  235. </head>
  236.  
  237. <body>
  238.  
  239.  
  240. <div id="header">
  241. <div class="title">Navigation</div>
  242. </div>
  243.  
  244. <div id="box">
  245.  
  246. <!--- here you can change the image! --->
  247. <img src="http://38.media.tumblr.com/45f077e353a477d19f9099c627bea909/tumblr_mguib6F2xV1qlt206o3_250.png">
  248. <!--- here you can change the image! --->
  249.  
  250. <a href="/">back to blog</a>
  251. <a href="/faq">message</a>
  252. <a href="/dashboard">dashboard</a>
  253.  
  254. <!----- remove all this below if you don't want a search box --->
  255. <a href="javascript:unhide('searchbx');">search</a>
  256. <div id="searchbx" class="hidden"><div class="search"><form method="get" action="/search"><input type="text" placeholder="Type and press enter..." value="" name="q"></input></form></div></div>
  257. <!----------------------------------------------------------------->
  258.  
  259.  
  260. </div>
  261.  
  262. <div id="entries">
  263.  
  264.  
  265.  
  266. <!------copy & paste below. this is a tag box. it should start with
  267. <div id="post">
  268. <h1>title</h1>
  269.  
  270. and end with </div>. TRIPLE CHECK if you're having problems. go to
  271. http://theme-hunter.tumblr.com/basics01
  272. if you don't know how to add in a link. don't ask me how to do this you can google it or something it's very simple please i get this question every day!!!!!!!----->
  273.  
  274.  
  275. <!--- okay this is a box. add as many links as you like!! make sure there's a </div> (((only one!!!!!))) before you copy in the next box. -->
  276.  
  277.  
  278. <div id="post">
  279. <h1>tags box title</h1>
  280. <a href="/tagged/tag link">tag title</a>
  281. <a href="/tagged/tag link">tag title</a>
  282. </div>
  283.  
  284. <!--- an example: --->
  285.  
  286. <div id="post">
  287. <h1>Animals & Creatures</h1>
  288. <a href="/tagged/Baymax">Baymax</a>
  289. <a href="/tagged/Crikee">Cri-kee</a>
  290. <a href="/tagged/Maximus">Maximus</a>
  291. <a href="/tagged/Mushu">Mushu</a>
  292. <a href="/tagged/Nala">Nala</a>
  293. <a href="/tagged/Olaf">Olaf</a>
  294. <a href="/tagged/Pascal">Pascal</a>
  295. <a href="/tagged/Pumbaa">Pumbaa</a>
  296. <a href="/tagged/Simba">Simba</a>
  297. <a href="/tagged/stitch">Stitch</a>
  298. <a href="/tagged/Sven">Sven</a>
  299. <a href="/tagged/Timon">Timon</a>
  300. <a href="/tagged/Toothless">Toothless</a>
  301. </div>
  302.  
  303. </div>
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350.  
  351.  
  352.  
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375. <!---- leave this here please!!!!1 ---->
  376. <div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>
  377.  
  378.  
  379. </body>
  380.  
  381. <!------ S C R I P T S! ------>
  382.  
  383. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  384. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  385. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  386.  
  387. <script type="text/javascript">
  388. $(window).load(function(){
  389. var $wall = $('#entries');
  390. $wall.imagesLoaded(function(){
  391. $wall.masonry({
  392. itemSelector: '#post',
  393. isAnimated : true
  394. });
  395. });
  396. $wall.infinitescroll({
  397. navSelector : "div#navigation",
  398. nextSelector : "div#navigation a#nextPage",
  399. itemSelector : '#post',
  400. loadingImg : "",
  401. loadingText : " ",
  402. donetext : " ",
  403. extraScrollPx : 0,
  404. bufferPx : 10000,
  405. debug : false,
  406. errorCallback: function() {
  407. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  408. }},
  409. function( newElements ) {
  410. var $newElems = $( newElements );
  411. $newElems.hide();
  412. $newElems.imagesLoaded(function(){
  413. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  414. });
  415. }); $('#entries').show(500);
  416. });
  417. </script>
  418.  
  419. <script language="JavaScript">
  420. function function1(){
  421. window.scrollTo(0,5);
  422. }
  423. function function2(){
  424. window.scroll(0,2);
  425. }
  426. </script>
  427. <!---- end masonry scripts -->
  428.  
  429. <script type="text/javascript">
  430. function unhide(searchbx) {
  431. var item = document.getElementById(searchbx);
  432. if (item) {
  433. item.className=(item.className=='hidden')?'unhidden':'hidden';
  434. }
  435. }
  436. </script>
  437.  
  438. </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!