Blogging platform lainnya seperti Wordpress memiliki "Custom Fields" pilihan yang memungkinkan kita untuk menambahkan deskripsi tambahan seperti harga dan thumbnail tanpa harus menambahkan kode HTML di editor posting. Tapi, Blogger tidak memiliki fitur itu. Jadi, kami di Bloggermint.com mencoba yang terbaik untuk membuat item posting semudah mungkin dengan menggunakan metode tabel. Berikut adalah bagaimana tabel terlihat di editor posting.
Template Penggunaan Instruksi
Menggunakan "Post Template" Blogger fitur, kami dapat pra-format editor posting dengan teks atau kode yang akan muncul setiap kali kita membuat posting baru. Jadi, kita akan memanfaatkan fitur itu di template ini. Pertama, download Belanja template Blogger dan upload ke blog Anda. Sekarang, pergi ke Format> Pengaturan. Mengatur nomor yang dikehendaki dari posting untuk ditampilkan dalam blog.
Kemudian, cari halaman sampai Anda melihat "Post Template" pilihan. Paste kode berikut ke dalam area teks. Dan klik "Simpan".
<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXptZUDxCdnzLoXH-_cNr6ochJ-4Zm_GpobjgZS3ynGVZEkVYbYTJXRIMn1cIqokuZgcH6BY1w43wAPsj4EQPSxMh18wwpfFRAODfu8in12L_Qkyif4jooujfTPKOQ48ZqudpHZzW2-XU/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXptZUDxCdnzLoXH-_cNr6ochJ-4Zm_GpobjgZS3ynGVZEkVYbYTJXRIMn1cIqokuZgcH6BY1w43wAPsj4EQPSxMh18wwpfFRAODfu8in12L_Qkyif4jooujfTPKOQ48ZqudpHZzW2-XU/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody>
</table>
Berikut adalah screenshot dari template pos yang telah ditambahkan dengan kode.
Sekarang pergi ke Posting | Topik Baru dan Anda akan melihat meja ada di editor posting Anda. Anda dapat menghapus gambar default yang kami telah menambahkan dalam kode dengan mengkliknya dan pilih "Hapus". Kemudian, upload gambar item Anda di dalam yang sel tabel. Kami menyarankan Anda untuk menggunakan gambar dengan ukuran yang sedang.
Isi pilihan lain seperti Nama Item, Harga dan Deskripsi dengan mengganti teks default. Mereka akan digunakan sebagai nilai oleh script SimpleCart selama Checkout PayPal. Dan harap ingat bahwa Nama Item Anda harus unik. Sekarang, klik pada Mode HTML di editor posting dan menghapus yang tidak perlu <div> .... </ div> dalam kode untuk gambar barang. Kita hanya perlu img <... /> Yang telah disorot dalam gambar di bawah.
Jadi, ini adalah bagaimana hal itu akan terlihat setelah kita menghapus <div> yang .... dan <a href .... yang membungkus <img ... kode.
Anda dapat mengubahnya kembali ke "Tulis" mode, menambah / mengedit informasi tentang produk dan tekan tombol "Publish" tombol. Itu saja.
Email Setup Instruksi PayPal
Pergi ke Desain> HTML. Pencarian untuk simpleCart.email menggunakan CTRL + F. Anda akan menemukan potongan kode ini.
<script type='text/javascript'>
simpleCart.email = "bloggermint@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>
Ganti default email PayPal yang kita tentukan (bloggermint@gmail.com) dengan Anda. Dan Savethe template. Anda selesai! Berikut adalah screenshot contoh pop up PayPal selama checkout.
Kami telah merencanakan untuk versi PRO dibayar dari Daftar Belanja dengan fitur yang lebih maju dan terlihat profesional. Silakan untuk mengisi link kredit footer utuh. Jika Anda ingin menghapus link tersebut Anda harus membayar sedikit biaya. Dan, jika Anda ingin mendapatkan template disesuaikan, hubungi kami. Juga memeriksa kami Blogger Template situs Blogger Blog Hub untuk template blogger terbaru.
Bagi mereka yang tidak memiliki kartu PayPal / kredit, Anda mungkin ingin menggunakan formulir kontak email. Anda dapat mengganti "Add to Cart" tombol dengan kontak email / umpan balik hubungan bentuk dengan mengikuti langkah berikut. Terima kasih yang tulus kepada salah satu pembaca blog kita, Vivija (BLE) dari Skopje, Makedonia, yang menghabiskan waktunya untuk menemukan metode ini.
Pertama, pergi ke Kontacr.com dan mendaftar untuk account baru. Setelah Anda login ke Kontacr, gulir ke bawah halaman sampai Anda melihat "Ajax Embed Widget" atau "Kode Tombol" dan mendapatkan ID yourKontacr yang akan terlihat seperti ini: - id = 39662;. Salin dan menyimpannya untuk penggunaan dalam langkah-langkah mendatang.
Sekarang, pergi ke Desain> Edit HTML. Tambahkan kode di bawah ini tepat sebelum penutup </ head> tag.
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>
Kemudian, mencari sepotong kode yang ditunjukkan di bawah ini menggunakan CTRL + F.input.item_add{
bottom: 9px;
font-size: 11px;
position: absolute;
right: 15px;
width: 90px;
}
Ada dua input.item_add {kode pada template ini. Tapi, Anda dapat membedakan mereka dengan melihat deklarasi CSS dalam {.... }. Pencarian untuk kode {input.item_add yang datang sebelumnya di bagian CSS. Kemudian, ganti dengan kode ini.span.item_add{
bottom: 9px;
font-size: 11px;
position: absolute;
right: 15px;
width: 90px;
}
Jadi sekarang, cari input.item_add kedua {kode di bawah Bagian CSS.
input.item_add {
font-size: 17px;
height: 40px;
margin: 5px 0 0 140px;
position: relative;
width: 120px;
}
Ganti denganspan.item_add {
font-size: 17px;
height: 40px;
margin: 5px 0 0 140px;
position: relative;
width: 120px;
}
Dan sekarang klik "Simpan Template". Setelah tersimpan, pergi ke Format Pengaturan> dan mencari pilihan "Post Template" yang terletak di bagian bawah halaman tersebut.
Tambahkan kode berikut ke dalam area teks sana dan klik "Simpan Pengaturan". Tapi sebelum itu, ingatlah untuk id = 39662; dengan ID anda di Kontacr yang Anda dapatkan sebelumnya.
<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXptZUDxCdnzLoXH-_cNr6ochJ-4Zm_GpobjgZS3ynGVZEkVYbYTJXRIMn1cIqokuZgcH6BY1w43wAPsj4EQPSxMh18wwpfFRAODfu8in12L_Qkyif4jooujfTPKOQ48ZqudpHZzW2-XU/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXptZUDxCdnzLoXH-_cNr6ochJ-4Zm_GpobjgZS3ynGVZEkVYbYTJXRIMn1cIqokuZgcH6BY1w43wAPsj4EQPSxMh18wwpfFRAODfu8in12L_Qkyif4jooujfTPKOQ48ZqudpHZzW2-XU/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><span class="item_add"><script type="text/javascript"> id=39662; t=1; ctxt="Order Now"; </script>
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody></table>
Dan Anda sudah selesai. Saya mengupdate blog demo dengan link umpan balik email dalam beberapa item. Terima kasih lagi untuk Vivija.
Karena beberapa perubahan kode yang mencurigakan Google kami, di mana kami menjadi tuan rumah script kami, Javascript Keranjang tidak bekerja. Kami telah reuploaded file js. Kami mohon maaf atas ketidaknyamanan yang ditimbulkan.
Cari kode berikut di template editor HTML.
<script src='http://introbloggerscripts.googlecode.com/files/cart.js' type='text/javascript'/>
Dan menggantinya dengan URL sumber baru.<script src='http://shopppingcart.googlecode.com/files/simplecart.js' type='text/javascript'/>
Saya mencoba untuk mendapatkan URL demo kembali ke form. Entah kenapa blog Demo tidak bekerja. Jadi saya telah menghubungi Blogger, berharap mereka memperbaikinya segera.
Kami telah memperbaiki masalah blog demo. Terima kasih atas kesabaran Anda.
