Membuat Gambar Utama Postingan Dengan Gosip Dan Share Post

Halo sahabat Blanter, kembali lagi saya akan membagikan sebuah tutorial yang sanggup sahabat coba dalam mempercantik tampilan blog, yakni dengan memasang box gambar utama postingan menjadi lebih menarik lengkap dengan desain modern, isu penulis, tanggal dan juga tombol bagikan.

Sebenarnya sudah ada beberapa seruan wacana tutorial ini semenjak lama, namun gres sanggup saya buat tutorialnya. Tutorial ini sanggup menciptakan postingan sahabat lebih menarik dengan desain gambar utama yang berbeda dan tidak polos, desain gambar utama ini lengkap dengan foto profil dan pastinya sudah responsive di aneka macam macam perangkat.

Untuk tutorial kali ini, menyerupai biasa akan saya sertakan video tutorial biar sahabat lebih paham bagaimana dan apa yang harus dilakukan dikala mencoba tutorial ini.

Gambar Utama Postingan pada Smartphone

Untuk mengikuti tutorial ini, pastikan gambar utama pada blog sahabat orisinil upload melalui blogger, dan gambar utama tidak boleh di dalam table maupun caption, kalau gambar utama pada postingan sahabat hasil copy paste atau di dalam table maka gambar utama yang orisinil tidak akan hilang dan kesannya gambar menjadi double.

Demo

Ikuti tutorial di bawah ini untuk memasang gambar utama postingan yang menarik.

Masuk ke Blogger > Tema > Edit HTML

Letakan CSS berikut ini sempurna di atas isyarat ]]></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%}}

Letakan HTML di bawah ini, sempurna di atas isyarat <data:post.body/> (kode tersebut ada lebih dari satu, pastikan coba satu-persatu dan test untuk mengetahui muncul atau tidaknya)

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

Terakhir letakan Javascript di bawah ini sempurna di atas isyarat </body>

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

Simpan Template.

Lihat Juga : Membuat Material Design Dialog Box dengan jQuery di Blog

Cek Video lengkap cara memasang Gambar Utama Postingan Menarik dengan Info dan Share :

Itulah tutorial yang sanggup saya bagikan kali ini, jangan lupa untuk komentar dan subscribe blog ini untuk mendapat update terbaru yang menarik untuk sobat. Thank you.. 😊

Sumber https://www.idblanter.com