Mark Specific Label Post with Conditional Tag

Marking Certain Label Posts with Conditional Tags - As we know Blogger is now updating the latest features that we can use to make blogging activities more attractive. One of the new features is the Lambda Expression feature that can shorten markup writing on certain conditional tags so that it will become simpler and save code writing.



As an example in this blog tutorial I will use this feature on the post label on the index page.

Here we can add icons, images or writing. In this example I will give a post label with a fontawesome icon like the picture below.

Not only is it added to a single label, you can also add certain labels and differentiate them easily.

How to make?

Below is the code used to bring up an icon if you specify a specific label on the post. the code below you can save before the head cover code.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Post Label
function label_pilihan(e){labelku=new Array,labelku[1]="<div class='badge badge1'><div class='badge-img'><i class='fa fa-star'></i></div></div>",labelku[2]="<div class='badge badge2'><div class='badge-img'><i class='fa fa-video-camera'></i></div></div>",labelku[3]="<div class='badge badge3'><div class='badge-img'><i class='fa fa-camera'></i></div></div>",labelku[4]="<div class='badge badge4'><div class='badge-img'><i class='fa fa-music'></i></div></div>",labelku[5]="<div class='badge badge5'><div class='badge-img'><i class='fa fa-paint-brush'></i></div></div>","Hot"==e&&document.write(labelku[1]),"Video"==e&&document.write(labelku[2]),"Gambar"==e&&document.write(labelku[3]),"Musik"==e&&document.write(labelku[4]),"Lukisan"==e&&document.write(labelku[5])}
//]]>
</script>
</b:if>
</b:if>

The marked code is the names of the specified labels and the code that you can replace later with your own creation.

Caller code

<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>label_pilihan(&quot;<data:label.name/>&quot;);</script>
</b:loop>

For the caller code, you can save it in the markup post.

<b:includable id='post' var='post'>...</b:includable>

Or it can also be stored in this markup

<b:includable id='main' var='top'>...</b:includable>

CSS

To make it look more attractive, you can add CSS as below

/* Post Label */
.badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;left:0;display:block;text-align:center;width:100%;height:50px;line-height:50px;font-size:18px;z-index:1;transition:all .3s}
.badge1{background:#e89c0f;opacity:.98}
.badge2{background:#40d47e;opacity:.98}
.badge3{background:#3498db;opacity:.98}
.badge4{background:#1abc9c;opacity:.98}
.badge5{background:#95a5a6;opacity:.98}
.post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%}
.post:hover .badge-img{margin:85px 0 0 0}

The workings of the above code is if you give a label to a particular post, it will automatically bring up an icon that has been modified like the example below.

• Demo

Hopefully with the example of Marking a Certain Post Label with a Conditional Tag that I have shared will inspire all my friends. thanks.