Blogger dynamic labels with images

CodeGuy
March 15, 2016

Have you ever seen some tags in stackoverflow? like the one shown below,
In blogger, you often see a post with different labels set to every posts. Here you will learn how to create a dynamic labels (tags) which will show the icons symbolizing product or technology names. To start, open your blog > click on Template> click Edit HTML

Now, locate tag-heading by search ( CTRL + F ). Find the respective of your template under class=tag-heading

In my case, change existing to below code

1
2
3
4
5
6
7
8
9
<strong class='tag-heading'>
    <i class='fa fa-tag'/>Tags:
</strong>
<b:loop values='data:post.labels' var='label'>
    <a expr:class='data:label.name + &quot; post-tag&quot;' expr:href='data:label.url' rel='tag'>
        <data:label.name/>
    </a>
    <b:if cond='data:label.isLast != &quot;true&quot;'></b:if>
</b:loop>

Insert the custom CSS in your template, alongside other existing CSS codes.



The labenames created should match the CSS classnames. For example, google-apps-script should be same in CSS and in label names (preferably same case)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/********************************/
/*** Custom CSS ***/
/********************************/

.post-tag {
  line-height: 1;
  padding: .4em .5em;
  color: #39739d;
  font-size: 12px;
  white-space: nowrap;
  background: #E1ECF4;
  border: 1px solid #E1ECF4;
  display: inline-block;
  margin: 2px 2px 2px 0;
  border-radius: 0;
  background-repeat: no-repeat;
  padding-left: 20px;
  background-position: left center;
}

.chrome {
  background-image: url(//4.bp.blogspot.com/-AP9mqDIxiT8/VuO_89JXv5I/AAAAAAAAB7g/pEu2k8mGuvwJhPfS0OzB5utIoKvN6wllw/s1600/EdUwb.png);
}

.google-apps-script {
  background-image: url(//1.bp.blogspot.com/-I84k3pWtiak/VuPAQ9QTa5I/AAAAAAAAB7k/WKybXpdH6UgA5fVQ_vHUKMFnKM1WVm53Q/s1600/xKsQb.png);
}

.gmail {
  background-image: url(//4.bp.blogspot.com/-E819qYpR-tM/VuO_6_0hdnI/AAAAAAAAB7c/7FT2Ol04wUUkt5AY9CBEYX1s61oOa8AtA/s1600/gmail.png);
} /**************Include more as per your tags******************/



0 comments

Do not spam.

Like us on Facebook

Blog Archive