Sakisaku.tech - Pengunaan Gambar pada postingan blog tentu memiliki peran yang penting untuk menambah atau menpercantik tampilan di postingan anda. Bila pada umumnya pada setiap postingan hanya menggunakan satu gambar dan menjadi sampul serta gambar tampil diatas artikel sebagai gambar pemanis.
Satu lagi cara unik yang bisa kalian buat untuk mempercantik dan menarik daya pembaca setia anda yaitu dengan membuat dua gambar pada setiap postingan blog anda.
Langkah - langkah pengerjaannyapun cukup mudah. Kalian hanya memasukan beberapa script dan bisa langsung dipraktekan. Kegunaan fitur dua gambar ini bertujuan untuk mempercantik tampilan pada gambar postingan blog anda.
Perhatikan dan ikuti langkah berikut ini.
- Buka dasboard blog kalian dan pilih Tema
- Setelah ketemu , Klik Edit Tema
- Selanjutnya masuk ke mode html lakukan pencarian </head>
- Masukan script dibawah tepat diatas </head>
- SIMPAN
Kode Script yang dibutuhkan silahkan di Copy dan dipastekan sesuai petunjuk diatas :
Bila pada setiap anda mengupload gambar untuk sampul postingan maka tampilan htmlnya akan tampak seperti ini
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAI9olhWMEALUeOIP2c0jUAOFnfuKwetVY27Js_weoFNXFGmmckdoJXvUIj6tX674Eqx-dZmToxg4GX3JaqSIUPd2e-7Rtr7Zay5qHFYR9QKBsoM2B9H28lWseBup0OM7OGjWzkrhTkk/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAI9olhWMEALUeOIP2c0jUAOFnfuKwetVY27Js_weoFNXFGmmckdoJXvUIj6tX674Eqx-dZmToxg4GX3JaqSIUPd2e-7Rtr7Zay5qHFYR9QKBsoM2B9H28lWseBup0OM7OGjWzkrhTkk/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" data-original-width="250" data-original-height="150" /></a></div>
Perhatikan tulisan yang diberi tanda warna biru. Pada setiap postingan gambar maka html nya akan menggunakan 'separator' untuk menggunakan mode dua gambar maka lakukan hal berikut.
<div class="thumbnail" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAI9olhWMEALUeOIP2c0jUAOFnfuKwetVY27Js_weoFNXFGmmckdoJXvUIj6tX674Eqx-dZmToxg4GX3JaqSIUPd2e-7Rtr7Zay5qHFYR9QKBsoM2B9H28lWseBup0OM7OGjWzkrhTkk/s1600/menyembunyikan%2Bgambar%2Bthumbnail%2Bdi%2Bblog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkAI9olhWMEALUeOIP2c0jUAOFnfuKwetVY27Js_weoFNXFGmmckdoJXvUIj6tX674Eqx-dZmToxg4GX3JaqSIUPd2e-7Rtr7Zay5qHFYR9QKBsoM2B9H28lWseBup0OM7OGjWzkrhTkk/s1600/menyembunyikan+gambar+thumbnail+di+blog.png" data-original-width="250" data-original-height="150" /></a></div>
Untuk penerapannya pada gambar pertama yang akan ditampilkan di homepage silahkan ganti 'Separator' menjadi 'thumbnail' dan untuk gambar kedua yang akan ditampilkan di bagian isi postingan maka tetap gunakan 'separator' jangan diubah.
Untuk DEMO , dapat anda lihat pada postingan ini. Terimakasih dan semoga bermanfaat.
Comments0