Membuat Tag Label di Sudut Gambar Blog

Anda pasti pernah melihat tag label yang berada di halaman depan (homepage) sebuah Blog yang mana gambar tersebut memiliki label atau tag label di sudut gambar artikel tersebut? Tag label di sudut gambar artikel Blog memiliki fungsi sebagai tambahan identifikasi dari sebuah artikel. Selain itu, dengan memasang tag label di sudut gambar artikel Blog akan membuat Blog lebih cantik dan elegant.

Penerapan

1. Login Blogger.
2. Pilih Template, Edit HTML.
3. Letakkan CSS berikut di atas code ]]></b:skin>.

.tag-label {
 position:absolute;
 top:2px;
 left:2px;
 width:154px;
 z-index:10;
 }
.tag-label a {
 font-family:"Oswald",Verdana,Sans-serif;
 text-transform:uppercase;
 background-color:#426DEC;
 color:#fff;font-size:10px;
 display:block;
 float:left;
 padding:4px 8px;
 }
.tag-label a:hover{
 background:#000000;
 }

Anda bisa mengganti angka yang di block untuk menyesuaikan tag label pada gambar Blog dan warna yang di block biru bisa di ganti dengan warna lain untuk mengganti warna background tag label.

4. Lalu letakkan code berikut di atas code <b:if cond='data:post.title'>.

<b:if cond='data:post.labels'>
<div class='tag-label'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
</div>
</b:if> 

Jika di dalam HTML ditemukan 2 code <b:if cond='data:post.title'> maka pilih code yang kedua.

5. Save Template.

Share This :