Blogger dynamic labels with images

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6IwZPZr-F4sO3FDSXpJsVUpR4Xo1Mve52E8FtbbGZYUX8M4P1JVmQE6ARUO_4D_LDNwgZTbmPjhNqV8hXLhyxuPdHOQ7fjw3-vv6vOJmsS_XYCvoxF5uUPmdWkDM-3OlrxLE6KJbOdeeQ/s1600/EdUwb.png);
}

.google-apps-script {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Bw6dZTbvZzNHs7zyU7YAFWOxS58cytwHm4NolBfVkUEP33ebn34XP1PthK95xlV4W_W-n5YN_fv8U8RaVuiqdmYNUVZPeUFjaix8_KqVR__FMVAnzeuECRr9rULkUUe8aZ-WJaKG3anP/s1600/xKsQb.png);
}

.gmail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vk10rVDQHGo6wixSLEgrKBLL1UPVdTCnmnXuL7MqVXJtv2jNstasoibuZMcrmhdBaDti-fwU_t90xll94K0_ZWdEiNGCipJODbhVDjifwufmZuN8xm6V6f3kbhA0Kj-V1Gz0qW3151om/s1600/gmail.png);
} /**************Include more as per your tags******************/



Comments

Post a Comment

Do not spam.