ADD WORDPRESS LIKE/STYLE CATEGORY/LABEL SPECIFIC POST ICONS IN BLOGGER BLOG - Blogger Tips And Tricks

Wednesday, 5 September 2012

ADD WORDPRESS LIKE/STYLE CATEGORY/LABEL SPECIFIC POST ICONS IN BLOGGER BLOG

at 03:11 Posted by Unknown Labels: Blog Tricks

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.

WORDPRESS LIKE CATEGORY/LABEL SPECIFIC POST ICONS DEMO

HOW TO ADD SPECIFIC LABEL ICON IN BLOGGER POSTS

Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
Backup your Template before making any changes to your blog
Now Expand Widget Templates
Press Ctrl + F and search the code shown below
Now Find the code shown below using [ctrl+F]

</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] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFmQjtj49g80lc31TK36LBMxJY9K8rs6s-MLwM1wE2XL_4ldeHZT40hN_ZGFiY6A6G1peg9-jXBNFdLmiUoElctOLQVtZJFiAtdxdTZX3EY0OyL8MDKTAUbEux3Bgh8vtGPqgwtgqvoc/s1600/image.png' title='Image'/>"

imagenes[2] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTrQvjkOPjxGXjQp9C6T7LIOgEDY-6NAIneL3hglf_aBQ0n5retJ8I7AUl6zdqCQNhbSegI1uWaAdT2RtwHwbRMj6kHOpUr7_f13nPO2drKO82AN7HB4cu-J9zvX7SIKXYt8b8v8Ht0o/s1600/video.png' title='Video'/>"

imagenes[3] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sWV7UQXkbsYx8rfdN9CwseUnnm9XOIvx4aUKR_6HnN2IJZMuxVmSqD9T7JeZTnQNH0QBQg32DDfoF4KoT2Y7jxif6ig1t64AL79zVmnt4uwE_TU5Ql-vLUR6XZxvvHKHaesGeOMKaDo/s1600/audio.png' title='Music'/>"

imagenes[4] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATciH0_l6uT2PZrrFd0jqTB6USY4K4Bvlul2lrOSWlIl6zD5GEHfZkg8DDYXouaIUNJLhQFbdKFIVgBQ1jWdK1VJzDxST8tptfBBW-5OyozWp5awonQPQ4mcgEGdq4CnyDmPTRcn7gd4/s1600/quote.png' title='Quote'/>"

imagenes[5] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI5W3kypj2_TPIeECHOOhfGaGrrYfSn9ne4CNyronU45OO5bKIXg3T2EFX6aLuAHXaZJxR5vGVtcQM_h1Olx3QeiyIpQA0Zw0CjMQ-nAdCKYMK2GJCNMxCkPnoVX-vTdQcQ7GWU-QWFeA/s1600/blogger.png' title='Blogger'/>"

imagenes[6] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpGRW2-QkUU-ZWPB_Mxxzhymb5L2ImDkJri0PJG1ipNBjHg-qsuKsp4owIkMsTHaYiaApHLDJPE-PkHWoMT8XbTMu4SoWUaL6m2n3Bfx1Jl3zoZyur33Abk7yaicabGefbSxPsHdLfzxU/s1600/wordpress.png' title='Wordpress'/>"

imagenes[7] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibMvVwErGFA6pbbFmDo3a5mliZPMelapIHavLCezxyotAxBAoD3rT3HCEuH-C1fnicXV9bN6e39rOy2tipkvYz2KJi0H26uzzkWJ_QX3o6RtVCiFXOH1yNeDG3wh3P5xuR8uzqteEcDVY/s1600/announcement.png' title='Announcement'/>"

imagenes[8] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdfD7ChFUpJystATLfOlBvA0-ylckhsI2ADsB5GjYsaUDmg7zs_5QubeiEwTYLDUaQjdz73W5oh8g0sUUlFlr6Xhy949dDY2Cv5yj0uZ1AXdE5D_0j6OKOZe5LYdAMiX6U5B672XSYEWk/s1600/mobile.png' title='Mobile'/>"

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

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

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

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

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

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

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

if (latesthack == "Mobile")
{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("<data:label.name/>");</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

0 comments:

Subscribe to: Post Comments (Atom)