8 Jul 2012

Membuat Post Title atau Judul Posting sebagai HyperLinkClick here to get more tutorials!

Jika anda mencermati post title atau judul posting yang ada di halaman posting, maka akan terlihat perbedaan dengan yang terdapat di homepage (halaman utama blog). Post title tersebut bukanlah sebuah link sehingga ketika anda mencoba mengarahkan cursor di atasnya (menyorot dg cursor) sama sekali tak ada reaksi apapun. Ini akan berbeda dengan yang kita jumpai di homepage karena post title yang tertuliskan disini merupakan sebuah link. Link yang berfungsi mengarahkan kita ke halaman posting (alamat) sesuai dengan post title yang terlihat.

Akan sangat bermanfaat jika post title di halaman posting kita rubah menjadi sebuah hyperlink. Dengan perubahan ini post title bukan lagi sebuah teks biasa, namun merupakan sebuah hyperlink yang bisa membuat pengunjung kita bawa untuk berkunjung di blog atau web lain. Sebuah tag "a" kita tambahkan pada kode html yang terletak di bagian body, dimana sebuah alamat tertentu (URL) kita tambahkan di dalamnya.

Demo


Arahkan cursor di judul posting! Cobalah untuk "klik" judul posting tersebut dan lihat apa yang akan terjadi. Anda bisa coba membandingkan dengan yang ada di blog anda. Buka salah satu posting dan lakukan hal yang sama. Pasti akan berbeda yang terjadi karena judul posting di blog anda (pada halaman posting) belum dirubah menjadi hyperlink.

Cara merubah post title sbg hyperlink
  1. Login ke Blogger
  2. Dasbor (Dasboard)
  3. Template
  4. Backup/Restore Template. Panduannya bisa dibuka disini
  5. Edit HTML
  6. Template › Edit HTML
    • Procced (Lanjutkan)
    • Expand Template Widget
    • Cari Kode :
      
        <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
    • Di bawah kode tersebut terdapat kode lain dalam bentuk seperti di bawah ini.
      <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title' itemprop='name'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
              <b:else/>
                <data:post.title/>
              </b:if>
            </b:if>
            </h3>
          </b:if> 
    • Ganti kode berwarna merah dengan kode berikut :
      <a href='http://gubhugreyot.blogspot.com' target='_blank' title='Click here to get more tutorials!'> <data:post.title/></a>
    • Ganti kode yang berwarna hijau dengan URL (alamat) blog anda yang lain. Jangan lupa menuliskan link title.
    • Simpan Template/Save Template
  7. Selesai! Silahkan buka halaman utama blog (homepage) dan arahkan cursor di atasnya kemudian coba untuk membuka hyperlink yang baru terpasang.

No comments:

Post a Comment

Terima kasih atas kunjungan dan komentar anda!Klik disini dan dapatkan lebih banyak tutorial menarik lainnya!