Ini adalah Cara bagaimana menampilkan gambar hanya dihalaman homepage dengan CSS. Berawal dari keinginan saja untuk bisa menampilkan gambar hanya di halaman beranda saja, saya blogwalking dan nemu tipsnya dari blog Kang Ismet. Ternyata itu caranya sangat mudah sekali, cukup menggunakan CSS dan tidak membutuhkan atau menentukan javascript ataupun jquery khusus.
Alasan kenapa ingin agar gambar yang ada di dalam posting tidak tampil di halaman artikel namun tetap bisa tampil sebagai thumbnail di halaman homepage, karena ingin supaya posting yang dipublikasikan terlihat cukup rapih.
Sementara jika di dalam artikel tersebut tidak di masukan gambar, maka otomatis dihalaman homepage gambar thumbnailnya kosong. Karena itu kebetulan di salah satu blog tersebut saya memakai template yang ada gambar thumbnailnya, jadi kelihatan jelek kalau yang muncul cuma tulisan "No Image" saja. Kalau Anda juga mungkin ada yang menginginkan gambar diposting tidak muncul namun dihalaman homepage tetap tampil, silahkan gunakan cara-cara berikut ini.
Alasan kenapa ingin agar gambar yang ada di dalam posting tidak tampil di halaman artikel namun tetap bisa tampil sebagai thumbnail di halaman homepage, karena ingin supaya posting yang dipublikasikan terlihat cukup rapih.
Sementara jika di dalam artikel tersebut tidak di masukan gambar, maka otomatis dihalaman homepage gambar thumbnailnya kosong. Karena itu kebetulan di salah satu blog tersebut saya memakai template yang ada gambar thumbnailnya, jadi kelihatan jelek kalau yang muncul cuma tulisan "No Image" saja. Kalau Anda juga mungkin ada yang menginginkan gambar diposting tidak muncul namun dihalaman homepage tetap tampil, silahkan gunakan cara-cara berikut ini.
Menampilkan Gambar Pada Hanya Dihalaman Homepage Saja :
1.Login ke dashboard blogger
2.Pilih Template
3.Edit HTML
4.Format Template
2.Pilih Template
3.Edit HTML
4.Format Template
Tempatkan script di bawah ini setelah atau di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>
5. Jika sudah Klik Save Template
Langkah berikutnya yang akan di adalah yaitu menambahkan sedikit kode kedalam url pada gambar yang ada disetiap posting. Berikut kode yang harus ditambahkan pada url gambar untuk setiap artikel-artikel yang gambarnya hanya ingin muncul pada dihalaman homepage. Ingat hanya pada gambar yang ingin muncul di homepage saja tidak untuk semua gambar yang ada di dalam artikelnya.
Langkah berikutnya yang akan di adalah yaitu menambahkan sedikit kode kedalam url pada gambar yang ada disetiap posting. Berikut kode yang harus ditambahkan pada url gambar untuk setiap artikel-artikel yang gambarnya hanya ingin muncul pada dihalaman homepage. Ingat hanya pada gambar yang ingin muncul di homepage saja tidak untuk semua gambar yang ada di dalam artikelnya.
6. Kode yang harus ditambahkan
class="thumbnail"
7. Sehingga lengkapnya nanti akan menjadi seperti berikut.
<img class="thumbnail" src="url-link-gambar" alt="penjelasan gambar" />
Akan lebih mudah jika tidak perlu menganti semua kode url pada gambar yang telah ada di dalam posting itu, cukup hanya menambahkan kode tersebut sebelum "scr". Cukup mudahkan, silahkan dicoba dan lihat hasilnya.
