API tools faq
paste
Advertisement
vongolacloud18

Electronica Tags

vongolacloud18
Mar 28th, 2014
1,978
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.93 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6.     TAG PAGE #1 ©BAKAOTHEMES
  7.         DO NOT TOUCH CREDIT
  8.    
  9.     FEEL FREE TO CUSTOMIZE. DO NOT STEAL CODE
  10.    
  11.     HAVE ANY QUESTIONS? ASK THEM HERE -> HTTP://BAKAO.CO.VU/ASK
  12.  
  13. -->
  14.  
  15. <head>
  16.  
  17. <title>Tag Page</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,400italic' rel='stylesheet' type='text/css'>
  21.  
  22. <style type="text/css">
  23.  
  24. ::selection, ::-webkit-selection{
  25. background-color: transparent;
  26. color: #29a9bc; /* SELECTION COLOR */
  27. text-shadow: none !important;
  28. }
  29.  
  30. body {
  31.     background-color:#fff; /* BACKGROUND COLOR */
  32.     background-image: url('http://static.tumblr.com/jyuasny/OCQn34vyh/tumblr_lr3lxswywz1qf72le.png'); /* BACKGROUND IMAGE URL*/
  33.     background-attachment:fixed;
  34.     font-size:12px;
  35.     font-family:calibri;
  36. }
  37.  
  38. /* COLORS */
  39.  
  40. #desc {
  41.     border-right:5px solid #c4e1ef;  /* DESCRIPTION BORDER RIGHT SIDE */
  42.     background-color:#f7f7f7;  /* DESCRIPTION BACKGROUND COLOR */
  43. }
  44.  
  45. #desc a {
  46.     color:#3f8fd9;  /* DESCRIPTION LINKS COLOR */
  47.     text-decoration:none;
  48. }
  49.  
  50. #top {
  51.     border-bottom:10px solid #c4e1ef;  /* TOP BAR BORDER COLOR */
  52.     background-color:#f9f9f9;  /* TOP BAR BACKGROUND */
  53. }
  54.  
  55. #meek img {
  56.     border-color:#c4e1ef;  /* TOP ICON BORDER */
  57. }
  58.  
  59. #linku a {
  60.     color:#40a6ce;  /* MAIN LINKS TEXT */
  61.     background-color:#ffffff;  /* MAIN LINKS BACKGROUND */
  62.     border-color:#c4e1ef;  /* MAIN LINKS BORDER */
  63. }
  64.  
  65. #linku a:hover {
  66.     background-color:#c4e1ef;  /* MAINLINKS BACKGROUND ON HOVER */
  67.     color:#ffffff;  /* MAIN LINKS TEXT ON HOVER */
  68. }
  69.  
  70. #ex a {
  71.     border:5px solid #42abe2;  /* EXTRA LINKS CIRCLE COLOR */
  72. }
  73.  
  74. #dhtmltooltip {
  75.     border:1px solid #2974cf;  /* HOVER LABEL BORDERS */
  76.     color:#2974cf;  /* HOVER LABEL TEXT */
  77. }
  78.  
  79. #tivo img {
  80.     border:10px solid #37a5e5;  /* CATEGORY IMAGE BORDER */
  81. }
  82.  
  83. #tri {
  84.     color:#37a5e5;  /* CATEGORY IMAGE BORDER TRIANGLE */
  85. }
  86.  
  87. #tivo {
  88.     color:#000000;  /* CATEGORY TITLE COLOR */
  89. }
  90.  
  91. #tags {
  92.     border:5px solid #d4f0f7;  /* TAGS BOX BORDER */
  93.     background-color:#ffffff;  /* TAGS BOX BACKGROUND COLOR */
  94. }
  95.  
  96. #tags a {
  97.     border-bottom:1px solid #b2e7f7;  /* TAGS UNDERLINE */
  98.     color:#57cdf1;  /* TAGS TEXT COLOR */
  99. }
  100.  
  101. #tags a:hover {
  102.     color:#2278c7;  /* TAGS TEXT COLOR ON HOVER */
  103.     background-color:#eaf5ff;  /* TAGS BACKGROUND COLOR ON HOVER */
  104. }
  105.  
  106. /* VARIABLES */
  107.  
  108. a {
  109.     -webkit-transition: all 0.4s ease-in-out;
  110.     -moz-transition: all 0.4s ease-in-out;
  111.     -o-transition: all 0.4s ease-in-out;
  112.     -ms-transition: all 0.4s ease-in-out;
  113.     transition: all 0.4s ease-in-out;
  114. }
  115.  
  116. #top {
  117.     width:100%;
  118.     top:0px;
  119.     left:0px;
  120.     position:fixed;
  121.     height:80px;
  122.     overflow:hidden;
  123.     z-index:50;
  124. }
  125.  
  126. #meek {
  127.     position:fixed;
  128.     z-index:22;
  129.     margin-top:-83px;
  130.     width:100%;
  131. }
  132.  
  133. #meek img{
  134.     height:80px;
  135.     width:80px;
  136.     margin-left:-225px;
  137.     border-width:0px 5px;
  138.     border-style:solid;
  139. }
  140.  
  141. #desc {
  142.     position:fixed;
  143.     display:inline-block;
  144.     overflow:hidden;
  145.     padding:10px;
  146.     height:60px;
  147.     width:200px;
  148. }
  149.  
  150. #bar {
  151.     position:fixed;
  152.     top:90px;
  153.     left:0px;
  154.     width:100%;
  155.     height:20px;
  156.     text-align:center;
  157.     z-index:50;
  158. }
  159.  
  160. #linku a {
  161.     display:inline-block;
  162.     text-decoration:none;
  163.     text-align:center;
  164.     margin:0px 3px;
  165.     height:15px;
  166.     line-height:15px;
  167.     font-size:12px;
  168.     font-family:courier;
  169.     border-width:0px 3px 3px 3px;
  170.     border-style:dashed solid;
  171.     width:80px;
  172. }
  173.  
  174. #ex {
  175.     width:100px;
  176.     margin-top:5px;
  177.     text-align:center;
  178. }
  179.  
  180. #ex a {
  181.     display:inline-block;
  182.     width:0px;
  183.     height:0px;
  184.     margin:0px 5px;
  185.     overflow:hidden;
  186.     border-radius:100%;
  187. }
  188.  
  189. #dhtmltooltip {
  190.     position: absolute;
  191.     padding: 3px;
  192.     padding-top:5px;
  193.     text-align:center;
  194.     font-family:consolas;
  195.     font-size: 10px;
  196.     line-height:10px;
  197.     letter-spacing:1px;
  198.     text-transform: uppercase;
  199.     visibility: hidden;
  200.     z-index: 10000;
  201. }
  202.  
  203. #contain {
  204.     margin:0 auto;
  205.     width:568px;
  206.     margin-top:150px;
  207. }
  208.  
  209. #tivo img{
  210.     width:80px;
  211. }
  212.  
  213. #tivo #tri {
  214.     display:block;
  215.     margin-top:-8px;
  216.     font-size:20px;
  217. }
  218.  
  219. #tivo {
  220.     text-align:center;
  221.     width:175px;
  222.     margin:0px 7px;
  223.     margin-bottom:15px;
  224. }
  225.  
  226. #tivo #ties, #desc span {
  227.     display:block;
  228.     font-size:16px;
  229.     text-transform:uppercase;
  230.     font-family: 'Playfair Display SC', serif;
  231. }
  232.  
  233. #tags {
  234.     width:150px;
  235.     margin-top:5px;
  236.     padding:5px;
  237. }
  238.  
  239. #tags a {
  240.     display:block;
  241.     text-decoration:none;
  242. }
  243.  
  244. </style>
  245.  
  246. <!--
  247.    
  248.     ABSOLUTELY DO NOT TOUCH BELOW THIS POINT UNTIL LINE 364
  249.  
  250. -->
  251.  
  252. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  253.  
  254. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  255.  
  256. <script>
  257. $(function(){
  258. var $container = $('#contain');
  259. $container.imagesLoaded(function(){
  260. $container.masonry({
  261. itemSelector: '#tivo',
  262. });
  263. });
  264. $container.infinitescroll({
  265. itemSelector : "#tivo",
  266. navSelector : "div.pagination",
  267. nextSelector : ".pagination a#next",
  268. loadingImg : "",
  269. loadingText : "<em></em>",
  270. bufferPx : 10000,
  271. extraScrollPx: 12000,
  272. },
  273. // trigger Masonry as a callback
  274. function( newElements ) {
  275.   var $newElems = $( newElements ).css({ opacity: 0 });
  276. // ensure that images load before adding to masonry layout
  277. $newElems.imagesLoaded(function(){
  278. $newElems.animate({ opacity: 1 });
  279. $container.masonry( 'appended', $newElems, true );
  280. });
  281. }
  282. );
  283. });
  284. </script>
  285. </head>
  286. <body>
  287. <div id="dhtmltooltip"></div>
  288. <script type="text/javascript">
  289.  
  290. /***********************************************
  291. * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  292. * This notice MUST stay intact for legal use
  293. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  294. ***********************************************/
  295.  
  296. var offsetxpoint=20 //Customize x offset of tooltip
  297. var offsetypoint=-20 //Customize y offset of tooltip
  298. var ie=document.all
  299. var ns6=document.getElementById && !document.all
  300. var enabletip=false
  301. if (ie||ns6)
  302. var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
  303.  
  304. function ietruebody(){
  305. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  306. }
  307.  
  308. function ddrivetip(thetext, thecolor, thewidth){
  309. if (ns6||ie){
  310. if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  311. if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  312. tipobj.innerHTML=thetext
  313. enabletip=true
  314. return false
  315. }
  316. }
  317.  
  318. function positiontip(e){
  319. if (enabletip){
  320. var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
  321. var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
  322. //Find out how close the mouse is to the corner of the window
  323. var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
  324. var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
  325.  
  326. var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
  327.  
  328. //if the horizontal distance isn't enough to accomodate the width of the context menu
  329. if (rightedge<tipobj.offsetWidth)
  330. //move the horizontal position of the menu to the left by it's width
  331. tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
  332. else if (curX<leftedge)
  333. tipobj.style.left="5px"
  334. else
  335. //position the horizontal position of the menu where the mouse is positioned
  336. tipobj.style.left=curX+offsetxpoint+"px"
  337.  
  338. //same concept with the vertical position
  339. if (bottomedge<tipobj.offsetHeight)
  340. tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
  341. else
  342. tipobj.style.top=curY+offsetypoint+"px"
  343. tipobj.style.visibility="visible"
  344. }
  345. }
  346.  
  347. function hideddrivetip(){
  348. if (ns6||ie){
  349. enabletip=false
  350. tipobj.style.visibility="hidden"
  351. tipobj.style.left="-1000px"
  352. tipobj.style.width=''
  353. }
  354. }
  355.  
  356. document.onmousemove=positiontip
  357.  
  358. </script>
  359. <!--
  360.    
  361.     ABSOLUTELY DO NOT TOUCH ANYTHING ABOVE THIS POINT UNTIL LINE 244
  362.  
  363. -->
  364.  
  365. <!--
  366.     REPLACE URL WITH YOUR OWN CORNER IMAGE URL
  367. -->
  368. <img src="http://static.tumblr.com/jyuasny/Qahn3502q/38808178_m.png" style="z-index:-99; bottom:0px; left:0px; position:fixed;">
  369.  
  370. <div id="top">
  371. <!--
  372.     FISH CODE
  373.     YOU CAN EDIT IT AT http://abowman.com/google-modules/fish/#gadgetSWF
  374.     ALL FISH CODE BELONGS TO BOWMAN
  375. -->
  376. <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor3=073B94&up_fishName=Fishies&up_backgroundColor=F9F9F9&up_foodColor=ed4e73&up_fishColor4=467CE8&up_fishColor9=5EC6DB&up_numFish=10&up_fishColor8=2E4FB3&up_fishColor10=97F6F7&up_backgroundImage=http://&up_fishColor2=6EE7FF&up_fishColor6=386FC2&up_fishColor5=5EC2D1&up_fishColor1=46D0F2&up_fishColor7=11FAEA&" width="100%" height="80"><param name="movie" value="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor3=073B94&up_fishName=Fishies&up_backgroundColor=F9F9F9&up_foodColor=ed4e73&up_fishColor4=467CE8&up_fishColor9=5EC6DB&up_numFish=10&up_fishColor8=2E4FB3&up_fishColor10=97F6F7&up_backgroundImage=http://&up_fishColor2=6EE7FF&up_fishColor6=386FC2&up_fishColor5=5EC2D1&up_fishColor1=46D0F2&up_fishColor7=11FAEA&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
  377.  
  378.     <div id="meek"><center><a href="/">
  379.  
  380. <!-- REPLACE URL WITH YOUR OWN ICON URL -->
  381.         <img src="http://static.tumblr.com/jyuasny/eZEn350ga/screen_shot_2014-03-28_at_2.18.55_am.png">
  382.         </a><div id="desc">
  383.  
  384. <!-- INSTERT TITLE HERE (REPLACE ELECTRONICA) -->
  385.         <span>Electronica</span>
  386.  
  387. <!-- INSERT DESCRIPTION AFTER <p> -->
  388.         <p>
  389.         Bakao's Tag Page featuring Kagepro.<br><a href="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=38808178">Corner Image Cred</a>
  390.        </p></div></center>
  391.    </div>
  392. </div>
  393.  
  394. <div id="bar"><center><table cellspacing="0" cellpadding="0"><tr><td><div id="ex">
  395. <!--
  396.    EXTRA LINKS HERE
  397.    REPLACE "/" WITH URL YOU WANT
  398.    FIND 'LINK1' AND REPLACE IT WITH WHATEVER LINK TITLE YOU WANT
  399.    DO NOT TOUCH ANYTHING ELSE ON LINKS UNLESS YOU KNOW WHAT YOU'RE DOING
  400.     IF YOU'D LIKE TO DELETE ANY EXTRA LINKS DELETE FROM <a TO </a>
  401.    IF YOU NEED MORE EXTRA LINKS THERE ARE MORE ON LINE 402
  402. -->
  403.    <a href="/" onMouseover="ddrivetip('Link1','#fff', 50)"; onMouseout="hideddrivetip()"></a><!-- LINK STOP -->
  404.    <a href="/" onMouseover="ddrivetip('Link2','#fff', 50)"; onMouseout="hideddrivetip()"></a><!-- LINK STOP -->
  405.    <a href="/" onMouseover="ddrivetip('Link3','#fff', 50)"; onMouseout="hideddrivetip()"></a><!-- LINK STOP -->
  406.    </div></td><td><div id="linku">
  407.  
  408. <!--    MAIN LINKS HERE     -->
  409.    <a href="/">Home</a>
  410.    <a href="/ask">Ask</a>
  411.    <a href="/archive">Past</a>
  412.    <a href="http://bakao.co.vu">Theme</a> <!-- DO NOT TOUCH -->
  413.    
  414.    </div></td><td><div id="ex">
  415.  
  416. <!-- MORE EXTRA LINKS   -->
  417.    <a href="/" onMouseover="ddrivetip('Link4','#fff', 50)"; onMouseout="hideddrivetip()"></a><!-- LINK STOP -->
  418.    <a href="/" onMouseover="ddrivetip('Link5','#fff', 50)"; onMouseout="hideddrivetip()"></a><!-- LINK STOP -->
  419.    <a href="/" onMouseover="ddrivetip('Link6','#fff', 50)"; onMouseout="hideddrivetip()"></a><!-- LINK STOP -->
  420.    </div></td></tr></table></center></div>
  421.  
  422. <table id="contain" cellspacing="0" cellpadding="0"><tr><td>
  423.  
  424. <!--
  425.    CATEGORIES START
  426.    
  427.    IF YOU WANT TO ADD MORE CATEGORIES JUST COPY AND PASTE FROM 'START CATEGORY' TO 'END CATEGORY'
  428.    
  429.    IF YOU WANT MORE TAG LINKS USE THIS TEMPLATE:
  430.    <a href="/tagged/tagname">TagTitle</a>
  431.        -TAGNAME IS WHATEVER THE #TAG IS
  432.        -TAGTITLE IS WHATEVER YOU'D LIKE IT TO READ AS
  433. -->
  434.  
  435. <!-- START CATEGORY -->
  436.     <div id="tivo">
  437.     <!-- ICON URL HERE -->
  438.        <img src="http://static.tumblr.com/jyuasny/3pQn35r9b/screen_shot_2014-03-28_at_11.54.05_am.png">
  439.         <center id="tri">▼</center>
  440.     <!-- CATEGORY TITLE HERE -->
  441.         <span id="ties">Category</span>
  442.         <div id="tags">
  443.     <!-- START TAGS -->
  444.             <a href="/">Tag</a>
  445.             <a href="/">Tag</a>
  446.             <a href="/">Tag</a>
  447.             <a href="/">Tag</a>
  448.         </div>
  449.     </div>
  450. <!-- END CATEGORY -->
  451.  
  452. <!-- START CATEGORY -->
  453.     <div id="tivo">
  454.     <!-- ICON URL HERE -->
  455.        <img src="http://static.tumblr.com/jyuasny/STsn35r9g/screen_shot_2014-03-28_at_11.53.50_am.png">
  456.         <center id="tri">▼</center>
  457.     <!-- CATEGORY TITLE HERE -->
  458.         <span id="ties">Category</span>
  459.         <div id="tags">
  460.     <!-- START TAGS -->
  461.             <a href="/">Tag</a>
  462.             <a href="/">Tag</a>
  463.             <a href="/">Tag</a>
  464.             <a href="/">Tag</a>
  465.             <a href="/">Tag</a>
  466.             <a href="/">Tag</a>
  467.         </div>
  468.     </div>
  469. <!-- END CATEGORY -->
  470.  
  471. <!-- START CATEGORY -->
  472.     <div id="tivo">
  473.     <!-- ICON URL HERE -->
  474.        <img src="http://static.tumblr.com/jyuasny/pBSn35r9c/screen_shot_2014-03-28_at_11.56.55_am.png">
  475.         <center id="tri">▼</center>
  476.     <!-- CATEGORY TITLE HERE -->
  477.         <span id="ties">Category</span>
  478.         <div id="tags">
  479.     <!-- START TAGS -->
  480.             <a href="/">Tag</a>
  481.             <a href="/">Tag</a>
  482.         </div>
  483.     </div>
  484. <!-- END CATEGORY -->
  485.  
  486.  
  487. </td></tr></table>
  488.  
  489. </body>
  490. </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!