View by Tags (Page for Tumblr)

How to Install...

Step 1: COPY and PASTE the following code into your theme's CSS between <style> and </style>

<style>
.tag-all,
.tag-red,
.tag-blue,
.tag-purple {line-height:160%;font-size:12px;text-align:center;}

p a.tag-all,
p a.tag-red,
p a.tag-blue,
p a.tag-purple {
    color:{TitleColor};
    background:{TitleColor}20;
    border:1px solid {TitleColor}20;
    border-radius: 3px;
    text-transform:none;
    margin-right: 0.5em;
    margin-bottom:0px;
    padding: 0.3em 0.85em;
    transition: all 300ms ease-in-out;
    }

p a.tag-all:hover,
p a.tag-red:hover,
p a.tag-blue:hover,
p a.tag-purple:hover {
    background:#fff;
    color:{color:Link Hover};
    border-color:{color:Link Hover}60;
    box-shadow: 0 1px 2px #00000010;
    }

h3 {
    font-family:{text:Header Font};
    letter-spacing:1px;
    text-transform:uppercase;
    color:#000;
    }
</style>

Step 2: Create a new theme page, then COPY and PASTE the following code into the HTML section

<h3 style="font-size: 12px; color: #000;"><strong>Category 1</strong></h3>
<p><a class="tag-all" href="/tagged/1">Tag 1</a><a class="tag-red" href="/tagged/2">Tag 2</a><a class="tag-red" href="/tagged/3">Tag 3</a><a class="tag-red" href="/tagged/4">Tag 4</a></p>
<p><a class="tag-red" href="/tagged/5">Tag 5</a><a class="tag-red" href="/tagged/6">Tag 6</a><a class="tag-red" href="/tagged/7">Tag 7</a><a class="tag-red" href="/tagged/8">Tag 8</a></p>
<h3 style="margin-top: 3em; font-size: 12px; color: #000;"><strong>Category 2 &nbsp;</strong></h3>
<p><a class="tag-blue" href="/tagged/9">Tag 9</a><a class="tag-blue" href="/tagged/10">Tag 10</a></p>
<h3 style="margin-top: 3em; font-size: 12px; color: #000;"><strong>Category 3&nbsp;</strong></h3>
<p><a class="tag-purple" href="/tagged/11">Tag 11</a><a class="tag-purple" href="/tagged/12">Tag 12</a><a class="tag-purple" href="/tagged/13">Tag 13</a><a class="tag-purple" href="/tagged/14">Tag 14</a></p>