Senin, 23 Juli 2018

Cara Menciptakan Thumbnail Postingan Blog, Sembunyikan Gambar Dalam Artikel Menjadi Thumbnail

Mengenai postingan di blog, sebuah gambar tentu sangat di perlukan, untuk sekedar memberi rasa ingin tau pengunjungnya. Sebenarnya aku selalu menerbitkan postingan dengan 1 gambar di atas postingan untuk menjadi thumbnail, keinginan aku semoga tampilan di page home menjadi lebih menarik dengan adanya gambar. Namun sehabis aku menulis beberapa artikel, lama-lama aku merasa bahwa gambar di atas postingan itu malah menciptakan tmpilan artikel aku menjadi buruk dan kurang yummy untuk di baca.

Padahal artikel yang elok itu artikel yang bisa menciptakan pembacanya merasa nyaman dalam membaca. Sayapun mulai berfikir ini sebuah artikel bukan komix. Kaprikornus aku rasa gambar tidak terlalu mempunyai tugas penting dalam sebuah artikel, namun jikalau aku tidak memberi gambar sama sekali pada artikel saya, maka tampilan home page akan menjadi buruk dan kurang memikat, alasannya yakni pembacanya tidak meliki rasa ingin tau yang kuat, rasa ingin tau yang di ciptakan oleh sebuah gambar.

Dari pada bingung, kemudian aku putuskan untuk menciptakan thumbnail. Kaprikornus gambar atau foto yang aku buat thumbnail ini akan tampil di home page saja dan tidak akan tampil di dalam artikel.

Bagaimana cara menciptakan thumbnail atau gambar yang hanya tampil di home page ?.

1. Masuk blog juragan.

2. Pilih template/tema.

3. Edit HTML.

4. Cari isyarat </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

5. Pastekan isyarat di bawah ini di atas isyarat </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>

6. Simpan template.

Selanjutnya kita akan mencoba untuk menciptakan postingan dan upload sebuah file gambar dalam postingan tersebut untuk kita jadikan thumbnail dan tidak akan tampil di dalam artikel.

Cara menciptakan thumbnail gambar tidak tampil dalam artikel.

1. Setelah gambar di upload, kita ganti mode penulisan dari "compose" menjadi "HTML" letaknya ada di pojok kiri atas.

2. Di mode penulisan HTML akan muncul isyarat menyerupai di bawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgsLl1j1wRqcQDI3M2Z8lI0LA6plK_YKakf4dh617ErWvvLR4M9hD0yU0iXiTSrNlAkNrrGUKjTAt1YyzjCxUwQNO8aWT1gcC2v_GR8XxuKwakWRI31N7JsByf8FV3UOILh7wm9UwFUQ5/s1600/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="565" data-original-width="734" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgsLl1j1wRqcQDI3M2Z8lI0LA6plK_YKakf4dh617ErWvvLR4M9hD0yU0iXiTSrNlAkNrrGUKjTAt1YyzjCxUwQNO8aWT1gcC2v_GR8XxuKwakWRI31N7JsByf8FV3UOILh7wm9UwFUQ5/s320/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" width="320" /></a></div>
<div>

3. Ganti "separator" menjadi "thumbnail", sampai menjadi menyerupai ini.

div class="thumbnail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgsLl1j1wRqcQDI3M2Z8lI0LA6plK_YKakf4dh617ErWvvLR4M9hD0yU0iXiTSrNlAkNrrGUKjTAt1YyzjCxUwQNO8aWT1gcC2v_GR8XxuKwakWRI31N7JsByf8FV3UOILh7wm9UwFUQ5/s1600/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="565" data-original-width="734" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgsLl1j1wRqcQDI3M2Z8lI0LA6plK_YKakf4dh617ErWvvLR4M9hD0yU0iXiTSrNlAkNrrGUKjTAt1YyzjCxUwQNO8aWT1gcC2v_GR8XxuKwakWRI31N7JsByf8FV3UOILh7wm9UwFUQ5/s320/mengatasi+pulsa+indosat+sering+terpotong+1.jpg" width="320" /></a></div>
<div>


Dengan megganti "separator" menjadi "thumbnail" maka gambar tersebut akan otomatis berkembang menjadi thumbnail saja dan tidak terlihat di dalam artikel dikala di publikasikan.

Begitulah cara menciptakan thumbnail postingan blog, dengan gambar tidak terlihat di dalam artikel. Semoga bermanfaat!!!

Tidak ada komentar:

Posting Komentar