Membuat First Image Cover Keren Dekat Judul Artikel

First Image

Membuat tampilan blog semenarik mungkin merupakan kebiasaan para Blogger. Utak-atik template menjadi kesenangan tersendiri bagi para blogger. Apa lagi blogger pemula tentu rasa ingin tahu dan imajinasi ngeblog seakan tak pernah habis.

Pada bayak blog sering kita lihat gambar postinganya di sembunyikan, jadi yang tampil hanya tulisan saja. Bahkan ada juga blog yang memindahkan gambar pertama postinganya di luar blog misalnya di atas judul postingan.

Bagi kamu yang ingin mencoba seperti yang sudah saya sebut di atas, caranya sangat mudah. Kamu hanya di minta sedikit mengedit template blog yang sedang kamu pakai.

1. Cara Menghilangkan Menyembunyikan Gambar Pertama Postingan.

Kita mulai dari cara menghilangkan atau menyembunyikan image atau gambar postingan. Caranya sangat sederhana kamu hanya tinggal copy kode CSS berikut ini dan letakan dibawah CSS post wrapper atau bisa juga di letakan di atas kode ]]></b:skin>.

.tr-caption-container:nth-of-type(1) {
display:none;
visibility:hidden;
}
.post img.firstimage {
width:100%;
height:auto;
max-width:100%;
} 
.post-body .separator:nth-child(1) {
display:none;
}

Langkah selanjutnya simpan template dan lihat hasilnya. Jika image posting masih ada silahkan edit postingan kamu dan tambahkan caption pada gambar. Sampai disini menyembunyikan gambar postingan sudah berhasil.

2. Cara Memunculkan Gambar Di Atas Judul Postingan

Jika kamu ingin memunculkan gambar postingan di atas judul, maka kamu hanya tinggal meng copy kode HTML berikut ini dan letakan di atas <b:if cond='data:post.title'> atau <h1 class='post-title entry-title'> berikut kodenya, sebelumnya ganti dulu URL_GAMBAR_NOIMAGE dengan url gambar cadangan yang diinginkan.

<b:if cond='data:blog.pageType == "item"'> 
<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='URL_GAMBAR_NOIMAGE'/> 
</b:if> 
</div> 
</b:if>

Atau bisa juga menggunakan kode berikut ini tanpa image cadangan/pengganti jika postingan blog kamu tidak pakai gambar. Ingat pilih salah satu saja antara yang atas dengan yang bawah ini.

<b:if cond='data:blog.postImageUrl'>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='620'/>
</b:if>

Sesuaikan letak kode yang sudah di copy tadi dengan template kamu. Intinya posisi penempatanya boleh diatas judul postingan <b:if cond='data:post.title'> atau diantara judul dengan breadcrumb posting. Sampai disini sudah selesai jika pemasanganya benar maka gambar postingan blog kamu sudah berada di atas judul atau diantara breadcrumb.

3. Cara Membuat Menambahkan Image Cover Keren

Selanjutnya jika kamu ingin membuat gambar tadi jadi lebih menarik dengan menambahkan Firs Image Cover seperti situs jalantikus atau seperti yang blog rancax pakai. Kamu tinggal melakukan langkah berikut ini.

Copy kode CSS berikut ini dan letakan diatas kode ]]></b:skin> atau sebelum kode </style>.

.kolom-author{position:relative;background: #123;height: 40px;margin-top: -5px} 
.about-author{overflow: auto;padding: 0 0 10px 5px;margin-top: -25px;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:white;float: left;}

Selanjutnya copy kode HTML berikut ini dan letakan di atas <b:if cond='data:post.title'> atau <h1 class='post-title entry-title'> atau di bawah penempatan gambar yang sudah di bahas di nomor 2 tadi. Kuncinya ada pada pembahasan nomor 2. Jika langkah ke dua berhasil maka poin ketiga ini gampang.

<div class='kolom-author'> 
<div class='about-author'> 
<img expr:src='data:post.authorPhoto.url'/> 
</div> 
<div class='pengarang'>Penulis <i class='fa fa-arrow-right'/> 
<data:post.author/> 
</div> 
</div>

Selanjutnya simpan template kamu dan lihat hasinya jika posisinya kurang pas pada template kamu, tinggal sesuaikan ukuran pada CSS kolom-author. Selamat mencoba emang rada ribet juga membingungkan bagi pemula tapi cobalah perlahan lahan, ikuti langkah satu persatu dari awal.