Jumat, 25 Oktober 2013

Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog

Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog - Pernah tidak Anda 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

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 Cara Membuat & Menampilkan HTML

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

Pengaruh Html, CSS, dan JavaScript Blog
Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog

Jika tampilannya seperti yang terlihat pada gambar diatas, silahkan perhatikan penjelasan terhadap kode CSS berikut ini, Anda 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 Anda terapkan untuk blog Anda, jika mengalami kesulitan dalam pemasangan silahkan tinggalkan komentar untuk artikel ini, Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog

Membuat Dan Menampilkan Tag Label Di Pojok Gambar Artikel Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

16 komentar:

  1. kok gak jadi y gan .. bantuannya dong gan

    BalasHapus
    Balasan
    1. bisa kok mas, cara ini juga saya gunakan di template-template blog saya..

      Hapus
  2. Haloo mbk Anna, apkbr?
    Mw tanya utk lebih yakin lg, apakah topik ini membahas tentang. label/tag gambar yang muncul berdasarkan hasil postingan?
    Terimahkasih sebelumnya telah membantu saya..

    BalasHapus
    Balasan
    1. alhamdulillah baik mas,,
      iya mas, contohnya ada di halaman depan blognya Kang Ismet, nama label muncul di pojok gambar blog

      Hapus
  3. Mbk utk template nya... Itu template mas Sugeng?

    BalasHapus
    Balasan
    1. untuk template tidak harus template siapapun, semua template bisa dipasang tag label tersebut mas :)

      Hapus
  4. Mbk, mw tanya ni, Kode CSS letaknya dimana ya...?tQ

    BalasHapus
    Balasan
    1. letakkan sebelum kode ]]</b:skin> atau </style>

      Hapus
    2. sist aku da coba tidak bisa juga :(

      Hapus
    3. ../Style> nya banyak di HTML saya

      Hapus
    4. gunakan yang pertama saja..
      cara diatas sudah saya lakukan untuk beberapa template blog dan semuanya bisa

      Hapus
  5. keren mbak panduannya sangat bermanfaat.

    BalasHapus
    Balasan
    1. terimakasih mas Fadila atas kunjungan serta komentarnya, salam kenal..

      Hapus
  6. horeeee berrhassil mbak makasih ya :D

    BalasHapus
    Balasan
    1. kalau untuk template tertentu pasti bisa menggunakan cara ini mas :)

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia