Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Update Template Simple Shop Free untuk Toko Blogspot Simple Gratis Download

Seringnya tim blogspot melakukan update, sedikit atau banyak pasti berpengaruh terhadap tampilan template yang Saya bikin. Khususnya untuk template lama yang dilakukan desain ulang, baik dari sisi fitur responsive design maupun dari sisi lainnya.

Termasuk salah satunya adalah template Simple Shop. Template ini merupakan salah satu template yang memiliki banyak request download. Kebanyakan yang tertarik memakainya karena tampilannya yang memang simple dan proses edit serta settingnya yang tidak begitu merepotkan.

Beberapa kali update blogspot yang dilakukan untuk meningkatkan layanannya, ternyata juga berpengaruh terhadap template ini. Khususnya di bagian desain layoutnya, sehingga cukup menyulitkan pengguna untuk melakukan editing berbagai widget.



Selain itu, ternyata kebanyakan pengguna template simple juga menginginkan proses checkout yang lebih mudah. Ternyata banyak yang tidak memakai fitur shopping cart di template ini, karena lebih banyak yang memilih opsi checkout dengan menggunakan metode chat, baik itu melalui SMS, WhatsApp atau aplikasi chat lainnya. Jika dibandingkan dengan shopping cart yang melalui email.

Beberapa masukan di atas akhirnya menggerakkan Saya memperbaharui template simple shop free ini.

GRATIS download template toko online blogspot responsif dan terbaru lainnya juga bisa Anda dapatkan DISINI, yang lebih simpel, lebih mudah editing, dengan fitur yang lebih lengkap pula.


Berikutnya, akan saya jelaskan beberapa fitur perubahan atau tambahan untuk Template ini.

Silakan dibaca sampai tuntas, karena panduan setting juga akan langsung saya masukkan ke dalam lanjutan tulisan di bawah.

Template Simple Shop Free v.2

Template Simple Shop Free v.2

#Homepage. Ada perubahan yang cukup mendasar di tampilan homepage dari versi sebelumnya. 
Terdapat beberapa penambahan fitur seperti penambahan font awesome, perubahan warna dari yang sebelumnya hanya hitam putih, menjadi lebih kontras dengan beberapa varian warna antara hitam, putih, biru dan merah,

Pada template ini juga sudah ditambahkan meta tag, anda tinggal mengganti dengan meta data blog anda sendiri. Script meta tag yang bisa anda edit akan tampak seperti ini :
<meta content='Deskripsi blog disini' name='description'/>
<meta content='kata kunci blog disini' name='keywords'/>
Teks warna merah bisa diganti dengan data blog/toko masing-masing.

Ada beberapa perubahan di bagian header, namun tidak cukup siknifikan. Hanya penyempurnaan di beberapa bagian saja.
menu simple shop free v.2
Menu responsive pada header
Untuk editing bagian menu masih sama. Tinggal menambahkan script berikut ini ke bagian widget yang bisa diedit melalui menu tata letak/layout di bagian dashboard blog Anda.
<nav id="menu"><input type="checkbox" /><label>≡<span>Menu</span></label>
<ul><li><a href="/" style="background:#000;" title="Home">Home</a></li>
<li><a href="#" title="menu1">menu1</a></li>
<li><a href="#" title="menu2">menu2</a></li>
<li><a href="#" title="menu3">menu3</a></li>
<li><a href="#" title="menu4">menu4</a></li>
<li><a class="prett" href="#" title="Drop Menu">Menu</a>
<ul class="menus">
<li><a href="#" title="submenu1">submenu1</a></li>
<li><a href="#" title="submenu2">submenu2</a></li>
<li><a href="#" title="submenu3">submenu3</a></li>
</ul></li>
</ul></nav>
Tinggal mengganti data menu dari script di atas dengan menu yang ingin anda masukkan.

Widget Selamat datang pada bagian header lebih mudah diedit dan ditambahkan di layout dashboard. Bagian ini bisa diisi ucapan selamat datang ataupun info berbagai promo terbaru toko Anda.

welcome widget
widget welcome store atau bisa untuk promo produk pada header

Ada penambahan link dan logo marketplate seperti facebook, bukalapak, tokopedia dan instagram. Sehingga diharapkan semua toko yang anda miliki bisa lebih terhubung.

link ke marketplace
Link ke toko lainnya di socmed atau marketplace

Untuk mengeditnya tinggal cari script berikut ini:
<!-- Code untuk link Facebook --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di FACEBOOK</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcRk_lFLWeY1MTKfXBoYib-XrhGRnNZNYB5SUEg6uQzZyrPaCjcYaNHe3P-tsiWe3A97IbO2Ewm4GZ5bLqWk-qoEJMTckITRWU8TJTDKgU_Gdwx-O23TFYvPz8EhOKA_DCXmkBAAwEN0/s1600/facebook.jpg' width='180'/></a>
<!-- Code untuk link Twitter --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TWITTER</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Axm9SDqUlPZvWmfGxNNUT3E8A8tkxYnnrrhh_AmMxXRF4iQvlIZXbBPP4Yias7T5wwtlPdJ0UE68uHPVN_kLXzGJpCN8oXFaxIVpVZisDhPXHYjJRsW7OP_67iecs1X0vujSH1gpUvw/s1600/twitter.jpg' width='180'/></a>
<!-- Code untuk link Instagram --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di INSTAGRAM</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIosSad8zdyDU_ECf8EoiyVyi4cECYXO9d6Na6ZK1wnjFL_wlMxMbWKMh7XJtMiCSXGzzvwFL9AyxXvUR15WU_CsCGijShO4uvN-lZCK31vmAsYwEUONmVVeVTeKHtO3qwkX_pwraUBg0/s1600/instagram.jpg' width='180'/></a>
<!-- Code untuk link kaskus --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di KASKUS</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZFP5E4gvY9xoS3Lu8gjKLPiGN6Td0zuJfhSOH3yOAgiDr6Z42Mw4w3liCbA39tALou4q6kn3b_AmKoadLomOTmI6lPV0Ga4d1u_OI1hT_1biAAsgDcV_qT2ygD6nTDAL_0Pw9RatAeg/s1600/kaskus.jpg' width='180'/></a>
<!-- Code untuk link Tokopedia --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TOKOPEDIA</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-nmK7bOTwKY8y0JuoNLBT7627YRpUo5tV1K56By2IPH5CsF6dfX64zXoYMkTnCjnKZ14QDlK66lsjnO4BnVl4ELPAJxlAu46bDZSYwo61KTs4D6LXIFj5oJ3tK4sVkaSi0UfFa5XX50/s1600/tokopedia.jpg' width='180'/></a>
Anda tinggal mengganti # dengan link toko Anda sesuai dengan petunjuk di atas.

Pada widget Contact Us di bagian footer, Anda tinggal menambahkan kode script seperti ini :
<div class="smart_ftbox conta">
<div class="kontak"><div class="iconct telp"></div>
<div class="cnt"><p>Telpon:</p> 0212345567</div></div>
<div class="kontak"><div class="iconct sms"></div>
<div class="cnt"><p>SMS/WhatsApp:</p> 085779188529</div></div>
<div class="kontak"><div class="iconct bbm"></div>
<div class="cnt"><p>BB Messenger:</p> ABCDEF</div></div>
<div class="kontak"><div class="iconct mail"></div>
<div class="cnt"><p>Email:</p> kontak@email.com</div></div>
</div>
Setelah script tsb dimasukkan ke dalam widget contact us, tinggal diedit text warna merah dengan data kontak toko masing-masing.

#Product Page. Beberapa perubahan cukup mendasar saya lakukan di halaman produk ini. Yang paling utama adalah dengan menggantikan metode checkout yang sebelumnya menggunakan shopping cart, digantikan dengan metode pop up windows yang berisi informasi checkout/petunjuk order melalui sms/aplikasi chating.

Tombol Order checkout
Tombol Order
Panduan order ini sudah ada di script html template, cara mengeditnya tinggal mencari kata-kata/text seperti yang terlihat pada gambar di bawah, dan selanjutnya anda tinggal menggantinya sesuai dengan cara order dari masing-masing toko.
popup order via sms
Popup Order otomatis muncul ketika Order Now di klik

Masuk ke HTML Template, kemudian cari kata-kata tsb, selanjutnya tinggal edit disesuaikan dengan data Toko Anda sendiri. Tombol untuk SMS hanya akan muncul jika dibuka di HandPhone dan ketika tombol SMS di klik akan otomatis menuju ke aplikasi SMS di handphone pembeli.

<!-- Konten popup, silahkan ganti sesuai kebutuhan -->
  <center>Order via <b>SMS/WhatsApp: 08123 456 789</b> atau <b>pin BBM : ABC1234</b> dengan format:<br/><br/>
    <span style='font-size:18px;font-weight:bold;border: dashed #333 1px;padding: 1px;color: #000;background:#fff;'>produk/jumlah(qty)/Nama/alamat/kota</span><br/></center><br/>
Format order tidak harus sama, yang penting bisa kami pahami. Secepatnya Kami akan melakukan konfirmasi melalui SMS ke no Hp Anda, setelah Order Kami terima.
  <center><br/>
  <a href='sms:08123456789?&amp;body=produk/Jumlah/Nama/alamat/Kota' id='tombolsms' style='font-weight:bold'><i class='fa fa-mobile'/> SMS DISINI!!</a>
</center>
<!-- Konten popup sampai disini-->
Keterangan :
Edit text warna merah dengan data toko Anda dan cara order yang Anda inginkan.

Beberapa fitur tambahan lainnya adalah dengan adanya fitur related post, serta tombol icon shared ke sosial media dari AddThis.
Halaman Produk
Tampilan Product Page
Untuk format pengaturan pengisian konten produk, Anda bisa memakai script post template berikut ini:
Upload Gambar Utama produk Disini
<span class="item_price">Rp 350,000</span><br />
<table border="1px" max-width="100%"><tbody>
<tr style="background: #D5D2D2;"><td style="font-weight: bold; padding: 5px;">SKU</td><td style="padding: 5px;">Tulis kode produk</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Ukuran</td><td style="padding: 5px;">Tulis ukuran produk</td></tr>
<tr style="background: #D5D2D2;"><td style="font-weight: bold; padding: 5px;">Stock </td><td style="padding: 5px;">Ready</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Summary Spec </td><td style="padding: 5px;">Deskripsikan secara singkat produk Anda</td></tr>
</tbody></table>
<br/>
Tambahkan gambar atau deskripsi lainnya disini
Agar setiap tampilan memiliki layout yang sama, script tersebut harus di tambahkan di post template.
Lokasinya di bagian dashboard blog pada Setting/Setelan >> Post  and Comments/Post dan komentar >> cari opsi untuk menambahkan post template, dan pasang script tersebut.
Sehingga setiap kali posting produk, sudah ada templatenya dan lebih memudahkan untuk posting produk Anda.

#Test Template coba saya lakukan dengan beberapa tool online.
Untuk menguji speed loading, template ditest dengan memanfaatkan tool gtmetrix dan hasilnya adalah seperti ini :
GT Metrix simple shop
Speed Loading Simple shop free v.2 di GTMetrix
Untuk ukuran toko online, hasil tersebut sudah cukup lumayan.

Untuk menguji fitur mobile friendly, Saya memanfaatkan tool dari Google dan hasilnya adalah seperti ini :
test mobile friendly


Semoga bermanfaat.

53 komentar untuk "Update Template Simple Shop Free untuk Toko Blogspot Simple Gratis Download"

  1. gan cara downloadnya gmn ya aku msh bingung ini,tlg penjelasannya.

    BalasHapus
    Balasan
    1. Coba dibaca lagi semuanya sampai tulisan terbawah, disitu sudah ada panduan download templatenya..

      Hapus
  2. Ada yang kurang Gan Template Blognya ga valid google structure

    BalasHapus
    Balasan
    1. Bejibun panduan untuk bikin template valid structure kode. Silakan googling.

      Hapus
  3. saya sudah like fp facebook agan. mana linknya.

    BalasHapus
  4. Wih mantep juga nih Templatenya dari kemaren saya nyari baru ketemu. ijin download ya templatenya Trimakasih banyak..

    BalasHapus
  5. izin pakai template nya ya bos, thanks before

    BalasHapus
  6. sudah saya kirim tlong di check

    BalasHapus
  7. Dear Mas /mba

    Mohon agar saya diberikan Template Simple Shop Free v.2

    Saya sudah like FP tukang toko online
    Saya juga sudah follow G+tukang toko online

    saya ingin memakai Template Simple Shop Free v.2

    Sekali lagi terimakasih sebelumnya ya mas / mba

    BalasHapus
    Balasan
    1. Silakan di baca lagi cara download templatenya...
      Kalau sudah email dan syarat udah dipenuhi, link download pasti terkirim :)

      Hapus
  8. tolong check emailnya saya sudah kirim :)

    BalasHapus
  9. kasih shopping cart dong gan

    BalasHapus
  10. Izin mengunduh Template Simple Shop Free v.2 nya gan.
    Persyaratan sudah saya penuhi,,mohon di bantu,,sekian dan
    terima kasih salam kenal,.,,

    BalasHapus
  11. Terimkasih Gan, Templatenya Simple Shop Free v.2 sudah bisa di Unduh..

    BalasHapus
  12. sore gan, saya sudah setting templatnya, tpi waktu tekan order, pop up keluar tapi tombol sms tidak ada, gmn ya cara memunculkannya?! mohon di bantu arahannya, mksih

    BalasHapus
  13. Sore Gan.. template Simple Shop Free v.2 sudah sya instal, hanya tinggal permasalahan menu Drop downnya tidak berpungsi di mobile,,mohon petunjuk dari agan,,,
    template saya gunakan di pulau7.com

    BalasHapus
  14. Hy gan, saya sudah terapkan ketentuannya. Ditunggu balasan email nya ya.
    from : christiantarigan1995@gmail.com makasih

    BalasHapus
  15. makasih gan, sudah saya terapkan templatenya di olshop http://pusatkebayawisuda.blogspot.co.id/

    BalasHapus
  16. bos? terima kasih sebelumnya bos.. saya sudah kirim permintaan link download via link contak bos.. atas nama turhin alfaruq .. terima kasih bos

    BalasHapus
  17. terbukti ringan & wuuuuzzzz cepat ( http://shadiq-shop.blogspot.co.id/ ).... thnaks ya, mas (tempelatenya yg gratis) ... berbagi (share) itu kereeen

    BalasHapus
  18. ka saya sudah like fp, tolong dicek email

    BalasHapus
  19. gan, ane udah follow akun twitternya @tukangtokoonline pake akun @azharrijal bisa di cek. ditunggu linknya ya.

    BalasHapus
  20. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  21. thanks ga, ane sdh download dan hasilnya mantab, cuma untuk harga tidak bisa tampil dibawah gambar tetapi disamping gambar, mohon pencerahannya gan, many thanks

    BalasHapus
  22. Form request nya rusak gk tampil semua kotak nya

    BalasHapus
  23. gan relate postnya kog gak keluar ya?

    BalasHapus
  24. Saya sdh like fbnya..tolong dibanu saya utk bisa download ya...saya msh pemula..trimakasih

    BalasHapus
  25. mantap sekali suhu,, bertanya ke email pun respon cepat... sebagai newbie yang tidak mengerti kode2 html,, akhirnya menemukan template yang user friendly.. akhirnya thank you so much

    BalasHapus
  26. bang, supaya post blog yang di home ada 6 atau lebih bagaimana caranya
    soalnya punyaku yang muncul hanya 3

    BalasHapus
  27. thanxs gan, izin mod dikit ya, http://tokojena.blogspot.co.id/

    BalasHapus
  28. mana gan linknya saya sudah kirim email

    BalasHapus
  29. Gan kode html untuk widget selamat datang bagaimana gan ko tidak ada?

    BalasHapus
  30. gan di tunggu baru aja dkirim lewat email. saya retwet di akun twiter @CR_hidayat

    BalasHapus
  31. gan, kok related produknya gak muncul yah =(

    BalasHapus
  32. gan saya sudah like fb, tolong dicek email trimakasih sebelumnya saya tunggu balasanya

    BalasHapus
  33. gan saya sudah like fanspage fb nya

    BalasHapus
  34. gan..sy sdh install templatenya, BTW gimana cara merubah Popup nya ya sy cari cari gak ketemu gan,...mohon pencerahannya thanks

    BalasHapus
  35. Saya sudah, follow dan like FB3, Twitter dan google+ agan. Kirim lewat form error. Mohon dikirimkan link downloadnya. Trims.

    BalasHapus
  36. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  37. testing dulu "Simple Shop" yach ... kalo cocok mau upgrade
    Thanks

    BalasHapus
  38. Makasih Gan Zip sudah diterima.

    Tapi saya mau tanya, untuk versi seluler pengaturannya seperti apa ? Apakah pop up akan muncul untuk tema seluler default ?

    BalasHapus
  39. Saya sudah like google+ nya ya atas nama pradikawijaya jadi segera dikirim filenya ya gan, makasih banyak.

    BalasHapus
  40. saya sudah follow g+ dan kirim pesan ke alamat email abang. terimakasih

    BalasHapus
  41. gan bagi template ny y, saya dah post dan like fb..tks

    BalasHapus
  42. sudah saya kirim screenshootnya mas utk template ini ditunggu mas templatenya

    BalasHapus
  43. gimana cara edit Widget Selamat datang nya koq g ad keterangan lebih detail ttg cara edit nya

    BalasHapus
  44. cara setting related product nya gmn ya??

    BalasHapus
  45. thanks banget sudah release V2nya, keren

    BalasHapus
  46. saya sudah atur tampilan selulernya menjadi desktop. tapi dilihat di HP tampilan bagian header jadi hancur, tlg bantuannya

    BalasHapus