Cara Membuat Toko Online di Blogspot

Discussion in 'HTML & Website Design' started by programer, Nov 9, 2014.

  1. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    Salam hangat buat pembaca, semoga makin rajin membaca..

    Dibawah ini saya jelaskan cara membuat online store menggunakan template "Blogger Store V.2"
    LANGSUNG AJA NIH PROSES NYA, Mudah-mudahan ngerti.
    1. MASUK AKUN GOOGLE (masuk sekarang) belom punya? (daftar sekarang)
    2. Lanjut ke blogger.com
    3. Buat Blog Baru (Judul Gak Lebih dari 64 character, kalo bisa yang unik dan sesuai dengan Isi Blog)
    4. Kalo udah Selesai bikin Blog, Tinggalin dulu sebentar buat download templatenya.
    5. Download Template disini (Blogger Store V.2) → file di download dalam bentuk .zip z.png → klik kanan Blogger Store.zip z.png → extract here.
      [(DEMO) (Coba Check SEO score DEMO di chkme.com → 100%)]
    6. Lanjut...
      Setelah di Extract Here, kemudian muncul 2 folder baru, buka folder yang namanya Blogger Store
    7. Balik ke Dasbor Blogger atau langsung ke menu Template. Setelah itu klik cadangkan/pulihkan → Choose File, terus masuk ke folder Blogger Store yang barusan → pilih file yang namanya Blogger Store(dalam bentuk .xml) → open
    8. Sudah Selesai templatenya di unggah,
    9. selanjutnya Buat Entri Baru, Lihat proses bikin entri di nomor 10-12
    10. Diantara pilihan Compose / HTML , klik yang Html (Letaknya di Dekat Judul Pos). s1.png
    11. Masukan kode seperti ini
      HTML:
      <div class="item_image">
      <img border="0" class="item_thumb" src="gambar.jpg" /> <span class="item_price">$00.00</span></div>
      <div class="item_Description">
      Deskripsi.....</div>
      -gambar.jpg ganti sama url gambar elu / upload terus copy image url, paste dan gantiin gambar.jpg
      -Ganti angka $00.00 dengan harga produk yang mau elu jual, angka nye aja. Pembayarannya lewat Paypal, karena paypal gak ada IDR/Rupiah jadi ikutin aje pake dollar, kalo gak tau 1 dolar berapa Rupiah, cari di google.
      -Kalo mau ngisi Deskripsi ganti mode HTML jadi mode Compose dulu biar gampang → Setelah jadi mode Compose, Tinggal ganti dah "Deskripsi....." sama keterangan barang elu.
    12. Publikasikan dah, Jumlah Pos/ Entri kalo bisa bikin dulu sampe 8 Postingan, soalnya Template ini gak bakal tampil sempurna kalo Postingan nya cuma 3 - 4 doankk mah... "ngertilah yaa, coba aje dah"
    13. Kalo udeh sampe 8 postingan, baru dah eluu liat Blog lu jadi nya kaya gimana.
    14. Untuk Mengaktifkan mode More Info di bawah gambar produk, buka Edit HTML di menu Template, cari kode ini
      HTML:
      <a class='more_info' href='javascript:;'>More Info</a>
      Ganti dengan kode ini

      HTML:
      <a class='more_info' expr:href='data:post.url' expr:title='data:post.title'> More info </a>
    15. Masuk Ke Tata Letak, Liat Widget di Bawah Header, Hapus Widget yang serupa dengan yang ada di Sisi.
      Untuk Widget yang gak bisa di hapus / di pindahkan seperti Atribusi dan Navbar, Pindahin Lewat Edit HTML. Caranya?
      Kaya biasa masuk ke EDIT HTML di Menu Template.
      Pilih Menu yang ada di atas "Lompat ke Widget" → "Atribution1"
      Nah, kalo tidak bener-bener ngerti HTML, jangan asal hapus/ganti yah,, di Mode Edit HTML ini.
      Nanti ketemu kode yang kaya gini kalo udah lompat ke widget atribution1: s1.png
      kan di samping nomor 4675 ada tanda panah, itu tanda ada keterangan lagi(di titik titiknya) :
      >......<b/widget>
      di klik titik titik itu, sampai keliatan semua kodenya kaya gini :
      s1.png
      Kode Tersebut bisa di ubah / di hapus dengan syarat semua kode dari <b:widget id..... sampai </b:widget> (dari kode pembukaan sampai kode penutupan) harus di hapus bagi yang ingin di hapus, bagi yang ingin di pindahkan, silahkan ubah kode locked='true' menjadi locked='false'. Bahasa gembelnya mah dikunci? 'iye'(locked='true') dan dikunci? 'jangan' (locked='false')
      Setelah dipindahkan dan sesuai dengan tempat yg seharusnya berada silahkan locked='true' lagi
    16. Mau Ganti Background gimana gan?
      Ke Menu Template lagi, Klik Edit HTML, dan
      Cari Url Ini→'http://3.bp.blogspot.com/-sM3Bsx_fA1s/TpA0he8PmyI/AAAAAAAABr0/MtUP_DWddp0/s000/body-pattern-1.png'
      Ganti Dengan Url Backgroun agan..
    17. Karena Template ini gratisan, masih ada yang rusak nih gan, yaitu di bagian Header nya. Untuk Header biar gak keliatan rusak nya ganti aja sama gambar.
      Rusak darimanaya? → Header/ Judul Blog, bisa tenggelam setelah di isi dengan deskripsi Blog. Jadi SEO score nya kurang donk kalo gak ada deskripsinya... Maka dari Itu Ganti dengan gambar, di Menu TATA LETAK. Contoh nya kaya gini nih yang udah diganti jadi gambar: Liat deh

    Sekian dulu, cape, gua bukan penulis yang bagus, tapi semoga aja ngerti apa yang gua coret coret di atas...
    Dhaha
     
    Last edited: Nov 11, 2014
    Hafizh likes this.
  2. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    Wah lumayan bagus juga nih hasil toko onlinenya bermodalkan domain biar terlihat profesional sudah jadi :D
     
  3. Hafizh

    Hafizh Member

    Joined:
    Jul 24, 2014
    Messages:
    172
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    Mantab, izin nyoba and nyedot templatenya gan :)
     
  4. lembing

    lembing Active Member

    Joined:
    Aug 21, 2014
    Messages:
    1,182
    Likes Received:
    92
    Trophy Points:
    48
    susah bgt yah , perlu teliti tau tau error
     
  5. Ambo

    Ambo New Member

    Joined:
    Sep 11, 2014
    Messages:
    8
    Likes Received:
    2
    Trophy Points:
    3
    izin donload template nya gan...
    o ya gan..
    kalau membuat toko online kita di halaman 1 google gimana caranya gan??

    *akhirnya*
     
  6. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    NAH INI DIA GW JUGA LAGI NYARI CARANYA,, SUSAH BANGET BIAR JADI NO.1
    SEKARANG GOOGLE HUMINGBIRD SIH, JADI INTINYA ITU KONTEN / ISI HARUS BERMANFAAT DAN MUDAH DIMENGERTI ORANG...
     
  7. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    Yang Mau Download silahkan Aja, gw Juga boleh download dari BTemplates.com
    Keyword nya "Store", Nongol dah Tu Tempe..
     
  8. bespe

    bespe Member

    Joined:
    Oct 30, 2014
    Messages:
    957
    Likes Received:
    51
    Trophy Points:
    28
    Keren nih tipsnya, ijin comot ah gan:D
     
  9. ziuma

    ziuma Well-Known Member

    Joined:
    May 23, 2014
    Messages:
    1,564
    Likes Received:
    240
    Trophy Points:
    63
    walah buat toko online dengan gratis bisa juga ya, tahunya dengan virtue mart joomla (perlu domain dan hosting)
    kalau blogspot kan gratis tis tis
     
  10. exabytes-id

    exabytes-id Member

    Joined:
    Oct 3, 2013
    Messages:
    866
    Likes Received:
    35
    Trophy Points:
    28
    Yap, perlu ketelitian dan kejelian, mudah sebenanrnya tetapi kalau kurang teliti, ada 1 titik saja yg kurang, endingnya ga jadi juga , pusing nyari dimana salahnya , padahal sepele . hehe
     
  11. debays

    debays Active Member

    Joined:
    Jul 18, 2014
    Messages:
    1,409
    Likes Received:
    58
    Trophy Points:
    48
    mantap komplit ganget nih tutorialnya..
     
  12. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    Endingnya yang mana nih, biar ane bantu, sebenr nya gampang karena dalam mode edit html bisa di undo.
     
  13. exabytes-id

    exabytes-id Member

    Joined:
    Oct 3, 2013
    Messages:
    866
    Likes Received:
    35
    Trophy Points:
    28
    sudah happy ending gan, cuma kurang teliti saja, hany gara2 kurang 1 titik bisa bikin pusing, ya karna itu, kurang teliti, hehe
     
  14. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    hebat agan ini, udah dalem kayanya ilmu edit html nya,,
    tambahan kalo mau ngilangin keranjang blanja / gak mau make metode paypal pembayarannya (COD)
    kaya gini nih contohnya : http://okepenangkalpetir.blogspot.com/
    ntar malem ya w kasih tau caranya..
     
  15. Mokimaru

    Mokimaru Member

    Joined:
    Nov 9, 2014
    Messages:
    513
    Likes Received:
    27
    Trophy Points:
    28
    Tingal beli Domain .com (TLD) udah serasa web profesional deh.
     
  16. kreasinfo

    kreasinfo Member

    Joined:
    Sep 30, 2014
    Messages:
    129
    Likes Received:
    3
    Trophy Points:
    18
    Google+:
  17. Najla

    Najla Member

    Joined:
    Aug 1, 2014
    Messages:
    445
    Likes Received:
    22
    Trophy Points:
    18
    Keren, ini yang saya cari dan ingin coba juga pakai blogspot.
     
  18. programer

    programer Member

    Joined:
    Sep 4, 2014
    Messages:
    29
    Likes Received:
    3
    Trophy Points:
    8
    Google+:
    Lanjutin.. buat ngilangin menu keranjang belanja yang kaya gini nih
    my item cart.png
    Cari Kode ini:
    HTML:
    <div class='menu-cart'>
    hapus semua kode ini
    HTML:
    <div class='menu-cart'>
    <a class='mycart' href='#'>My Cart : <span class='simpleCart_quantity'/> item(s)</a>
    Total Price : <span class='simpleCart_total'/>
    <div class='bag'>
    <div class='simpleCart_items'/>
    <div class='clear'/>
    <a class='simpleCart_empty' href='javascript:;'>Empty Cart</a><a class='simpleCart_checkout' href='javascript:;'>Checkout</a>
    </div>
    </div>
    
    Setelah itu Hapus Mode Add To Cart, Cari Kode Beikut dan Hapus..
    HTML:
    <a class='item_add' href='javascript:;'>Add to Cart</a>
    Hasilnya kaya yang ini nih : Contoh
    Sekalian kalo setiap menambah widget baru,, hapus ya kode kaya gini nih:
    HTML:
      <b:include name='quickedit'/>
    Kode tersebeut berupa gambar [​IMG] Gambar tersebut kalo dalam dunia SEO gak kepake..."katanye sih dnger-dngr mah.."
     
    Last edited: Nov 11, 2014
  19. Dede P

    Dede P Member

    Joined:
    Nov 4, 2014
    Messages:
    40
    Likes Received:
    2
    Trophy Points:
    8
    Makasih tipsnya... pengen nyoba buat jg^^
     
  20. Fatahillah

    Fatahillah Member

    Joined:
    Jun 27, 2014
    Messages:
    460
    Likes Received:
    20
    Trophy Points:
    18
    Google+:
    ini tutor maknyus nii buat bikin toko online, modal domain yang kerenan dikit udah terkesan profesional..

    lumayan buat referensi bikin toko online untuk jualan peuyeum :D:D
     
Loading...

Share This Page