Thursday, 24 January 2019

Cara Membuat First Image Diatas Judul Artikel

Cara Membuat First Image Diatas Judul Artikel

Tags
BAGIKAN ARTIKEL »

Cara Membuat First Image

Cara Membuat First Image Diatas Judul Artikel. OK sobat masih ketemu lagi ya dengan admin blog bisnis online si penjual angkringan yang kepedean (sok-sokan ngasih tutor).

Posting kali ini terinspirasi dari beberapa blogger template yang mempunyai tampilan elegan seperti milik mba arlina dan beberapa sahabat blogger yang template blognya juga mempunyai tampilan yang sama di gambar artikelnya. Yaitu pada gambar pertama di artikel tidak menyatu dengan artikel itu sendiri melainkan berada di luarnya tepatnya di atas judul atau biasa disebut First Image.

Tampilan pada blog ini juga sedikit saya edit untuk merubah cover gambar artikel menjadi first image agar tampilannya mempunyai kesan profesional seperti milik sobat blogger lain.

Nah untuk posting kali ini saya juga ingin memberikan cara merubah first image diatas judul pada template blogger, tapi ada sedikit perbedaan tampilannya pada tutorial yang akan saya posting kali ini yaitu ada widget author disisi kiri bagian bawah. [Lihat tanda panah pada gambar dibawah].

Membuat First Image Diatas Judul

Udah paham kan penjelasannya sobat? OK saya anggap sobat blogger udah paham semua, sekarang mari kita langsung ke tutorial cara penerapan first image dengan author.

Cara Membuat First Image


  1. Langkah pertama adalah login akun blogger sobat
  2. Klik "Layout/Tema" langsung ke "Edit HTML'
  3. Cari kode seperti ini, untuk memudahkan pencarian gunakan Ctrl+F pada keyboard sobat.
    <b:includable id='post' var='post'>
    Cari kode yang ada 'post hentry' kalo udah ketemu copy kode dibawah ini dan letakkan diatas kode 'post hentry'


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='coverImage'>
    <b:if cond='data:post.firstImageUrl'>
    <img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
    <b:else/>
    <img class='firstimage' expr:alt='data:post.title' src='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s70/picture_not_available.png'/>
    </b:if>
    </div>
    </b:if>
    <div class='kolom-author'>
    <div class='about-author'>
    <img expr:src='data:post.authorPhoto.url'/>
    </div>
    <div class='pengarang'> <data:post.author/>
    </div>
    </div>
  4. Langkah selanjutnya adalah penerapan kode CSS agar tampilannya terlihat bagus dan keren. Kode CSS ini manfaatnya untuk mengatur dan menyesuaikan gambar agar posisinya pas dengan template sehingga ukuran gambar full width. Caranya adalah cari kode </style> atau ]]></b:skin> kemudian copy CSS berikut dan taruh diatas kode tadi.
    .post img.firstimage{ width:100%; height:auto; max-width:100%} .post-body .separator:nth-child(1) {display:none} .kolom-author{position:relative;background: #123;height: 40px;} .about-author{overflow: auto;padding: 0 0 10px 5px;margin-top: -30px;float: left;} .about-author img {float: left;width: 60px;height: 60px;border-radius: 100px;border: solid #1233px;} .pengarang {font-size: 12px;margin-left: 10px;padding-top:10px;color:#FF3300;float: left;}
  5. SIMPAN Template

Menghilangkan Dua Gambar di First Image


Pada tahapan ini proses pembuatan first image sudah berhasil tapi biasanya akan tampil dua gambar yang sama pada artikel sobat, untuk menghilangkan tampilan ganda pada artikel cukup memasang kode javascript dibawah dan taruh diatas kode </body>.

Ini sob kodenya
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>

Proses penerapan kode untuk membuat first image diatas judul sudah selesai coba cek dulu tampilannya di blog kamu apakah sudah sempurna atau belum, kalo ada yang dipertanyakan silahkan lewat kotak komentar dibawah.

Agar tampilan lebih maksimal ketika sobat mengupload gambar diposting artikel sebaiknya pilih layout X-Large seperti contoh gambar dibawah.

Cara Membuat First Image

OK posting kali ini saya cukupkan sekian semoga sobat pengunjung tetap bisa memahami bahasa yang disampaikan saya selaku admin blog belajar bisnis online ini, selamat mencoba dan semoga bermanfaat.

Rekomendasi Untuk Anda × +
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Mohon komentar yang relevan dengan tema artikel, komentar SPAM, Live link tidak akan muncul..!!