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

Cara Membuat 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, cita-cita aku supaya 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 tampilan artikel aku menjadi buruk dan kurang yummy untuk di pandang.

Padahal artikel yang anggun itu artikel yang bisa menciptakan pembacanya merasa nyaman dalam membaca. Kaprikornus aku rasa gambar tidak terlalu mempunyai tugas penting dalam sebuah artikel, namun kalau aku tidak memberi gambar sama sekali pada artikel saya, maka tampilan home page akan menjadi buruk dan kurang memikat, alasannya ialah pembacanya tidak meliki rasa ingin tau yang kuat, rasa ingin tau yang di ciptakan oleh sebuah gambar.

Dari pada bingung, aku eksklusif 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 atau Login ke blog kalian
2. Pilih template/tema

3. Edit HTML
4. Cari isyarat
atau &gt;&lt;!--<head/>--&gt;
5. Pastekan isyarat di bawah ini di atas isyarat
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. Jika sudah final mengubah HTML di theme, eksklusif save saja.

Selanjutnya kita 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 final mengupload, 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/AVvXsEhBUbEKRX33Bf0TZoBEpjVVaapaC9XW_sOn6REmKrYjqXrXRvNFV1OZ00DuaAyJxmOVJXOLa0kMm3gKv2nBEgV1yEh6w_mKeaRFK3K679PUDw4mBW4n3bh3L0pk6pOl8ls_qrchdw-9Sb_6/s1600/Bandwidth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="691" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBUbEKRX33Bf0TZoBEpjVVaapaC9XW_sOn6REmKrYjqXrXRvNFV1OZ00DuaAyJxmOVJXOLa0kMm3gKv2nBEgV1yEh6w_mKeaRFK3K679PUDw4mBW4n3bh3L0pk6pOl8ls_qrchdw-9Sb_6/s320/Bandwidth.jpg" width="320" /></a></div>
<br />

3. Ganti "separator" menjadi "thumbnail" (fokus pada goresan pena yang berwarna merah), sampai menjadi menyerupai ini 

<div class="thumbail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBUbEKRX33Bf0TZoBEpjVVaapaC9XW_sOn6REmKrYjqXrXRvNFV1OZ00DuaAyJxmOVJXOLa0kMm3gKv2nBEgV1yEh6w_mKeaRFK3K679PUDw4mBW4n3bh3L0pk6pOl8ls_qrchdw-9Sb_6/s1600/Bandwidth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="691" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBUbEKRX33Bf0TZoBEpjVVaapaC9XW_sOn6REmKrYjqXrXRvNFV1OZ00DuaAyJxmOVJXOLa0kMm3gKv2nBEgV1yEh6w_mKeaRFK3K679PUDw4mBW4n3bh3L0pk6pOl8ls_qrchdw-9Sb_6/s320/Bandwidth.jpg" width="320" /></a></div>
<br />

Dengan megganti "separator" menjadi "thumbnail" maka gambar tersebut akan otomatis menjelma thumbnail dan tidak terlihat di dalam artikel kalian kalau di publikasikan.
Di artikel selanjutnya aku akan mengajarkan Cara Membuat Kotak Di Dalam Artikel 
Sumber https://mofarmedia.blogspot.com/

Share :