Cara Menandai Post Label Tertentu dengan Tag Kondisional

Cara Menandai Post Label Tertentu dengan Tag Kondisional

Cara Menandai Post Label Tertentu dengan Tag Kondisional

Seperti yang kita tahu kini Blogger mengupdate fitur-fitur terbaru yang bisa kita manfaatkan agar kegiatan blogging menjadi semakin menarik. Salah satu fitur barunya adalah fitur Lambda Expression yang bisa mempersingkat penuisan markup pada tag kondisional tertentu sehingga akan menjadi lebih sederhana dan menghemat penulisan kode.


Disini kita bisa menambahkan icon, gambar maupun tulisan. Pada contoh ini saya akan memberikan post label dengan icon fontawesome seperti gambar di atas.

Bukan hanya ditambahkan pada satu label saja, sobat juga bisa menambahkan beberapa label tertentu dan membedakan tampilannya dengan mudah.

Bagaimana cara membuatnya?

Di bawah ini adalah kode yang digunakan untuk memunculkan icon jika sobat menentukan label tertentu pada postingan. kode di bawah ini bisa sobat simpan sebelum kode penutup head.

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

Kode yang ditandai merupakan nama-nama label yang ditentukan dan kode yang bisa sobat ganti nantinya dengan kreasi sendiri.

Kode pemanggil

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

Untuk kode pemanggilnya bisa sobat simpan di dalam markup post.

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

Atau bisa juga disimpan di dalam markup ini

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

Agar membuat tampilannya lebih menarik, sobat bisa menambahkan CSS seperti di bawah ini

/* Post Label */
.badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;display:block;text-align:center;width:50px;height:50px;line-height:50px;font-size:14px;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;width:100%;height:100%;line-height:100%}
.post:hover .badge-img{margin:85px 0 0 0}

Cara kerja dari kode di atas adalah jika sobat memberikan label pada postingan tertentu, maka otomatis akan memunculkan icon yang sudah dimodifikasi seperti contoh di bawah ini.


Semoga dengan contoh Cara Menandai Post Label Tertentu dengan Tag Kondisional yang sudah saya bagikan akan memberikan inspirasi bagi anda semua. Terima kasih...

source:www.arlinadzgn.com/2016/05/menandai-post-label-tertentu-dengan-tag-kondisional.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×