loading...

Modifikasi Tampilan Judul Posting saat Mengklik Label

Modifikasi Judul Posting

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/AVvXsEhMC4r3vVTVCG2HUl5GNVOiyvt6zEwRPND_i7myDRl3samyHiuoQWotNtitdH1-FVa6UDZGud4jnme5GBImitJFYWE1ciRnWSt4O-ijCBNfd1PxVfuRl1qQHFyFiCl9VrYRJ0jvXaG7j0c/s144/Arrobblue.png'/>
      <data:post.title/>
    </div>
  • Jangan lupa disimpan.

Selamat memodifikasi judul posting saat mengklik label…

16 komentar untuk “Modifikasi Tampilan Judul Posting saat Mengklik Label”

  1. mas klo tebal tipisnya garis bawah link bisa diatur gak mas??

    BalasHapus
  2. to Ad4am Sam: kayanya ngga bisa, kecuali ada yang tahu cara menebalkan garis bawah link (underline). Ayo siapa yang tahu, kasih masukkan dong?

    BalasHapus
  3. Saya tau!!!
    Pake Spidol aj.. hehe upps joke!!

    icon gue jadinya di atas ni mas OB, baru di bawahnya judul postingan, cara biar icon an judul postingan masuk dalam border nya gimana?

    BalasHapus
  4. berguna mas, infonya. Salam!

    BalasHapus
  5. dah dicoba kok blum bisa mas ?

    code < data : post . title / > < / a> kan ada dua

    * kalau yaang atas diganti maka tampilan tidak ada perubahan (masih default)
    * kalau yg diganti kedua, ada perubahan sih tapi hanya judulnya aja yg di kasih tanda, sementara isi masih tampil utuh.

    jadi gimana tuh mas ?

    BalasHapus
  6. benar-benar trik yang jitu dan maknyus..........

    BalasHapus
  7. kalo nyisipin animasi kecil di ujung posting, misalnya kalimat "NEW" yang beranimasi, gimana caranya bro?

    BalasHapus
  8. nambah ilmu lagi... :D
    makasih mas...

    BalasHapus
  9. thanks bozz info-y, langsung d coba ni ....!

    BalasHapus
  10. sipp, gw dah coba n oke tuh, oh iye knpe ya pas gnti them ko susah bikit postingan yg berkaitan u/ kategori yg sma sih? help dunk... thx

    BalasHapus
  11. PEZDA V OPASNOSTE!!!!111

    BalasHapus
  12. Hi,

    I begin on internet with a directory

    BalasHapus