Cara Menciptakan First Image Di Atas Postingan Blog
 |
| CONTOH FIRST IMAGE |
Cara Membuat First Image di Atas Postingan Blog - Ketika sering browsing di web sana sini, mungkin kau 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 yakni gambar yang diletakkan diatas judul artikel di blog. Susunannya biasanya gambar untuk artikel itu, kemudian dibawahnya ada judul artikel, dan dibawahnya lagi biasanya ada tombol share, kemudian disusul iklan atau isi artikelnya.
Selain menyebutnya sebagai first image, kau juga sanggup menyebutnya sebagai cover postingan. Sederhananya menyerupai itu.
Nah, mungkin kau juga tertarik untuk menciptakan first image menyerupai situs - situs lainnya. Mungkin kau beropini bahwa hal itu terlihat bagus.
Oleh alasannya itu, berikut yakni tutorialnya :
1. Buka blogger.com
2. Pilih tema
3. Pilih edit HTML
4. Cari arahan 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 arahan ini :
<b:includable id='post' var='post'>
5. Jika tidak ketemu, cari saja dengan kata kunci post hentry
6. Pastekan arahan berikut dibawah arahan post henry tersebut
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFJD8RhZQqSdT4tqEofsxvMyTSRyavMYDHszeTbuONG4Kty4z93YjkY8kA4f7nlrEbx89ZB1KzZJMHKms7m9_2uZdbdrNcaQAfZqQkGEfLUX1iBgYY4-CH9Bb-aQqmDr22mT8Qtxc-60/s70/picture_not_available.png'/> </b:if> </div> </b:if>7. Paste arahan berikut diatas arahan </style>
.post img.firstimage{width:100%;height:auto;max-width:100%} .post-body .separator:nth-child(1){display:none}8. Paste arahan ini diatas </body>
<script type='text/javascript'> //<![CDATA[ $(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()}); //]]> </script>9. Selesai
Bagaimana ? Praktis bukan ?
Referensi : Kang Iyan
