Toko Butik Landing Page

Memiliki web untuk mengembangkan bisnis serta jasa agar dapat dijangkau oleh pembeli menjadi solusi diera digital. Dengan hanya memiliki akun Blogger anda dapat mendisplay produk untuk toko butik, menulis konten dan mendapatkan fitur menarik. Berikut fitur yang dirancang pada template butikku landing page.

Materi Tutorial

• 1. Fitur Template
• 2. Cara Install Template
• 3. Konfigurasi Widget
• 4. Setting Favicon, Action WA & Author Foto dan Bio

Fitur Template

Konten Post Display Produk & Post Blog

Display Produk

Wajib memasukan 2 Label, untuk input kategori "Nama Produk" dan Harga misal "50.000".

Hal diatas untuk mengatur tampilan homepage dan post.

Display Post Blog

Wajib memasukan 1 Label, dengan nama label "Blog".

Cara Install Template

Silahkan download template toko butik landing page ini gratis.

1. Ekstrak file ZIP. 
2. Buka file 'template-butikku-landing-page.xml' menggunakan Notepad atau Text Editor.
3. Salin (Copy) seluruh kode di dalamnya. 
4. Masuk ke Dashboard Blogger > Tema > Klik panah bawah di samping 'Sesuaikan' > Edit HTML. 
5. Hapus semua kode lama, lalu Tempel (Paste) kode baru. 
6. Klik 'Simpan' (ikon disket di pojok kanan).

Live Preview Download Sekarang

Konfigurasi Widget

Terdapat section Header Logo, Hero Image dan Hero Content, Layanan Profesional, & Footer yang menampilkan Lokasi Butik, Layanan Pengiriman dan Link Official Store yang dapat anda ubah secara langsung pada Tata Letak.

Setting Favicon, Action WA & Author Foto dan Bio

Masuk kembali pada halaman Dashboard Blogger > Tema > Klik panah bawah di samping 'Sesuaikan' > Edit HTML. 

Lalu cari dan ganti url pada kode pada masing kode berikut

Panduan Ganti Favicon

/* TEMUKAN KODE BERIKUT */
/* GANTI LINK HREF DENGAN URL FAVICONMU */
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtJ43oRX4xJLPN5YzCapyXRRhDGBlUDp7_wn3T1ihFpuEz-2T0oxoMmHBKN9OdCIXJuy3ixun1cH3efGvkJumDqGHUHQQqbYo_cA7xxy-v-w0EMIlyKZJMk_rUsXKKuAZEB5zevy_BYqGY_DqkTMkuQVOtLGLtECinnYnW41d4zSaf3d8V5y1CCtgiq3y/s1600/high-resolution-color-logo.png' rel='icon' sizes='192x192'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtJ43oRX4xJLPN5YzCapyXRRhDGBlUDp7_wn3T1ihFpuEz-2T0oxoMmHBKN9OdCIXJuy3ixun1cH3efGvkJumDqGHUHQQqbYo_cA7xxy-v-w0EMIlyKZJMk_rUsXKKuAZEB5zevy_BYqGY_DqkTMkuQVOtLGLtECinnYnW41d4zSaf3d8V5y1CCtgiq3y/s1600/high-resolution-color-logo.png' rel='apple-touch-icon'/>

<b:if cond='!data:view.isPost'>
  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtJ43oRX4xJLPN5YzCapyXRRhDGBlUDp7_wn3T1ihFpuEz-2T0oxoMmHBKN9OdCIXJuy3ixun1cH3efGvkJumDqGHUHQQqbYo_cA7xxy-v-w0EMIlyKZJMk_rUsXKKuAZEB5zevy_BYqGY_DqkTMkuQVOtLGLtECinnYnW41d4zSaf3d8V5y1CCtgiq3y/s1600/high-resolution-color-logo.png' property='og:image'/>
</b:if>

• Foto Profil: Ganti URL di dalam atribut src='...' pada tag <img /> dengan link foto Anda sendiri. 
• Bio Penulis: Ubah teks di dalam tag <p class="author-bio"> sesuai dengan deskripsi profil yang diinginkan. 
• Nama & Link: Bagian <data:post .author.name=""> dan data:post.author.profileUrl akan terisi otomatis sesuai profil Blogger Anda. 
• Temukan Kode diatas sebanyak 2 kali, yang berada pada post Produk & post Blog.

Panduan Ganti Action WA

/* TEMUKAN KODE BERIKUT */
/* GANTI NOMOR 6281234567890 DENGAN NO ANDA*/
<div class='product-actions'>
  <a class='btn-whatsapp' expr:href='"https://wa.me/6281234567890?text=Halo, saya tertarik dengan produk ini: " + data:post.title + " (" + data:post.url + ")"'>
    Order via WhatsApp
  </a>
</div>

Panduan Ganti Author Foto dan Bio

/* TEMUKAN KODE BERIKUT */
<div class='author-box'>
  <div class='author-avatar'>
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwoKlPqWAqEjkEme-ymRPvFHba1rBfbo3qeq2xNbv-BP6urYRQyGNUuPf3P_s_oHVhIrdGOW_QatfMuRTMZPUMmPyotnS-FjfNjza8YqS7qX-Cd1KzrMIr-dYV_nv6M__hYTBoycEEf-5KHe7a5Rz_oEWjgPDN_uuupzD2h72_yfpyA43hU-p5vurRo4v/s1600/images%20%282%29.jpeg'/>
  </div>
  <div class='author-info'>
    <span class='author-label'>Ditulis Oleh</span>
    <h4 class='author-name'><data:post.author.name/></h4>
    <p class='author-bio'>Fashion Enthusiast &amp; Style Consultant di Butik Kami. Berbagi inspirasi seputar tren mode dan perawatan busana berkualitas.</p>
    <a class='author-link' expr:href='data:post.author.profileUrl'>Lihat Semua Artikel</a>
  </div>
</div>

• Foto Profil: Ganti URL di dalam atribut src='...' pada tag <img /> dengan link foto Anda sendiri. 
• Bio Penulis: Ubah teks di dalam tag <p class="author-bio"> sesuai dengan deskripsi profil yang diinginkan. 
• Nama & Link: Bagian <data:post .author.name=""> dan data:post.author.profileUrl akan terisi otomatis sesuai profil Blogger Anda. 
• Temukan Kode diatas sebanyak 2 kali, yang berada pada post Produk & post Blog.