Langsung ke konten utama

Cara menerapkan gambar hanya bisa liat dihalaman homepage saja

 

Cara Menerapkan Gambar Hanya bisa liat Dihalaman Homepage



Cara menerapkan gambar hanya bisa dihalaman homepage dengan kode html. Berawal dari keinginan untuk bisa menampilkan gambar hanya di halaman beranda saja, saya blogwalking atau mengunjungi blog lain dan nemu tipsnya dari blog maxmanroe.com. Ternyata caranya sangat mudah sekali, cukup menggunakan html dan tidak membutuhkan javascript ataupun jquery khusus.

Alasan kenapa saya 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 rapih. Jadi nanti gambarnya tidak tampil di postingan, namun tetap bisa muncul di halaman homepage.

Sementara jika di dalam artikel tersebut tidak saya masukan gambar, maka otomatis dihalaman homepage gambar thumbnailnya kosong. Karena kebetulan di salah satu blog saya itu memakai template yang pada home page ada gambar thumbnail dari masing-masing artikel.

Cara menerapkan gambar hanya muncul di homepage ini sangat cocok bila digunakan di blog yang menggunakan tampilan gambar di halaman homepage, namun tidak akan menampilkan gambar di postingan. Terkadang jika tidak menyertakan gambar maka tampilan homepage akan kurang bagus, namun jika menyertakan gambar kadang, gambar bertabrakan dengan iklan yang ada di tengah artikel, oleh karena itu jalan satu-satunya adalah dengan hanya menampilkan gambar di hompage saja.

Cara ini telah berhasil saya terapkan pada 2 template yang berbeda, yang pertama adalah template blog ini yaitu template kompi males dari kompiajaip , dan yang kedua adalah template viomagz dari mas sugeng . 

Jadi kelihatan jelek kalau yang muncul cuma tulisan “No Image” saja. Kalau temen-temen juga mungkin ada yang menginginkan gambar diposting tidak muncul namun dihalaman homepage tetap tampil, silahkan gunakan cara berikut.

Menampilkan Gambar Hanya Dihalaman Homepage

  • Login ke dashboard blogger
  • Pilih Template
  • Edit HTML
  • Format Template

 Tempatkan script di bawah ini setelah atau di atas kode </head><b:if cond=’data:blog.pageType == &quot;item&quot;’>

<style type=”text/css”>
.thumbnail {display:none}
</style>
</b:if>

  • Jika sudah Klik Save Template

Langkah berikutnya yang harus dilakukan yaitu menambahkan sedikit kode kedalam url gambar yang ada disetiap posting.

Berikut kode yang harus ditambahkan pada url gambaruntuk setiap artikel yang gambarnya hanya ingin muncul dihalaman homepage.

Ingat hanya pada gambar yang ingin muncul di homepage saja tidak untuk semua gambar yang ada di dalam artikel.

  • Kode yang harus ditambahkan

 class=”thumbnail”

  • Sehingga lengkapnya nanti akan menjadi seperti berikut.

<img class=”thumbnail” src=”ssblogger22.blogspot.com "

Link-gambar anda ” alt=”penjelasan gambar” />

Demikian artikel Cara Menerapkan Gambar Hanya Muncul Di Homepage, Akan lebih mudah tidak perlu merubah semua kode url gambar yang telah ada di dalam posting, cukup hanya menambahkan kode tersebut sebelum “scr”. Cukup mudah bukan, silahkan dicoba dan lihat hasilnya. Semoga membantu dan bermanfaaat untuk anda. 

Komentar

Terbaru

Bahasan Kasus Artikel dengan topik Google Search Console

SSBLOGGER22.blogspot.com  Ssblogger22.blogspot.com -  Banyak cara mencari topik atau keyword untuk bahan artikel baru di blog kita. Salah satunya, dengan manfaatin data query (keyword) yang masuk ke Google Search Console. Saya suka pakai cara ini, karena cenderung simpel sih. Saya tulis di sini garis besar cara saya melakukan hal ini. Sekalian dengan studi kasus juga, bikin 3 artikel di blog ini. Tentukan Artikel Sumber Query di Google Search Console Untuk menggunakan cara ini, syaratnya adalah website anda udah dimasukin ke Google Search Console (GSC). Selain itu, udah cukup lama juga. Misal 1 bulanan minimalnya. Tujuannya biar udah ada query yang terekam di GSC. Biasanya website yang sudah lama didaftarin ke GSC, cenderung punya pilihan keyword yang lebih beragam untuk bahan artikel baru. Cara pilih artikelnya simpel aja sih saya mah. Buka Google Search Console website anda. Pilih menu  Performance  (atau menu  Performance > Search Result ). Klik kolom...

Cara Mengkompresi image Dengan Microsoft Office Picture Manager

Cara Mengkompresi image Dengan Microsoft Office Picture Manager SSBLOGGER22.blogspot.com  Cara Mengkompresi image Dengan Microsoft Office Picture Manager  -  Tidak komplet, rasanya kalau kita memposting artikel dengan tidak disertai dengan gambar. Selain untuk mempercantik tampilan blog atau website kita  juga dapat menjadi kueri pencarian di Google search . Namun seringkali kita terkendala dengan ukuran image yang akan kita posting, oleh sebab itu sebaiknya sebelum image itu kita posting sebagai pelengkap artikel, sebaiknya kita mengkompres image terlebih dahulu agar ukuranya menjadi web page. Ada banyak hal yang dapat kita lakukan untuk mengedit sebuah image menggunakan Microsoft Office Picture Manager. Diantaranya adalah mengedit ukuran foto dan kompres ukuran file sebuah foto. Microsoft Office Picture Manager memiliki tampilan sederhana dari aplikasi edit foto lainnya. Fungsinya juga tidak se-lengkap dengan aplikasi edit foto lainnya. Namun, Microsoft Office Pict...

Keamanan HTTPS, Cara Kerja, Fungsi dan Bedanya dengan HTTP

Keamanan HTTPS, Cara Kerja, Fungsi dan Bedanya dengan HTTP Keamanan HTTPS, Cara Kerja, Fungsi dan Bedanya dengan HTTP ~ Keamanan website adalah proses untuk melindungi situs web dari serangan yang berbahaya seperti hacking, phishing, malware, dan lainnya. Beberapa cara untuk meningkatkan keamanan website adalah dengan menggunakan enkripsi SSL/TLS, menerapkan autentikasi dan otorisasi yang kuat, menjaga software situs web dan plugin terbaru, dan melakukan pemindaian secara teratur untuk menemukan dan mengatasi masalah keamanan.  SSL (Secure Sockets Layer) adalah protokol jaringan yang digunakan untuk mengamankan koneksi jaringan antara klien dan server. SSL digunakan untuk mengenkripsi data yang dikirimkan antara kedua sistem, sehingga hanya sistem yang memiliki kunci dekripsi yang sesuai yang dapat membaca informasi tersekrup. SSL juga digunakan untuk memvalidasi identitas server kepada klien, sehingga klien dapat yakin bahwa data yang diterima berasal dari sumber yang sah. SSL dig...