Chia sẻ Template Blogspot tin tức Responsive đẹp

Đây là một mẫu blogspot được Icodevn chia sẻ trong thời gian trước đó. Nay Blogger Template for Seo xin chia sẻ và hướng dẫn các bạn cách thiết kế template blogspot tin tức responsive đẹpnày.

Xem Demo | Tải về

Hướng dẫn chỉnh sửa Bố cục

bạn click Layout (Bố cục) bạn có bố cục như sau:

Bạn click Tab 1 Top Area thêm đoạn cod

<div id="simplesidepost"></div>
<script type='text/javascript'>
$('#simplesidepost').cbrnewpost({
postType:"h",
tagName:"Movies"
});
</script>

Với Movies là tên nhãn của bạn muốn hiển thị tên. chú ý tên nhãn có dấu thì khoảng cách sẽ cho %20 ví dụ "công%20trình%20mới"
Tiếp theo bạn click sang Tab 2 Tech News và Thêm đoạn code

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Game?published&alt=json-in-script&callback=labelthumbs"></script>

Với Tab thứ 3 bạn cũng có thể làm như Tab 2 và thay đoạn chữ Technews Thành nhãn mà bạn muốn hiển thị.

Đối với Slide ảnh Bạn click vào button như hình dưới:

Sau đó thêm vào đoạn code :

<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
  
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
  
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
  
<li>
<a href="Link-url"><img src="Image-Url" /></a>
<div class="massage">
<div class="slider-title"><a href="Slider-title-url">Slider-Title</a></div>
discription for slider</div>
</li>
</ul>
</div>
</div>
  
<div style='clear: both;'/>
<script>
$(document).ready(function () {
$('.flexslider').flexslider({
animation: 'fade',
controlsContainer: '.flexslider'
});
});
</script></div>

Chú ý :
Link-url : Là Link url muốn trỏ đến
Image-Url :Link Ảnh

Sidebar bên phải bạn có thể chọn widget tùy ý

Lưu lại và tận hưởng thành quả.
Chú ý tắt chế độ xem mặc định bằng điện thoại, template reponsive nên nhìn sẽ rất đẹp trên mọi loại màn hình.
Mọi Thắc mắc vui lòng comment sẽ được giải đáp. Chúc các bạn thành công.