Social Items

Ada anggapan bahwa Blogger adalah produk terbaik dari google untuk pengembangan blog yang sederhana dan pendapat tersebut benar-benar salah, dengan blogger Anda bisa menjalankan toko online dengan fungsi Cart menggunakan platform Blogger. Berikut beberapa template terbaik yang sesuai dengan blog Ecommerce atau Shopping Store.

Pada artikel ini saya telah memilih beberapa template Blogger Toko Online Online Terbaik.

Jika Anda ingin memulai membuat blog toko online, maka Template Blogger Belanja Online berikut akan banyak membantu Anda.

1. Value Shopping Store Blogger Templates


Value dibuat untuk e-Commerce bisnis dan untuk menampilkan Produk Multi Kategori. Desain minimalisnya sangat modern yang akan memusatkan produk dan variasinya. Muncul dengan desain tata letak yang eye-catching yang tentunya akan menarik perhatian semua pengunjung situs Anda. Dengan prinsip desain minimal, Value Blogger Template membantu menampilkan produk bisnis dengan cara yang paling kreatif.

Untuk melihat demo dan mengunduh template, Anda bisa melihat di Value Shopping Store Blogger Templates  

2. Boutique Shopping store Online Blogger Template 




Untuk melihat demo dan mengunduh template, Anda bisa melihat di Boutique Shopping store Online Blogger Template   

3. Sora Store Shopping Blogger Templates


Sora Store adalah template blogger yang responsif dan dapat disesuaikan sepenuhnya serta cocok untuk semua jenis toko e-commerce pada perangkat apa pun. Sora Store adalah template ritel serbaguna, yang dirancang untuk membantu penjualan online Anda dengan cepat, mudah dan murah. Tata letaknya selalu pas di setiap layar desktop, tablet, handphone, dll.

Untuk melihat demo dan mengunduh template, Anda bisa melihat di Sora Store Shopping Blogger Templates  

4. Mega Shop Shopping Store Blogger Templates


Mega Shop - Template Blogger yang responsif dengan antarmuka bersih dan modern yang menakjubkan yang ideal untuk toko fashion online, butik, toko pakaian, toko mal atau toko pakaian. Dibangun dengan fitur luar biasa, semuanya dibuat khusus untuk toko e-commerce belanja online. Dengan sedikit penyesuaian Anda bisa membuat toko online Anda unik dan menonjol.

Anda bisa melihat Mengunduh Mega Shop Shopping Store Blogger Templates.  
5. Shopingo Shopping Store Blogger Templates


Shopingo adalah solusi eCommerce bagi pemilik usaha kecil untuk segera menyiapkan toko belanja online dalam hitungan menit dan mulai menjual produk mereka dengan mudah. Dengan tampilan template premium, Shopingo merupakan tema yang lembut, halus dan sepenuhnya 100% responsif. Template ini juga menawarkan banyak fitur menarik lainnya. Template ini cocok untuk blog seperti e-commerce, toko online, e-store dan banyak blog belanja lainnya.

Anda bisa melihat Mengunduh Shopingo Shopping Store Blogger Templates. 

6. Shoppaholic Boutique Online Shopping Store Blogger Template



Anda bisa melihat Demo dan Mengunduh Shoppaholic Boutique Online Shopping Store Blogger Template. 

6 Template Blogger Online Store Terbaik


Value dirancang untuk digunakan sebagai bisnis e-Commerce dan sebagian besar untuk blog Multi Kategori Produk. Template ini  memiliki desain minimal tapi fitur dan juga tampil sangat baik di search engine. Template Value dilengkapi dengan berbagai widget yang akan membantu Anda mempublikasikan blog Anda secara lebih profesional. 

Groovy tersedia dalam versi free template, tetapi tentunya ada keterbatasan dimana Anda tidak dapat memodifikasi secara keseluruhan template.  

Anda bisa melihat Mengunduh Value Blogger Templates.   

1. Setting Up The Menu - Top

Untuk Mengedit Menu dalam tema ini Anda bisa mengikuti langkah ini:

Di Blogger Dashbord Klik Template
Klik Edit HTML

(Menu Atas) Gulir ke bawah dan Temukan Kode ini:

<nav id='navigation'>
        <ul>
          <li class='active'><a href='/'>Home</a></li>
          <li><a href='#'>Labels</a></li>
          <li><a href='#'>Drop down</a>
            <ul>
              <li><a href='#'>Grid style</a></li>
              <li><a href='#'>Free logo's</a></li>
              <li><a href='#'>Bages style</a></li>
            </ul>
          </li>
          <li><a href='#'>Sample</a></li>
          <li><a href='/404'>Error 404</a></li>
          <li><a href='#'>Page</a></li>
        </ul>

      </nav>

Ubah # dengan link URL milik Anda

2. Info Box


Untuk Info Box dalam tema ini Anda bisa mengikuti langkah ini:

Di Blogger Dashbord Klik Template
Klik Edit HTML

(Info Box) Gulir ke bawah dan Temukan Kode ini:

<div class='widget-html text-center box   '>
 <div class='body-wg-html'>

     <div class='bg-red col-lg-4 col-md-4 col-sm-4 col-xs-12'>  <p>FREE WORLDWIDE SHIPPING</p> </div> <div class='bg-gold col-lg-4 col-md-4 col-sm-4 col-xs-12'>  <p>BUY ONLINE - PICK UP AT STORE</p> </div> <div class='bg-blue col-lg-4 col-md-4 col-sm-4 col-xs-12'>  <p>ONLINE BOOKING SERVICE</p> </div> </div>

Ubah yang berwarna merah dengan link URL milik Anda

3. Featured Posts

Akses Layout/tata letak blog Anda> klik Tambahkan Gadget> HTML / JavaScript di bagian Intro Posts, Anda harus menempatkan nama berikut yang disorot dengan warna merah di bawah ini.

01 - Tag/Label: Sports
02 - Recent Posts: recent

03 - Random Posts: random

Contoh :
4. Flickr Images

Untuk Info Box dalam tema ini Anda bisa mengikuti langkah ini:

Pada Blogger Dashbord Klik Layout / tata letak.
Klik Edit tambahkan gadget-> pilih HTML / javascript.

Salin kode di bawah ini dan simpanlah:

div class="flickr_plugin">
<script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=52617155@N08" type="text/javascript">
</script>

</div>

Ganti 52617155 @ N08 ini dengan Id Flicker Anda
Anda Bisa Menggunakan http://idgettr.com/ untuk menghasilkan Id Flicker Anda

5. Error 404

Halaman ini sudah terintegrasi dengan template anda tidak perlu melakukan apapun.
Tapi jika Anda ingin mengeditnya Klik Content Ctrl + F dan Cari Kode berikut ini:

<div class='error-page'>
  <div class='error-title'>
    <i class='fa fa-trash-o'/> 404 - Page not found
  </div>
  <div class='error-description'>
    <div class='error-line1'>The page you are looking for might have been removed,<br/>had its name changed, or is temporarily unavailable</div>
    <div class='error-line2'>Go to <a expr:href='data:blog.homepageUrl'>Home</a> to check it again, Search For It or Just Contact Us</div>
  </div>

</div>

Selamat berkarya, dan sekali lagi Anda bisa melihat Mengunduh Value Blogger Templates. 

Cara Setup Value Shopping Store Blogger Templates


Blogger adalah platform CMS yang mudah dioperasikan , Anda tidak perlu menjadi seorang yang ahli untuk mengoperasikan dasbor atau pengaturan. Tetapi dengan kemudahan, ada beberapa keterbatasan, secara default Anda tidak dapat membuat halaman' Contact Us', Anda harus menggunakan plugin pihak ketiga atau harus mengubah widget kontak resmi blogger, sehingga dapat berfungsi pada halaman statis. Membuat halaman terpisah untuk tujuan kontak sangat profesional dan juga membuat blog Anda bersih dengan menyembunyikan widget dan plugin yang tidak perlu.

First Step (Penting)
Sebelum mengikuti tutorial di bawah ini kami sarankan Anda untuk menginstal widget formulir kontak di blog Anda, prosesnya sangat mudah dan dapat dilakukan dalam hitungan menit, dengan klik sederhana. Kami telah menerbitkan tutorial sebelumnya, jadi Anda tidak akan menghadapi kesulitan. Mohon mengikuti Cara Menambahkan Widget Contact Form di Blog Blogger.

Menyembunyikan Widget (Menambahkan CSS)
Sebelum Mengedit kami menyarankan Anda untuk membackup dari template, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin>  tepat di atasnya paste kode berikut.

CSS
.sidebar .widget.ContactForm {
    display: none!important;
}

Membuat Halaman (Menambahkan HTML)
Sebelum Mengedit kami menyarankan Anda untuk membackup dari template, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin>  tepat di atasnya paste kode berikut.

HTML

<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>


Cara Membuat halaman Contact Us di Blogger Part-3

Subscribe Our Newsletter