Specific Marking For a Label On The Tag post Using Conditional Tag (Lambda Expression)

Demo of the 'Lambda Expression Effect'

As we know, with the latest updates by the Blogger, blogging activity is becoming more interesting. And the new feature ‘Lambda Expression’ is saving us from writing huge code by adding this feature to the templating language which works with conditional tags.

In this tutorial I will show you how to implement this feature to the advance level, by adding the marking to the post on the Index page (blog feed page) as a label by using conditional tag.

Here we can add text, image or any icons as a label. I will use fontawesome icons as shown below.

Not only for a single label, can use this markings (lambda expressions) for as many labels as we want to the specific labels. If we assign a marking (lamda expression/icons) to a specific label once, then we can apply this label to as many posts as we want.

Step 1:

Copy the below code and paste it before the closing head tag ( </head> ) in the template editor. i.e
Blogger>Template>Edit Html

	<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>

view raw Step:1 Java Script (1) hosted with ❤ by GitHub

The code in the above 8,12,16,20 and 26th lines can be changed according to your requirements.

Step:2
After that copy the below code caller.

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

view raw Step:2 Java Script hosted with ❤ by GitHub

After copying this, find the below code in the template editor, and insert the above code in between the below provided code opening and closing tags.

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

view raw Step:2 HTML (1) hosted with ❤ by GitHub

Or the code can also be inserted between the below opening and closing tags.

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

view raw Step:2 HTML (2) hosted with ❤ by GitHub

Step:3
To get a more attractive look, we can add our own CSS as following.

	/* 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}

view raw Step:3 CSS hosted with ❤ by GitHub

The code here works as a marking label for a particular post. It automatically brings up the icon as shown in the below provided demo link.
Demo: http://bit.ly/2cnt1pP

Okay friends, if have any doubts regarding this post, please comment your question below. And if you tried this on your blog, provide a link in the comment section to your work.
If you like this, feel free to share on your social profiles, and subscribe to my blog by entering your e-mail id below to get  my latest updates.