Membuat Toko Online Sederhana Di AMP HTML


BLOG MOBILE



accelerated mobile page adalah sebuah project baru dari GOOGLE ,accelerated mobile page atau yang kita kenal juga AMP merupakan sebuah halaman yang bisa di akses 4x lebih cepat dari website biasa atau non AMP.

Ketika anda berselancar di dunia maya menggukan smartphone atau HP dan melakukan pencarian di Google search dan menemukan sebuah website dengan logo petir di atasnya nah itulah yang di namakan website berteknologi AMP.
Halaman tersebut bisa di akses lebih cepat dari situs biasanya dan website AMP bisa menghemat data internet anda.
Logikanya jika sebuah website bisa di akses lebih cepat di perangkat mobile itu berarti website AMP bisa jauh lebih cepat di akses menggukan destop/komputer.

Pada kesempatan kali ini saya akan memcoba membuat sebuah toko online sederhana menggukan teknologi AMP itu.
Kebetulan juga template yang saya pake ini merupakan AMP HTML blogger.
Jika anda juga menggukan template AMP anda bisa memodifikasinya menjadi sebuah toko online sederhana. Yang tentunya juga nilai plus nya toko online anda bisa diakses oleh orang lain lebih cepat dan sangat seo di google pencarian.

Dan pastinya toko online dengan amp bisa lebih keliatan professional tanpak cantik dan elegant dan mempunyai kredebelitas yang tinggi di mata konsumen hehe.

Tapi ingat yah jangan di salah gunakan untuk hal hal yang jahat yah bro.
Seperti toko online penipu atau scam.
Karna Sesungguhnya alangkah indahnya kalo ilmu itu di gunakan pada hal hal positif,sehingga bisa menghasilkan hal yang sangat positif juga bagi bisnis anda dan pastinya berkah.


OK langsung saja kita mulai.


LANGKAH PERTAMA BUAT TOMBOL ORDER LINK.



untuk membuat order link bisa menggukan sms dan whatsapp.
sesuai judul di atas kita buat toko online sederhana, jadi fungsi order link ini ketika ada pelanggan ingin membeli/memesan barang dari toko online anda pelanggan tersebut bisa menggukan order link yang di direction langsung menuju aplikasi dari smartphone mereka dengan format pemesanan otomatis langsung menuju anda.

baik sms atau whatsapp Karna menggukan plugin dari api whatsapp juga maka akan order link langsung ke aplikasi whatsapp dengan otomatis format pemesanan sesuai dengan alamat halaman produk anda.


  • Silahkan simpan script oder link sms dan whatsapp HTML di bawah ini di editor HTML template AMP anda/ di bawah postingan.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='cara_belanja'>
    <span id='carabelanja'/>
      <h4>Cara Belanja Di BLOG MOBILE</h4>
      <p>Silahkan pesan item ini dengan menghubungi Contact Toko yang tertera di sidebar kanan (untuk device mobile ada di bagian bawah), harap disertakan Kode Item atau Nama Item ketika order barang. Barang dikirimkan sehari setelah transaksi selesai. Atau silahkan pesan langsung via tombol Whatapps dan SMS di bawah ini. Admin toko akan langsung merespond pesanan Anda.</p>
    <a class='btn btn-purple btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=6281312815xxx&amp;text=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
        <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='#fff'/>
    </svg> Pesan Sekarang</a>
    <a class='btn btn-purple btn-lg' expr:href='&quot;sms://+6281312815xxx?body=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
        <path d='M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z' fill='#fff'/>
    </svg> SMS Sekarang</a>
      </div>
    </b:if>
    Dan ganti no nya dengan no whatsapp dan no sms anda.
  • Lalu simpan CSS tepat di bawah <style amp-custom='amp-custom'>.
    .btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
    .btn:active:focus,.btn:focus{outline:0}
    .btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
    .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
    .btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}
    .btn-purple{background-color:#8E24AA;border-bottom:2px solid #6A1B9A;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}
    .btn-purple:active,.btn-purple:focus,.btn-purple:hover{background-color:#6A1B9A;color:#fff}
    #cara_belanja{margin-top:30px;background:#F3E5F5;padding:15px 15px 5px;border-radius:3px;}
    #carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden}
    #cara_belanja h4{font-size:16px;font-weight:600;color:#8E24AA;margin:0;line-height:1}
    #cara_belanja p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}
    #cara_belanja a{margin-bottom:10px;margin-right:10px}
    #cara_belanja svg{width:24px;height:24px;vertical-align:-15%;}
    
    

Sampai di toko online anda sebenarnya sudah bisa di gunakan dengan sistem checkout via sms dan whatsapp.tapi kita bisa tampbahkan beberapa bagian lain untuk menunjang toko online AMP anda.
Maka dari itu anda bisa ikuti langkah Selanjutnya.

LANGKAH KE DUA MEMBUAT ULASAN/REVIEW UNTUK TOKO ONLINE. 


untuk membuat review atau ulasan ini sangat penting bagi perkembangan toko online anda dan juga untuk mendafatkan kepercayan dari konsumen/costumer yang berkunjung di toko online anda.
Kotak review ini bisa di jadikan wadah atau alat untuk costumers untuk mengemukakan aspirasi/pendafat atau kepuasan membeli barang di toko online anda,kenapa begitu?
Logikanya semakin banyak costumers yang mengulas positif tentang toko online itu maka semakin bagus pula bagi kepercayan costumers yang baru berkunjung di toko online itu.
Maka dari itu pelayanan atau service kepada pelanggan itu sangat penting.

Untuk membuat kotak review/ulasan anda bisa menggukan situs pihak ketiga.ada banyak situs yang bisa di jadikan sebagai reperensi dan sebagai contoh saya gunakan WIDGETPACK.
Kelebihan WIDGETPACK ini mudah di gunakan,gampang untuk membuatnya dan yang paling penting ada persi gratis nya di sini hehe untuk mendafatkan support yang lebih dan tampilan yang professional anda bisa upgrade ke versi premium/berbayar.

Cara buat WIDGETPACK.

  • Silahkan kunjungi website officially WIDGETPACK di https://widgetpack.com/
  • Lalu daftar akun anda bisa daftar pake sosial media atau alamat email.
  • Isikan forms pendaftaran di sana 
  • Di sana anda bisa pake widget beberapa bagian karna kita akan buat widget review maka pilih review dan ambil kode script nya selesai.

tinggal kita pasang di blog code script nya tapi Permasalahnya kode script WIDGETPACK tidak valid AMP.
Solusinya hosting script WIDGETPACK di github dan gunakan AMP iframe.lalu pasang di edit HTML di bawah postingan.



LANGLAH KE TIGA MEMASANG WIDGET PENDUKUNG LAINNYA.


membuat widget penting lainnya di toko online AMP ini sangat berpengaruh penting juga bagi toko online anda misaalnya 
Widget google followers,widget contact admin,widget untuk menampilkan rekening bank, widget lacak resi peningiriman/kurir,widget yang terhubung ke marketplace anda misalnya widget bukalapak atau widget marketplace lainnya dan lainnya 

Catatan usahakan jangan terlalu banyak juga anda pasang widget di blog karna sangat berpengaruh terhadap kecepatan loading blog usahakan yang penting penting saja.
 
Sedikit contoh 

Buat widget lacak resi JNE

  • Gunakan script ini 
    <h2 class='title'><span>Lacak resi JNE</span></h2>
    <div class='widget-content'>
    Lacak resi <b>JNE</b> di sini:<br />
    <a class="btn btn-sm btn-purple" href="http://www.jne.co.id/index.php#tracking" target='_blank' title='Cek resi JNE' role="button"/>Klik di sini</a></div>
HASILNYA:

Lacak resi JNE

Lacak resi JNE di sini:
Klik di sini
Untuk tampil menarik bisa gunakan CSS
Buat widget marketplace atau banner toko online anda
Dengan membuat widget marketplace anda jadi pelanggan bisa memilih mau berbelanja di marketplace anda atau di toko online AMP anda.
Ini jiga sangat berpengaruh terhadap kepercayan konsumen.
Usahakan anda juga daftar di beberapa marketplace dengan begitu koneksi anda jadi lebih luas ya walaupun di marketplace Persaingan nya sangat sulit Karna anda harus bersaing dengan pedagang lainnya dengan produk yang sama dan juga bersaing harga.
Di website toko online pribadi anda punya kendali/kontrol penuh dan pastinya juga menjangkau lebih luas lagi pelanggan dan pastinya juga sangat professional. 
  • Gunakan script ini
    <div class='iklan-ataspost'>
    <a class='tokopedia' href='https://m.tokopedia.com/blogmobile' target='_blank' title='tokopedia'><amp-img alt='blog mobile' height='131px' layout='responsive' src='https://2.bp.blogspot.com/-tnhd2BI0HI0/WS2mfgKM6rI/AAAAAAAADGA/J1dcMRPWHTMY6_bR6cuRAsr_M3ChvTtjQCLcB/s1600/blog%2Bmobile.gif' title='blog mobile' width='383'/></a>
        </div>
HASILNYA:
Ganti url marketplace anda
Buat widget contact support

  • Gunakan script ini
    <center>
    <b><a href="tel:+628573310406"> <img src="https://fd681cd3a0a40380ca85-667b5de929945cccc984187d6da5be32.ssl.cf1.rackcdn.com/icon/logos_white/l8tC5-bUthxF3+V5ZajY/WhatsApp_Logo_2.png" height="40px" width="50px" /> </a><a href="bbmi://D14B35FC" target="_blank"><img src="https://seeklogo.com/images/N/new-blackberry-messenger-logo-E7E1D1A3E7-seeklogo.com.png" height="40px'/" width="50px" /> </a><a href="http://line.me/ti/p/~encepnurdin62"><img src="https://vignette2.wikia.nocookie.net/line-town/images/5/5e/Line_logo.png/revision/latest/thumbnail-down/width/284/height/284?cb=20151108055807" height="40px'/" width="50px" /></a></b></center>
HASILNYA:
Script widget contact support di atas tidak valid AMP solusi hosting dulu di github
Atau juga bisa gunakan halaman contact form valid amp yang saya gunakan baca selengkapnya di postingan ini

LANGKAH KE EMPAT MEMBUAT POSTINGAN PRODUK.


Sedikit contoh dari saya untuk membuat postingan produk anda bisa gunakan scrpit di bawah ini.

<noscript> <img alt="alt gambar" width="650" height="350" src="https://2.bp.blogspot.com/-V3BJYtKEUlI/WTrMqMR_pTI/AAAAAAAADH4/g5A28uGVuPkRP-D5c9a1UOUF_M9IwQNrgCLcB/s1600/rengginang_medium.jpg" title="title gambar" /> </noscript>
<br />
<amp-carousel width="400" height="300" layout="responsive" type="slides"> <amp-img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRf9RlWEeBI2_iybpsA3iZWjQgWQxZYDjf6asVjNV8Ws_d-sYWRw" width="400" height="300" layout="responsive"></amp-img> <amp-img src="https://2.bp.blogspot.com/-V3BJYtKEUlI/WTrMqMR_pTI/AAAAAAAADH4/g5A28uGVuPkRP-D5c9a1UOUF_M9IwQNrgCLcB/s1600/rengginang_medium.jpg" width="400" height="300" layout="responsive"></amp-img> <amp-img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSStoHUugSncZ7-FoqFKcHBd0Q1FOPE0JyK8ySedlaa1jvXrkFgPg" width="400" height="300" layout="responsive"></amp-img> </amp-carousel>
<br />
<br />
<h2>DETAIL PRODUK</h2> :<br />
<br /></div>
<div>
<table>
<tbody>
<tr>
<td align="center">HARGA
</td>
<td align="center">1 MILAYAR 
</td>
</tr>
<tr>
<td align="center">STOK
</td>
<td align="center"><code>TERSEDIA</code>
</td>
</tr>
<tr>
<td align="center">BERAT
</td>
<td align="center">1.000 Gr
</td>
</tr>
<tr>
<td align="center">PEMESANAN
</td>
<td align="center">MIN 1 
</td>
</tr>
<td align="center">kode item
</td>
<td align="center">Mlb 0001
</td>
</tbody></table>
<br />
<br />
<h2 class="desc_item"><span>DESKRIPSI PRODUK:</span></h2>
<p>rangginang adalah makanan para raja yang sangat menyehatkan bagi jiwa dan raga kita selain itu Rangginang bubuk bisa di konsumsi oleh setiap orang baik orang tua dewasa maupun anak anak .<br/>
<br/>
Blablablabalabala...<br/>
Tersedia dalam 3 warna:<br/>
<ul>
<li>Butterfly Rangginang Blue <b>mlb0001</b></li>
<li>Butterfly Rangginang Pink <b>mlb0002</b></li>
<li>Butterfly Rangginang Red <b>mlb0003</b></li>
</ul>
<i>Geser/Slide gambar untuk melihat warna-warnanya</i></p>
<br />
<br />
Keterangan.
Saya gunakan AMP carousel pastikan juga simpan Amp carousel di atas tag </head>
Dan ganti URL gambar dengan produk anda.
Anda juga bisa sesuikan detil produk dan deskripsi nya


Mungkin hanya itu sedik contoh postingan tentang cara buat toko online di blog AMP HTML jika tidak mau ribet anda bisa beli langsung template di blog KOMPI AJAIB di sini http://kompicosmetic.blogspot.co.id/

untuk totorial AMP lainnya saya sudah updet beberapa silihkan anda bisa masuk ke SITEMAP saya 

semoga bermafaat dan selamat Mencoba.

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×