Banyak pengguna blogspot yang bertanya terkait bagaimana merubah halaman homepage blogger agar static tanpa redirect ke static page (laman)
Jawabannya gampang, gunakan saja SEO Blogger Template Gurublogger V.1.1.0 karena templatenya sudah didesain halaman depan bergaya static
Namun demikian teman teman harus tau bagaimana cara penggunaannya agar bisa mengcustomize sesuai dengan keinginan
Memahami Tampilan Design Gurublogger V.1.1.0
Tampilan homepage memang didesain seminimal mungkin agar penggunanya bebas memodifikasi baik itu untuk onlinestore maupun blog
Dan yang paling penting adalah agar pengguna template ini bisa menggunakan visitor flow sesuai keinginan pemilik blog
Tampilan homepage kurang lebih seperti gambar berikut ini :
#1: Stay Home
Tampilan stay home disini pada dasarnya hanya sebuah gambar (tanpa link) dengan lebar 720 pixel dengan tinggi menyesuaikan.
Bila ingin merubah, cukup siapkan gambar dengan lebar 720 pixel kemudian ganti link gambar stayhome
Caranya:
Kemudian temukan kode dibawah ini, dan ganti link gambar yang berwarna kuning dengan lingk gambar milik teman2 sendiri :
<img alt=”belajar-bisnis-online-dari-rumah” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-XvQHT-R6B4w/Xv1UVe4uBFI/AAAAAAAAHfM/GZhDJcLxiDIp8EqtGRE6e56JQMQqG4RHgCK4BGAsYHg/d/stayhome-biru.png” />
Bila tidak ingin menampilkan gambar cukup delete semua kode diatas.
#2: Gambar Web Dev
Hampir sama dengan gambar stay home, hanya saja gambar yang satu ini menggunakan link dan bisa di klik
Silahkan ganti gambarnya (berwarna kuning) dan juga ganti link tautan (berwarna hijau), caranya sama dengan mengganti gambar stayhome
Kode:
<a alt=”web-dev” title=” Web Dev Score” href=”https://web.dev/measure/”> <div > <img alt=”internet” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-Gm7IpfO08Ig/Xv1LPwi5jSI/AAAAAAAAHew/4oKEiXd2SscMwPgXVYa8W1nPx09q3HEHQCK4BGAsYHg/d/web-dev-score-2.png” /><br/><br/><br/><br/></div> </a>
Bila teman2 tidak suka dengan tampilan tersebut cukup hapus semua kode diatas
#3: Menu Front End
Bagian ini hanyalah sebuah text biasa tanpa link, untuk memodifikasi silahkan cari kode berikut ini:
<div class=”judulfrontend”><h3 class=”title”>Menu Front End :</h3><span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/><br/> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </span></div>
#4: Menu Thumbnail Kotak 6 buah
Menu ini adalah gabungan antara gambar, text dan diberikan link
Ingat !!, lebar gambar ini sudah fix, jadi bila ingin mengganti gambar teman2 terlebih dahulu harus menyiapkan gambar sendiri dengan panjang 331px dan lebar 174px
Gambar (berwarna kunung), Hyperlink (berwarna hijau), dan text (berwarna oranye), berikut ini keseluruhan kodenya :
<a href=”#”>
<div class=”boxmenugurublogger1″>
<img alt=”internet” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-IOzq9MLBdo4/Xv6P51UjBSI/AAAAAAAAHhE/rEKIQT390QEFAMh7bCUx2nM9l6q6ZebywCK4BGAsYHg/d/pict1.png” /> <br />
<div class=”boxmenugurublogger2″> Feature Menu 1 Here Feature Menu 1 Here </div>
</div>
</a>
<a href=”#”>
<div class=”boxmenugurublogger1″>
<img alt=”kelas-blogger-online” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-Yr1cDyAlD_4/Xv6P6WbzRfI/AAAAAAAAHhI/qrMeko6qFkQsZid7TEk5bIZIxQMuk9Z9wCK4BGAsYHg/d/pict2.png” /> <br />
<div class=”boxmenugurublogger2″> Feature Menu 2 Here Feature Menu 2 Here </div>
</div>
</a>
<div class=”clear”> </div>
<a href=”#”>
<div class=”boxmenugurublogger1″>
<img alt=”blog-personal” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-cqTPR2ulfR8/Xv6P6mwaoHI/AAAAAAAAHhM/g6NqSNH6nTA_6YyD7KMsX8cVazoRKwspwCK4BGAsYHg/d/pict3.png” /> <br />
<div class=”boxmenugurublogger2″> Feature Menu 3 Here Feature Menu 3 Here </div>
</div>
</a>
<a href=”#”>
<div class=”boxmenugurublogger1″>
<img alt=”css-blogger” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-BZf2O8ghI8Y/Xv6P68muvlI/AAAAAAAAHhQ/C50P0dGf1_IgU4VfvobLYEQ2YrW6HsKOgCK4BGAsYHg/d/pict4.png” /> <br />
<div class=”boxmenugurublogger2″> Feature Menu 4 Here Feature Menu 4 Here </div>
</div>
</a>
<div class=”clear”> </div>
<a href=”#”>
<div class=”boxmenugurublogger1″>
<img alt=”seo-untuk-blogger” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-ZY2E15Rl-ek/Xv6P7JVqzFI/AAAAAAAAHhU/HW0rnCahMdILJu8NwtBSm7_bvQVQDHiMwCK4BGAsYHg/d/pict5.png” /> <br />
<div class=”boxmenugurublogger2″> Feature Menu 5 Here Feature Menu 5 Here </div>
</div>
</a>
<a href=”#”>
<div class=”boxmenugurublogger1″>
<img alt=”software-seo” class=”lazy” src=”https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg” data-src=”https://1.bp.blogspot.com/-aDySQFKjF3s/Xv6P7YZPhNI/AAAAAAAAHhY/yhWiGQ-h0GcL1rw8aXtOsPtTxBelVcjigCK4BGAsYHg/d/pict6.png” /> <br />
<div class=”boxmenugurublogger2″> Feature Menu 6 Here Feature Menu 6 Here </div>
</div>
</a>
Selain melalui theme, kode diatas juga bisa diakses melalui layout:
Bila tidak suka dengan thumbnail diatas teman2 bisa menghapus keseluruhan kode diatas
Sebenarnya menu ini sangat special, seperti halnya senapan tergantung siapa yang pegang apakah sniper atau orang biasa
Bayangkan bila gambar di menu ini diganti dengan foto produk, diberi link ke artikel yang isinya foto foto produk, atau bisa juga linknya diganti link ke whatsApp…. bukankah menjadi landing page toko online?
dan jumlahnya pun bisa diperbanyak bukan hanya 6, tinggal salin dan tambahkan kode tersbut dibawahnya……bisa display puluhan product
Senjata itu tergantung siapa yang pegang ya kan 😀
Semangat belajar…
