Merubah Template Blogger Seperti Web - Static Homepage Blogger

Merubah Template Blogger Seperti Web - Static Homepage Blogger

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

Semangat belajar...
Komentar
Silahkan, saya ga nggigit !