×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Gambar Pertama / First Image di Postingan Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Gambar Pertama / First Image di Postingan Blogger, Memasang gambar pertama (first image) di atas judul postingan sepertinya sudah jadi trend template blog saat ini. Gambar pertama yang terdapat pada artikel akan berada di atas judul postingan. Saya sendiri suka menempatkan gambar postingan di atas judul artikel, lebih rapi dan memiliki cover image yang terpisah dari gambar materi artikel.

Cara Membuat Gambar Pertama / First Image di Postingan Blogger

Sayangnya, belum banyak template blog populer saat ini menggunakan first-image secara bawaan. Untuk membuat gambar di atas judul artikel, kita harus mengedit atau menambahkan beberapa baris html, css dan javascript ke dalam template melalui Edit HTML.

Cara Membuat Gambar Pertama / First Image di Postingan Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* First Image by Jagoan Redesign */
.separator:nth-of-type(1){display:none;visibility:hidden}
img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}
4. Silahkan anda mencari koda
 <h1 class='post-title entry-title'> dan tambahkan kode html dibawah ini tepat Diatas kode tersebut

<!-- First Image by Jagoan Redesign -->
  <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='https://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/>
</b:if>
</div>
</b:if>
5. Silahkan anda SIMPAN TEMA dan Selesai.
Nah, itu adalah tutorial Cara Membuat Gambar Pertama / First Image di Postingan Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel