ANH VIET IT: Tổng hợp template

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.

Chia sẻ 2 Template Blogspot làm Shop bán hàng

Xem Demo | Download Template

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/AVvXsEgQNNrk4FVi1CIxMSuyoOgfHY5OzuYgfZAl2osclhMbaQtPoJzFpvX8zqOB-JwXhktEeoQqS4NBGJUK_1A5eSyTjYg0rHyNjHqm-T5u4bRVyLyLTUsZ3mq_2f5p0v_2YnqPhnyADx7CkxBY/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ặcdisplay: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/AVvXsEjFLxsszzYtyBril0zlqQvP5eSAfLHLxkPqcfeKjxWbGbSTrKXJ5lz8AdoMM105DtUw29mZrWMaQHYw6EMkDydsEVsR-MpapZUIwnCVSdML95ZD6E0gqu7sak8wPIMeG4la7nQqf1psHAqA/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/AVvXsEhQQnMnJG3AxBxevC7G8Db83bNjH9GfCqgvArosYMypdXFMTfVOUT3oggbuNU3DwdAPIr5DiNdX3lc1qkS-Ze1wMxs1XCIs0YfRyfbsxWPvOg8lTkhb7eHASkSuA3rR1r_T2ub4ToDuskk/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/AVvXsEhvbBxaBvvdaUhDtlNELG64V2hBf_lS5kad0l0u8_A6Gr2RL2bMaalOSlo6mwlbca4H111UoWFcJhTAimP7k9GOBEN4LLik3qAELWW2CcxGDkkMOhawg97PFNTAAgHqCcqL12w7p6S-a_I/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/AVvXsEhvbBxaBvvdaUhDtlNELG64V2hBf_lS5kad0l0u8_A6Gr2RL2bMaalOSlo6mwlbca4H111UoWFcJhTAimP7k9GOBEN4LLik3qAELWW2CcxGDkkMOhawg97PFNTAAgHqCcqL12w7p6S-a_I/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/AVvXsEhgiZd-nV02jORwB0N4mehc4V8S8zxkf4FKqSIU-tcTL7E9TukdJo3Wrp3cA-9hfeO_6F46s5it4qXvdVp1QIKNL25PHWvuR4_Xps22Mv0ba39q9yYlMsA5YcduhVMmPKHCTekgFc7MeJ4/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/AVvXsEgTRdCLl084PJBvOODxQnt3_rx6axgVZ0LnGH8kBg9T9XsWfSB2LCwQ-NDl3hHh8VgBV_3iGVX_U4AoUYrZlw_zmaewfWEKaB4b5U9bvHEDMMWvL161EYZKX3acTwM7nYN86wdrRKURpHg/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/AVvXsEhvbBxaBvvdaUhDtlNELG64V2hBf_lS5kad0l0u8_A6Gr2RL2bMaalOSlo6mwlbca4H111UoWFcJhTAimP7k9GOBEN4LLik3qAELWW2CcxGDkkMOhawg97PFNTAAgHqCcqL12w7p6S-a_I/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/AVvXsEhgiZd-nV02jORwB0N4mehc4V8S8zxkf4FKqSIU-tcTL7E9TukdJo3Wrp3cA-9hfeO_6F46s5it4qXvdVp1QIKNL25PHWvuR4_Xps22Mv0ba39q9yYlMsA5YcduhVMmPKHCTekgFc7MeJ4/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/AVvXsEgTRdCLl084PJBvOODxQnt3_rx6axgVZ0LnGH8kBg9T9XsWfSB2LCwQ-NDl3hHh8VgBV_3iGVX_U4AoUYrZlw_zmaewfWEKaB4b5U9bvHEDMMWvL161EYZKX3acTwM7nYN86wdrRKURpHg/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/AVvXsEhVaDDMnEjJ-C5jZMd_xrcBFIGJLjKqYW-78CLoqQRzpj5rPHENQWYMS4SFjBiu54J7dYP8PW203E4thlqi4BZH9VAiRShF-ovfaLY9zFiSb98ShDes9dL5O8G9Vqn6TRFz25TeUbeNo8ot/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/AVvXsEiZ_eTiuq3ALzriBa2jeHcFb-Z9bE6tbZRrby4Yo-4OWIiYouP8x6DxekNJGHiJpQxWWIC7W4ZFTVeVB-cxNTzJCMiqBHV4ScE17Sm8pK1_kXQKJ2vn3fpSkM1hq0WxHgAWkUvSNHfOZ93P/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/AVvXsEiJbvSQpqejboFSKmUg_mNyAt6nMwXs3nXOOqdsbZIi-dXI7ucM7I9zqeB_qesqbE1D5zqfewyHrW21DUFZmTKwBr93APG0vuI7p8wklgnLSUGX9NrBpIAGxWh6kj5H9t6Hza2pWHkZICk-/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é!

Nguồn: bloggertemplate4seo

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đây là 10 Template blogspot có tốc độ tải trang nhanh và Seo thân thiện nhất năm 2014 dành cho các blogger. Có một vài mẫu với các chủ đề khác nhau, nhưng chúng tôi đánh giá về phương diện tốc độ tải trang và tối ưu hóa với các công cụ tìm kiếm. Hãy cùng xem các mẫu mà chúng tôi giới thiệu bên dưới.

Hi vọng bạn sẽ thích những mẫu mà chúng tôi vừa giới thiệu. Hãy chia sẻ bài viết này để có thể nhiều người biết đến những template này hơn. Chúc các bạn có những website phát triển tốt!

Nguồn: bloggertemplate4seo

Đọc tiếp...

Xem bài viết trên phiên bản di động