Membuat Website Toko Online dengan Prestashop

admin | 22.03 | 0 komentar
Membuat Website Toko Online dengan Prestashop-Selamat Pagi Sahabat smua. Kali ini kita akan share mengenai membuat Website Toko Online dengan Prestashop.

Apa sih itu Prestashop? Prestashop adalah semacam template website atau software website yang dibuat untuk tujuan e-commerce, prestashop memiliki penampilan yang cukup menarik. Selain sisi GUI dan tampilan menarik juga sangat memudahkan orang awam untuk mempelajarinya. Secara mudahnya Prestashop adalah software web instant yang dapat digunakan untuk membangun sebuah toko online secara gratis. Prestashop juga memiliki komunitas serta  Forum PrestaShop yang dapat membantu bagi pengguna yang mengalami problem dan masalah seputar PrestaShop, khusunya pengguna baru Prestamania seperti saya,hehe
Sejarahnya, PrestaShop dikembangkan di Perancis. Dengan karakteristik orang Perancis yang menekankan segi estetika tampak pada PrestaShop. Oleh karena itu, dari sisi tampilan PrestaShop terlihat lebih menarik dibandingkan dengan CMS e-commerce lainnya.
Apa Kelebihan PrestaShop dibandingkan CMS toko online lainnya?
Diantara keunggulannya menurut saya selain Simple dan Mudah dipahami, PrestaShop juga,:
  • Sudah support bahasa Indonesia
  • Fitur Yang lengkap (cart, featured products,tag produk, dll)
  • Tampilan yang menarik
  • Membedakan antara pemasok dan merek
  • Adanya tag produk
  • Pilihan beberapa pengirimana dan pembayaran.
  • Adanya fitur bingkisan hadiah
  • Adanya fitur untuk me-retur order
Website PrestaShop memenuhi semua faktor kemudahan dalam hal pengembangan sebuah toko online.Dari mulai ‘link friendly’, navigasi situs yang beraneka ragam, halaman detil produk, sampai kemudahan proses checkout. Fitur Fiturnya dalam prestashop pun sangat mendukung SEO, istilah yang menunjukkan kemudahan sebuah produk ditemukan oleh mesin pencari.
Baik, Demikian sedikit mengenai Membuat Website Toko Online dengan Prestashop, semoga  bermanfaat.
Berikut adalah tampilan toko online dengan prestashop:
 
Contoh Tampilan toko online dengan prestashop.

 
 
-------------
Jual barang online cukup mudah mengguanakn prestashop, kami menyediakan jasa pembuatan toko online instan lengkap professional menggunakan script Prestashop beserta database dan pendukung toko online lainnya lengkap.
Segera Hubungi CS kami 081904256440 (dedi)

Diposting oleh admin di 22.03 0 komentar
Label:

Cara Membuat Jquery Multi Level Menu Horizontal

admin | 20.24 | 0 komentar

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>



.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>


Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>


Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"


Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan.
Diposting oleh admin di 20.24 0 komentar
Label:

Pilihan Templates Toko Online

admin | 01.26 | 0 komentar
 ***Klik pada gambar untuk memperbesar...


. .. Sophisticated - Sewing Arch - Blue Sunset  hot new template toko online e-commerce .. .
Sophisticated-Sewing-Arch-Blue-Sunset
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing Arch - Mochaberry  hot new template toko online e-commerce .. .
Sophisticated-Sewing-Arch-Mochaberry
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Lovely Pink   .. .
Sophisticated-Sewing-Lovely-Pink
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Lovely Green   .. .
Sophisticated-Sewing-Lovely-Green
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Lovely Turquoise  hot new template toko online e-commerce .. .
Sophisticated-Sewing-Lovely-Turquoise
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Pink Violet  hot new template toko online e-commerce .. .
Sophisticated-Sewing-Pink-Violet
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Pink Grey   .. .
Sophisticated-Sewing-Pink-Grey
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Sand Baige   .. .
Sophisticated-Sewing-Sand Baige
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Sewing - Black Red  hot new template toko online e-commerce .. .
Sophisticated-Sewing-Black-Red
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Nature - Blue   .. .
Sophisticated-Nature-Blue
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Chic - Pink   .. .
Chic-Pink
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Chic - Lavender   .. .
Chic-Lavender
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Chic - Blue   .. .
Chic-Blue
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Chic - Green   .. .
Chic-Green
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Chic - Ivory   .. .
Chic-Ivory
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Chic - Peach   .. .
Chic-Peach
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Light Olive  hot new template toko online e-commerce .. .
Light-Olive
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Military Green  hot new template toko online e-commerce .. .
Military-Green
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Fresh Green .. .
Fresh Green Sophisticated
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Fresh-Green-1     2. Sophisticated-Fresh-Green-2
.. Pilihan Corak Latar ..
3. Sophisticated-Fresh-Green-3     4. Sophisticated-Fresh-Green-4     5. Sophisticated-Fresh-Green-5
6. Sophisticated-Fresh-Green-6     7. Sophisticated-Fresh-Green-7

. .. Sophisticated - Fresh Orange .. .
Sophisticated - Fresh Orange
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Fresh-Orange-1     2. Sophisticated-Fresh-Orange-2

.. Pilihan Corak Latar ..
3. Sophisticated-Fresh-Orange-3     4. Sophisticated-Fresh-Orange-4     5. Sophisticated-Fresh-Orange-5
6. Sophisticated-Fresh-Orange-6     7. Sophisticated-Fresh-Orange-7

. .. Sophisticated - Red .. .
Red Sophisticated
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Red-1     2. Sophisticated-Red-2
.. Pilihan Corak Latar ..
3. Sophisticated-Red-3     4. Sophisticated-Red-4     5. Sophisticated-Red-5
6. Sophisticated-Red-6     7. Sophisticated-Red-7

. .. Sophisticated - Purple  hot new template toko online e-commerce .. .
Sophisticated-Purple
"Ukuran gambar header : 950 x 200 pixel"


. .. Sophisticated - Blue .. .
Sophisticated Blue
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Blue-1     2. Sophisticated-Blue-2
.. Pilihan Corak Latar ..
3. Sophisticated-Blue-3     4. Sophisticated-Blue-4     5. Sophisticated-Blue-5
6. Sophisticated-Blue-6     7. Sophisticated-Blue-7

. .. Sophisticated - Yellow .. .
Sophisticated - Yellow
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Yellow-1     2. Sophisticated-Yellow-2
.. Pilihan Corak Latar ..
3. Sophisticated-Yellow-3     4. Sophisticated-Yellow-4     5. Sophisticated-Yellow-5
6. Sophisticated-Yellow-6     7. Sophisticated-Yellow-7

. .. Sophisticated - Brown .. .
Sophisticated - Brown
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Brown-1     2. Sophisticated-Brown-2

.. Pilihan Corak Latar ..
3. Sophisticated-Brown-3     4. Sophisticated-Brown-4     5. Sophisticated-Brown-5
6. Sophisticated-Brown-6     7. Sophisticated-Brown-7

. .. Sophisticated - Silver .. .
Silver Sophisticated
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Silver-1     2. Sophisticated-Silver-2
.. Pilihan Corak Latar ..
3. Sophisticated-Silver-3     4. Sophisticated-Silver-4     5. Sophisticated-Silver-5
6. Sophisticated-Silver-6     7. Sophisticated-Silver-7

. .. Sophisticated - Black .. .
Black Sophisticated
"Ukuran gambar header : 950 x 200 pixel"
.. Pilihan Warna Latar ..
1. Sophisticated-Black-1     2. Sophisticated-Black-2
.. Pilihan Corak Latar ..
3. Sophisticated-Black-3     4. Sophisticated-Black-4     5. Sophisticated-Black-5
6. Sophisticated-Black-6     7. Sophisticated-Black-7
Diposting oleh admin di 01.26 0 komentar
Label:
Langganan: Postingan (Atom)
 
Greenhouse : Creating Website | Internet Marketing | Video Shooting
Copyright © 2011. Greenhouse Media: Web Development & internet Marketing - All Rights Reserved
Support by Greenhouse Celluler
Dedi Sudarwanto