Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Membuat Gambar Di Atas Judul [Cover Image] Postingan Blogger
Cara Membuat Gambar Di Atas Judul [Cover Image] Postingan Blogger

Cara Membuat Gambar Di Atas Judul [Cover Image] Postingan Blogger

By Dewa Plokis
Memasang atau membuat first image atau gambar pertama diatas judul postingan saat ini lagi ramai dalam pencarian para blogger. Menggunakan metode ini untuk mengikuti style bawaan wordpress dan beberapa flatform website lainnya yang support. Pemasangan ini biasa juga disebut dengan istilah Cover Image / First Image

Membuatnya berada diatas judul artikel postingan blog mungkin tidak terdengar aneh. karena beberapa blogger sudah menggunakan trik ini dan diterapkan pada template mereka.

Pada flatform wordpress dan website yang lain, fitur ini hanyalah fitur yang biasa dan sudah menjadi default set postingan, namun beda halnya dengan blogger. Fitur yang disediakan oleh blogger untuk menampilkan first Image pada pada halaman posting di posisi top atau posisi paling atas  tidak tersedia.

Banyak blogger yang ingin menerapkan cara ini pada blognya. Saya juga sebenarnya sangat penasaran dengan jenis script yang digunakan sehingga bisa menjadikan gambar postingan berada diatas judul Artikel.

Secara logika, jika kita melihat struktur penempatan first image ini, posisinya berada diatas <H1> title postingan blog. Namun bisakah kita langsung menempatkan image / separator langsung berada diatas judul <H1> ini. Tentu tidak bisa jika tidak menggunakan trik khusus.

Apakah Anda tertarik untuk mencoba cara ini?.

Jika Anda berniat melakukan trik ini pada blogger, silakan ikuti langkah demi langkah tutorial dibawah ini.

Disini saya akan menyajikan 2 cara untuk penerapan pada First Image ini dan keduanya bisa dicoba pada blog Anda

Cara Membuat First Image Diatas Judul [Gambar Cover]

Ini merupakan cara pertama pemasangan first image diatas judul. Disini kita akan menggunakan 2 jenis script yang memiliki fungsi dan letak yang berbeda. Cara ini saya gunakan setelah melihat tampilan postingan dari Arlina Design dan coba saya terapkan juga pada blog saya dan berhasil untuk dijadikan sebagai cover image atau gambar cover blog.

Silakan Login ke akun blogger Anda terlebih dahulu ➤Klik theme➤lalu klik tanda 3 titik ፧ (jika Anda masuk keblogger baru) atau klik edit ( jika masih menggunakan classic Blogger). Jangan lupa untuk membackup template Anda terlebih dahulu, ini untuk mencegah hal-hal yang tidak diinginkan. Namun jangan khawatir, jika Anda mengikuti trik ini dan menerapkannya secara lengkap maka tidak akan ada masalah.

1. Script Pertama
Pasang script berikut ini sebelum </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>//<![CDATA[
function createThumb(pID,pURL){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var vid1=div.getElementsByTagName("iframe");if(img.length>=1){imgtag='
<a href="'+pURL+'">
    <div class="img-div" style="background-image: url('+img[0].src.replace(/s\B\d{2,4}/," s1600 ")+');"></div>
</a>';div.innerHTML=imgtag} else if(div.innerHTML.indexOf("https://www.youtube.com/embed/")!=-1){var vidid1=vid1[0].src;var vidfiler=vidid1.substring(vidid1.indexOf("https://www.youtube.com/embed/")+29);var vidid="";vidid=removeURLParameter(vidfiler,"rel");vidid=removeURLParameter(vidid,"feature");imgtag='
<meta itemprop="image" content="https://i1.ytimg.com/vi'+vidid+'/mqdefault.jpg"></meta>
<meta itemprop="image_url" content="https://i1.ytimg.com/vi'+vidid+'/mqdefault.jpg"></meta>
<div class="youtube-post-format">
    <a href="'+pURL+'">
        <div class="img-div" style="background-image: url(https://i1.ytimg.com/vi'+vidid+'/mqdefault.jpg);">
            <div class="thumb-overlay">
                <div class="vertical-align">
                    <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
                        <path class="ytp-large-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#222" fill-opacity="0.6"></path>
                        <path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path>
                        <path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path>
                    </svg>
                </div>
            </div>
    </a>
    </div>
</div>';div.innerHTML=imgtag} else{div.innerHTML=imgtag}};
//]]></script>

2. HTML
Pasang kode berikut ini diantara kode <div class='post-outer'> dan <b:include data='post' name='post'/> yang posisinya berada dibawah kode <b:includable id='main' var='top'> atau  <b:include data='posts' name='breadcrumb'/>. Scrol saja kebawah, pasti akan ketemu. Atau untuk lebih jelasnya, silakan check pada gambar dibawah

cara membuat first image gambar cover

Setelah ketemu dengan kode diatas. Pastekan kode ini:
<b:if cond='data:post.thumbnailUrl'>
<div class='entry-img' expr:alt='data:post.title' expr:title='data:post.title'>
<div expr:id='&quot;image-&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>createThumb(&quot;image-<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
</div>
</b:if>

3. CSS
Langkah ketiga adalah memasang CSS agar tampilan first image responsive. Silakan letakkan kode berikut dibawah kode ]]></b:skin> atau sebelum kode </head>
<b:if cond='data:view.isPost'><style type='text/css'>
.entry-img {
    width: 100%;
    margin-right: 20px;
    position: relative;
}
.entry-img .img-div {
    background: #60a3bc;
    background-position: center;
    background-size: cover;
    padding-bottom: 60%;
    background-repeat: no-repeat;
    position: relative;
}
.thumb-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px 10px 20px 20px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}
.thumb-overlay svg {
    width: 68px;
    height: 48px;
}
.entry-img:hover .ytp-large-play-button-bg {
    -moz-transition: fill .1s cubic-bezier(0.0, 0.0, 0.2, 1), fill-opacity .1s cubic-bezier(0.0, 0.0, 0.2, 1);
    -webkit-transition: fill .1s cubic-bezier(0.0, 0.0, 0.2, 1), fill-opacity .1s cubic-bezier(0.0, 0.0, 0.2, 1);
    transition: fill .1s cubic-bezier(0.0, 0.0, 0.2, 1), fill-opacity .1s cubic-bezier(0.0, 0.0, 0.2, 1);
    fill: #ff0000;
    fill-opacity: 1;
}
.vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.item-details {
    padding: 10px;
}
.post-body .separator:nth-child(1) {
    display: none;
}
</style></b:if>


4. Script Kedua
Langkah terakhir adalah pemasangan script untuk menghilangkan gambar postingan dan menjadikan gambar tersebut menjadi cover image.

Letakkan script berikut ini diatas kode </body>
<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>

5. Save Template Dan Lihat Hasilnya
Sekarang coba lihat hasilnya, buka postingan blog Anda. Selamat...! Anda telah berhasil.

Untuk hasilnya, Anda bisa lihat di blog ini. Script ini juga berlaku bagi Anda yang menggunakan postingan berupa file video.

First Image [Gambar diatas Judul Blog]

Sekarang kita menuju ke cara yang kedua tentang pemasangan firts image atau first separator blog. Untuk cara kedua ini, script pertama pada cara diatas tidak perlu digunakan. Berikut ini panduannya.

Kode CSS
Salin kode dibawah ini dan letakkan sebelum kode ]]></b:skin> atau </style>
/* First Image */
.img-post {
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    margin-bottom:15px;
    position:relative;
}
.img-post img {
    width:100%;
    max-width:100%;
    height:auto;
    max-height:405px;
    margin:0;
}
.post-body .separator:nth-child(1) {display:none}

Kode HTML
Mirip dengan cara pertama diatas. letakkan kode berikut diantara kode <div class='post-outer'> dan <b:include data='post' name='post'/> yang posisinya berada dibawah kode <b:includable id='main' var='top'> atau  <b:include data='posts' name='breadcrumb'/>.
<b:if cond='data:view.isPost'><div class='img-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,675)' expr:title='data:post.title'/>
  </div></b:if>
Script
Untuk scriptnya, tetap gunakan script remove first image dibawah ini dan dilatakkan sebelum </body>
<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>


Catatan :

Script ini akan berfungsi jika dalam template blog sudah terdapat Jquery Script. Jika belum ada jquery pada template blog pasti scriptnya tidak akan berjalan. Dan sebaiknya gunakan jquery terbaru.


Demikian Artikel kali ini tentang Cara Membuat Gambar first image [Gambar Cover] Di Atas Judul Postingan, Semoga bermanfaat.

Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed