Specific Marking Label with Tag Post Conditional for Blogger

Specific Marking Label with Tag Post Conditional

Specific Marking Label with Tag Post Conditional As we know now Blogger to update the latest features that we can use that activity of blogging becomes more interesting. One new feature is a feature that can shorten the LambdaExpression penuisan markup on certain conditional tags so that it will be more simple and saves writing code.

For example the blog tutorial this time I will take advantage of these features in the post label on the index page. Here we can add icons, images or text. In this example I will give a post label with font awesome icon as shown below.

Specific Marking Label with Tag Post Conditional for Blogger

Not only added to the label, you can also add some specific label and distinguish zoom with ease.

How to make ?

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

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

//<![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>

Code marked the names of the specified label and the code that you can change it later with his own creations.

Code caller

<b:loop values='data:post.labels' var='label'>

</b:loop>

For callers code you can store in the markup post.

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

Or it could also be stored in this markup

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

CSS

In order to make it look more attractive, you can add CSS as below:

/* GoWidget 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 code above is if you give it a label on a particular post, it will automatically bring up the icon that has been modified as shown below.

DEMO

Hopefully, with the example of Mark Post Label with Tag Specific Conditional I've shared will be an inspiration to you all. thanks.