Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Gambar diatas Judul Postingan

Cara Membuat Gambar diatas Judul Postingan Images @rian_seo
Cara Membuat Gambar diatas Judul Postingan

Bagaimana membuat posisi gambar postingan berada paling atas tepatnya di atas judul atau dibawah judul. Untuk pengguna WordPress mungkin sudah ada disediakan fiktur bawaan dimana gambar awal yang mewakili tampilan postingan.

Nah beda halnya dengan pengguna blogspot, untuk bisa membuat gambar postingan berada di bagian atas ini, tidak bisa dilakukan secara otomatis. Walaupun kita bisa memasang gambar diawal paragraf tetapi tetap saja cara itu tidak merubah posisi gambar kebagian atas judul blog.

Berbicara blogger, maka tidak luput apa yang perlu kita lakukan untuk membuat tampilan blog terlihat keren harus bisa membungkar file HTML dan CSS yang terbungkus di dalam template.

Dalam halaman ini, kami kembali lagi menyajikan tutorial design untuk mempercantik tampilan blog kususnya dibagian posisi letak gambar postingan yang bisa kita ubah kebagian paling atas judul blog.

Tapi sebelum menuju langkah ini, jangan lupa pula ya untuk kamu harus sudah paham sedikit tentang kode yang akan kita ubah. Sebab jika kamu belum terlalu paham, bisa-bisa template kamu jadi rusak. Baca juga — Cara Membuat Kotak Tombol Pencarian di Template Blogger. Untuk lebih dalam memahami langkah ini, kami sudah menyediakan beberapa gambar contoh tampilan gambar postingan yang berada diatas dan yang tidak berada diatas.

Biasanya tidak semua template memiliki desain seperti ini, hanya template-template blogger yang tertentu saja yang disediakan akan fiktur first images ini, contohnya template KompiFlexible untuk posisi gambar postingan nya berada di atas judul blog.

Cara Membuat Gambar diatas Judul Postingan
Contoh gambar yang berada di atas judul

Cara Membuat Gambar diatas Judul Postingan
Contoh gambar yang berada dibawah judul
Nah sudah paham kamu maksud kami? Kita akan menggubah posisi gambar postingan berada dibagian atas judul atau dibawah judul.

Cara Membuat First Images di Blogger


Buka Blogger > Dashbor

Pilih Tema > Edit HTML

Cari kode HTML ini <div class='post-hentry'> dengan cara menekan CTRL+F untuk lebih cepat dalam mencari kode.

Biasanya setiap kode template beda-beda, tapi kebanyakan kode diatas lah digunakan untuk pembuka isi artikel dalam template.

Kalau milik saya kodenya adalah <article class='post'> jadi bisa kamu sesuaikan saja kode HTML yang berbau post

Apabila kamu ingin meletakan posisi gambar ini berada dibagian paling atas tulisan maka salin kode HTML dibawah ini dan letakan tepat diatas posisi kode <h1 class='post-title entry-title'> atau dibawah kode <div class='post hentry'>
<div class='thumb-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,600)' expr:title='data:post.title'/>
  </div>
Warna yang saya beri tanda merah, adalah ukuran lebar gambar yang sering kamu gunakan, semakin lebar tema yang kamu pakai maka angkanya bisa kamu tambah menjadi 800,900,1000.

Salin lagi kode CSS dibawah ini, sebagai bahan merapikan tampilanya.
/* GAMBAR DALAM POSTINGAN */
.thumb-post {
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    margin-bottom:15px;
    position:relative;
}
.thumb-post img {
    width:100%;
    max-width:100%;
    height:auto;
    max-height:400px;
    margin:0;
}
.post-body .separator:nth-child(1) {display:none}
Lalu letakan kode tersebut, diatas kode ]]></b:skin> atau </style>

Untuk memanggil kodenya lagi, kita perlu menambahkan kode JavaScript dibawah ini.
<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
Letakan kode diatas, tepat dibagian atas kode </body>

Klik ' SIMPAN '

Sampai tahap ini, saya rasa kamu sudah bisa memasangnya.

Penutup


Demikian trik design yang bisa kami sampaikan untuk bagian pemasangan gambar berada diatas judul blog. Jika ada pertanyaan atau juga masalah eror dalam pemasangan jangan ragu untuk menulis komentar di blog ini.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

2 Comment to "Cara Membuat Gambar diatas Judul Postingan "

  1. Setelah saya coba kenapa dengan gambarnya ya ko ada dua gitu?

    ReplyDelete

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter