Template Toko Online Gratis
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.
Read More Add your Comment 17 komentar
Membuat Kotak Komentar Keren
Untuk Postingan kali ini saya akan membahas tentang cara membuat kotak komentar pada blog agar terlihat keren dan tampilannya seperti pada contoh gambar dibawah ini.
Untuk membuat kotak komentar seperti pada gambar diatas caranya sangatlah mudah,
Caranya yaitu sebagai berikut.
1. Anda login dulu ke blogger dengan menggunakan Account anda
2. Setelah anda login anda langsung masuk ke menu Template dan klik Edit HTML
3. Sebelum anda memodifikasi Template anda ada baiknya anda backup dulu template anda
4. Pada bagian Edit HTML anda Hapus semua kode CSS Comment anda
5, Lalu copy dan pastekan kode CSS dibawah ini untuk mengganti kode yang dihapus tadi
/*COMMENTS*/ #comments h4{color:#fff;font-size:16px;font-family:Tahoma, Arial, Verdana;font-weight:400;margin:0 0 5px;padding:0} #comments{background:#111;border:1px solid #666666;margin:0 0 10px;padding:10px} .deleted-comment{font-style:italic;color:gray} #comments-block .comment-author,.profile-datablock{margin:.5em 0} .comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;} .comments .comments-content .comment {background: trasnparent;position: relative;border-radius: 0px 100px 120px;padding:5px;} span.comment-actions, .continue {width:120px;background: #555555;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;} span.comment-actions:hover, .continue:hover {background: #de00ff;text-decoration:none !important;} .secondary-text{padding: 6px 12px 6px;text-decoration:none !important;} .comments .comment .comment-actions a:hover{text-decoration:none !important;} .comment-replies span div ol div li span {display:none !important;} .comments .thread-toggle {background: #c30000;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;} .comments .thread-toggle:hover {background: #48ff00;} .comments .comment-block {padding: 11px !important;margin-left: 28px;position: relative;left: 40px;background:#c30000;border-radius: 10px;width: 420px;} .comments .avatar-image-container img {overflow:visible !important;width:40px !important;} .comments .avatar-image-container {width:40px !important;background: #c30000;padding: 3px;border-radius: 100px;} .avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;} .comments .avatar-image-container {max-height:50px !important;} .comments .comments-content .comment-header {width: 460px;background:#c30000;position: relative;left: -38px;} .comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;} .comments .comments-content .datetime {position: absolute;left: 270px;} .comment-thread ol div.continue {display:none !important;} -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4); box-shadow: 0px 0px 20px rgba(0,0,0,0.4); /*End Of COMMENTS*/
Keterangan :
Untuk Kode diatas yang berwarna merah diatas adalah ukuran lebar comment block sama comment header.
bila anda ingin menyesuaikan lebarnya agar sesuai dengan ukuran kotak komentar anda cukup merubah kode tersebut dengan ditambah atau dikurangi dengan ukuran yang sama. misa;nya yang tadinya ukuran pada comment block yaitu 420px terus ditambah 50px jadi 470px.nah pada comment headr juga harus ditambah 50px juga misalnya 460px + 50px = 510px. cara ini agar tampilannya terlihat kompak aja.
Selamat mencoba dan Semoga Artikel ini bermanfaat bagi anda, bila ada yang kurang jelas mengenai Artikel ini silahkan anda berikan komentar anda. Terima kasih
Read More Add your Comment 24 komentar
Cara Memperbaiki Hardisk Yang Rusak
• Pada tampilan Command Prompt [cmd]ketik perintah: CHKDSK D:
• Perintah tersebut akan menjalankan CHKDSK pada Drive D dalam mode read-only.
• Ketikkan perintah: CHKDSK D:/F
• Perintah tersebut digunakan untuk merepair error tanpa melakukan scanning bad sector.
• Ketikkan perintah: CHKDSK D:/R
• Perintah tersebut digunakan untuk merepair error, menemukan bad sector dan me-recover data.
2. Menjalankan perintah CHKDSK pada My Computer atau Window Explorer.
• Buka Windows Explorer, atau My Computer.
• Klik kanan pada hardisk yang akan di-cek, klik Properties.
• Klik tab Tools, pada pilihan Error Checking klik Check Now..
• Jendela Check disk option akan tampil.
• Untuk menjalankan Chkdsk pada mode read-only mode, klik Start.
• Untuk merepair error pada file system, check Automatically fix file system errors,
• Untuk merepair error, menemukan bad sector dan me-recover data pilih Scan for and attempt recovery of bad sectors,
• Anda juga dapat mencentang kedua pilihan tersebut apabila diperlukan.
• Apabila muncul pesan : Chkdsk cannot run because the volume is in use by another process. Chkdsk may run if this volume is dismounted first. ALL OPENED HANDLES TO THIS VOLUME WOULD THEN BE INVALID. Would you like to force a dismount on this volume? (Y/N) ketik Y dan Enter.
• Apabila muncul pesan: Chkdsk cannot run because the volume is in use by another process. Would you like to schedule this volume to be checked the next time the system restarts? (Y/N) Ketik Y, dan ENTER lalu restart komputer untuk menjalankan Scandisk.
Untuk memperbaiki hardisk menggunakan utility Checkdisk/perintah CHKDSK ini ada beberapa metode yang bisa kita lakukan, yaitu:
1. Apabila komputer masih bisa booting dan login ke windows maka kedua cara untuk menjalankan CHKDSK.EXE tersebut diatas (melalui command prompt maupun Windows Explorer) dapat kita lakukan.
2. Apabila Hardisk tidak bisa booting, maka kita harus mengambil hardisk tersebut dan memasangnya pada komputer yang lain, baru kemudian menjalankan perintah Checkdisk/CHKDSK.
3. Menggunakan CD Setup Windows dan jalankan perintah CHKDSK melalui Menu Recovery Console..
4. Menggunakan CD UBCD4WIN. Caranya klik Start - Program - Disk Tools - Diagnostic, klik Check Disk.
Demikianlah Postingan saya kali ini mengenai Cara memperbaiki hardisk yang rusak atau bad sector menggunakan utility bawaan Windows: Checkdisk/CHKDSK.EXE ini, Semoga bermanfaat dan teri kasih atas kunjungannya...
Read More Add your Comment 0 komentar
Backlink Berkualitas Menurut Google
Read More Add your Comment 3 komentar