Cara Membuat First Image di Atas Postingan Blog

Bagikan artikel ke:

Facebook Google+ Twitter

Penulis Muhamad Nurul Huda

CONTOH FIRST IMAGE

Cara Membuat First Image di Atas Postingan Blog - Ketika sering browsing di web sana sini, mungkin kamu melihat dalam artikel tersebut bahwa ada gambar artikel alias cover artikelnya diatas judul artikel tersebut bukan ?

Nah, itu disebut first image. Sederhananya, first image itu adalah gambar yang diletakkan diatas judul artikel di blog. Susunannya biasanya gambar untuk artikel itu, lalu dibawahnya ada judul artikel, dan dibawahnya lagi biasanya ada tombol share, kemudian disusul iklan atau isi artikelnya.

Selain menyebutnya sebagai first image, kamu juga dapat menyebutnya sebagai cover postingan. Sederhananya seperti itu.

Nah, mungkin kamu juga tertarik untuk membuat first image seperti situs - situs lainnya. Mungkin kamu berpendapat bahwa hal itu terlihat bagus.

Oleh karena itu, berikut adalah tutorialnya :

1. Buka blogger.com

2. Pilih tema

3. Pilih edit HTML

4. Cari kode dibawah ini dengan menekan tombol CTRL+F

<div class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

Dibawahnya akan ada kode ini :

<b:includable id='post' var='post'>

5. Jika tidak ketemu, cari saja dengan kata kunci post henry

6. Pastekan kode berikut dibawah kode post henry tersebut

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FY52kvwRg98rwreSoLJckL8NJt7A2vQXj1D9TQQP2balUVjbHHFY0F_NEZSKKJQebNyKaDe_2cYidx3i5RqDSKvCrCphBNA34Klkw88ER3UD_DIi8aajuYEKBqM5kfR0hXidO1dQRh0/s70/picture_not_available.png'/> </b:if> </div> </b:if>

7. Paste kode berikut diatas kode </style>

.post img.firstimage{width:100%;height:auto;max-width:100%} .post-body .separator:nth-child(1){display:none}

8. Paste kode ini diatas </body>

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

9. Selesai

Bagaimana ? Mudah bukan ?




Referensi : Kang Iyan