See those little icons in the upper left-hand corner of my posts? Here’s how to add them to your posts in less than 1 minute:
Step 1:
If not already using it, switch to the default ‘Redux’ theme and customize it. Navigate to Customize > Theme > Redux > Use custom HTML
Step 2:
Search for <div class=”post”> and replace it with:
<div class="post {block:Text}post-type-text{/block:Text}{block:Photo}post-type-photo{/block:Photo}{block:Photoset}post-type-photoset{/block:Photoset}{block:Quote}post-type-quote{/block:Quote}{block:Link}post-type-link{/block:Link}{block:Chat}post-type-chat{/block:Chat}{block:Video}post-type-video{/block:Video}{block:Audio}post-type-audio{/block:Audio}{block:Answer}post-type-answer{/block:Answer}">
<div class="post-icon">
<a href="{Permalink}">{block:Text}{lang:Text}{/block:Text}{block:Photo}{lang:Photo}{/block:Photo}{block:Photoset}{lang:Photoset}{/block:Photoset}{block:Quote}{lang:Quote}{/block:Quote}{block:Link}{lang:Link}{/block:Link}{block:Chat}{lang:Chat}{/block:Chat}{block:Video}{lang:Video}{/block:Video}{block:Audio}{lang:Audio}{/block:Audio}{lang:Answer}{/block:Answer}</a>
</div><!-- post-icon -->
Step 3:
Click the ‘Advanced’ button and add the following css to the ‘Add custom CSS’ field
/*wrapper*/
#wrapper #content {
width:560px;
}
/*posts*/
#wrapper #content .post {
padding:25px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/*post icons*/
.post .post-icon {
position:absolute;
left:-22px;
top:-19px;
}
.post .post-icon a {
text-indent:-9999px;
background: transparent url(http://static.tumblr.com/usynesx/v4al8wuqe/post-icons.png) no-repeat 0 0;
height:57px;
width: 57px;
text-indent:-9999px;
display:block;
}
.post-type-text .post-icon a {background-position: 0 0;}
.post-type-photo .post-icon a {background-position: 0 -57px;}
.post-type-quote .post-icon a {background-position: 0 -114px;}
.post-type-link .post-icon a {background-position: 0 -114px;}
.post-type-chat .post-icon a {background-position: 0 -231px;}
.post-type-audio .post-icon a {background-position: 0 -289px;}
.post-type-video .post-icon a {background-position: 0 -347px;}
.post-type-answer .post-icon a {background-position: 0 -405px;}
/*hide quote bg*/
#wrapper #content .post .quotebg {display:none;}
Click ‘Save’ and you’ll see the icons on your posts! Move them wherever you want by editing the .post .post-icon ‘top’ and ‘left’ values in CSS. I’ve posted the source file below so you can customize the icons yourself:
Download the .psd source file for these Tumblr post icons here
