Template Toko Online Gratis | INDIANA NET
Home »Label »

Template Toko Online Gratis

10.54 Diposting oleh Unknown

Bagi anda yang ingin membuat Toko Online dengan menggunakan blog, pastinya anda memerlukan template blog yang cocok untuk tampilan blog toko online anda tersebut. Seperti pada postingan saya kali ini, saya akan berbagi sebuah Template Blogger yang saya design khusus untuk Toko Online, pada template ini sudah saya sertakan juga beberapa kode CSS dan Script untuk Menu Dropdown atau Accordion, Vertikal Menu, kotak komentar yang lumayan keren lengkap dengan emoticonnya dan Slider otomatis untuk Tampilan Postingan Product anda, untuk screen shotnya bisa anda lihat pada gambar dibawah ini...


Bila anda tertarik untuk mencoba menggunakan template ini untuk blog toko online anda bisa anda klik Link download dan Link Demo untuk melihat dulu template tersebut dibawah ini.


Untuk cara pemasangan widgetnya agar blognya terlihat seperti pada gambar screen shot diatas bisa anda copy Kode HTML dibawah ini dan masukan pada widget HTML Javascript pada blog anda.

Kode HTML untuk Menu Bar yang terletak paling atas :

<ul id="menubar">
<li><a href="http://tips-design-template.blogspot.com"><span>Wellcome</span>TO HOME</a></li>
<li><a class="trigger" href="#"><span>CATEGOTY 1</span>PRODUCT 1</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 2</span>PRODUCT 2</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 3</span>PRODUCT 3</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 4</span>PRODUCT 4</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 5</span>PRODUCT 5</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 6</span>PRODUCT 6</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
<li><a class="trigger" href="#"><span>CATEGOTY 7</span>PRODUCT 7</a><ul>
<li>
</li>
<li><a href="#">PRODUCT 1</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 2</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 3</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 4</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 5</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 6</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 7</a></li>
<li class="hr"></li>
<li><a href="#">PRODUCT 8</a></li>
</ul>
</li>
</ul>

Kode HTML untuk Dropdown Menu :

<div class='arrowlistmenu'>
<h3 class='menuheader expandable'>Dropdown Menu 1</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 2</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 3</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 4</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 5</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 6</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 7</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
<h3 class='menuheader expandable'>Dropdown Menu 8</h3>
<ul class='categoryitems'>
<li><a href="Link Here" title="Title-Here">Product 1</a></li>
<li><a href="Link Here" title="Title-Here">Product 2</a></li>
<li><a href="Link Here" title="Title-Here">Product 3</a></li>
<li><a href="Link Here" title="Title-Here">Product 4</a></li>
<li><a href="Link Here" title="Title-Here">Product 5</a></li>
<li><a href="Link Here" title="Title-Here">Product 6</a></li>
<li><a href="Link Here" title="Title-Here">Product 7</a></li>
<li><a href="Link Here" title="Title-Here">Product 8</a></li>
<li><a href="Link Here" title="Title-Here">Product 9</a></li>
</ul>
</div>

Kode HTML untuk Vertikal Menu :

<div id="VMenu">
<ul>
<li><a href="Your Link Here" title="Tittle Here">Item 1</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 2</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 3</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 4</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 5</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 6</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 7</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 8</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 9</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 10</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 11</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 12</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 13</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 14</a></li>
<li><a href="Your Link Here" title="Tittle Here">Item 15</a></li>       
</ul>
</div>

Bila ada kekurangan pada template ini baik itu dari design tampilan dan sebagainya, silahkan anda berikan komentar anda pada kotak komentar yang tersedia dibawah ini dan nanti saya akan memodifikasi templatenya agar sesuai dengan yang anda inginkan, selamat mencoba dan semoga bermanfaat, terima kasih.


Tags:

Artikel Terkait Lainnya :

Share this :

17 komentar:

  1. Unknown23 Desember 2012 pukul 19.45

    sblmnye template keren \m/ tapi gan cara pasangnya dikasih keterangan juga dong.........bingung nih masang kode htmlnya penenmpatanya.........:'(

    BalasHapus
  2. PutuGiBagi3 Maret 2013 pukul 03.57

    memang keren templatenya gan :D
    saya ijin download :D :-d

    BalasHapus
  3. Unknown6 Mei 2013 pukul 01.15

    bos bagai mana memosting barang dagangan nya dan ko tombol belinya ga ada sih? tolong kasih tau caranya bos makasih dan ijin dowload jg ya

    BalasHapus
    Balasan
    1. Unknown8 Januari 2014 pukul 18.33

      anda harus pake script lgi untuk Icon beli dan harga

      Hapus
  4. Unknown15 Mei 2013 pukul 19.46

    Terima kasih atas template yang disediakannya dengan gratis. Saya sudah menggunakannya dg url http://7oin.com/syifa.
    Hanya saja ada dua hal yang saya perlukan tapi saya belum bisa membuatnya.
    1.Cara mengaktifkan "KRANJANGKU"
    2.Cara mengaktifkan "Product Terkait Lainnya:"
    Tolong,jika tidak keberatan berilah saya petunjtuknya lewat email saya syifasaqomi@gmail.com atau cara lain.
    Terima kasih
    Admin http://7oin.com/syifa

    BalasHapus
  5. Suliono6 Juni 2013 pukul 03.19

    Oke Banget Templatenya,Cara Menampilkan Tombol Beli Bagaimana?
    untuk mengaktifkan Keranjang Belanja?
    Terima Kasih.

    BalasHapus
  6. FarDis1 Agustus 2013 pukul 12.13

    kok masih banyak yg kosongan ya gan ?

    BalasHapus
  7. Unknown14 Agustus 2013 pukul 21.41

    gmn gan cara untuk menepatan htmlnya gan

    BalasHapus
  8. qomar1 Oktober 2013 pukul 23.10

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  9. Unknown27 Oktober 2013 pukul 17.58

    gimana masukin posting htmlnya, susah amat, apa masuk di post, kok html tetap tulisan aja ga bisa di gambar

    BalasHapus
  10. ASENG29 Oktober 2013 pukul 13.17

    Ini yang ku tunggu-tunggu gan,lumayang keren gan
    makasih gan

    BalasHapus
  11. Edyn Laskar23 Januari 2014 pukul 20.00

    cara instalasi untuk postingannya gimana gan,,, mohon bantuannya....

    BalasHapus
  12. Unknown13 Maret 2014 pukul 11.14

    Waduh ini blog yang gw cari cari baru ketemu, sayang gw bingung cara bikinnya.. kunjungan baliknya juga gan http://rubrik.web.id

    BalasHapus
  13. Unknown19 Juni 2014 pukul 09.40

    super keren gan ane mau mencobanya
    www.penghapustatto.blogspot.com
    www.penggantiselaputdara.blogspot.com
    www.produkselaputdara.blogspot.com

    BalasHapus
  14. Media Sang Muslim12 Februari 2015 pukul 03.51

    Bagus banget om cuma sayang kaga ada Format-post dan formulirnya

    BalasHapus
  15. Unknown28 Agustus 2015 pukul 00.34

    udah nyoba template toko online di jejualan.com belum gan?

    BalasHapus
  16. THALYFUTO13 Mei 2018 pukul 22.33

    Kereng banget nih gimana caranya??

    BalasHapus

Langganan: Posting Komentar (Atom)