Bài đăng

Hiển thị các bài đăng có nhãn Code Blogspot

Sửa lỗi không phân trang khi xem theo nhãn blog

Hình ảnh
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 mà các bạn đã định trước trong tiện ích phân trang. »  Nguyên nhân chính: Bạn chưa định dạng cấu hình của các thẻ XML quy định số bài viết tải ở mỗi trang nhãn. Dung lượng số bài viêt trên trang của bạn quá lớn nên feed phải giảm tải số bài để không vượt quá giới hạn cho phép. Bài viết này mình sẽ lầm lượt hướng dẫn các bạn các khắc phục 2 lỗi trên. Khắc phục lỗi không phân trang hoặc không hiển thị đúng số bài đăng khi xem theo nhãn trong blogspot! » Định hình lại mã XML của template: - Thực ra việc hiển thị số bài đăng trên 1 trang là thêm vào sau địa chỉ dòng ?&max...

SlideShow trình chiếu ảnh với hiệu ứng tuyệt đẹp cho blogspot /website

Hình ảnh
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...

Menu dọc đa cấp cho website/ blogspot chuẩn Mobile

Hình ảnh
Hướ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 > a{padding:15px 20px;border-left:1px solid #1682ba;border-right:1px solid #1682ba;border-top:1px solid #1682ba;cursor:pointer;z-index:2;font-size:14px;font-weight:700;text-decoration:none;color:#fff;text-shad...

Tạo bài viết liên quan 3 cột có ảnh Thumbnail tuyệt đẹp cho blogspot

Hình ảnh
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) { .re...

Tạo bình luận mới nhất (Recent comments) cho Blogspot

Hình ảnh
Trong 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. Bắt đầu thủ thuật ! Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại . Sau đây là 3 Phong cách cho các bạn lựa chọn: 1. Code Widget bình luận có hiển thị ảnh Avatar. <style type="text/css" scoped> ul.kangismet_recent{list-style:none;margin:0;padding:0;} .kangismet_recent li{backgroud:#eee;margin:0 0 6px !important;padding:3px !important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid #aaa; border-radius:9px; max-height: 100px;} .kangismet_...

Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) trong Blog

Hình ảnh
Link 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 một site khác trỏ link về site của bạn thì nó là link out của site kia nhưng lại là backlink của bạn. 2. Tại sao bạn nên Link Out đến Blog/Website khác? Việc bạn đi Link Out đến các nguồn uy tín sẽ làm tăng mức độ tin cậy của bạn đối với độ giả (Thu hút được độc giả và Blog/Website của bạn một cách tự nhiên). Về mặt logic, khi liên kết đến Blog/Website khác sẽ làm cho Site của bạn kế thừa được Pagerank Authority của site đó. Do đó bạn có thể thấy lợi ích rõ ràng của việc Link (liên kết) tới các Blog/Website có chất lượng cao (Cải thiện được thứ hạn Site). 3. Sử dụng Link Out như thế nào để đạt h...

Tạo phân trang cho Blogspot đẹp dễ thực hiện

Hình ảnh
Tạ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 phân trang cho Blogspot đơn giản nhất Bước 1: Đầu tiên các bạn vào Blog => Mẫu => Chỉnh sửa HTML . Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin> . Sau đó paste đoạn code style mà bạn muốn lên trên thẻ ]]></b:skin> . Dưới đây là các style cho bạn lựa chọn. Style 1: #blog-pager{clear:both; margin:30px auto; text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a, .showpage a, .pagecurrent{padding: 5px 10px; margin-right:5px; color: #F4F4F4; background-color:#404042; border:2px solid #ccc;} .displaypageNum a:ho...

Code quảng cáo Popup under javascript ẩn đằng sau trình duyệt

Hình ảnh
Hiệ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 popunder dưới đây vào mã nguồn của bạn <script type='text/javascript'> window.onload = function() {     var puURL = &#39; https://gicovietnam.blogspot.com /&#39;;     var puTS = Math.round(+new Date()/ 1000 );     //var puDate = currentDate.getDate().toString(); //day     console.log(&#39;T.&#39;+localStorage.puTS+&#39;/&#39;+puTS);     if (typeof localStorage.puTS == &#39;undefined&#39; || parseInt(localStorage.puTS) &lt;= (puTS - 3000)) {         console...

Hướng dẫn sử dụng Google Drive làm Host lưu trữ chèn ảnh, file JS và CSS vào Website

Hình ảnh
Hướ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 CSS vào Website hoặc bạn có thể nhúng file css, js vào Blogspot . 1. Nhúng file hình ảnh từ Google Drive vào website, blogspot. + Các bạn bấm chuột phải vào file hình ảnh cần nhúng vào blog và bấm vào Nhận liên kết có thể chia sẻ được. Bạn hãy bấm vào: Nhận liên kết có thể chia sẻ được + Tiếp theo bấm vào Cài đặt chia sẻ + Tiếp theo vào phần cài đặt Nâng cao + Tiếp theo bạn chọn phần Bật công khai trên web (Bất kỳ ai trên Internet đều có thể tìm và truy cập. Không yêu cầu đăng nhập) + Bạn hãy copy đường link, đường link bạ...

Code slide hình ảnh hoặc bài viết mới chạy ngang liên tục cho Blogspot

Hình ảnh
Hướ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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjADCTXxN-KLRE3q72XVMSU2Q4vtTac1nfzs754SgnAtmI6V1Wfs_1e3s6rRk0AFFcHSALWp6dy7QJQgQNMS5s1WTsFirBkDH42dkuP-4fq3BPaVCLYZu1TlzCunmSDHCsoy8dao3jErkw/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hgTL6Bi_qkA2KO4ceHdKD7M3pfHghsodHNp3pF6sk_KIQKTr37mQVNTnX07sB2rTqf7q-wOZNtrFo86gymPc0yW4f1L42hkokgtV_oy-wk05gxRcxp...

CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng

Hình ảnh
CODE slide ảnh hoặc tin tức chạy từ dưới lên liên tục không ngắt quãng là một hiệu ứng khá đơn giản mà hiệu quả cho các trang tin tức. Đây là plugin thường được áp dụng cho các slide ảnh nằm ở sidebar trái hoặc sidebar phải của trang web. Bài viết hôm nay mình sẽ hướng dẫn các bạn code trình diễn ảnh cuộn từ dưới lên bằng cách sử dụng một plugin của jQuery có tên là JQuery Advanced News Ticker để tự động cuộn tin lên xuống theo chiều dọc. Các bạn có thể xem mẫu code cuộn ảnh hoặc text chạy từ dưới lên giống như bên dưới: Bước 1) Tạo tài liệu HTML . Trong thẻ <body> , chèn khối tin vào vị trí mong muốn theo cấu trúc sau: <div id=" news-container "> <i class="fa fa-arrow-up" id="prev"></i> <ul id="news-ticker"> <li>1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info</li> <li>2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info</li> <li>3) Lorem ...