[BS]Template Blogspot tin tức hỗ trợ Responsive cực chuẩn

Nếu đang muốn tìm Template Blogspot tin tức có hỗ trợ Responsive thì đây sẽ là sự lựa chọn không khiến bạn thất vọng. Bởi lẽ, Template Blogspot này mang đến những tính năng và ưu điểm vượt trội trong việc xây dựng Website tin tức. Hãy cùng tìm hiểu những tính năng và ưu điểm đó trong bài viết này.

>>

Những tính năng nổi bật:

• Thiết kế bố cục đẹp mắt, màu sắc tươi sáng phù hợp với Blog tin tức.
• Slider nhanh, mượt mà.
• Có Menu Dropdown, Box Search, Breaking News, Button Social.
• Footer 4 cột chuyên nghiệp.
• Hỗ trọ nhiều vị trí đặt quảng cáo Google Adsense.
• Chuẩn SEO 100%.
• Thiết kế hỗ trợ Responsive tăng khả năng hiển thị trên Mobile, Tablet, PC.
• Hiển thị tốt trên nhiều nền tảng trình duyệt.
• Cùng nhiều tính năng nổi bật khác.

Cách chỉnh sửa:

Một vài hướng dẫn nhỏ dưới đây sẽ giúp bạn chỉ sửa Template Blogspot này dễ dàng hơn rất nhiều.

Cách chỉnh sửa bố cục (Layout):

Bạn tìm đến phần Bố cục như ảnh bên dưới và chúng ta sẽ bắt đầu chỉnh sửa.

Đầu tiên click vào Tab 1 Top Arena sau đó bạn thêm vào đoạn code dưới đây. Lưu ý với "Movies" ở đây chính là tên nhãn, bạn thay đổi tên nhãn cho phù hợp với ý định của mình và chú ý tên nhãn có dấu cách sẽ là "Template%20Blogspot%20Tin%20Tức".

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

Tiếp đến Click Tab 2 Tech News rồi thêm vào đoạn code dưới đây:

<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 cuối bạn cũng có thể làm giống Tab 2 nhưng đổi tên nhãn Tech News bằng tên nhãn khác mà bạn muốn hiển thị.

Cách chỉnh sửa Slide:

Để chỉnh sửa Slide trong Template Blogspot này bạn tìm đến mục như trong ảnh dưới đây rồi thêm đoạn code bên dưới vào đó. Lưu ý "Image-Url" chính là Link ảnh "Link-Url" chính là link bài viết bạn muốn đặt vào.

<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ỉnh sửa sidebar:

Để chỉnh sửa sidebar bạn tìm đến mục như hình bên dưới và lựa chọn tùy ý các widget theo ý định của mình.

Lư ý: Do Template Blogspot này hỗ trợ Responsive bởi vậy bạn nên tắt chế độ mặc định xem bằng điện thoại đi.

Chia sẻ Template Blogspot tin tức hỗ trợ Responsive:

Download | Demo

Hi vọng với Template Blogspot vừa chia sẻ bạn đã có thể tìm được một giao diện ưng ý dành cho mình. Chúc bạn thành công với dự án đang thực hiện.