Cara Setup Template Blogger Online Shop SoraCart

Soracart adalah template blogger responsif dan premium untuk situs eCommerce. Terbaik di kelas dan sarat dengan banyak fitur, dibutuhkan blog Anda ke tingkat berikutnya. Soracart dilengkapi dengan berbagai widget yang akan membantu Anda mempublikasikan blog Anda secara lebih profesional.

Sora Films tersedia dalam versi free template, tetapi tentunya ada keterbatasan dimana Anda tidak dapat memodifikasi secara keseluruhan template. Untuk melihat demo dan mengunduh template, Anda bisa melihat di SoraCart Blogger Template

Untuk mempermudah dalam mengatur template , di bawah ini telah ada dokumentasi cara seting template.

Top Navigation

Akses Layout/Tata Letak blog > klik Edit link pada widget Top Menu.

Contact Menu (Contact Details)

Akses Layout/Tata Letak blog > klik Edit link pada widget Contact Details.

Bagaimana cara menambahkan ikon di top navigasi?

Pilih ikon >> FontAwesome <<, Contoh <i class = "fa fa-download"> </ i>

Example: <i class="fa fa-download"></i>Download this Theme

Top Social Widget

Akses Layout/Tata Letak blog > klik Edit link di Top Social Widget.

Icons Avaliables { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }

Main Menu/ Mega Menu

Akses Theme blog > klik Edit Html> dan kemudian cari pengkodean berikut.

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>Fashion</a>
<ul>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/mens'>MEN</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/women'>WOMEN</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/kids'>KIDS</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>Electronics</a>
<ul>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/mobile'>SMARTPHONE</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/laptop'>LAPTOP</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch'>Smartwatch</a></li>
</ul></li>
<li><a href='#'>Features</a></li>
<li><a href='#'>Documentation</a></li>
<li><a href='#'>Download This Template</a></li>
</ul>

Pada kode diatas ada dua jenis menu yang pertama yaitu menu Normal dan lainnya adalah menu mega.

Kode biru itu normal dan kode merahnya adalah menu mega.

http://sora-cart-soratemplates.blogspot.in/search/label/mobile

http://sora-cart-soratemplates.blogspot.in/search/label/laptop

http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch

Ganti tautan di atas dengan url label Anda.

Membuat normal link

<li><a href='#'>Features</a></li>

Kode diatas akan muncul sebagai link normal ganti saja # dengan link anda dan Features dengan teks anda.

Membuat Menu mega dengan Image

<li><a class='menu-target' href='#'>Your-primary-Label</a><ul><li><a href='Your-Label-Url'>Your-Label-Text</a></li><li><a href='Your-Label-Url'>Your-Label-Text</a></li><li><a href='Your-Label-Url'>Your-Label-Text</a></li></ul></li>

Kode di atas akan muncul sebagai menu mega cukup ganti Your-Label-Url dengan link anda dan Your-Label-Text dengan teks anda.

Catatan:-

Label utama Anda: - Ini adalah label utama dari menu mega, label lain akan muncul di bawah ini. Contoh Electronics (Smartphone, Laptop, Smartwatch). Dalam contoh ini "Electronics" akan menjadi label utama Anda
Your-Label-Url: - Ini adalah link dari label sekunder dari tempat posting yang muncul. Contoh http://yourblogurl.blogspot.com/search/label/LABELNAME. Dalam contoh ini "http://yourblogurl.blogspot.com" adalah url blog anda. Dan "LABELNAME" adalah label sekunder Anda.
Your-Label-Text: - Ini adalah label sekunder dari menu mega, itu akan muncul di bawah label utama. Contoh Electronics (Smartphone, Laptop, Smartwatch). Dalam contoh ini "(Smartphone, Laptop, Smartwatch)" akan menjadi label sekunder Anda

Vertical Icon Menu

Akses Layout/Tata Letak blog > klik Edit link pada widget Top Menu.

Bagaimana cara menambahkan ikon di top navigasi?

Pilih ikon >> FontAwesome <<, Contoh <i class = "fa fa-download"> </ i>

Example: <i class="fa fa-download"></i>Download this Theme

Slider Widget

Akses Layout/Tata Letak blog > klik Add a Gadget> HTML / JavaScript di Slider Widget Section, lalu tambahkan salah satu dari berikut ini

Recent Posts: <div class="latestposts" data-no="5"></div>

Label / Tag Ex: <div class="tagpost" data-label="Break" data-no="5"></div>

Responsive Ads

Akses Layout/Tata Letak blog > klik Add a Gadget> HTML / JavaScript di Bagian Responsive Ads, lalu tambahkan salah satu dari berikut ini

<div id="banner-1" class="banner"> <a class="banner__permalink" href="#"> <span class="screen-reader-text">Introducing the Vacation Collection — Up to 50% Off</span> </a> <div class="banner__inside-wrapper"> <div class="banner__inside"> <div class="banner__content"> <h3 class="banner__title">Introducing the Vacation Collection — Up to 50% Off</h3> </div> <div class="banner__overlay"></div> <div class="banner__bg_image"></div> </div> </div></div><style type="text/css">.banner { position: relative; color: #fff;} #banner-1 { min-height: 130px; background-color: #c6b78b;}#banner-1 .banner__title { font-size: 28px; letter-spacing: 0px;}#banner-1 .banner__subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.85);}#banner-1 .banner__inside { height: 130px; padding: 8px;}#banner-1 .banner__content { border-width: 2px; border-color: rgba(255, 255, 255, 0.5);}#banner-1 .banner__sep { margin-top: 8px; margin-bottom: 8px; width: 20%;}#banner-1 .banner__bg_image { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R55cVh6MhTK7KZcEGvZ1PNJc1k0IOqCEwCdVKbe4veasEVYkEjkBT9iE9HiHUsAWLTbkNW0qGPBkuu56rJVTciAdR9xEV8TM5o9KLUFfQeq0yYxJkVw4c8aVT4x2IF1VUQkq2HjNGcI/s1600/d.png');}#banner-1 .banner__overlay { background-color: #0a0000; opacity: 0.3;}.banner__bg_image { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; z-index: 1; -webkit-transition: -webkit-transform 1s ease-in-out; -o-transition: -o-transform 1s ease-in-out; transition: transform 1s ease-in-out; will-change: transform;}.banner__overlay { background: #000; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2;}.banner__content { word-break: break-all; padding: 18px 30px; display: table-cell; vertical-align: middle; border: 2px solid #fff; text-align: center; position: relative; z-index: 3;}.banner__title { color: inherit; margin: 0;}.banner__inside { display: table; width: 100%; box-sizing: border-box;}.banner__inside-wrapper { overflow: hidden; position: relative;}.banner__permalink { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4;}.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px;}.banner:hover .banner__bg_image, .banner__permalink:focus ~ .banner__inside-wrapper .banner__bg_image { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}</style>

Anda bisa menggunakan kode diatas atau menempelkan kode adsense anda sendiri.

Description Tiles

Akses Theme blog > klik Edit Html> dan kemudian cari pengkodean berikut.

<div class="special-wrap row"><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-support"></i></span><h6 class="special-heading">24/7 Customer Care</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-money"></i></span><h6 class="special-heading">Cash On Delivery</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-clock-o"></i></span><h6 class="special-heading">One Day Shipping</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-plane"></i></span><h6 class="special-heading">Worldwide Shipping</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div></div>

Inilah hal-hal yang perlu Anda ubah.

<h4>We Specialize in</h4> - Main Title.
<i aria-hidden='true' class='fa fa-heart-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
<h6 class='special-heading'>Wedding Photography</h6> -Tiles title
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p> -Description

Featured Product

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini. (Anda bisa menambahkan hingga 3 widget)

Random Product

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini

Cara menambahkan harga dalam produk

Akses posting blog > klik New Post> Labels, di label masukkan price_ $ 120 (Dimana $ 120 adalah harga produk)

Catatan: - rubah simbol $, jika Anda menggunakan mata uang lainnya.

Contoh Gambar:

Setelah menambahkan, klik publish.

Cara menambahkan lencana diskon pada produk

Akses posting blog > klik New Post> Label, di label masuk dari @ -75% (di mana -75% diskon pada produk)

Contoh Gambar:

Setelah menambahkan, klik publish.

Popular Product

Akses Layout/Tata Letak blog > klik Edit link pada widget produk Populer.

Recent reviews

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini

Cart Page

Akses Page Blog > klik Halaman Baru> Judul, dalam judul masukkan "cart" (tanpa tanda petik).

Catatan: - halaman keranjang tidak akan bekerja jika Anda tidak memasukkan judul dengan benar, setelah menambahkan judul link halaman Anda harus terlihat seperti ini.

http://sora-cart-soratemplates.blogspot.com/p/cart.html or http://www.xyz.com/p/cart.html

Checkout Page

Akses Page blog > klik Halaman Baru> Judul, pada judul masukkan "checkout" (tanpa tanda petik).

Catatan: - halaman checkout tidak akan bekerja jika Anda tidak memasukkan judul dengan benar, setelah menambahkan judul link halaman Anda harus terlihat seperti ini.

http://sora-cart-soratemplates.blogspot.com/p/checkout.html orhttp://www.xyz.com/p/checkout.html

Catatan: - Untuk membuat form checkout bekerja anda harus menambahkan contact widget di blog anda. Untuk menambahkan widget ikuti langkah-langkah di bawah ini.

Akses tata letak blog > klik tambahkan gadget> Gadget lainnya, Tambahkan widget kontak.

Cara Menambahkan "Quick overview" ke Produk

Untuk menambahkan ikhtisar singkat pada produk Anda lakukan seperti yang disebutkan di bawah ini

Go to Blogger >> Settings >> Search preferences >> Description >> Edit >> Yes >> Save

Go to ke Blogger >> Tambah Posting baru >> Cari Deskripsi

Dalam Deskripsi Pencarian masukkan teks yang ingin Anda tampilkan sebagai ikhtisar produk. Setelah semuanya selesai, tekan "Publikasikan" dan produk Anda siap untuk dijual

Paypal Email dan Currency

<script>//<![CDATA[$(document).ready(function () { simpleCart({ checkout: { type: "PayPal" , email: "templatemania@yahoo.com" } }); simpleCart.currency( "USD" );}); //]]></script>

Ubah templatemania@yahoo.com ini dengan email anda sendiri.

Ubah USD dengan mata uang Anda sendiri (Hanya Mata Uang di Bawah yang didukung).

"USD" - Currency Name ("US Dollar") "AUD" - Currency Name ("Australian Dollar") "BRL" - Currency Name ("Brazilian Real") "CAD" - Currency Name ("Canadian Dollar") "CZK" - Currency Name ("Czech Koruna") "DKK" - Currency Name ("Danish Krone") "EUR" - Currency Name ("Euro") "HKD" - Currency Name ("Hong Kong Dollar") "HUF" - Currency Name ("Hungarian Forint") "ILS" - Currency Name ("Israeli New Sheqel") "JPY" - Currency Name ("Japanese Yen") "MXN" - Currency Name ("Mexican Peso") "NOK" - Currency Name ("Norwegian Krone") "NZD" - Currency Name ("New Zealand Dollar") "PLN" - Currency Name ("Polish Zloty") "GBP" - Currency Name ("Pound Sterling") "SGD" - Currency Name ("Singapore Dollar") "SEK" - Currency Name ("Swedish Krona") "CHF" - Currency Name ("Swiss Franc") "THB" - Currency Name ("Thai Baht")"BTC" - Currency Name ("Bitcoin")

Pagenavigation Results

<script type='text/javascript'> /*<![CDATA[*/ var perPage=8; var numPages=6; var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/</script>