Hôm nay Blog chúng tôi sẽ Chia sẻ một thủ thuật nhỏ về Tạo hộp Bài viết liên quan cho Blogspot.

DEMO

Hộp Bài viết liên quan sẽ xuất hiện trong bài viết khi ta cuộn xuống, do đó sẽ thu hút sự chú ý của đọc giả. Bằng cách làm như thế sẽ giúp Website của chúng ta tăng lượt xem khá nhanh.

Chúng ta bắt tay vào làm nhé !

Bước 1 : Bạn đăng nhập vào Blogger

Bước 2 : Vào Mẫu > Chỉnh sửa HTML

Bước 3 : Sao chép đoạn CSS sau dán vào bên trên ]]></b:skin>

#related-box { z-index:99999999; width: 350px; overflow: hidden; height: 200px; position: fixed; bottom: 20px; right: 20px; background: #fff; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29); transition: all 0.5s; } #related-box .header h2 { font-size: 15px; margin: 0; } #related-box .header { padding: 10px 15px; color: #fff; background: #7577a9; } #related-box .tombol { position: absolute; top: 10px; right: 15px; } #related-box .item { padding: 15px; width: 350px; float: left; } #related-box .list { height: 120px; overflow: hidden; width: 600px; transition: all 0.5s; } #related-box .gambar img { height: 100px; float: left; width: 50%; margin-right: 10px; } #related-box .header a { color: #fff; opacity: 1; font-size: 17px; } #related-box .info { width: 150px; font-size: 10px; color: #222; padding: 0 0 5px; margin: 0 0 5px; display: table; } #related-box span { font-size:13px } #related-box .navigation a { width: 17px; height: 20px; line-height: 21.3px; float: left; border: 1px solid rgba(0, 0, 0, 0.32); margin-left: 10px; font-size: 12px; } #related-box .navigation a:hover { background:linear-gradient(120deg,#7577a9,#6d9698); color:#fff; border:1px solid rgb(117, 119, 169); } #related-box .navigation { position: absolute; width: 60px; right: 20px; bottom: 20px; } .relatedshow { position: fixed; z-index:99999999; bottom: 190px; right: -50px; transition: all 0.5s; } .relatedshow a { color: #fff; background: #7577a9; padding: 7px 15px; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);} .relatedshow a:hover { color: #fff; } i.fa-chevron-left{margin-left:2.5px} i.fa-chevron-right{margin-left:3.7px}
Bước 4: Thêm đoạn CSS sau vào dưới thẻ <data:post.body/>

<script type="text/javascript">// Related Article Settings var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>]; var relatedbox = { homepage : 'http://www.bloggerku.com', // Change with your homepage url title: 'Related Post', // Widget Title post: 3, // Max post date: true, // Show date scr: 500, // Show the related box if scroll more than 500 showcredit: true // Add credit link to support bloggerku.com }; </script><script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>
* Chỉnh sửa * :
homepage: 'http://www.bloggerku.com/', thành URL website bạn
title: 'Related Post', thành tên Widget bạn muốn hiển thị
post: 3, Số bài viết bạn muốn hiển thị
date: true, Hiển thị ngày. Nếu không muốn hiển thị ngày bạn đổi  true thành flase
scr: 500, Khoảng cách bạn muốn Widget hiện
Bước 5 : Lưu lại và xem thành quả.
Chúc các bạn thành công !

THẮC MẮC

#Nguồn: BloggerKu

Mọi Bài Đăng Đều Được Đăng Tải Bởi Tác Giả Blog. Vui Lòng Ghi Nguồn Nếu Có Copy Bài Từ Blog Chúng Tôi.

#Label :

• Thủ Thuật Blogspot

#Share :

Share Share Share Share Share