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.

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