Langsung ke konten utama

Jual Buku Online dengan Template Blogspot Buku Kita

Semakin gencarnya toko online, ternyata juga merambah ke bidang perbukuan. Saat ini udah jamak dijumpai penjual buku online, baik yang hanya memanfaatkan sosial media, aplikasi chating, sewa lapak di marketplace atau dengan membangun toko online sendiri melalui website.

Website diibaratkan sebagai kantor pusat, rumah atau gudangnya produk jualan Anda, sedangkan sosmed atau lapak di marketplace diibaratkan sebagai tempat untuk melakukan promosi atau menyewa stand (dalam bahasa binis offline). Jadi website tetap sangat diperlukan untuk memajang semua produk yang Anda miliki tanpa adanya batasan.

Nah, kembali ke jualan buku online, Saya secara khusus sudah membuat sebuah template yang memang beberapa fiturnya disesuaikan untuk berjualan buku. Layout dan desain sengaja disesuaikan dengan tema jualannya, yaitu buku.

Beberapa fitur yang ada di template ini, juga sengaja disesuaikan dengan produk yang dijual. Prinsipnya, kemudahan bertransaksi bisa terpenuhi dengan fitur yang ada di template ini. Beberapa pebisnis UKM (khususnya penjual buku) yang baru saja terjun ke dunia online sangat sesuai dan recommended jika memakai template ini.

Kemudahan instalasi serta kelengkapan fitur dan proses order melalui SMS secara otomatis, layak menjadi pilihan.

Untuk Template Buku Kita versi Premium dengan berbagai tambahan fitur yang jauh lebih lengkap dibandingkan versi Gratis di artikel ini, Silakan Cek DISINI.

Fitur selengkapnya bisa Anda periksa di bawah ini melalui link Live Demo Template.

Template Buku Kita

Homepage template buku kita


Fitur Template

MAIN FEATURESAVAILABILITY
Full Responsive DesignCheck Here
Grid View Homepage
Header Contact Customer Service icon
Responsive menu
Widget Blog Artikel / Blog Posting based label
Social Shared Button
Related Post 
Order via form SMS (only appears in Smartphone)
Meta Tag SEO Friendly
LicenseFREE!!
JASA SETTINGRp 110.000,-

Panduan Download
  1. Share posting artikel ini melalui tombol Share ke akun facebook Anda.
  2. Like Page Facebook Tukang Toko Online di : facebook.com/tukangtokoonline
  3. Pergi ke Contact form DISINI, untuk mendapatkan templatenya dengan menuliskan nama template yang ingin Anda download beserta bukti sudah Shared posting dan like Page Facebook Tukang Toko Online.
Panduan Setting Template Buku Kita

1# Install Template di Blogspot dengan cara instan dan cepat seperti artikel ini: Cara cepat install template blogspot.

2# Setting Meta Tag Template dengan cari script berikut dan ganti xxxx dengan data toko online Anda. Script tersebut terletak di bawah <head>

<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
<meta content='5;/' http-equiv='refresh'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='xxxxx' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxxx' rel='me'/>
<meta content='xxxxx' name='google-site-verification'/>
<meta content='xxxxx' name='msvalidate.01'/>
<meta content='xxxxx' name='alexaVerifyID'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='xxxxx' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='xxxxx' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

3# Mengedit Drop Down Menu Responsive

Masih di HTML Template, cari script berikut ini, dan edit etxt warna merah dengan data toko Anda.

<ul class='shnav shareink-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Fitur</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Tag and Styling</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Site Link</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Error Page</span></a></li>
</ul>


4# Mengganti Text Selamat Datang

Masih di HTML Template, Cari text berikut ini, kemudian text warna merah ganti dengan text yang Anda inginkan.

Selamat datang di <span style='font-weight:700;font-size:18px'><data:blog.title/></span>, Anda bisa menjelajahi beragam buku koleksi kami disini yang menyediakan berbagai kebutuhan bacaan Anda. Kami melayani order seluruh Indonesia. Jika membutuhkan bantuan, jangan ragu menghubungi Customer service Kami. Selamat Berbelanja....

5# Mengedit data PopUp Order via SMS


popup order buku kita

Masuk ke HTML template seperti sebelumnya :
Cari text berikut ini, kemudian ganti data toko Anda. Semua text warna merah bisa Anda ganti disesuaikan dengan preferensi cara order yang Anda inginkan.

<!-- 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;'>Nama/judul-buku/jumlah/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.
<!-- Konten popup sampai disini-->

6# Mengedit Link Logo Toko di Sosmed dan Marketplace

toko di marketplace dan sosmed

Temukan kode berikut ini di HTML Template, dan edit text warna merah, sesuaikan dengan dengan data toko Anda.

<div class='bawahmenu'>
<div class='switch1'><div class='switch-left1'>Temukan Toko Kami di :<br/></div></div>
<!-- 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='http://4.bp.blogspot.com/-q80QxCRphUA/VhkekxaHgRI/AAAAAAAADOg/Ykgrvgj3wEU/s1600/facebook.jpg' width='180'/></a>
<!-- Code untuk link Bukalapak -->
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di Bukalapak</span>
<img alt='Toko Sosmed' height='40' src='https://lh3.googleusercontent.com/-VngAbbiyhHY/Vv4xtBPocQI/AAAAAAAABjA/9XyY_Nteaco62Rj3pHnlv62o1X4suo2qgCCo/s336-Ic42/logo%2Bbukalapak.png' 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='http://1.bp.blogspot.com/-rmvPmfJqHmI/VhkemfaLW0I/AAAAAAAADOw/3mKu0hzK1-0/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='http://2.bp.blogspot.com/-oMV0ZBTeZjY/VhkepIZsMRI/AAAAAAAADO4/1KSZNU61Xw8/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='http://1.bp.blogspot.com/-pcxtlT2NN74/VhkeqVYh0hI/AAAAAAAADPA/o7a-N3UXVss/s1600/tokopedia.jpg' width='180'/></a>
<br/>
</div>

7# Mengedit Widget Testimoni

Masuk ke Lay Out / Tata Letak >> edit widget Tetsimoni >> Masukkan Script berikut ini dengan sebelumnya text yang warna merah sudah anda edit sesuai data testimoni toko Anda.

<div class="testimonials-box"><div class="testimonials-slider">     
<div class="slide">          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="link-gambar-user"/></div>                <div class="testimonials-carousel-context">                <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>                <div class="testimonials-carousel-content"><p>PESAN TESTIMONI KONSUMEN DI SINI</p></div>            </div>      </div>          
<div class="slide">          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="link-gambar-user"/></div>                <div class="testimonials-carousel-context">                <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>                <div class="testimonials-carousel-content"><p>PESAN TESTIMONI KONSUMEN DI SINI</p></div>
            </div>      </div>          
<div class="slide">          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="link-gambar-user"/></div>                <div class="testimonials-carousel-context">                <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>                <div class="testimonials-carousel-content"><p>PESAN TESTIMONI KONSUMEN DI SINI</p></div>
            </div>      </div>  </div>    </div>

8# Mengedit Widget Contact

widget contact buku kita
Masuk ke Lay Out / Tata Letak >> Edit Widget Contact >> Masukkan Script berikut ini dengan terlebih dahulu mengedit beberapa bagian no kontak sesuai data toko Anda.

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

9# Memasang Posting Template Produk

Masuk ke Setelan / Setting >> Post, Komentar dan berbagi >> Tambahkan script berikut di bagian post templat.

<span class="item_price item-snippet">Rp 99,000</span><br />
<!--more--><br />
<span style="color: blue;">Author : </span><br />
<span style="color: blue;">Penerbit : </span><br />
<br />
Tulis review produk dan Upload gambar produk utama disini

10# Cara Posting Produk - PENTING!!
- Setelah memasang post template seperti poin 9#, setiap kali Anda melakukan posting akan muncul post template seperti berikut ini.

cara posting template buku kita
- Lakukan posting produk seperti petunjuk dari post template tersebut, jangan dirubah posisi / layout nya supaya hasil posting tidak berantakan.

- Pastikan setiap Posting produk memiliki 1 label (hanya satu Label-- PENTING!!). Jadi 1 posting produk hanya memiliki 1 label saja.
pilih label di posting buku kita

Label bisa Anda buat atau pilih dari yang sudah ada, tapi hanya 1 label saja.

- Opsi yang lainnya seperti posting biasa di blogspot.


11# Menampilkan Widget New Articles

widget artikel buku kita
Untuk menampilkan widget artikel seperti gambar di atas, cukup hanya buat sebuah posting dengan 1 label 'Artikel'.

PENTING!!
Pastikan Anda men Set jadwal penerbitan artikel dengan tanggal lebih awal dibandingkan semua posting produk Anda. 
Misalnya, tanggal pertama kali produk anda terbit adalah 2september, maka Posting Artikel Anda harus di Set sebelum tanggal itu.

jadwal posting artikel

12# Menambahkan Header Customer Service

Masuk ke layout / tata letak >> edit widget Customer Service Header >> Masukkan script berikut ini dengan sebelumnya sudah Anda edit menyesuaikan data customer service toko Anda >> Simpan Widget.

<ul class="service">
<li class="phone"><span>Call center </span>08123 456 7890 (Call/SMS) </li>
<li class="bbm"><span>BB Messenger </span>1234abc </li>
<li class="wa"><span>Layanan WA </span>08123 456 7890 </li>
</ul>

13# Mengedit nomor telepon untuk menerima order via SMS
Order melalui SMS
Form SMS seperti gambar di atas hanya muncul di halaman produk dan di smartphone pengunjung toko Anda.
Untuk mengarahkan pengiriman SMS ke nomor telepon toko Anda, masuk ke HTML Template >> cari kode seperti berikut ini >> ganti text warna merah dengan nomor telepon/HP Anda >> Simpan template.

var sms='sms:0888888868?&body='+semua;


Cukup itu saja poin-poin penting untuk editing Template Buku Kita. Hal-hal lainnya bisa didiskusikan di kolom komentar. Semoga bermanfaat.

Komentar

  1. Alhamdulillah, saya sudah kirim kak. Tinggal nunggu template nya :)

    BalasHapus
  2. bagaimana cara pesan templetnya gan

    BalasHapus
  3. Kode untuk terima order via SMS posisinya sebelah mana gan?, gak ketemu

    BalasHapus

Posting Komentar

#/ Dilarang melakukan SPAM.
#/ Dilarang Komentar mengandung Link/URL di kolom komentar
#/ Dilarang Komentar SARA dan Makian
#/ Dilarang ngiklan
Melanggar ketentuan di atas, komentar langsung dihapus..!!!

Popular

Gratis Download Template Toko Online Blogspot Responsif Baru dan Keren

Menyongsong hari kemerdekaan RI di tahun ini, Tukang Toko Online juga ingin memberikan hadiah berupa bagi-bagi template toko online blogspot terbaru secara gratis.

Template yang akan dibagikan gratis ini merupakan versi Lite-nya dari Template Toko-01 yang barusan di luncurkan sebelumnya. Meskipun demikian sejumlah fitur utama tetap disertakan pada template ini, sehingga tidak mengurangi fungsi serta kebutuhan utama untuk toko online Anda.

Beberapa fitur wajib seperti, meta tag SEO, payment widget, opsi order, info contact, customer service dll. sudah ada dan siap digunakan pada template ini. Panduan step by stepsetting templatenya tetap akan diberikan meskipun template toko-02 ini dibagikan secara gratis.

Tapi tentu saja, meskipun Anda tidak harus membayar untuk mendapatkan template ini, tetap ada sejumlah syarat yang harus Anda penuhi untuk mendapatkan template ini, seperti halnya jika Anda pernah mengunduh beberapa template gratis di blog ini. Syaratnya cukup mudah dan tidak membera…

Memulai Toko Blogspot dengan Template Toko-01

Template toko blogspot yang diluncurkan kali ini lebih memilih memakai warna yang netral. Sedikit perpaduan warna hitam, merah dan warna putih yang lebih dominan. Beberapa fitur di template toko online ini mengacu pada kebutuhan utama dari sebuah toko online, contohnya seperti adanya pilihan cara order (shopping cart atau via sms), info bank pembayaran, info contact customer service dll.

Untuk tampilan di versi mobile lebih disederhanakan sehingga beban loadingnya diharapkan tidak menjadi masalah, meski dibuka dengan akses internet di sinyal yang terbatas.

Fitur selengkapnya bisa Anda periksa langsung melalui link Live Demo template di bawah ini.

Cek Template dengan fitur yang lainnya :

Green Green Template, Template serba hijauZen Pink Template, dengan warna merah mudaTemplate Buku Kita, toko buku online yang dipadukan dengan blogging

Template Toko-01 LIVE DEMO
MAIN FEATURESCheck List Full Responsive DesignGrid View HomepageHeader Contact Customer Service iconResponsive menuPro…

2 Template Toko Online Blogspot Gratis Rasa Premium

2 Template Toko Online Blogspot Gratis Rasa Premium - Untuk me-review Template Toko Online yang pernah didesain ulang Tukang Toko Online, posting kali ini sengaja untuk memberikan sedikit informasi untuk pengunjung setia Tukang Toko Online yang mungkin sempat ketinggalan info mengenai template toko online gratis namun dengan rasa premium.

Nah berikut ini adalah 2 template toko online blogspot gratis yang juga memiliki pilihan premium jika anda berniat untuk mendapatkan fitur tambahan yang lebih lengkap. Itulah mengapa ke dua template tersebut be-rasa premium :D.

Berikut ini adalah ke dua Template Tersebut.


Template Sederhana Simple Shop
Live DemoDownload

Fitur  Shopping CartEmail InvoiceResponsive ViewMini Cart IconRupiah CurrencyHotline text iconSearch BoxRelated Product PostFitur selengkapnya klik sub judul template ini
Galaxo Shop Responsive Template
Live DemoDownload Fitur : Responsive Background ColorBlack-WhiteSlide ShowFeatured ProductSocial ButtonShopping CartInvoice EmailCurrencyRu…
DISCLAIMER: Tukang Toko Online berhak menolak order jasa toko online yang bertentangan dengan hukum di wilayah RI. Order tidak bisa dibatalkan, hanya bisa dialihkan ke Paket lain. Tukang Toko Online tidak bertanggung jawab terhadap isi/konten Toko Online. | MOHON BACA TOS SEBELUM ORDER