Cara Mengganti Newer Post, Home, Dan Older Post Dengan Gambar

Secara default tampilan dari Newer Post, Home, dan Older Post pada template bawaan Blogger hanyalah teks, kecuali ada pada beberapa template yang banyak bisa kita download secara gratis di situs-situs penyedia template XML Blogger yang sudah menggantinya berupa gambar.

Di bawah ini adalah gambar yang menunjukkan ketika Newer Post, Home, dan Older Post masih berupa teks:

Dan pada artikel ini mencoba menjelaskan bagaimana tampilan teks itu akan diganti dengan gambar, contohnya seperti tampilan di bawah ini:

Sehingga tampilan dari blog kita mungkin lebih menarik.

Untuk mengganti Newer Post, Home, dan Older Post dengan gambar silahkan ikuti langkah-langkah berikut:

1. Login ke Blogger.
2. Selanjutnya menuju ke Template > Edit HTML.
3. Untuk mengganti Newer Post, cari kode:

   <data:newerPageTitle/>
   

   Jika sudah ditemukan, ganti dengan kode di bawah ini:

   <img src="Alamat_Gambar" alt="newer posts"/>
   

4. Untuk mengganti Older Post, cari kode:

   <data:olderPageTitle/>
   

   Jika sudah ditemukan, ganti dengan kode di bawah ini:

   <img src="Alamat_Gambar" alt="older posts"/>
   

5. Untuk mengganti Home, cari kode:

   <data:homeMsg/>
   

   Jika ada dua kode seperti di atas, ganti kedua-duanya. Jika sudah ditemukan, ganti dengan kode di bawah ini:

   <img src="Alamat_Gambar" alt="back to home"/>
   

6. Sebelumnya ganti Alamat_Gambar dengan URL dari gambar yang ingin digunakan. Simpan template untuk melihat perubahan.
7. Selesai.

Tambahan: Silahkan tambahkan ID pada setiap kode-kode diatas jika ingin menambahkan opacity pada gambar-gambar yang mewakili Newer Post, Home, dan Older Post. Misalnya masing-masing kodenya akan menjadi seperti berikut:

<img id="newer_posts" src="Alamat_Gambar" alt="newer posts"/>
<img id="older_posts" src="Alamat_Gambar" alt="older posts"/>
<img id="back_to_home" src="Alamat_Gambar" alt="back to home"/>

Kemudian tambahkan kode CSS pada template, dan kode CSS untuk mengatur opacity misalnya seperti berikut:

#newer_posts, #older_posts, #back_to_home
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#newer_posts:hover, #older_posts:hover, #back_to_home:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}