Code blogger làm đẹp giao diện trang chủ

Trang chủ là trang đầu tiên khi vào web việc chỉnh sửa làm đẹp cho trang này giúp chúng ta có giao diện thân thiện với người dùng góp phần gia tăng lượng truy cập cũng như cải thiện thứ hạng cho blog-web công ty, cá nhân.

 

Tương tự như cách làm đẹp và chỉnh sửa giao diện trang bài viết , để làm đẹp cho trang chủ sử dụng nền tảng blogger điều đầu tiên chúng ta cần xem Bố cục trang bài viết giao diện hiện tại  :

Thông thường giao diện trang chủ có bố cục như sau :

1. Menu điều hướng
2. Side bar (Bên Trái, Bên Phải)
3. Quảng cáo banner bên trái và bên phải
4. Phần hiển thị nội dung trang chủ bao gồm
5. Phần cuối trang

Xem một số trang chủ blogger bố trí đẹp tiêu biểu :

https://chiasetemplatevn.blogspot.com
https://phanmemhay24.blogspot.com
http://blog-xtraffic.pep.vn/
https://landgonow.com
https://www.blogthuthuatwin10.com/
https://www.windows2it.com/
https://sonzim.com/
http://tapchicntt.com/

Tổng hợp một số thủ thuật blogspot - code web làm đẹp và chỉnh sửa trang chủ blogger :

1. Thêm quảng cáo xuống dưới bài viết đầu tiên Blogger

Link hướng dẫn thủ thuật : https://kslzone.blogspot.com/2014/01/them-quang-cao-xuong-duoi-bai-viet-au.html

2. Chèn quảng cáo dưới bài viết bất kì tại trang chủ cho Blogger

Link hướng dẫn thủ thuật : https://kslzone.blogspot.com/2014/03/chen-quang-cao-tai-trang-chu-blogger-blogspot.html

Tóm tắt nội dung thủ thuật :

Bước 1 : Tìm đoạn mã sau :

<b:loop values='data:posts' var='post'>
Chỉnh sửa thêm thuộc tính index='i' vào thẻ đó
<b:loop values='data:posts' var='post' index='i'>

Bước 2 : Tìm đoạn code sau :

<b:include data='post' name='post'/>

chèn bên dưới đoạn mã sau :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:i == 2'>
Mã quảng cáo của bạn
</b:if>
</b:if>


3. Tạo trang homepage riêng cho trang nhãn nhất định

Link hướng dẫn thủ thuật : http://tranphucminh.blogspot.com/2011/09/tao-trang-homepage-rieng-cho-trang-nhan.html

4. Cách Ẩn Một Nhãn Trang Chủ Cho Blogger :

Link hướng dẫn thủ thuật : https://blog.landgonow.com/2011/11/bai-viet-o-trang-chu.html
 
5. Hiển thị bài viết thuộc Label nhất định ở trang chủ Blogger :

Link hướng dẫn thủ thuật : http://tapchicntt.com/2014/10/09/blogger-hien-thi-bai-viet-thuoc-label-nhat-dinh-o-trang-chu/

6. Cách không cho bài viết hiển thị ngoài trang chủ blogger

Link hướng dẫn thủ thuật : https://trungdan.com/cach-khong-cho-bai-viet-hien-thi-ngoai.html

7. Hiển thị Widget ở những trang nhất định trong Blogspot

Link hướng dẫn thủ thuật : https://blog.landgonow.com/2011/07/hien-thi-widget-o-nhung-trang-nhat-inh.html

8. Chèn tiện ích đám mây nhãn cho blogger :

Link hướng dẫn thủ thuật : http://www.ivietpr.com/2019/02/4-thu-thuat-chinh-sua-template-coming-soon-ket-hop-landing-page-lam-trang-seo-gioi-thieu-cong-ty-ca-nhan-cuc-ky-ba-dao.html#phan-2

9. Các dạng menu làm web-blog

-Tạo menu tổng hợp : http://www.ivietpr.com/2017/09/code-menu.html
-Tạo menu xổ dọc : https://blog.landgonow.com/2013/02/dropmenu-style-black-for-blogger.html
-Tạo menu CSS3 : https://www.thuthuatweb.net/blogspot/tao-css3-dropdown-menu-an-tuong-trong-blogger.html
-Tạo menu cố định khi cuộn trang (sticky menu) : https://www.tranbadat.com/2015/07/huong-dan-tao-thanh-menu-truot-sticky-menu.html

10. Tạo thanh công cụ :

- Tạo thanh công cụ cố định bên phải với hiệu ứng tuyệt đẹp cho Blogspot  : https://www.bacsiwindows.com/2018/01/tao-thanh-cong-cu-co-dinh-ben-phai-voi-hieu-ung-tuyet-dep-cho-blogspot.html
- Tạo widget Liên Kết Bạn Bè 3 cột giống Facebook cho Blogspot   : https://www.bacsiwindows.com/2017/11/tao-widget-lien-ket-ban-be-3-cot-giong-facebook-cho-blogspot.html

Các Thủ Thuật khác :
Tạo link thu gọn bằng Javascript
Tạo Tab nội dung
Cách chia Footer thành 3 cột
Tiện ích Recent Posts with 3 columns for Blogger Recent Posts with 3 columns for Blogger
Kiểu 1 : http://hocaothutcunghito.blogspot.com/2011/09/tien-ich-recent-posts-with-3-columns.html
Kiểu 2 : https://blog.landgonow.com/2012/05/recent-post-width-thumbnail-3-cot-cho.html

 Tìm các từ khóa sau để chỉnh sửa làm đẹp cho trang chủ :

Html cơ bản và nâng cao | CSS cơ bản và nâng cao | Javascript cơ bản đến nâng cao | Thẻ điều kiện blogspot | Thẻ data blogspot | Thủ thuật blogger 2019 | Tìm hiểu các đối tượng trong blogspot

Hướng dẫn của google và blogger.com :

Thẻ tiện ích cho bố cục : https://support.google.com/blogger/answer/46995?hl=vi&ref_topic=6321969
Thẻ phần tử trang bố cục : https://support.google.com/blogger/answer/46888?hl=vi&ref_topic=6321969

Tham khảo một số Template giao diện đẹp 2019 :

Blog Coupon Blogger Template
Sora Front Blogger Template
Best Result Blogger Template
InJob Blogger Template
Lucy Beauty Blogger Template
Sora Jobs Blogger Template

CODE TẠO TRANG BLOGSPOT TRỐNG.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>

Thêm nội dung trang web - blogspot  của bạn sau cặp thẻ dưới đây (ví dụ thêm nhãn, thêm wiget - bạn có thể điều chỉnh Class - id phù hợp với web của mình) :

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>


Link liên kết   :

• Cách làm đẹp giao diện trang bài viết blogger 
• Mẹo vặt khi chỉnh sửa giao diện blogger 
• Tạo trang Blogspot trống - tự code web - thiết kế giao diện blogspot theo ý thích