e#2 filter links

<!DOCTYPE html><!--


        > CSS by hayasaka
        > FILTER SCRIPT FROM THEMESBYZSU
            (/post/95934292090/ for more customization explanation)
        > PICK COLORS AT http://www.w3schools.com/tags/ref_colorpicker.asp


-->
<html>

    <head>

    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}"/>

<style>

body {
    margin:0;
    padding:0;
    font-family:arial;
    font-size:9px;
    letter-spacing:2px;
    word-wrap:break-word;
    background-color:#fce;
    background-image:url(http://i.imgur.com/iVU461Q.png); /*upload image or if you want none remove this line*/
    -webkit-background-size:auto;
    -moz-background-size:auto;
    background-size:auto; /* 'auto' for tiled, '100% 100%' for stretched and 'cover' for maximized, change all 3 lines*/
}

a, #link {
    text-decoration:none; /*removes default underline on links*/
    -webkit-transition:all 155ms linear;
    -moz-transition:all 155ms linear;
    -o-transition:all 155ms linear;
    transition:all 155ms linear;
}

/**these are important not recommended to edit**/

img, iframe, embed, object {
    max-width:100%;
}

#everything {
    display:table;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#content {
    display:table-cell;
    vertical-align:middle;
}

/**------------------------------------------**/

/*****HEADER LINK BAR*****/

#sort {
    border-top:1px solid #0ef;
    border-bottom:1px solid #fce;
}

#filters {
    text-align:center;
    display:table;
    width:100%;
}

#filters a {
    display:table-cell;
    padding:4px 6px;
}

/******HEADER LINKS******/

#title0 {
    background:#fff;
    color:#777;
}

#title0:hover {
    background:#000;
    color:#fcf;
}

#title1 {
    background:#c2ebff;
    color:#6699ff;
}

#title1:hover {
    background:#9cf;
    color:#fff
}

#title2 {
    background:#fce;
    color:#f6c;
}

#title2:hover {
    background:#f9f;
    color:#fff;
}

#title3 {
    background:#ccf;
    color:#96f;
}

#title3:hover {
    background:#99f;
    color:#fff;
}

#title4 {
    background:#eee;
    color:#999;
}

#title4:hover {
    background:#ddd;
    color:#fff;
}

/**********CONTAINER**********/

#box, #cont {
    width:500px; /*width of container. you can change this*/
}

#box {
    margin:auto;
    display:block;
    overflow:hidden;
    border:1px solid #aaa; /*container border*/
    background:#fff;
    /*delete this for no round corners*/
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    /*--------------------------------*/
}

#header img {
    display:block;
    width:100%;
}

/******BOX THAT SCROLLS******/

#cont_outer {
    max-height:250px; /*any number is ok*/
    overflow-y:scroll;
    overflow-x:hidden;
}

/*******SCROLLBAR*******/

#cont_outer::-webkit-scrollbar {
    height:2px;
    width:2px;
}

#cont_outer::-webkit-scrollbar-thumb {
    background:#000;
}

#cont_outer {
    -ms-overflow-style:none;
}

/**************************/

#container, .all {
    -webkit-transition:all.4s ease;
    -moz-transition:all.4s ease;
    -o-transition:all.4s ease;
    transition:all.4s ease;
}

#container {
    margin:5px;
}

/*******LINKS + INFO*******/

#float {
    width:50%; /* change to 100% if you want it in one column, or 33.3% (estimate) if you want 3 */
    text-align:center;
}

/*link box*/
#block {
    margin:5px;
    background:#ffc;
    border:1px solid #9cf;
}

/*actual link*/
#link {
    display:block;
    padding:5px 7px;
    text-transform:uppercase;
    border-bottom:1px solid #c9f;
    background:#fcf;
    color:#fff;
}

#link:hover {
    border-bottom:1px solid #0cf;
    background:#cff;
    color:#c9f;
}

/*link info*/
#info {
    padding:5px 7px;
    color:#09c;
}

/********MISC********/

#imglink {
    display:block;
    margin:auto;
    margin-bottom:5px;
    padding:3px;
    background:#fff;
    border:1px solid #eee;
}

/*****credit*****/

#co {
    position:fixed;
    z-index:999;
    bottom:5px;
    right:5px;
    overflow:hidden;
    color:#777;
}

#c {
    padding:2px;
    width:10px;
    height:10px;
    -webkit-transition:all.3s;
    -moz-transition:all.3s;
    -o-transition:all.3s;
    transition:all.3s;
    white-space:nowrap;
}

#c:hover {
    width:50px;
}

#c img {
    display:block;
    float:left;
    margin-right:5px;
}

#ct {
    line-height:10px;
    font-size:10px;
    text-transform:uppercase;
    font-family:consolas;
    letter-spacing:1px;
}


</style>

<script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>

<script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>

<script>

 $(document).ready(function(){

 var $container = $('#container');

 $container.isotope({
 itemSelector : '.all'
 });

 var $optionSets = $('#sort .option-set'),
 $optionLinks = $optionSets.find('a');

 $optionLinks.click(function(){
 var $this = $(this);
 // don't proceed if already selected
 if ( $this.hasClass('selected') ) {
 return false;
 }
 var $optionSet = $this.parents('.option-set');
 $optionSet.find('.selected').removeClass('selected');
 $this.addClass('selected');

 // make option object dynamically, i.e. { filter: '.my-filter-class' }
 var options = {},
 key = $optionSet.attr('data-option-key'),
 value = $this.attr('data-option-filter');
 // parse 'false' as false boolean
 value = value === 'false' ? false : value;
 options[ key ] = value;
 if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
 // changes in layout modes need extra logic
 changeLayoutMode( $this, options )
 } else {
 // otherwise, apply new options
 $container.isotope( options );
 }

 return false;
 });

 });

</script>

    </head>

    <body>

    <!-- credit, you can move it to your pages or something -->

    <a id="co" href="http://hayasaka.tumblr.com">
        <div id="c">
            <img src="http://i.imgur.com/8h0nbvk.gif">
            <div id="ct">Theme</div>
        </div>
    </a>

<div id="everything">
    <div id="content">
        <div id="box">


<div id="header">
    <img src="http://i.imgur.com/8ROXXfu.png"> <!-- header image -->
</div>


<!--- //////FILTER TABS////// --->

<div id="sort">
    <div id="filters" class="option-set clearfix" data-option-key="filter">

        <a id="title0" href="#filter" data-option-filter=".all">REFRESH</a>
        <a id="title1" href="#filter" data-option-filter=".filter1">FILTER1</a>
        <a id="title2" href="#filter" data-option-filter=".filter2">FILTER2</a>
        <a id="title3" href="#filter" data-option-filter=".filter3">FILTER3</a>
        <a id="title4" href="#filter" data-option-filter=".filter4">FILTER4</a>

<!--

    to add filters:

    1) copy one of the above lines and change the names (leave "#filter" as is)

     (ex.)

        <a id="title5" href="#filter" data-option-filter=".filter5">FILTER5</a>

    2) you can edit the colors by creating a new div in css (before </style>)

     (ex.)

        #title5 {
            background:#fff;
            color:#aaa;
        }

-->

    </div><!--filters-->
</div>


<!---////////////////////////////////--->

<div id="cont_outer">
    <div id="cont">
        <div id="container" class="clearfix">


<!--

    here are your actual links ... you can put whatever, pictures, text, videos etc.

    to prevent things from overlapping add 'display:block;' to the style

    you can order the links in anyway you like, the 'filter1' links do not have to be together

    first page (REFRESH) shows all tags

-->


<!-- /////BLOCK BREAKDOWN///// -->

<!--

    "all" is the name i chose for a general tag.

    NOTE: you MUST have the "all" in the ' class="" '

-->

<div id="float" class="all"> <!-- float is the box that holds the block in place, class="all" tells you which filter it will appear in -->
    <div id="block"> <!-- container that holds the link and text -->
        <a id="link" href="/tagged/gsnk"> <!--link, if you dont want links change the "a id" to "div id", take out the ' href="URL" ' and change the "</a>" tag below to "</div>"-->
            Gekkan Shoujo Nozaki-kun
        </a> <!-- end link -->
        <div id="info"> <!-- this is the info container, you can choose to write something here like a description, or if you'd rather not you can delete this div -->
            this link belongs to general tags only, click to direct to posts tagged "gsnk"
        </div><!-- end info -->
    </div><!-- end block -->
</div><!-- end float -->

<!-- //////////////////////////// -->


<!--/////////EXAMPLE LINK BLOCK//////////-->

<div id="float" class="all">
    <div id="block">
        <a id="link" href="/tagged/f(x)">
            f(x)
        </a>
        <div id="info">
            f(x) (/ˌɛf ˈɛks/; Korean: 에프엑스) is a five-member multi-national K-pop girl group formed by S.M. Entertainment in 2009. The group consists of Victoria, Amber, Luna, Sulli, and Krystal.
        </div>
    </div>
</div>

<!-- /////////////////////////////////// -->


<!-- ///EXAMPLE LINK BLOCK WITH IMAGE/// -->

<div id="float" class="all">
    <div id="block">
        <a id="link" href="http://gekkan-shoujo-nozakikun.wikia.com/wiki/Yuzuki_Seo">
            YUZUKI SEO
        </a>
        <div id="info">
            <img src="http://i.imgur.com/K2jGbXL.gif" id="imglink">
            <!-- i named it 'imglink', so to edit the style find '#imglink' in css -->
            this link belongs to general tags only. + seo included
        </div>
    </div>
</div>

<!-- /////////////////////////////////// -->


<!--/////MULTIPLE FILTERS///// -->

<!--

    if you want your link/block to have another filter category, add the class name after.

    the class name (thats what i call it but idk what it really is) is the text that is in ' data-option-filter="" '

-->

<div id="float" class="all filter1">
<!-- here i put 'all' and 'filter1'. that means this tag will appear in both the 'all' filter and 'filter1' filter -->
    <div id="block">
        <a id="link" href="/">
            Link 1
        </a>
        <div id="info">
            this link belongs to general tags and filter 1
        </div>
    </div>
</div>


<div id="float" class="all filter1 filter2">
<!-- here i put 'all', 'filter1'and 'filter2' so it will show up in all three -->
    <div id="block">
        <a id="link" href="/">
            Link 2
        </a>
        <div id="info">
            this link belongs to general tags, filter 1 & filter2
        </div>
    </div>
</div>

<!-- ////////////////////////// -->


<!-- ///////MORE EXAMPLES/////// -->

<div id="float" class="all filter2">
    <div id="block">
        <a id="link" href="/">
            Link 3
        </a>
        <div id="info">
            this link belongs to general tags and filter2
        </div>
    </div>
</div>

<div id="float" class="all filter2 filter3">
    <div id="block">
        <a id="link" href="/">
            Link 4
        </a>
        <div id="info">
            this link belongs to general tags, filter2 & filter3
        </div>
    </div>
</div>

<div id="float" class="all filter1 filter4">
    <div id="block">
        <a id="link" href="/">
            Link 5
        </a>
        <div id="info">
            this link belongs to general tags, filter1 & filter4
        </div>
    </div>
</div>

<div id="float" class="all filter1 filter2 filter3 filter4">
    <div id="block">
        <a id="link">
            Link 6
        </a>
        <div id="info">
            this link belongs to general tags, filter1, filter2, filter3, & filter4. all of them!
        </div>
    </div>
</div>

<div id="float" class="all filter3 filter4">
    <div id="block">
        <a id="link" href="/">
            Link 7
        </a>
        <div id="info">
            this link belongs to general tags, filter3 & filter4
        </div>
    </div>
</div>

<!-- ///////END LINK BLOCKS/////// -->

        </div><!--container-->
    </div><!--cont-->
</div><!--cont_outer-->

        </div><!--box-->
    </div><!--content-->
</div><!--everything-->

    </body>
</html>