Phân trang (page navigation) là một tiện ích mà tất cả các blogger chuyên nghiệp và bán chuyên nghiệp đều dùng. Ngoài mục đích làm đẹp còn để blog tải nhanh và giúp độc giả tiện theo dõi các bài viết của các bạn hơn. Tuy nhiên có một lỗi mà hầu hết người dùng blogger đều mắc phải là khi click vào xem nhãn trang index hay trang chủ thì số bài đăng hiển thị trên 1 trang lại lên đến 20 theo mặc định hoặc thiếu số bài…
Read MoreChia sẻ đoạn code slideshow trình chiếu ảnh cho blogspot rất đẹp, phù hợp với cả các website và các mã nguồn mở khác. Với hiệu ứng chuyển động mượt mà, khá nhẹ nhàng và dễ tuỳ biến Hướng dẫn chèn code slideshow trình chiếu ảnh vào blogspot: Bước 1: Bạn đăng nhập Blogger -> Mẫu -> Nhấn tổ hợp phím Ctrl F và tìm đến thẻ ]]></b:skin sau đó dán đoạn CSS sau lên phía trên img{max-width:100%}.sliderz-wrapper{overflow:hidden;width:100%;max-width:1340px;max-height:400px;margin:auto;position:relative;margin-bottom:20px}.sliderz-entry-list-wrapper{position:relative;width:100%;height:0;padding-top:30%;left:0;transition:.5s all cubic-bezier(0.78,-0.1,0.58,1)}.sliderz-entry-list{display:flex;justify-content:space-around;position:absolute;width:100%;height:100%;top:0;left:0}.sliderz-entry{width:33%;height:100%;box-sizing:border-box}.sliderz-preview-img{width:100%;height:100%}.sliderz-prev,.sliderz-next{width:50px;height:100%;position:absolute;z-index:2;opacity:.1;transition:.5s all ease-out;cursor:pointer}.sliderz-next{right:-20px;top:0}.sliderz-wrapper:hover .sliderz-prev,.sliderz-wrapper:hover .sliderz-next{opacity:1}.sliderz-prev-btn,.sliderz-next-btn{font-size:40px;position:absolute;top:46%;width:50px;height:50px;z-index:3;color:#fff;transition:.5s all ease-out}.sliderz-wrapper .sliderz-prev-btn{left:-30px}.sliderz-wrapper .sliderz-next-btn{right:-30px}.sliderz-wrapper:hover .sliderz-prev-btn{left:10px}.sliderz-wrapper:hover .sliderz-next-btn{right:10px}.sliderz-pick{position:absolute;top:10px;right:10px;display:flex}.sliderz-pick…
Read MoreHướng dẫn tạo menu dọc đa cấp cho blogspot đơn giản. Code này áp dụng cho tất cả các website được viết bởi php, asp, wordpress… Menu dọc đa cấp được tối ưu nhỏ gọn và đầy đủ chức năng chuẩn Mobile. HƯỚNG DẪN THỰC HIỆN Bước 1: Bạn đăng nhập Blogspot -> Mẫu -> Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên trước thẻ đó #cssmenu-doc,#cssmenu-doc ul,#cssmenu-doc ul li,#cssmenu-doc ul li a{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#cssmenu-doc{width:200px;font-family:Helvetica,Arial,sans-serif;color:#fff;margin:70px auto}#cssmenu-doc ul ul{display:none}.align-right{float:right}#cssmenu-doc > ul > li…
Read MoreHướng dẫn tạo bài viết liên quan (related post) 3 cột có ảnh Thumbnail cho blogspot đẹp ấn tượng, bạn có thể tùy chỉnh số lượng cột. Giúp tăng lượt tương tác với bài viết hơn và giữ chân người đọc nhiều hơn. Hướng dẫn tạo related post có ảnh Thumbnail cho blogspot Bước 1: Bạn dán đoạn CSS sau lên phía trên thẻ ]]></b:skin> trong mẫu .related-post-thumbnail{padding:20px 0 0;float:left;width:100%}.related-post-thumbnail li{width:32.3333333%;float:left;margin-right:1.5%;position:relative}.related-post-thumbnail li:nth-child(3n){margin-right:0}.related-post-thumbnail img{width:100%;height:auto}.related-post-thumbnail h3{border-left:0;padding-left:0;color:#CB2027;margin:0}.related-post-thumbnail img{-webkit-filter:brightness(85%);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}.related-post-thumbnail img:hover{-webkit-filter:brightness(100%)}@media (max-width:500px) {.related-post-thumbnail li{width:49.5%;margin-right:.5%;min-height:170px}.related-post-thumbnail li:nth-child(2n){margin-right:0;float:right}.related-post-thumbnail li:nth-child(3n){margin-right:.5%}}@media…
Read MoreTrong Blogspot cũng có sẵn tính năng này nhưng việc quản lý bình luận khá khó khăn (Mỗi khi muốn xem bình luận bạn phải đăng nhập vào phần Quản trị của Blogspot mới xem được), với Plugins này bạn sẽ phản ứng kịp thời với những spammer hay trả lời nhanh nhất cho những câu hỏi của các độc giả đặt ra trong các chủ đề của bạn. Bình luận mới nhất (Plugins Recent comments) thường thì có 2 dạng: Có hiển thị Avatar và không hiển thị Avatar.…
Read MoreLink Out trong làm seo, vẫn là điều đáng bàn cãi… Vậy có khi nào các bạn tự hỏi: Link Out là gì? Tại sao bạn nên Link Out đến Blog/Website khác? Sử dụng Link Out như thế nào để đạt hiểu quả cao nhất cho SEO? Mình xin đi qua vài vấn đề cơ bản trước khi thực hiện thủ thuật: 1. Link Out là gì? Link out có thể thể hiểu là một loại link từ trang của bạn trỏ đến một trang khác. Trong trường ngược lại…
Read MoreTạo một phân trang Navigation cho Blog đẹp sẽ làm cho Blogspot của bạn trở nên chuyên nghiệp hơn. Tuy nhiên để phù hợp với các mẫu Blogs khác nhau, nên ở bài viết này mình tiếp tục đưa ra 7 kiểu đánh số trang blog cho các bạn lựa chọn. Trong quá trình cài đặt các bạn nên thực hiện từng bước, một cách kỹ càng việc tạo phân trang cho Blogspot không quá khó nhưng lại nhiều bạn thực hiện không được thật đáng buồn. Hướng dẫn tạo…
Read MoreHiện nay có quá nhiều code quảng cáo popup được chia sẻ trên mạng. Tuy nhiên, các mã quảng cáo toàn bật sang tab mới hoặc bật lên rất khó chịu cho người đọc. Chính vì vậy, mình sẽ chia sẻ cho các bạn đoạn code PopUnder Javascript ẩn đằng sau trình duyệt để tránh gây phiền hà cho khán giả. Với đoạn code Popunder này bạn có thể tùy chỉnh thời gian bật quảng cáo giữa các lần tùy thích. Bạn hãy chép toàn bộ đoạn code quảng cáo…
Read MoreHướng dẫn sử dụng Google Drive làm Host lưu trữ chèn ảnh, chèn file JS từ google drive vào website, nhúng file CSS từ google drive vào website. Bài trước mình đã hướng dẫn các bạn cách đăng ký tài khoản Google Drive không giới hạn rồi, xem tại đây: https://youtu.be/4S0CkQWFakw Bây giờ là cách chúng ta sử dụng Google Drive như một hosting lưu trữ hình ảnh, lưu trữ video hoặc các file Javacript, file CSS. Mình sẽ hướng dẫn các bạn nhúng các file JS và nhúng file…
Read MoreHướng dẫn chèn code Slide hình ảnh hoặc bài viết mới hoặc bài viết ở 1 nhãn (Label) cố định với hiệu ứng trượt ngang tự động rất đẹp – Hướng dẫn thủ thuật:1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)2. (Ctrl + F )Tìm đến ]]> và dán Code dưới đây ngay trên nóCode: #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}#carousel ul{width:100000px;position:relative;margin-top:10px}#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}#carousel ul…
Read More
