Cara Membuat Gambar Utama Postingan Keren di Blogger

arsipbiru_membuat-gambar-utama-postingan-keren

Arsipbiru.com - Gambar utama postingan merupakan suatu bagian yang tidak boleh dilupakan dalam penyusunan sebuah artikel atau konten. Sebab gambar utama merupakan inti dari postingan itu sendiri. Gambar utama dapat mendeskripsikan apa yang sedang dibahas dalam suatu artikel. Dengan hanya melihat gambar utama saja, kita akan tahu apa maksud si penulis dalam artikelnya.


Biasanya gambar yang dijadikan sebagai gambar utama adalah gambar yang menyangkut dengan apa yang sedang dibahas dalam postingan. Gambar utama bebas disisipkan dalam postingan asalkan tidak melenceng dari postingan itu sendiri. Intinya gambar utama tersebut dapat mewakili bahasan-bahasan dalam suatu artikel.


Nah, dalam kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat gambar utama postingan terlihat keren di Blogger. Sehingga tampilan gambar utama akan terlihat lebih profesional dan menarik. Pengunjung pun akan merasa nyaman dan betah berlama-lama di blog.


Apabila Anda tertarik ingin membuat gambar utama postingan terlihat keren di Blogger, Anda dapat menyimak step-by-step nya dengan seksama berikut ini. Namun, perlu diketahui bahwa terdapat beberapa template yang tidak dapat bekerja secara sempurna ketika kode-kode berikut disematkan dalam template tersebut. Jadi, silahkan Anda coba dahulu apakah kode-kode berikut ini bekerja secara sempurna di template yang Anda gunakan.


Cara Membuat Gambar Utama Postingan Keren di Blogger

1. Pertama, masuk ke akun Blogger > pilih tab menu Tema > klik Edit HTML.

2. Letakan kode CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>.

/* CSS First Image, Post Info and Share */

#first-blanter{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-blanter{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%}}

3. Selanjutnya, letakan kode HTML berikut ini tepat di atas kode <data:post.body/>. Perlu Anda ketahui bahwa kode <data:post.body/> tersebut lebih dari satu, pastikan Anda coba satu per satu hingga berhasil.
<div id='first-blanter'>

<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>

4. Kemudian, letakkan kode JavaScript berikut ini tepat di atas kode </body>.

<script type='text/javascript'>

//<![CDATA[

$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});

//]]>

</script>

5. Terakhir, simpan Tema dan lihat hasilnya.

Berikut tampilan gambar utama postingan keren di Blogger.
arsipbiru_tampilan-gambar-utama-postingan-keren


Demikianlah tutorial singkat terkait bagaimana cara membuat gambar utama postingan keren di Blogger. Jika ada saran dan masukan, silahkan berkomentar yang sopan di bawah ini. Terima kasih telah berkunjung dan semoga bermanfaat.

Sumber:

Mau donasi lewat mana?

Trakteer Saweria
N/A
Traktir creator minum kopi dengan cara memberikan sedikit donasi.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details