Advertisement
gryffindor

Tags #1

Sep 19th, 2014
1,827
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.14 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-----------------------------------------------------
  4.  
  5. PLEASE READ THIS BEFORE USING:
  6.  
  7.  
  8. dont REMOVE OR EDIT THE CREDIT, ive been having lots of trouble with it so thats why i changed it, its very small on the corner, just when the person wants to know who made it the ''aeternothemes'' appears, i made it black in case a person changes it to black bg it will still appear, sorry if its bothering you, contact me if u want to talk about it
  9.  
  10.  
  11. Please respect my rules ( don't steal, remove the credit or edit it, reblog/like the post if using it, don't restribuite etc )
  12.  
  13. I put some notes on the code so that it can be easier for you guys to customize it, Please check if you did everything right before asking me stuff, I'm always glad to help you, I just get the same question a lot like '' why isn't my pop up ask working '' so I'll be ofeing help with this stuff on this code, thanks love
  14.  
  15. i write so much srry but its important x
  16. --------------------------------------------------------->
  17.  
  18. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  19. <link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
  20.  
  21. <head>
  22.  
  23.  
  24. <script type="text/javascript"
  25. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  26. <script>
  27. $(document).ready(function() {
  28. //
  29. $('a.poplight[href^=#]').click(function() {
  30. var popID = $(this).attr('rel'); //Get Popup Name
  31. var popURL = $(this).attr('href'); //Get Popup href to define size
  32. var query= popURL.split('?');
  33. var dim= query[1].split('&');
  34. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  35.  
  36.  
  37. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
  38.  
  39.  
  40. var popMargTop = ($('#' + popID).height() + 80) / 2;
  41. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  42. //Apply Margin to Popup
  43. $('#' + popID).css({
  44. 'margin-top' : -popMargTop,
  45. 'margin-left' : -popMargLeft
  46. });
  47. $('body').append('<div id="fade"></div>');
  48. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  49. return false;
  50. });
  51. $('a.close, #fade').live('click', function() {
  52. $('#fade , .popup_block').fadeOut(function() {
  53. $('#fade, a.close').remove(); //fade them both out
  54. });
  55. return false;
  56. });
  57. });
  58. </script>
  59.  
  60.  
  61.  
  62. <!-- jquery for tooltips-->
  63.  
  64.  
  65. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  66.  
  67. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  68.  
  69. <script>
  70.  
  71. (function($){
  72.  
  73. $(document).ready(function(){
  74.  
  75. $("a[title]").style_my_tooltips({
  76.  
  77. tip_follows_cursor:true,
  78.  
  79. tip_delay_time:30,
  80.  
  81. tip_fade_speed:300,
  82.  
  83. attribute:"title"
  84.  
  85. });
  86.  
  87. });
  88.  
  89. })(jQuery);
  90.  
  91. </script>
  92.  
  93. <title>navigation</title>
  94.  
  95. {block:Description}<meta name="description" content="{MetaDescription}"/>
  96. {/block:Description}
  97. <link rel="shortcut icon" href="{Favicon}" />
  98. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  99.  
  100. <style type="text/css">
  101.  
  102.  
  103. /*--scrollbar--*/
  104.  
  105. ::-webkit-scrollbar-thumb {background:#d6d5d5;} /* change the color of the scroll bar here */
  106. ::-webkit-scrollbar {width:5px;height:5px;background:#fff;}
  107. /*--body aka basic stuff--*/
  108.  
  109.  
  110. #s-m-t-tooltip{
  111. position:absolute;
  112. max-width:400px;
  113. letter-spacing:1px;
  114. font-size:8px;
  115.  
  116. margin:15px;
  117. padding:6px 6px;
  118. border:1px solid black;
  119. opacity:7px;
  120. border-radius:2px;
  121.  
  122.  
  123. z-index:999;
  124. background:#fff;
  125. color:#000;
  126. text-transform:uppercase;
  127. -webkit-transition:all 0.3s;
  128. -moz-transition:all 0.3s;
  129. -ms-transition:all 0.3s;
  130. -o-transition:all 0.3s;
  131. -transition:all 0.3s;
  132. display:inline-block;
  133.  
  134.  
  135. }
  136.  
  137. body {
  138. font-style:none;
  139. background-color:#eee; /* change the background of the page */
  140. font-family:calibri;
  141. color:#7b7b7b;
  142. font-size:9px;
  143. }
  144.  
  145. a {
  146.  
  147. text-decoration:none;
  148. -webkit-transition: all 0.5s ease-out;
  149. -moz-transition: all 0.5s ease-out;
  150. transition: all 0.5s ease-out;
  151. }
  152.  
  153. a:hover {
  154.  
  155. text-decoration:none;
  156. -webkit-transition: all 0.8s ease-out;
  157. -moz-transition: all 0.8s ease-out;
  158. transition: all 0.8s ease-out;
  159. }
  160.  
  161.  
  162. img {
  163. border:none;
  164. }
  165.  
  166. blockquote {
  167. padding-left:5px;
  168. border-left:2px solid {color:border};
  169. }
  170.  
  171. h1 {
  172. font-size:10px;
  173. }
  174.  
  175. /*--Cursor code--*/
  176.  
  177.  
  178. *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto } /* the little cursor */
  179.  
  180. /*everything*/
  181.  
  182. #everything {
  183. margin-left:250px;
  184. margin-top:100px;
  185. }
  186.  
  187. /*--title--*/
  188.  
  189. #title {
  190.  
  191. margin-top:90px;
  192. margin-left:350px;
  193.  
  194.  
  195.  
  196.  
  197. font-family: century gothic;
  198. font-weight:none;
  199. text-transform:uppercase;
  200.  
  201. letter-spacing:3px;
  202.  
  203.  
  204. font-size:28px;
  205. color:#7c7a7a; /** title color **/
  206.  
  207.  
  208. }
  209.  
  210.  
  211. #header {
  212. width:520px;
  213. opacity:100%;
  214. text-align:center;
  215. margin-left:0 auto;
  216. margin-bottom:10px;
  217. margin-top: 80px;
  218. padding-bottom: 20px;
  219. }
  220.  
  221. .headertitle {
  222. font-family: century gothic;
  223. text-transform:uppercase;
  224. color:#9a9a9a; /* change the color of the title */
  225. font-weight:none;
  226. font-size:43px;
  227.  
  228.  
  229. padding-top:2px;
  230. margin-top:-80px;
  231. padding-bottom:2px;
  232. /*margin-left:500px;*/
  233.  
  234.  
  235.  
  236. height:100%;
  237. width:100%;
  238.  
  239. margin-left:33%;
  240. margin-right:60%;
  241.  
  242. letter-spacing:1px;
  243.  
  244. cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), auto;
  245. }
  246.  
  247. .headertitle a {
  248.  
  249. color:#9a9a9a; /* change the color of the title */
  250.  
  251.  
  252.  
  253. }
  254.  
  255.  
  256.  
  257. /*--links--*/
  258.  
  259. #links {
  260. cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), auto
  261. width:170px;
  262. font-family: helvetica;
  263. text-transform:uppercase;
  264. text-align:center;
  265. margin-top:20px;
  266. margin-left:-165px;
  267.  
  268. }
  269.  
  270. #links a {
  271. padding:3px;
  272. font-size:8px;
  273. color:#676767; /*color of the header title bofore hovering it */
  274. -webkit-transition: all 0.4s ease-in-out;
  275. -moz-transition: all 0.4s ease-in-out;
  276. -o-transition: all 0.4s ease-in-out;
  277. -ms-transition: all 0.4s ease-in-out;
  278. transition: all 0.4s ease-in-out;
  279. }
  280.  
  281. #links a:hover {
  282. padding:3px;
  283. color:#fff; /*color of the LINK when u hover */
  284. background-color:#7F69FF; /* color of the BACKGROUND when u hover it*/
  285.  
  286. -webkit-transition: all 0.4s ease-in-out;
  287. -moz-transition: all 0.4s ease-in-out;
  288. -o-transition: all 0.4s ease-in-out;
  289. -ms-transition: all 0.4s ease-in-out;
  290. transition: all 0.4s ease-in-out;
  291. }
  292.  
  293.  
  294. #pizza {
  295. text-transform:uppercase;
  296. font-family:Helvetica;
  297. padding:10px;
  298. position:fixed;
  299. bottom:0px;
  300. right:-109px;
  301. font-size:10px;
  302. transition:all 0.8s ease;
  303. -webkit-transition: all 0.8s ease;
  304. -moz-transition: all 0.8s ease;
  305. -o -transition: all 0.8s ease;
  306.  
  307. }
  308.  
  309. #pizza a {
  310. background-color:#000;
  311. color:#fff;
  312. padding:5px 5px 5px 5px;
  313. transition:all 0.8s ease;
  314. -webkit-transition: all 0.8s ease;
  315. -moz-transition: all 0.8s ease;
  316. -o -transition: all 0.8s ease;
  317. }
  318.  
  319. #pizza a:hover {
  320.  
  321.  
  322. margin-right:105px;
  323. transition:all 0.8s ease;
  324. -webkit-transition: all 0.8s ease;
  325. -moz-transition: all 0.8s ease;
  326. -o -transition: all 0.8s ease;
  327. }
  328.  
  329. #grouptitle { /*here is where u customize title title of all the boxes aka the thing ''group one'' */
  330. padding:5px;
  331. text-align:center;
  332. background-color:#fff; /* bg color*/
  333. font-style:italic;
  334. font-family:'times new roman';
  335. color:#7c7a7a; /* font color*/
  336. font-size:17px;
  337. width:118px;
  338. margin-left:180px;
  339. margin-top:80px;
  340. border-left:1px solid #eaeaea;
  341. border-right:1px solid #eaeaea;
  342. border-top:1px solid #eaeaea;
  343. }
  344.  
  345.  
  346. #grouplinks { /*customize the color of your tagssss */
  347. cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), auto
  348. width:120px;
  349. margin-top:0px;
  350. padding:4px;
  351. margin-left:180px;
  352. border:1px solid #eaeaea;
  353. background-color:#fff; /*bg color */
  354. max-height: 130px; height: 130px; overflow: auto; /*dont touchh */
  355. }
  356.  
  357.  
  358. #grouplinks a {
  359. font-family:'times new roman';
  360. display:block;
  361. color:#9a9a9a; /* da color of the tags*/
  362. font-size:10px;
  363. padding:6px;
  364. text-align:center;
  365. letter-spacing:1px;
  366. text-transform:uppercase;
  367. margin-bottom:5px;
  368. -webkit-transition: all 0.4s ease-in-out;
  369. -moz-transition: all 0.4s ease-in-out;
  370. -o-transition: all 0.4s ease-in-out;
  371. -ms-transition: all 0.4s ease-in-out;
  372. transition: all 0.4s ease-in-out;
  373. }
  374.  
  375. #grouplinks a:hover {
  376. background:#7F69FF; /*bg when hover it */
  377. color:#fff; /*color of the font when hover it */
  378. }
  379.  
  380. /* CUSTOMIZE THE POP UP, be carefull not to mess it up*/
  381.  
  382.  
  383. #fade { /*--Transparent background layer--*/
  384. display: none; /*--hidden by default--*/
  385. background: #eee; /*you can change it if you want */
  386. position: fixed; top: 0;
  387. margin-left:0px;
  388. margin-top:0px;
  389. width: 100%; height: 100%;
  390. opacity: 0.8;
  391. z-index: 9999;
  392.  
  393.  
  394. }
  395. .popup_block{
  396. display: none; /*--hidden by default--*/
  397. background:#fff;
  398. padding: 15px;
  399. border: 0px ;
  400. float: center;
  401. position: fixed;
  402. top: 50%; left: 55%;
  403. z-index: 99999;
  404. font-size:13px;
  405. line-height:16px;
  406. font-family:helvetica;
  407. letter-spacing:1px;
  408. color:#000;
  409. text-transform:none;
  410. font-size:12px;
  411. }
  412. img.btn_close {
  413. float: right;margin: -10px -10px 0 0;
  414. }
  415. /*--Making IE6 Understand Fixed Positioning--*/
  416. *html #fade {
  417. position: absolute;
  418. }
  419. *html .popup_block {
  420. position: absolute;
  421. }
  422.  
  423. /* these are the links of the pop up */
  424. #linkessssss{
  425. text-align:center;
  426. }
  427.  
  428. #linkessssss a{
  429. display:inline-block;
  430. background:#7F69FF; /*change THE POP UP LINKS COOLOR BG HERE */
  431. font-size:11px;
  432. font-family:century gothic;
  433. text-transform:uppercase;
  434. text-decoration:none;
  435. padding:5px;
  436. color:white;
  437. -webkit-transition: all 0.5s ease-in-out;
  438. -moz-transition: all 0.5s ease-in-out;
  439. -o-transition: all 0.5s ease-in-out;
  440. }
  441.  
  442. #linkessssss a:hover{ /*when u hover it, the first is the bg and then the font color */
  443. background:#fff;
  444. color:black;
  445. -webkit-transition: all 0.5s ease-in-out;
  446. -moz-transition: all 0.5s ease-in-out;
  447. -o-transition: all 0.5s ease-in-out;
  448. }
  449.  
  450.  
  451.  
  452. {CustomCSS}
  453.  
  454. </style></head>
  455.  
  456.  
  457. <body>
  458.  
  459. <div id="pizza" style="position:fixed;float:right;">
  460. <a href="http://aeternothemes.tumblr.com">© aeterno themes</a>
  461. </div>
  462.  
  463.  
  464. <div id="everything">
  465.  
  466. <div id="header">
  467.  
  468. </div>
  469.  
  470. <div id="links"><!-- CHANGE HEADER LINKS HERE -->
  471. <a href="URL HERE" >home</a>
  472. <a href="URL HERE" >dash</a>
  473. <a href="#?w=500" rel="02" class="poplight" >contact</a>
  474.  
  475.  
  476. </div>
  477.  
  478. <div class="headertitle">navigation<!-- TITLE HERE --></div>
  479.  
  480. <table id="all" border="0" cellpadding="0" cellspacing="0">
  481.  
  482.  
  483. <td><div id="grouptitle"><big>Group One <!--change it if you want to ''films'' or ''books'' idk its up to you --></div>
  484.  
  485. <div id="grouplinks">
  486. <a href="#?w=500" rel="03" class="poplight" >pop up link <!--you can also change this, it's just for oyou --></a>
  487.  
  488. <a href="/tagged/">link 2</a>
  489.  
  490. <a href="/tagged/">link 3</a>
  491.  
  492. <a href="/tagged/">link 4</a>
  493.  
  494.  
  495.  
  496. </div></td>
  497.  
  498.  
  499. <td><div id="grouptitle"><big>Group One</div>
  500. <div id="grouplinks">
  501. <a href="#?w=500" rel="04" class="poplight" >pop up link</a>
  502.  
  503. <a href="/tagged/">link 2</a>
  504.  
  505. <a href="/tagged/">link 3</a>
  506.  
  507. <a href="/tagged/">link 4</a>
  508.  
  509. <a href="/tagged/">link 5</a>
  510.  
  511. <a href="/tagged/">link 6</a>
  512.  
  513. <a href="/tagged/">link 7</a>
  514.  
  515. </div></td>
  516.  
  517. <td><div id="grouptitle"><big>Group One</div>
  518. <div id="grouplinks">
  519. <a href="#?w=500" rel="05" class="poplight" >pop up link</a>
  520.  
  521. <a href="/tagged/">link 2</a>
  522.  
  523. <a href="/tagged/">link 3</a>
  524.  
  525. <a href="/tagged/">link 4</a>
  526.  
  527. <a href="/tagged/">link 5</a>
  528.  
  529. <a href="/tagged/">link 6</a>
  530.  
  531. <a href="/tagged/">link 7</a>
  532.  
  533. </div></td>
  534.  
  535. <tr>
  536.  
  537. <td><div id="grouptitle"><big>Group One</div>
  538. <div id="grouplinks">
  539. <a href="#?w=500" rel="06" class="poplight" >pop up link</a>
  540.  
  541. <a href="/tagged/">link 2</a>
  542.  
  543. <a href="/tagged/">link 3</a>
  544.  
  545. <a href="/tagged/">link 4</a>
  546.  
  547. <a href="/tagged/">link 5</a>
  548.  
  549. <a href="/tagged/">link 6</a>
  550.  
  551. <a href="/tagged/">link 7</a>
  552.  
  553. </div></td>
  554.  
  555. <td><div id="grouptitle"><big>Group One</div>
  556. <div id="grouplinks">
  557. <a href="#?w=500" rel="07" class="poplight" >pop up link</a>
  558.  
  559. <a href="/tagged/">link 2</a>
  560.  
  561. <a href="/tagged/">link 3</a>
  562.  
  563. <a href="/tagged/">link 4</a>
  564.  
  565. <a href="/tagged/">link 5</a>
  566.  
  567. <a href="/tagged/">link 6</a>
  568.  
  569. <a href="/tagged/">link 7</a>
  570.  
  571. </div></td>
  572.  
  573. <td><div id="grouptitle"><big>Group One</div>
  574. <div id="grouplinks">
  575. <a href="#?w=500" rel="08" class="poplight" >pop up link</a>
  576.  
  577. <a href="/tagged/">link 2</a>
  578.  
  579. <a href="/tagged/">link 3</a>
  580.  
  581. <a href="/tagged/">link 4</a>
  582.  
  583. <a href="/tagged/">link 5</a>
  584.  
  585. <a href="/tagged/">link 6</a>
  586.  
  587. <a href="/tagged/">link 7</a>
  588.  
  589. </div></td>
  590.  
  591.  
  592. </table>
  593.  
  594. </div>
  595. <div id="03" class="popup_block">
  596.  
  597. <div id="linkessssss">
  598.  
  599. <p><center><b>QUICK NAVIGATION</b></center></p>
  600. <a href="/tagged/">some </a>
  601. <a href="/tagged/">more</a>
  602. <a href="/tagged/">hella</a>
  603. <a href="/tagged/">pop up</a>
  604.  
  605. <p>
  606. <a href="/tagged/">links</a>
  607. <a href="/tagged/c">or </a>
  608. <a href="/tagged/">nah</a>
  609. <a href="/tagged/">((yes))</a>
  610.  
  611.  
  612.  
  613. </div>
  614.  
  615. </div>
  616.  
  617. </div></div></div></div></div></div></div></div></div></div>
  618.  
  619. <div id="04" class="popup_block">
  620.  
  621. <div id="linkessssss">
  622.  
  623. <p><center><b>QUICK NAVIGATION</b></center></p>
  624. <a href="/tagged/">some </a>
  625. <a href="/tagged/">more</a>
  626. <a href="/tagged/">hella</a>
  627. <a href="/tagged/">pop up</a>
  628.  
  629. <p>
  630. <a href="/tagged/">yayy</a>
  631. <a href="/tagged/c">customize </a>
  632. <a href="/tagged/">them</a>
  633. <a href="/tagged/">here</a>
  634.  
  635.  
  636.  
  637. </div>
  638.  
  639. </div>
  640.  
  641. </div></div></div></div></div></div></div></div></div></div>
  642.  
  643. <div id="05" class="popup_block">
  644.  
  645. <div id="linkessssss">
  646.  
  647. <p><center><b>QUICK NAVIGATION</b></center></p>
  648. <a href="/tagged/">some </a>
  649. <a href="/tagged/">more</a>
  650. <a href="/tagged/">hella</a>
  651. <a href="/tagged/">pop up</a>
  652.  
  653. <p>
  654. <a href="/tagged/">wow</a>
  655. <a href="/tagged/c">isn't </a>
  656. <a href="/tagged/">this</a>
  657. <a href="/tagged/">cool</a>
  658.  
  659.  
  660.  
  661. </div>
  662.  
  663. </div>
  664.  
  665. </div></div></div></div></div></div></div></div></div></div>
  666.  
  667. <div id="06" class="popup_block">
  668.  
  669. <div id="linkessssss">
  670.  
  671. <p><center><b>QUICK NAVIGATION</b></center></p>
  672. <a href="/tagged/">some </a>
  673. <a href="/tagged/">more</a>
  674. <a href="/tagged/">hella</a>
  675. <a href="/tagged/">pop up</a>
  676.  
  677. <p>
  678. <a href="/tagged/">hello</a>
  679. <a href="/tagged/c">you </a>
  680. <a href="/tagged/">can </a>
  681. <a href="/tagged/">customize this</a>
  682.  
  683.  
  684.  
  685. </div>
  686.  
  687. </div>
  688.  
  689. </div></div></div></div></div></div></div></div></div></div>
  690.  
  691. <div id="07" class="popup_block">
  692.  
  693. <div id="linkessssss">
  694.  
  695. <p><center><b>QUICK NAVIGATION</b></center></p>
  696. <a href="/tagged/">some </a>
  697. <a href="/tagged/">more</a>
  698. <a href="/tagged/">hella</a>
  699. <a href="/tagged/">pop up</a>
  700.  
  701. <p>
  702. <a href="/tagged/">do u</a>
  703. <a href="/tagged/c">want to </a>
  704. <a href="/tagged/">build a </a>
  705. <a href="/tagged/">snowman</a>
  706.  
  707.  
  708.  
  709. </div>
  710.  
  711. </div>
  712.  
  713. </div></div></div></div></div></div></div></div></div></div>
  714.  
  715. <div id="08" class="popup_block">
  716.  
  717. <div id="linkessssss">
  718.  
  719. <p><center><b>QUICK NAVIGATION</b></center></p>
  720. <a href="/tagged/">some </a>
  721. <a href="/tagged/">more</a>
  722. <a href="/tagged/">hella</a>
  723. <a href="/tagged/">pop up</a>
  724.  
  725. <p>
  726. <a href="/tagged/">go </a>
  727. <a href="/tagged/c">away</a>
  728. <a href="/tagged/">anna </a>
  729. <a href="/tagged/">ok bye</a>
  730.  
  731.  
  732.  
  733. </div>
  734.  
  735. </div>
  736.  
  737. </div></div></div></div></div></div></div></div></div></div>
  738.  
  739.  
  740. <!----------------------------------------
  741.  
  742. ATTENTION, IF U WANNA REMOVE THE POP UP, FIRST REMOVE THE
  743. <a href="#?w=500" rel="02" class="poplight" >ask</a>
  744.  
  745. AND CHANGE FOR
  746. <a href="/">ask</a>
  747.  
  748. aka a normal link
  749.  
  750. there are another part of the pop up code in this page but u can ignore them bc it wont make a difference
  751.  
  752. -------------------------------------------->
  753.  
  754.  
  755. <div id="02" class="popup_block">
  756.  
  757. <Center><b>Silence will fall when the question is asked</b><br><br><iframe frameborder="0" scrolling="yes" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  758. </center></div>
  759.  
  760. </div></div></div></div></div></div></div></div></div></div>
  761.  
  762.  
  763.  
  764.  
  765.  
  766. </body>
  767. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement