Modifikasi Tampilan Judul Posting saat Mengklik Label

Modifikasi Tampilan Judul Posting saat Mengklik Label

Posted by rike on 0

Dulu OB pernah memposting "Klik Label yang Tampil Judul Posting Saja", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS main. Bagaimana jika kamu ingin tampil beda? Yah, mau tidak mau kamu harus melakukan modifikasi terhadap template blog yang telah ada. Kode dalam memodifikasi tampilan judul posting ini disadur dari kode membuat daftar isi dari Kang Rohman. Baiklah, supaya kepala tidak tambah puyeng dan dikitari oleh lebih banyak bintang-bintang. Let's go to start this tricks

• Masuk ke akun Blogger™ kamu.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

  Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Pembaharuan (13 Desember 2012) — Cari kode di bawah ini.

  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='post'/>
    <b:else/>
      <b:if cond='data:blog.pageType != "item"'>
        <a expr:href='data:post.url'>
          <data:post.title/>
        </a>
      <b:else/>
        <b:include data='post' name='post'/>
      </b:if>
    </b:if>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>

  Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  Catatan : Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

• Ganti kode yang berwarna merah dengan kode berikut.

  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
    <data:post.title/>
  </div>

  Catatan: Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

• Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya:

  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
  <img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png'/>
    <data:post.title/>
  </div>

• Jangan lupa disimpan.

Selamat memodifikasi judul posting saat mengklik label…