Cara Membuat Hero Image Keren dan Responsive di Blog

Cara Membuat Hero Image Keren dan Responsive di Blog ItoLink - Selamat malam dan selamat datang di blog sederhana saya ItoLink, Dunia sharing template dan tutorial blogger. Akhirnya setelah sekian lama admin tidak posting karena kendala device, ItoLink bisa post juga sekarang. Pada kesempatan kali ini, saya akan berbagi tutorial menarik, yaitu membuat Hero Image Keren di Blog.

Istilah Hero Image emang agak asing bagi kamu yang hanya ngeblog dan minim pengetahuan istilah desain website. Bahkan dalam tutorial bahasa indonesia ketika saya ketikan "Cara membuat hero image di website" yang keluar malah artikel bahasa inggris. Mungkin kalo kamu ketikan "cara membuat halaman pembuka di blog" atau "cara membuat gambar full screen di website dan blog" kamu bisa menemukan artikel yang sama.

Hero Image adalah tampilan pembuka di website (welcome screen) bisa dengan gambar, animasi, slider, dan juga video (tergantung pembuatnya). Kamu bisa menemukan hero image pada situs-situs besar seperti penyedia web hosting Niagahoster dan Webbly. Ini dikarenakan situs besar memerlukan tampilan pertama mereka yang dapat memunculkan kesan "WAH" saat pertama kali situsnya di buka user. sehingga user atau pengunjung pun akan tertarik untuk menjelahi situs tersebut.

Meskipun biasanya ada pada situs besar, tidak salahnya kita mencoba memasang di situs blog kita terutama platform blogger ini walaupun jarang blog-blog yang memasangnya karena beberapa alasan. Blog yang memasang Hero Image ini salah satunya di KodeJarwo.

Atau kamu bisa melihat demonstrasinya disini


atau bisa mengunjungi situs blog dummy saya di COEGMAGZ

Baiklah setelah panjang lebar, berikut kita mulai tutorial membuat hero image yang keren dan responsive.

NB: "Pastikan kamu paham sedikit tentang pemograman website HTML dan CSS juga struktur website. Jadi tidak asal comot kode aja :P "

Sebelum melakukan aksi alangkah baiknya membackup terlebih dahulu template sebelumnya. Akan lebih baik jika kamu mengerjakaan tutorial ini di blog dummy dengan template yang sama agar tidak mengganggu pengindekan google.

Cara membuat Hero Image Keren:

1. Buka Blogger
2. Pilih "Tema" dan klik tombol "Edit HTML".
3. Letakan Hero Image di antara Header dan Bagian post blog kamu (bisa dengan di letakan sesudah tag </header>)
<!-- pakai tag kodisi agar hanya muncul di homepage -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<section id="HeroImage">
<div class="layer absolute">
</div>
<div class="wrapper">
<div id="HeroIntro">
<h3>
WELCOME TO</h3>
<h1>
ItoLink</h1>
<p>
Untuk Tutorial dan Lainnya
Silahkan kunjungi
ke Itolink.web.id</p>
<div class="button-wrapper">
<a href="https://www.itolink.web.id" class="hero-button">Kunjungi!</a>
</div>
</div>
</div>
</section>
</b:if>
4. Pastikan peletakannya dengan benar jangan sampai ada yang error. Selanjutnya tinggal taruh kode ini di sebelum </head>
<style>
/*HERO IMAGE*/
.absolute {
 position: absolute;
}
section#HeroImage .wrapper {
 position: relative;
 max-width: 1133px;
 margin: auto;
 height: 100%;
}
section#HeroImage {
/*gambar bisa kamu ganti sesuai keinginan*/
    background: url(https://1.bp.blogspot.com/-xCn0kTbBcjA/Wy96_aTnykI/AAAAAAAABJA/C3fbQtJMI44fz3XxEVHuaDuOzCrdHaxIQCLcBGAs/s1980/hero_bg1.jpg) no-repeat;
    background-size: cover;
    height: 100vh;
}
section#HeroImage * {
    overflow-x: hidden;
    font-family: monospace;
    text-decoration: none;
}


.layer {
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.1);
}
div#HeroIntro {
    position: absolute;
    top: 50%;
    width: 40%;
    color: #000;
    transform: translate(0%,-50%);
}
div#HeroIntro h3{
 margin: 0;
}
div#HeroIntro h1 {
    font-size: 300%;
    margin: 0;
    line-height: 1.5;
    font-weight:bold;

}

.button-wrapper {
    display: table;
    margin: 15px 0;
}

a.hero-button {
    display: table-cell;
    padding: 5px 10px;
    color: #000;
    border: 2px solid;
    line-height: 1.5;
    border-radius: 5px;
}

@media (max-width:800px){
div#HeroIntro{text-align:center;width:100%}
.button-wrapper{width:100%}
a.hero-button{display:inline-grid}
}
</style>

5. Setelah itu silahkan cek situs kamu.

Seperti itulah tutorial membuat Hero Image atau Welcome screen dengan gambar full screen yang bisa kamu praktekan di blog kamu. Harusnya bisa berhasil saat kamu mengikuti tutorial diatas, tetapi Karena beda blog beda template juga jadi bisa sesuaikan sendiri jika masih ada eror ataupun styling dan penempatannya kurang pas.

Saya akhiri saja pada artikel Hero Image ini, Jangan lupa juga untuk like and share artikel ini ke teman-teman kamu atau ke sosial media agar ItoLink bisa terus update lagi artikel menariknya. Jangan lupa juga untuk mengikuti ItoLink dengan update-tan terbaru melaui subscribe email dibawah setelah postingan artikel ini. Terima Kasih..

Creative CEO (Admin: ItoLink)
Facebook twitter Google+

Related Post

Berlangganan update artikel terbaru via email:

0 Komentar