Danh mục: Lập Trình & Seo

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 More

Chia 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 More

Hướ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 More