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

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.

cara membuat gambar diatas judul [cover image]
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.


Cara Membuat First Image Diatas Judul [Gambar Cover]

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.

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

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

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

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.

cara membuat gambar diatas judul [cover image]
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.


Cara Membuat First Image Diatas Judul [Gambar Cover]

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.

Demikian Artikel kali ini tentang Cara Membuat Gambar first image [Gambar Cover] Di Atas Judul PostinganSemoga 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

Subscribe Our Newsletter