Add WordPress like/Style Category/Label Specific Post Icons in Blogger Blog

This tutorial will show you How To Add WordPress like Category/Label Specific Post Icons in Blogger Blog. Last time i have guide you How To Add Label Specific Icons Below Post Titles In Blogger. But that one does not look beautiful because the label icon appear after or before the post title (not in proper way). You might have seen these icons for different post on wordpress. Wordpress has some plugins which directly add catagory specific icon to different post. But you cannot add directly add it to blogger. You can add it to blogger using a javascript in which i have included a 8 category/label specific post icons. The labels or catagories icons are place near to the post title in the left site . You just have to include a label to show any label specific icon

WordPress like Category/Label Specific Post Icons Demo

LIVE DEMO

How to add specific label icon in blogger posts

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code Shown Below just above/before it

<style>
.format-icon{
    width:60px;
    height:60px;
    display: block;
    margin: -40px 0 0 -79px;
    position: absolute;
    display:block;}
   .format-icon img {opacity:0.8;
    background-color: #000000;   
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -webkit-transition:ease-out 850ms;
    -moz-transition:ease-out 850ms;
    -o-transition:ease-out 850ms;
    -ms-transition:ease-out 850ms;
    transition:ease-out 850ms;}  
.format-icon img:hover {
    background-color: #76131F;
    -webkit-transition:ease-out 850ms;
    -moz-transition:ease-out 850ms;
    -o-transition:ease-out 850ms;
    -ms-transition:ease-out 850ms;
     transition:ease-out 850ms;}
</style>
<script type='text/javascript'>
function lebel_logo(latesthack) {
imagenes = new Array();
imagenes[1] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyOxd2HX9p5Y3w479S7d38pgXEkw6b2874rkj8Nmatxu2PaqPK_5-BXcLDHQcmcS7NaPYUY4hzHTE37-vxGOumEHaMdceleQe9Y2Dp1t92mwr1p3epmGV9Tidf56ZAbwH9vXEW4LtjH4A/s1600/image.png' title='Image'/>&quot;

imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJGiH9Iz55TZvr2GLhc9P3QCwhLXF4j2p03cG6uPTdCfjbc7xWmWLWZtrkebAeveumr40sHRiyHcGoU922I2lOVOxON6YLfMiNdrv_rHeER4MXwf5kGoDZK8KqtlqAOfIJ40dDNnQ6aA/s1600/video.png' title='Video'/>&quot;

imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2kU-1OcOUNUBMHflOLCoESAWtdlfdZftLucLMJZcf_0yXrxheT0VX4C3uiflIUm5BEnA5EfZwpbLTsM-5PD65ws-TzWe6VERNdtcgEEIih-fwMcecybKqpXeIoqAg6mZEUlEa45v1j_c/s1600/audio.png' title='Music'/>&quot;

imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0PcKkpNNB8ipD_9GdGZapTvRVIh7r_52Lc8rxrrFS4bB0DFzWy9ia8KCISBjctKRPBNi4E0gI7_Wmg3uX_mhqPf8P_7EGAzG0Rh52_TEOvh-jjLeT1-CxQlRzEcLINoBf8EdE2uCZHJ4/s1600/quote.png' title='Quote'/>&quot;

imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1tLGutvE3RAw8xzi2y_QD7MqIZa0ftb_MiP2kUyfuA6P-bIVbaIGrF6U6AP2-qUCBPvyCDKbCWiRqf3sKILfJUJTQxhN9EiHeuNgamHTC6W5PRopo5Jb0zJCqfsWiAac-0QpRQ2GeMs/s1600/blogger.png' title='Blogger'/>&quot;

imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABQ2ccZq_3eQKNA2lxDxaHzLeBQZgggpgsD76h5wv35OdTyD-t43B7cXunTHGFYMp6vPvmZPLq6c_rtxM27VR11IU3TcTk0P-wqeEjw_718lVJ4AA7w3NUWCXDJVIgYmeWq508N-ionw/s1600/wordpress.png' title='Wordpress'/>&quot;

imagenes[7] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfj4Xe9C8UPrDiO4WBUXCx6xjq2dERj_pI0uBzj3ZazBlKtLxeZYlzl7juBHVcFRrLVXVkHZuodmRkoDQAj65UGseH-DWU1sGuCdX1QsN8qJu8wovdxe7JXtUq8pNjsy7dfkOl9Ilp5nM/s1600/announcement.png' title='Announcement'/>&quot;

imagenes[8] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4ZnbQItJoEymqg9HtH9swoYAZDlk_N7Z9qRM5p9PBAfoElO-krVCMex-eL9qSuCwaDWCwXThkIm9VQ2htorqWj07e8XR4ZolImc9cz80r38nC84CyUjWuxXJ2tpGirxH9p0BfR711jA/s1600/mobile.png' title='Mobile'/>&quot;

if (latesthack == &quot;Image&quot;)
{document.write(imagenes[1]);}

if (latesthack == &quot;Video&quot;)
{document.write(imagenes[2]);}

if (latesthack == &quot;Music&quot;)
{document.write(imagenes[3]);}

if (latesthack == &quot;Quote&quot;)
{document.write(imagenes[4]);}

if (latesthack == &quot;Blogger&quot;)
{document.write(imagenes[5]);}

if (latesthack == &quot;Wordpress&quot;)
{document.write(imagenes[6]);}

if (latesthack == &quot;Announcement&quot;)
{document.write(imagenes[7]);}

if (latesthack == &quot;Mobile&quot;)
{document.write(imagenes[8]);}
}
</script>

• Now Find the code shown below using [ctrl+F]

<div class='post-header'>

• Now Paste the Code Shown Below just above/before it

<b:loop values='data:post.labels' var='label'>
<a class='format-icon' expr:href='data:label.url' rel='tag'>
<script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script>
</a>
</b:loop>

• Now save your template

How to use These labels

Now when you are writing a post add one of the following labels according to your post.

Image

Video

Music

Quote

Blogger

Wordpress

Announcement

Mobile

Customization

• Adjust margin: -40px 0 0 -79px according to your template

Like it? Share it.