Adding Blog Post Label On Image

I have seen a lot of professional blog design and top website having post labels on image, while normal blog and custom templates show their post labels below post footer or below the post title. If you are one of them finding to add label on image don't worry we have created one, this is been created using CSS and HTML code.

To add this in your template you need to follow the step below:-

Every first step while adding code in blogger is to backup your blog template. Let move further, go to Blogger Template > Edit HTML > and find the ]]></b:skin> code.

Now add the CSS code before the </b:skin> tag in your template given below this will show full post label tag.

For example:

.post-label a{color:#FFF;font-family:georgia;font-style:italic}
.post-label{display:inline-block;background:#65CCE3;position:absolute;left:-2%;top:25px;z-index:10;padding:7px 20px}
.post-label:before{position:absolute;display:block;bottom:-8px;content:'';left:0;border-color:#3D3E3F rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:8px 0 0 8px}

Now you need to add the child n+2 tag which only display one post-label tag add the below code to the above code.

.post-label a:nth-child(n+2)important{display:none}
To change the color and adding margin add this code.
.post-label{background:#FFA53D}

You can change and add you own color to the label background.

Next step is to find

<div class='post-footer'>

And then add the below code above it.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
</div>

Finally save you blog template and reload your blog to check the effect.

Note if you already have post labels on your blog you can remove from you template or search for post-footer-line-2 in blog and remove the code and you are done.