Trình bày phong cách báo chí cho blogspot

Nguồn:thuthuat.voquocan

Bạn thích thú với cách trình bày bài viết của những website tin tức lớn như zing news, vnexpress, docbao,... nhưng không biết làm thế nào với trang Blog của mình. Dưới đây là thủ thuật nhằm giúp cho cộng đồng blogger có thêm sự lựa chọn trong cách trình bày bài viết theo chuyên mục sao cho đẹp và chuyên nghiệp hơn.

1. Tác Giả: Võ Quốc An.

2. Đánh giá:

Ưu điểm:

- Có thể sử dụng cùng lúc nhiều mẫu mà không bị xung đột code.

- Các bài viết gọi ra đã được tối ưu hóa về SEO

- Tốc độ load ở mức chấp nhận được.

- Tương thích với mọi kích thước chiều ngang (hoạt động tốt nhất với kích thước chiều ngang khoảng 600px đến 700px) (trừ mẫu 5 chỉ hoạt động tốt với kích thước chiều ngang 500px)

Nhược điểm:

Với các bài viết có ảnh thumbnail là ảnh đứng thì sẽ hiển thị không được đẹp lắm. Vì trong plugin này lấy toàn ảnh ngang.

3. Hướng dẫn thủ thuật:

- Vào Mẫu --> Chọn chỉnh sửa.

- Chèn đoạn code này phía trên thẻ </head>

<script src=' https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='https://googledrive.com/host/0B-PN1SIugzO-a1ZJcVBaZG5YR1k' type='text/javascript'/>
<link href="https://googledrive.com/host/0B-PN1SIugzO-LXlISHZwMVVGQlU" rel="stylesheet" type="text/css" media="screen" />
<style type='text/css'>
#Blog1{display:none}
</style>
</b:if>

Lưu ý: nếu trong template đã có file jquery thì bỏ đoạn code màu đỏ đi để tránh xung đột code.

- Trong chỉnh sửa nhấn "Ctrl + F" dùng từ khóa "Blog1" tìm đoạn code sau:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>...</b:widget>
</b:section>

- Chèn các mẫu bạn muốn hiển thị ở phía trên đoạn code vừa tìm được:

Mẫu 1:

 

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box01'>
<ul class='boxmenu'>
<li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
<li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
<li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox01'/>
</div>
</b:if>

Mẫu 2:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box02'>
<ul class='boxmenu'>
<li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
<li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
<li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox02'/>
</div>
</b:if>

Mẫu 3:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box03'>
<ul class='boxmenu'>
<li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
<li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
<li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox03'/>
</div>
</b:if>

Mẫu 4:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box04'>
<ul class='boxmenu'>
<li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
<li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
<li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox04'/>
</div>
</b:if>

Mẫu 5:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box05'>
<ul class='boxmenu'>
<li><a href='http://thuthuat.voquocan.com/p/blogger.html'>Blogger</a></li>
<li><a href='http://thuthuat.voquocan.com/p/code.html'>Tự Học Thiết Kế Web</a></li>
<li><a href='http://thuthuat.voquocan.com/p/template.html'>Blogger Template</a></li>
</ul>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox05'/>
</div>
</b:if>

Mẫu 6:

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box06'>
<div class='box06a'>
<h2><a href='http://thuthuat.voquocan.com'>Thủ Thuật Blogger</a></h2>

<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox06a'/>
</div>
<div class='box06b'>
<h2><a href='http://kts.voquocan.com'>Blog Kiến Trúc</a></h2>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=voquocanbox06b'/>
</div>
<div style='clear:both'/>
</div>
</b:if>

Lưu ý:

6 mẫu code ở trên là lấy ra tất cả bài viết trên blog. Nếu chỉ muốn lấy bài viết của 1 label thì thay:

/feeds/posts/default?

thành

/feeds/posts/default/-/Tên Label?

Những chổ đánh dấu màu đỏ bạn sửa lại cho phù hợp với Blog của mình.

Mẫu 5 có kích thước chiều ngang cố định là 500px.

Mẫu 6 là mẫu kép nên nếu dùng thì nên dùng cho 2 label.

Nếu bạn biết IT có thể vào file css màu da cam ở trên sửa mẫu cho phù hợp với Blog của mình rồi up lên googledrive hoặc dropbox để dùng.

Chúc các bạn vui vẻ !