6 Cara Membuat First Image Cover Diatas Judul Artikel Blog

Cara Membuat Gambar Pertama (First Image) di Postingan Blogger – Memasang gambar pertama ini untuk mempercantik tampilan blog yang anda miliki, apalagi saat ini banyak sekali yang hoby merombak template sehingga menjadi sangat bagus dan berbeda dari template aslinya

Untuk tahun ini saya lihat banyak sekali yang menggunakan First Image di template mereka, dan template mereka terlihat cantik sekali. Cara pembuatannya sendiri juga tidak begitu sulit jika diikuti langkah-langkahnya kok

Cara Membuat First Image di Postingan Blogger

1. Buka dashboard blogger

2. Klik menu Tema Edit HTML

3. Kemudian cari kode ]]></b:skin> atau </style> lalu letakkan kode di bawah ini tepat diatas kode tersebut


/* CSS First Image, Post Info and Share */
#first-ruqibook{background:#fff;box-shadow:0 2px 13px rgba(0,0,0,.1);border-radius:10px;overflow:hidden;position:relative;padding-bottom:60px;margin-bottom:20px}
img.first-image{width:100%;height:auto;max-height:480px}
.card-author.vcard{position:absolute;bottom:-10px;left:40px;z-index:9;font-size:13px}
img.photo-wrap{width:70px;height:70px;border-radius:100%;float:left;border:4px solid #fff;margin-right:15px}
.card-author a{line-height:9!important;font-weight:700;color:#222}
.card-time{position:absolute;top:15px;right:15px;background:#5d5d5d;color:#fff;line-height:1.8;font-size:13px;padding:5px 10px;margin-right:10px;margin-top:10px;border-radius:5px}
.card-time abbr{color:#fff;text-transform:none;font-style:none;text-decoration:none!important;border-bottom:0!important}
#card-share{position:absolute;right:14px;bottom:17px;margin:2px;padding:0;overflow:hidden}
#card-share a{position:relative;float:left;border-radius:2.5px;display:block;padding:3.5px 14px 7.5px;margin:0 5px;width:20px;height:20px}
#card-share a:hover{-webkit-filter:opacity(85%)}
.icon-facebook-d,.icon-twitter-d,.icon-wa-d{width:15px;height:15px;vertical-align:middle;margin-left:2px;margin-bottom:4px}
.icon-google-d{width:20px;height:20px;vertical-align:middle;margin-left:1px;margin-bottom:-2px}
.icon-pin-d,.icon-em-d{width:18px;height:18px;vertical-align:middle;margin-bottom:4px}
#card-share a.pt{display:none}
#share-wrapper{margin:auto;padding:0;margin-top:27px}
.shareyes-a{margin:-10px 0 12px;display:none}
.shareyes{display:none;position:relative;margin:0 0 -8px}
a.fb{background:#3b5998}
a.tw{background:#55acee;margin-left:2.5%}
a.em{background:#5a2472;margin-left:2.5%}
a.ln{background:#00c300;margin-left:2.5%}
a.wa{background:#4dc247;margin-left:2.5%}
a.pt{background:#bd081c;margin-left:2.5%}
a.fb-a{background:#3b5998}
.icon-facebook,.icon-twitter,.icon-pin,.icon-in,.icon-wa,.icon-em{width:16px;height:16px;vertical-align:middle}
.icon-google{width:21.5x;height:21.5px;vertical-align:middle}
.icon-bm{width:19px;height:19px;vertical-align:middle}
.icon-tr{width:15px;height:15px;vertical-align:middle}
.icon-facebook{margin-left:-2px}
@media screen and (max-width:768px){
#card-share{bottom:10px;right:2px;margin:7px}
#card-share a{text-align:center}
.card-time{font-size:11px}
}
@media screen and (max-width:680px){
#first-ruqibook{padding-bottom:100px;width:100%}
#card-share{bottom:10px;width:100%;right:2px;left:20px}
#card-share a{width:14%;text-align:center}
.card-author.vcard{bottom:25px}
}
@media screen and (max-width:480px){#card-share a{width:11.4%}}
@media screen and (max-width:380px){#card-share a{width:10%}}

4. Jika sudah, cari lagi kode <data:post.body/>. Biasanya kode tersebut lebih dari satu, silahkan anda coba satu per satu agar berhasil atau tidak, dan letakkan kode dibawah ini tepat diatas kode tersebut

Baca Juga Artikel Terkait :

Cara Posting Artikel Blog Supaya Cepat Terindex Google by Iptahudin

Begini Cara Menentukan Postingan Blog Dengan Google Trends dan Banyak Dicari Orang

Pakai iklan adsense gaya sticky widget, berakibat seperti ini

Index Blogger Blogspot Label pages di Google Search Engine

Cara Membuat Sitemap Blogspot Langsung Terindeks By Iptahudin

<div id='first-gudangcaraque'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,600)' expr:title='data:post.title'/>
<div class='card-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<div class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<img class='photo-wrap' expr:src='resizeImage(data:post.authorPhoto.url,100)' itemprop='image'/>
Posted by <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
  <span itemprop='name'><data:post.author/></span></a>
  </div><b:else/><span class='fn' itemprop='name'><data:post.author/></span></b:if></b:if></div>
<div class='card-time'>
<abbr class='published updated timeago' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><data:post.dateHeader/></abbr>
</div>
<div id='card-share'>
<a class='fb' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target='_blank' rel='nofollow' title='Share to Facebook'><svg class='icons icon-facebook-d' viewBox='0 0 24 24'><path d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z' fill='#fff'/></svg></a>
<a class='tw' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' target='_blank' rel='nofollow' title='Share to Twitter'><svg class='icons icon-twitter-d' viewBox='0 0 24 24'><path d='M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z' fill='#fff'/></svg></a>
<a class='pt' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Share to Pinterest'><svg class='icons icon-pin-d' viewBox='0 0 24 24'><path d='M13.25,17.25C12.25,17.25 11.29,16.82 10.6,16.1L9.41,20.1L9.33,20.36L9.29,20.34C9.04,20.75 8.61,21 8.12,21C7.37,21 6.75,20.38 6.75,19.62C6.75,19.56 6.76,19.5 6.77,19.44L6.75,19.43L6.81,19.21L9.12,12.26C9.12,12.26 8.87,11.5 8.87,10.42C8.87,8.27 10.03,7.62 10.95,7.62C11.88,7.62 12.73,7.95 12.73,9.26C12.73,10.94 11.61,11.8 11.61,13C11.61,13.94 12.37,14.69 13.29,14.69C16.21,14.69 17.25,12.5 17.25,10.44C17.25,7.71 14.89,5.5 12,5.5C9.1,5.5 6.75,7.71 6.75,10.44C6.75,11.28 7,12.12 7.43,12.85C7.54,13.05 7.6,13.27 7.6,13.5A1.25,1.25 0 0,1 6.35,14.75C5.91,14.75 5.5,14.5 5.27,14.13C4.6,13 4.25,11.73 4.25,10.44C4.25,6.33 7.73,3 12,3C16.27,3 19.75,6.33 19.75,10.44C19.75,13.72 17.71,17.25 13.25,17.25Z' fill='#fff'/></svg></a><a class='em' expr:href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=email&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share to Email'><svg class='icons icon-em-d' viewBox='0 0 24 24'><path d='M12,13L2,6.76V6C2,4.89 2.89,4 4,4H20A2,2 0 0,1 22,6V6.75L12,13M22,18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V9.11L4,10.36V18H20V10.36L22,9.11V18Z' fill='#fff'/></svg></a>
<a class='wa' data-action='share/whatsapp/share' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; &quot; + data:post.url' title='Share to Whatsapp' target='_blank'><svg class='icons icon-wa-d' viewBox='0 0 24 24'><path d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z' fill='#fff'/></svg></a>
</div>
</div>

5. Setelah menambahkan kode diatas, cari lagi kode </body> dan letakkan kode di bawah ini tepat diatas kode tersebut. Kode dibawah ini berfungsi agar gambar tersebut tidak double


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

6. Simpan Template dan Lihat hasilnya!

Jika anda sudah mengikuti langkah-langkah diatas dengan baik dan benar, maka template anda tidak akan mengalami error. Jika anda masih bingung silahkan komentar dibawah ini atau kirimkan saya email di contact form untuk membantu anda secara pribadi

Cara diatas sudah saya coba di template Viomagz V3.3.0 dan berhasil (tidak mengalami error sama sekali), Demikian ulasan dari iptahudin.com tentang Cara Membuat Gambar Pertama (First Image) di Postingan Blogger dengan Tombol Share. Semoga artikel diatas dapat membantu anda untuk mempercantik tampilan blog anda. Semoga bermanfaat

VIDEO DEMO SLIDE POWERPOINT + FREE DOWNLOAD