Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog

Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog - Pernah tidak sobat melihat sebuah halaman depan blog yang mana gambar dari artikel tersebut memiliki atau terdapat tag label di pojok gambar artikel tersebut? Membuat dan menampilkan tag label di pojok gambar artikel blog ini bisa dilihat pada halaman depan blog ini atau seperti yang terlihat pada gambar berikut ini

Membuat dan menampilkan tag label di pojok gambar artikel blog memiliki fungsi tambahan sebagai identifikasi dari sebuah artikel atau gambar blog tapi bukan sebagai kategori karena Blogger sendiri tidak memiliki, hanya memiliki label! Dan menjadikan label itu sendiri sebagai kategori. Selain itu, memasang label di pojok gambar artikel blog akan membuat tampilan blog lebih elegant dan terlihat lebih bagus dan mungkin juga terlihat lebih profesional, dari segi tampilan...

Baca

Lalu bagaimana cara membuat dan menampilkan tag label di pojok gambar artikel blog tersebut?

CSS
Silahkan salin kode CSS berikut ini

.tag-label {
 position:absolute;
 top:3px;
 left:3px;
 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;
 }

HTML
Cari kode seperti berikut ini

<b:if cond='data:post.title'>

atau lebih lengkapnya seperti ini

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
...sampai dengan..
</b:includable>

Letakkan kode HTML dari label berikut ini diatas atau sebelum kode <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>

Sehingga hasilnya akan terlihat seperti berikut ini

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.labels'>
<div class='tag-label'>                        
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>              
</div>
</b:if>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
..sampai dengan..
</b:includable>

Penjelasan Kode CSS
Ingat kode CSS diatas relatif untuk setiap blog karena setelah melakukan pemasangan CSS diatas, hasil yang ditampilkan tidak akan memiliki kesesuaian dari tata letak label tersebut atau penempatan yang kurang pas atau tumpang tindih dengan judul dan gambar artikel blog atau seperti yang terlihat pada gambar berikut ini

Jika tampilannya seperti yang terlihat pada gambar diatas, silahkan perhatikan penjelasan terhadap kode CSS berikut ini, sobat hanya perlu menyesuaikan jarak sisi atas (top) dan jarak sisi kiri (left) yang ada pada kode CSS tersebut

.tag-label {
 position:absolute;
 top:3px;
 left:3px;
 width:154px;
 z-index:10;
 }

top:3px; --> ganti nilai 3 dari jarak sisi atas, ganti menjadi lebih besar sampai posisi tata letak dari label di pojok gambar artikel blog menjadi sesuai atau pas
left:3px; --> ganti nilai 3 dari jarak sisi kiri, ganti menjadi lebih besar sampai posisi tata letak dari label di pojok gambar artikel blog menjadi sesuai atau pas
Perhatikan juga saat melakukan pergantian nilai jarak, lebih baik gunakan Pratinjau Template karena akan mudah mengetahui posisi yang sebenarnya

Penjelasan Kode HTML
Jika didalam kode template blog ditemukan 2 kode <b:if cond='data:post.title'> maka pilih kode yang kedua atau seperti kode yang telah dijelaskan diatas

Okey, itulah cara membuat dan menampilkan tag label di pojok gambar artikel blog yang bisa sobat terapkan untuk blog sobat, jika mengalami kesulitan dalam pemasangan silahkan tinggalkan komentar untuk artikel ini, Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog