Cài đặt tiện ích hộp trượt đề xuất bài liên quan ẩn hiện khi chúng ta cuộn con chuột lên xuống, hộp chứa các bài viết liên quan này dựa theo nhãn bạn đã đặt trong bài đăng bạn xuất bản. Tiện ích này rất bắt mắt giúp người xem truy cập thêm nhiều bài viết thú vị khác trên blog của bạn. Phù hợp với các blog có chủ đề dạng tạp chí, tin tức, shop bán hàng,.. trên blog cá nhân cũng được nữa.
| Tạo Hộp Đề Xuất Bài Viết Liên Quan Cho Blogspot Khi Cuộn Chuột |
Bây giờ chúng ta đi vào phần hướng dẫn:
Tạo Hộp Đề Xuất Bài Viết Liên Quan Cho Blogspot Khi Cuộn Chuột.
1. Đăng nhập vào Blogger.com → Chủ đề → Chỉnh sửa html.
- Thêm code bên dưới vào trước thẻ ]]></b:skin> hoặc </style>
{codeBox} /* Widget share by https://longkool1102.blogspot.com */ #chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out} .chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px} .chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px} a#chslidingbox-close,a#chslidingbox-close{margin-right:15px} .chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important} .chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px} .chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0} .chslidingbox-container >div >span{font-size:14px} .show{bottom:84px} .hide{bottom:-145px} .related-post{font-size:70%} .related-post h4{font-size:150%;margin:0 0 .5em} .related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none} .related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden} .related-post-style-2 li:first-child{border-top:none} .related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0} .related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal} a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out} a:hover.related-post-item-title{color:#2ecc71;text-decoration:none} .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
2. Tiếp theo Copy code dưới vào trước thẻ </body>
{codeBox} <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ $(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})}); //]]> </script> </b:if>
3. Sau đó ấn tổ hợp phím "Ctrl + F" tìm code <data:post.body/>. Thêm Đoạn code dưới đây vào bên dưới code <data:post.body/>
4. Lưu chủ đề lại và xem KẾT QUẢ
<b:if cond='data:blog.pageType == "item"'> <div class='show' id='chslidingbox'> <div class='chslidingbox-title chslidingbox-www'> <span style='float:left;margin:0 15px;'>Bài Viết Được Đề Xuất</span> <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span> <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span> <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span> </div> <div class='chslidingbox-container'> <div class='related-post' id='sliding-tab'/> <script type='text/javascript'> 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 relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4></h4>",numPosts: 2,summaryLength: 0, titleLength: "auto",thumbnailSize: 45,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "sliding-tab",newTabLink: true,moreText: "",widgetStyle: 2,callBack: function() {}}; </script> <script src='https://cdn.jsdelivr.net/gh/longkool/Blogger-Tips@master/recommended-slide-boxes-relatedpost.min.js' type='text/javascript'/> </div> </div> </b:if> {codeBox}
Lưu ý: numPosts: 2 → là số bài viết liên quan được hiển thị. Nếu thêm bài viết thì đồng thời bạn cũng phải tăng chiều cao của Hộp đề xuất.{alertWarning}
4. Lưu chủ đề lại và xem KẾT QUẢ
Tags:
Blogger Tutorials