Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Gambar diatas Judul Postingan

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.

6 komentar untuk "Cara Membuat Gambar diatas Judul Postingan "

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

    BalasHapus
    Balasan
    1. JavaScript nya udah dipasang?

      Hapus
    2. maaf min...

      Coba check disini, https://bit.ly/2OhUeKx siapa tahu masalahnya bisa terselesaikan..

      Hapus
    3. Makasih atas artikel yang sama :3

      Hapus
  2. Permisi Min ini untuk memindahkan seperti pada gambar bagaimana ya ?
    ket gb : no. 1 sudah berhasil, gambar pindah di atas judul artikel, tapi tulisan yang diberi lingkaran merah pengen pindah ke seperti gambar no. 2.
    https://1.bp.blogspot.com/-h_7tR4j9Lpg/XYwFCzrihbI/AAAAAAAACXQ/EfSgMjmz7GsVSIVvxzXNtUnCGf-YG2dbQCNcBGAsYHQ/s640/post%2Bin%2Btitle.png

    BalasHapus
    Balasan
    1. Bisa cari kode <div class='breadcrumbs'> biasanya setiap template memiliki kode ini, silahkan taruh diatasnya.

      Hapus

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan

NB :Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini