Template Blogspot bán hàng luôn là từ khóa HOT được các blogger tìm kiếm nhằm xây dựng cho mình một website bán hàng ưng ý. Blogger Template for Seo xin chia sẻ 2 template blogspot cực đẹp làm Shop bán hàng. Hãy cùng xem Demo bên dưới để cảm nhận tính chuyên nghiệp từ 2 mẫu này.
Template Blogspot 1
Thiết kế để trưng bày các sản phẩm dưới dạng lưới, cùng slide mượt mà khiến hình ảnh shop trông cực kì chuyên nghiệp. Footer 3 cột - Điều mà các blogger luôn mong muốn để có thể đưa ra nhiều thông tin hơn đối với khách hàng.
Hướng dẫn chỉnh sửa template
- Sửa slider ảnh: Các bạn tìm link ảnh này trong code rồi sửa lại thôi:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdwK3YFCdLuxNYnqwloADs6jJd_I3noUVIUVE_dfp6a6B_bX3alb7h1f9wRt9huOq12j51p2NvTvPgDQzzAd4RH2T9l4dzSq9-CQQZO8RQDaw9xd2s__XEYmy6a-5KroBoyDGKB4u94YY/s1100/banner.jpg
Nếu không muốn nó hiển thị thì vào code tìm .banner rồi thêm thuộc tính sau vào trong ngoặc display:none. Để cho dễ nhìn thì các bạn tiêp tục tìm đoạn code dưới xóa nó đi:
body {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWS3RvURcetJ5W_fMRL3Hc8Xu2sQqWT94hQQAmp8KEF9ufxyop-lsr5ZtmYcJUAnoMIqyH2oeRbs1FKlBD49ddIh0KxyR3f4ZYCyXveGu_Vqbpy99Qx9Lb-cFi0MHL6Ym0DvY1M_LeB3o/s222/bg2.jpg") repeat-x #F3F3F3;
}
- Sửa hiển thị trang chủ
Các bạn up code lên xong các bạn vào Bố cục (Layout)
- Các bạn để ý đến cái 3 tiện ích HTML/Javascript đầu tiên rồi copy code dưới đây vào
HTML/Javascript 1 bạn copy code sau:
<style>
.welcome_body {
margin:30px;
}
.feat_container {
background-color:#DFDFDF;
background-position:initial initial;
background-repeat:initial initial;
font-weight:bold;
height:40px;
margin:0;
width:953px;}
.feat {
color:#333333;
float:left;
font-size:26px;
margin:5px 0 0 20px;
}
.all_prod {
float:right;
font-size:16px;
margin:10px 20px 0 0;
}
</style>
<div class="welcome_body">
<span style="font-size:26px;">Welcome to Sơnđôna.Shop</span>
<p>Sơnđôna.Shop – Cửa hàng Nội y online lớn nhất thị trường Việt Nam. Chuyên cung cấp các sản phẩm nội y cao cấp chính hãng và chất lượng, Sơnđôna.Shop chính là giải pháp mua sắm nội y tiện lợi nhất dành cho mọi phụ nữ.</p>
</div>
<div class="feat_container">
<div class="feat">Sơnđôna.Shop - Siêu khuyến mại</div>
</div>
HTML/Javascript 2 bạn copy code sau
<style>
.thumbcont {height:335px;margin:20px 0;width:975px;}
.cont {-webkit-box-shadow:#AFAFAF 0 0 5px;background-color:#FFFFFF;background-position:initial initial;background-repeat:initial initial;box-shadow:#AFAFAF 0 0 5px;display:inline-block; height:322px; margin-right:20px; width:220px;}
img.label_thumb {float:left;height:306px;margin:8px;width:207px;}
#info_cont {background-color:#000000;display:none;height:115px;margin-left:8px;opacity:0;padding:10px;position:absolute;top:377px;width:187px;}
</style>
<div class="thumbcont">
<div class="cont">
<a href="#" title="Dress Copule Korea Style Ibu Dan Anak DR 128907">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMSxq-jk92Cg-wYi-4FMGNcWwdYYXZh97t81FnfDtIJvWdDLkpnhYMKsMZKlR9fT_lxcADvVxkYVDePJo7RRDPyOKyniej0sbw_832E6ksSblhX28fuIEMEb9fmw9t4zAKyaLkVieGSU/s1600/2013_june_wannabe_lhomepage.jpg"/>
</a>
<div id="info_cont" style="opacity: 0; display: block;">
<div id="judul">
Dress Copule Korea Style Ibu Dan Anak DR 128907
</div>
<div class="detail_button">
<a href="http://shoppaholic-boutique.blogspot.com/2013/04/dress-copule-korea-style-ibu-dan-anak.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYvz2ClruAN72BnhxflZLk1FoYqPofGblgDn_osKlRD0JwqYhowxhFnH_2rXzLmeHm0oITZGkcfVuKUySEB7BcqAuXFrStZbyQ1VUM7A8-kuiCafNeXnBp-E_ELHDARXzbRAvQ83o2UE/s1600/2013_June_wacoal_Homepage.jpg" width="119px" height="21px"/>
</a>
</div>
<div class="price">IDR 168.000</div>
</div>
</div>
<div class="cont">
<a href="#" title="Dress Copule Korea Style Ibu Dan Anak DR 128907">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYvz2ClruAN72BnhxflZLk1FoYqPofGblgDn_osKlRD0JwqYhowxhFnH_2rXzLmeHm0oITZGkcfVuKUySEB7BcqAuXFrStZbyQ1VUM7A8-kuiCafNeXnBp-E_ELHDARXzbRAvQ83o2UE/s1600/2013_June_wacoal_Homepage.jpg"/>
</a>
<div id="info_cont" style="opacity: 0; display: block;">
<div id="judul">
Dress Copule Korea Style Ibu Dan Anak DR 128907
</div>
<div class="detail_button">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaJC3AYVw_N2z6rYgQwFMyznEc6hOxbZDHjtXFvo3nSNVTHxqNjt7nr7-T7AO8aaOy376YP13QaPcV7HnPCIOQjNJaZMx7uKjLCFhgCIhGwXHFq0-lD7sXZyy75rxB6RqieUPQdtEh_s/s1600/2013_June19_triump_Homepage.jpg" width="119px" height="21px"/>
</a>
</div>
<div class="price">IDR 168.000</div>
</div>
</div>
<div class="cont">
<a href="#" title="Dress Copule Korea Style Ibu Dan Anak DR 128907">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKyvsjG9Fj-PH3UFptCGmFYZt6-KDqieJHG09pAyryQob6PgiOu8zEjW2VK04avuB6TIj2MGtVnFpR1YyJG1GnfD_KFNxeNXT54uMDwDzCfGBAJPEnK5MPjFPNfXjsjID3rlQXyNflYmY/s1600/2013_june_ibasic3combo_Homepage.jpg"/>
</a>
<div id="info_cont" style="opacity: 0; display: block;">
<div id="judul">
Dress Copule Korea Style Ibu Dan Anak DR 128907
</div>
<div class="detail_button">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYvz2ClruAN72BnhxflZLk1FoYqPofGblgDn_osKlRD0JwqYhowxhFnH_2rXzLmeHm0oITZGkcfVuKUySEB7BcqAuXFrStZbyQ1VUM7A8-kuiCafNeXnBp-E_ELHDARXzbRAvQ83o2UE/s1600/2013_June_wacoal_Homepage.jpg" width="119px" height="21px"/>
</a>
</div>
<div class="price">IDR 168.000</div>
</div>
</div>
<div class="cont">
<a href="#" title="Dress Copule Korea Style Ibu Dan Anak DR 128907">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaJC3AYVw_N2z6rYgQwFMyznEc6hOxbZDHjtXFvo3nSNVTHxqNjt7nr7-T7AO8aaOy376YP13QaPcV7HnPCIOQjNJaZMx7uKjLCFhgCIhGwXHFq0-lD7sXZyy75rxB6RqieUPQdtEh_s/s1600/2013_June19_triump_Homepage.jpg"/>
</a>
<div id="info_cont" style="opacity: 0; display: block;">
<div id="judul">
Dress Copule Korea Style Ibu Dan Anak DR 128907
</div>
<div class="detail_button">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKyvsjG9Fj-PH3UFptCGmFYZt6-KDqieJHG09pAyryQob6PgiOu8zEjW2VK04avuB6TIj2MGtVnFpR1YyJG1GnfD_KFNxeNXT54uMDwDzCfGBAJPEnK5MPjFPNfXjsjID3rlQXyNflYmY/s1600/2013_june_ibasic3combo_Homepage.jpg" width="119px" height="21px"/>
</a>
</div>
<div class="price">IDR 168.000</div>
</div>
</div>
</div>
HTML/Javascript 3 bạn copy code sau
<style>
.new_container {
height:40px;
background:#dfdfdf;
width:953px;
margin:0;
font-weight:bold;
}
.new_container {
background-color:#DFDFDF;
background-position:initial initial;
background-repeat:initial initial;
font-weight:bold;
height:40px;
margin:0;
width:953px;
}
.all_prod_new {
float:right;
font-size:16px;
margin:10px 20px 0 0;
}
.new {
color: #333;
float: left;
font-size: 26px;
margin: 5px 0 0 20px;
}
.all_prod_new {
float: right;
font-size: 16px;
margin: 10px 20px 0 0;
}
.all_prod_new a {
color: #333;
}
.promo_cont {
width:953px;
height:160px;
margin-bottom:30px;
}
#promo_img {
float:left;
width:290px;
margin-right:40px;
}
#promo_img_l {
float:left;
width:290px;
}
</style>
<div class="promo_cont">
<div id="promo_img">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG0lmQelkMNmEdsR4kX1-XhwEqHCa1wN8mvwN9Dd4kSbZrr04Xnd_MEYB779SrkyEaswoepqdDQefidzSnEpvm1hTIWn2-oGjfiCE6j8EUpqNoOUOBsI5cVWQ9oFcXJKCBT5Qoa2m44pP9/s350/s1.jpg" width="290" height="158" alt="s1"/>
</a>
</div>
<div id="promo_img">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc4Yj4dsdfZunuut-Q6tJtYnxZ-jCduUW7aEQMM77qzCBzKKbXlnOjcP42-UesgDEeyG-eGoOp-mM4P2LlNC5iQ3t1dW3Cs_uwCKpPCwAiTLxqwYju7EiCg6_fYS8qU_7X4Gjt_HfMdoh3/s350/s2.jpg" width="290" height="158" alt="s1"/>
</a>
</div>
<div id="promo_img_l">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8wfPXsvF47QOD3PsvKubP3HTcWvt3Ddb0XTr3X6ql_F1Ie6GdRO5CBwNxdHwmHot9UX6ajVpawUDIx8gkMDqrI5olMKgFOliAeA2SGli6g1MeiUldSSFf9AhUPwQCNQjfvmyjva3g9De/s350/s3.jpg" width="290" height="158" alt="s1"/>
</a>
</div>
</div>
<div class="new_container">
<div class="new">Tin Mới Nhất</div>
<div class="all_prod_new">
<a href="http://sondollar.blogspot.com/search/label/V%C3%A1y">Hàng mới xem ngay</a>
</div>
</div>
Lưu ý: Các bạn nhớ chỉnh lại các câu từ cho phù hợp với shop của mình nhé!
Template Blogspot Shop 2
Một thiết kế chuyên nghiệp với Slide show, Footer 3 cột, Menu drop down mượt mà, page trên trang chủ được chia tự động. Bạn sẽ cảm nhận thấy những gì chúng tôi nói là sự thật sau khi xem Demo bên dưới :-)
Hướng dẫn chỉnh sửa template
- Sửa slider ảnh: Các bạn tìm link ảnh này trong code rồi sửa lại thôi:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RWmHnbFyhA_ZyYV5GxAjM6Lf2CJJH3_4a6PMyTB0Ln50C0pisM8h8oX5ev0Ii4Ep_J-XFYylsb3PaZwHDmnoeujtR3qo3NtpCBNpYf8gGe9sFcn1ioBKvZt_ow7exEXhmw0ZrN89b7M/s1600/alb_1384929312_229.jpg
- Sửa hiển thị trang chủ
Các bạn up code lên xong các bạn vào Bố cục (Layout)
- Các bạn để ý đến cái tiện ích HTML/Javascript trên cái Featured Post (TOP) rồi copy code dưới đây vào
<div class='featureticker-wrap'>
<div id='featuresticker'>
<div id='ticker'>
<ul class='ticker-list'>
<li>
<div class='ticker-head1'>
<h3><strong>Shop Bít Tuôt !</strong> Thiên đường của thời tang</h3>
<p>Nơi cung cấp các sản phẩm thời trang chất lượng</p></div>
<div class='ticker-head2'>
<div class='buttons buy'><a href='#'>Xem Ngay</a>
</div>
</div>
</li>
<div style='clear:both;'/>
<li>
<div class='ticker-head1'>
<h3><strong>Uy tín - Chất Lượng</strong> đó là điêu tôi đảm bảo</h3>
<p>Chúng tôi luôn đặt chữ tín lên hàng đầu và sản phẩn của chúng tôi là chất lượng nhất</p></div>
<div class='ticker-head2'>
<div class='buttons buy'><a href='#'>Xem Ngay</a>
</div>
</div>
</li>
<div style='clear:both;'/>
<li>
<div class='ticker-head1'>
<h3><strong>Giá rẻ nhất?</strong> điều chúng tôi cam đoan</h3>
<p>Với những mặt hàng chất lượng chúng tôi cũng cam đoan rằng giá các sản phẩn của chúng tôi sẽ là rẻ nhất</p></div>
<div class='ticker-head2'>
<div class='buttons buy'><a href='#'>Xem Ngay</a>
</div>
</div>
</li>
<div style='clear:both;'/>
<li>
<div class='ticker-head1'>
<h3><strong>Địa chỉ liên hệ</strong> trụ sở chính</h3>
<p>Tòa nhà chọc trời 2 tầng - 1000 Minh Khai - HBT - Hà Nội</p></div>
<div class='ticker-head2'>
<div class='buttons buy'><a href='#'>Đi ngay</a>
</div>
</div>
</li>
<div style='clear:both;'/>
<li>
<div class='ticker-head1'>
<h3><strong>Địa chỉ liên hệ?</strong> hãy gửi mail cho Bít Tuốt:)</h3>
<p>Hãy liên hệ với tôi qua gmail: Seo.vnpro@gmail.com</p></div>
<div class='ticker-head2'>
<div class='buttons buy'><a href='#'>Gửi luôn</a>
</div>
</div>
</li>
<div style='clear:both;'/>
</div></div></div></div></div></ul>
</div>
</div></div>
Các bạn để ý đến cái tiện ích Featured Post (TOP) rồi copy code dưới đây vào
<ul class="label_with_thumbs">Lưu ý: Các bạn nhớ chỉnh sửa câu từ cho phù hợp với Shop nhé!
<li class="clearfix">
<a class="picturelabela" target="_top" href="http://shopbittuot2.blogspot.com/">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZoDV-Qu-2hscAISh9kfmqV3fxZoPZB6N5yOKfmiXLhM8SdUnJv7cmH56pgggrI0RQ7Fr_GvgKWXzt3zYLKnD9iBUP9WjQRyrGJ9-vIFrSAd_FDyGR4-0-5wclxuXrj-l_bk4tpOQHUnA/s1600/1384900786.png" />
</a>
<strong>
<h2>
<a class="titlelabel" target="_top" href="http://shopbittuot2.blogspot.com/">Áo Thời Trang</a>
</h2>
</strong>
<div class="contento">
Tổng hợp các mấu áo mới nhất - hot nhất hiện nay. Shop Bít Tuốt thiên đường của thời trang và phụ kiện nơi cung cấp các sản phẩm thời trang chất lượng ...
<br />
<a class="url" target="_top" href="http://shopbittuot2.blogspot.com/">Chi Tiết »</a>
</div>
</li>
<li class="clearfix">
<a class="picturelabela" target="_top" href="http://shopbittuot2.blogspot.com/">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9UWo_K59mw5eG0ls7mIXLiuBN9OQOJAQjyfyX5N468ASJ981OrejlYEbBoO7TC8u4AKGAwQKg7jo_Tzg6KcuXqRc41ygGS4G_0YaWlMcyFyNminBV8ZL-HL-2gKBaRTfV3yGweK0sMA/s1600/vay.png" />
</a>
<strong>
<h2>
<a class="titlelabel" target="_top" href="http://shopbittuot2.blogspot.com/">Váy Thời Trang</a>
</h2>
</strong>
<div class="contento">
Tổng hợp các loại váy: váy đầm, váy thời trang thu dông, váy công sở đẹp nhất...Shop Bít Tuốt thiên đường của thời trang và phụ kiện nơi cung cấp các sản phẩm thời trang chất lượng
<br />
<a class="url" target="_top" href="http://shopbittuot2.blogspot.com/">Chi Tiết »</a>
</div>
</li>
<li class="clearfix">
<a class="picturelabela" target="_top" href="#">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6x2IH7EOtLW6lXnHL7UMvPLLOhgkMAAinIdDqiRHZ6tH45kRkYxXlcNLV0k23sPiPNklJlSaABr2XbMkNXdChmtQ5sOhStY806eg6eMHip0Nwchvl8sAMBhUAw5PjGWIspUu2CJwNk2Q/s1600/quan.png" />
</a>
<strong>
<h2>
<a class="titlelabel" target="_top" href="http://shopbittuot2.blogspot.com/">Quần Thời Trang</a>
</h2>
</strong>
<div class="contento">
Tổng hợp các mẫu quần mới nhất , đẹp nhất hợp với xu hướng nhất.Shop Bít Tuốt thiên đường của thời trang và phụ kiện nơi cung cấp các sản phẩm thời trang chất lượng
<br />
<a class="url" target="_top" href="http://shopbittuot2.blogspot.com/">Chi tiết »</a>
</div>
</li>
<li class="clearfix">
<a class="picturelabela" target="_top" href="http://shopbittuot2.blogspot.com/">
<img class="label_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnUGxgVslhU6Aye8obM8u9guRc3HlqDfEYGLe4LcHc1Bjh8H94Unj5y9YltSFp4jVbrxM8pjS_4pBp0GC4gAWlKKx9b6WQAR6fFm9mXo3SylfgrP1GAq3q3v1X2MxiSbCh9kvtnIg2GY/s1600/giay.png" />
</a>
<strong>
<h2>
<a class="titlelabel" target="_top" href="http://shopbittuot2.blogspot.com/">Giày Thời Trang </a>
</h2>
</strong>
<div class="contento">
Tổng hợp các mẫu giày mớinhất hợp thời trang nhất. Shop Bít Tuốt thiên đường của thời trang và phụ kiện nơi cung cấp các sản phẩm thời trang chất lượng...
<br />
<a class="url" target="_top" href="http://shopbittuot2.blogspot.com/">Chi tiết»</a>
</div>
</li>
</ul>
Chúc các bạn tạo ra được những Shop ưng ý với bản thân nhé!
Các file được lấy từ Bittemplate. Cảm ơn đã chia sẻ miễn phí các template blogspot bán hàng chuyên nghiệp này.
No comments:
Post a Comment