tags page 02

<!--

TAGS PAGE 02
THEME BY HARDZIAM / THEMESBYZSU

Do not use as base
Keep (BOTH) credits in tact

MESSAGE ME @ themesbyzsu.tumblr.com/ask if you have ANY questions about using this page theme.


-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,700italic|Arimo:400,700' rel='stylesheet' type='text/css'>

<style type="text/css">

#container{width:600px; /* if you want two columns, change this number to 400*/}

#sidebar{background: #ffbbcc url('http://38.media.tumblr.com/tumblr_m9n72gzUJ71qlt206o3_250.png') no-repeat; /* here you change the sidebar image */}

 /* THESE ARE THE COLORS THAT YOU CHANGE */

.blue a:hover{box-shadow:0px 15px #00D0FF inset, 0px -15px #00D0FF inset;}
.blue a:hover:before{background:#00D0FF;}
.red a:hover{box-shadow:0px 15px #E81029 inset, 0px -15px #E81029 inset;}
.red a:hover:before{background:#E81029;}
.pink a:hover{box-shadow:0px 15px #ffaacc inset, 0px -15px #ffaacc inset;}
.pink a:hover:before{background:#ffaacc;}
.yellow a:hover{box-shadow:0px 15px #FFFC5E inset, 0px -15px #FFFC5E inset;}
.yellow a:hover:before{background:#FFFC5E;}
.green a:hover{box-shadow:0px 15px #00D118 inset, 0px -15px #00D118 inset;}
.green a:hover:before{background:#00D118}
.purple a:hover{box-shadow:0px 15px #C413E8 inset, 0px -15px #C413E8 inset;}
.purple a:hover:before{background:#C413E8;}
.orange a:hover{box-shadow:0px 15px #FAA716 inset, 0px -15px #FAA716 inset;}
.orange a:hover:before{background:#FAA716;}


                      /* --------- STYLING --------- */
body {background:white;position:absolute;margin:0;height:100%;width:100%;font-size:12px;font-family:Helvetica;}a {text-decoration:none;outline:none;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}a:hover {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}#credit a{position:fixed;right:10px;bottom:10px;padding:5px;line-height:10px;font-size:11px;color:black;background:white;border:1px solid transparent;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}#credit a:hover {border:1px solid black;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}
                            /* ----- tagboxs ----- */
#container{position:absolute;top:10px;left:250px;}
#tagbox {float:left;margin:15px;width:150px;display:inline-block;-webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; transition: all .6s ease-out; overflow:hidden;padding:5px;font:8.5px 'Corbel'; text-transform:uppercase;background:white; border:1px solid #f1f1f1;}
#tagbox h1{text-transform:uppercase;font: 11px 'Arimo';letter-spacing:3px;padding:5px; margin-top:-5px;text-align:center; border-bottom:1.5px solid #eee; line-height:10px;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;}
#tagbox li{display:inline-block;list-style:none;width:30%;line-height:15px;height:0px;overflow:hidden;margin:5px 0;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;
}

#sidebar{width:200px;background-position:bottom;height:100%;position:fixed;}#desc{padding:30px;text-align:center;
}#desc a{color:white;display:block;border-bottom:1px solid white;padding:5px;font:10px Corbel;}#desc a:last-child{border-bottom:none;}#desc h1{font:20px Corbel;color:white;text-align:left;margin-bottom:-5px;}#desc em{font:italic 16px times;color:white;}

.blue a, .red a, .pink a, .orange a, .yellow a, .purple a, .green a{
display:block;padding:3px 5px;background:white;color:black;padding-left:10px;box-shadow:0px 0px transparent inset;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out;transition: all .4s ease-out
}

.blue a:hover, .red a:hover, .pink a:hover, .purple a:hover, .yellow a:hover, .orange a:hover, .green a:hover{color:#fff;transition-duration:0s;padding-left:20px;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;
}

.blue a:before, .red a:before, .pink a:before, .yellow a:before, .purple a:before, .orange a:before, .green a:before{
content:'';width:4px;height:4px;margin-top:4px;margin-left:-15px;background:white;position:absolute;
}

                        /*----- END STYLING ------*/
</style>

</head>

<body>

<!-----

W E L C O M E

----->

<div id="sidebar">
<div id="desc">


<h1>Title</h1>
<em>Subtitle</em>


<a href="/">back</a>
<a href="/ask">ask</a>
<a href="/submit">submit</a>
<a href="http://hardziam.tumblr.com">credit</a>
</div></div>


<div id="container">
<div id="entries">


<!-----
OKAY QUICK NOTE!
the tags are organized with the different colors that happen when you hover over them. The default ones are orange, blue, pink, purple, red and yellow, but you can input your own ones at the top. All you then have to do is copy the template below and change "orange" to the color of your choice!

<div id="tagbox" class="orange">
    <h1>Mine</h1>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
</div>

if you don't know how to make a link:

<a href="/tagged/bonjour">bonjour</a> will direct you to all of the pages on your blog with the tag bonjour.

to link to your facebook/twitter/instagram etc;

<a href="http://instagram.com/zsuzsiem">instagram</a>
<a href="http://facebook.com/zsuzsiem">facebook</a>

!!!!! DON'T FORGET THE HTTP:// !!!!!
--->
<div id="tagbox" class="orange">
    <h1>Subtitle</h1>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
</div>


<div id="tagbox" class="yellow">
    <h1>Extras</h1>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
    <a href="/tagged/tag">tag name</a>
</div>

<!------>


</div>
</div>
</div>

<div id="credit"><a href="http://hardziam.tumblr.com">✿</a></div>

<!------ S C R I P T S! ------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#tagbox',
});
});

$container.infinitescroll({
itemSelector : "#tagbox",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},

// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});

</script>
<!---- end masonry scripts -->


</body>
</html>