Code chuyển hướng - redirect blog/website bằng HTML, đây là một thủ thuật đơn giản, nhanh và gọn. Không dùng nhiều code như cách chuyển hướng bằng Jquery, đơn giản, nhưng thủ thuật này vẫn đảm bảo chuyển hướng chính xác trong thời gian bạn đã đặt trước.
Code chuyển hướng website/blog bằng HTML
Các bước thực hiện
Có lẽ, khi xem xong bài viết này bạn sẽ có suy nghĩ là ồ, mình bị làm sao mà không gộp 2 bài viết vào cho nhanh trong khi thao tác thực hiện của bài viết này quá đơn giản. Hi vì mình muốn tạo sự mạch lạc, mỗi bài viết có ý đồ riêng.
Các bạn thực hiện thêm đoạn code sau vào giữa cặp thẻ <head>...</head> của Templates.
Bạn lưu ý ở đây: 1 là thời gian chuyển hướng (đơn vị là giây-0.5 giây cũng được bạn nhé!), thay http://chubangaiti.blogspot.com/ thành URL bạn muốn chuyển hướng tới.
Lời kết
Đây là một thủ thuật Blogger đơn giản hơn so với cách làm trước và phù hợp với nhiều website/blog không chỉ riêng những website/blog có sử dụng Jquery. Thật vậy, hãy thử áp dụng cho Blog của mình bạn nhé!
Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot
Đối với một Blog bất kỳ thì Tiện ích Popular post là rất cần thiết bởi nó chứa các bài viết đọc nhiều người xem nhất, từ đó sẽ giúp khách tham quan sẽ ở lại lâu hơn blog của bạn. Hôm nay mình sẽ hướng dẫn các bạn tạo một Popular đẹp cho blog thân yêu của mình.
Với giao diện cực kỳ đẹp, cực kỳ trang nhã, hiện đại với các hiệu ứng, hình ảnh to, phông chữ to. Tạo sự ấn tượng khó thể phai nhòa đối với đọc giả
1. Các bạn vào Blogger -> Mẫu -> Chỉnh sửa html 2. Tiếp tục các bạn tìm thẻ đóng ]]></b:skin> hay thẻ đóng </style> và đặt đoạn CSS sau vào trước thẻ đóng đó
/* Popular Posts */ .PopularPosts .item-thumbnail{float:none;margin:0 0 10px} .PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;} .PopularPosts .item-title:hover{background:rgba(0,0,0,.2)} .PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)} .PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)} .PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear} .PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;} .PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;} .PopularPosts .item-snippet{display:none;} .PopularPosts ul li .item-content{position:relative;overflow:hidden;} .PopularPosts ul{padding:0;line-height:normal;counter-reset:count;} .PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;} .PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;} .PopularPosts .widget-content ul li:hover:before{right:-55px;} .PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);} .PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);} .PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);} .PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);} .PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);} .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);} .PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
Lưu ý: Các bạn nên xóa hết các Css liên quan đến Popular Post cũ trước nha. Nếu các bạn không biết thì tìm kiếm với từ Popular là ra
3. Tiếp các bạn dán đoạn javascript sau vào trước thẻ đóng
<script type='text/javascript'> // Popular Post Thumb $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});}); //<![CDATA[ // Custom Popular Post $(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}); //]]> </script>
4. Save Template (Lưu Mẫu) lại 5. Để thưởng thức thành quả thì các bạn vào Blogger -> Bố cục -> Thêm tiện ích ->Bài đăng phổ biến -> chỉnh các thông số như hình: Chú ý: các bạn có thế thay đổi các thông số sau
Tiêu Đề Hiện thị tối đa .... bài đăng
Nếu các bạn ko muốn hiện thị màu
- Từ đoạn code CSS trên các bạn xóa toàn bộ chữ có màu xanh lá cây là xong
Mặc định hiên thị quá 6 bài sẽ mất màu sắc, vì vậy nếu bạn chỉnh nhiều hơn 6 bài thì các bạn phài thêm mã màu cho bài thứ 7 trở đi
- Cũng ỡ đoạn code CSS trên các bạn thêm sau vào sau dòng .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(7) .item-title {background:rgba(0,188,212,0.5);}
Các bạn thay mã màu có chữ đỏ thành mả màu bạn muốn (mã màu định dạng ở rgba nha)
Tương tự cho bài 8, thay số 7 thành 8, bài 9, bài 10 Để hiển thị được - Các bạn thêm dòng sau
.item-title:hover,.PopularPosts ul li:nth-child(7)
vào trong đoạn sau
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
Sau đó nó sẽ thành như thế này:
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover,.PopularPosts ul li:nth-child(7) .item-title:hover{background:rgba(0,0,0,0.2);}
Lời Kết Vậy là mình đã hướng dẫn các bạn tạo Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp.
Lần này Chu Bằng AiTi sẽ hướng dẫn các bạn tạo widget bài đăng phổ biến cho blog dạng 5 sao thật hấp dẫn cho blogger. Bắt tay vào làm luôn
Tạo Bài Đăng Phổ Biến Với Sao Vàng
1. Đầu tiên muôn thưở là vào Blogger -> mẫu -> Chỉnh sửa HTML 2. Sau đó tìm thẻ đóng </head> rồi chèn toàn bộ code sau vào trước một trong hai thẻ đóng đó
Các bạn nên tìm xem trong blog mình đã có chưa nếu có rồi thì bỏ qua bước này nha
3. Sau đó các bạn lại tìm tiếp thẻ đóng </style> hoặc]]></b:skin>rồi chèn toàn bộ code sau vào trước một trong hai thẻ đóng đó
/* Popular Post */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
4. Lưu mẫu lại 5. Vào Blogger -> Bố cục -> Thệm tiện ích -> Bài đăng phổ biến rồi chỉnh như hình sau
Chú ý các bạn có thể thay đổi các thông số sau
Tên tiêu đề
Được xem nhiều nhất (Chọn một trong 3)
Hiên thị: chỉ thay đổi cái hiên thị tối đa .... bài đăng, Còn lại giữ nguyên hiện trường.
Các bạn thay code sau nếu thích để thay cái 5 sao. Tức là cái trên khi áp dụng thì sẽ có 5 sao vàng, xuống tiếp là 5 sao 4 vàng 1 trắng, xuống tiếp là 3 vàng 2 trắng. Còn dùng code này sẽ hiên thị 5 sao > 4sao >3 sao> 2sao,... không có sao trắng.
Các bạn thay đoạn CSS trên bằng code CSS sau
/* Popular Post */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
Lời Kết
Vậy là mình đã hướng dẫn các bạn Tạo Bài Đăng Phổ Biến Với Sao Vàng, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công
Facebook hiện nay là một mạng xã hội lớn nhất toàn cầu, và xuất hiện khắp nơi trên internet, ở Blogspot là không ngoại lệ, tuy nhiên Google lại ko hỗ trợ Comment Facebook cho blogspot. Vì vậy ta phải chèn nó qua blogspot để dùng, nay mình sẽ hướng dẫn các bạn chèn khung comments facebook cho blogspot
Chèn Comments Facebook Responsive Cho Blogger
1. Đầu tiên vào Blog >> Mẫu >> Chỉnh sửa HTML 2. Sau đó tìm thẻ mở <head> và chèn sau nó đoạn code sau
Nếu các bạn tìm thấy hai dòng <data:post.body/> thì các bạn chỉ chèn đoạn code trên vào dòng <data:post.body/> thứ hai trở đi bạn tìm thấy
5. Lưu Mẫu lại và xem kết quả
Lời Kết
Vậy là mình đã hướng dẫn các bạn Chèn Comments Facebook Responsive Cho Blogger, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp.
Thông báo 404 là một thứ mà bạn thường hay thấy đối với các website chuẩn bị chuyển sang web mới thì tình trạng gặp trang có chữ 404 là bình thường. Bình thường thì nó sẽ hiện là không tìm thấy trang rất đơn giản, vậy nên lần này Chu Bằng AiTisẽ hướng dẫn các bạn tùy chĩnh trang 404 làm cho nó đẹp hơn với phong cách Minion
Hướng Dẫn Tạo Trang 404 Error Minion Cho Blogger - Blogsot
Có bao giờ các bạn để ý rằng nếu có trang nào đó mà bị xóa thì khi nhấn vào sẽ dẫn đến đâu không? Câu trả lời chính là trang Error 404. Mỗi blog sẽ có mỗi trang 404 khác nhau tùy từng người. Và hôm nay mình sẽ hướng dẫn các bạn tạo một trang Error 404 phiên bản Minion rất đẹp
Tạo ra trang Error 404 giúp người dùng biết rằng trang đó ko tồn tại
Giao diện trang khá đẹp nên thu hút người xem.
Bắt Đầu
1. Đăng nhập Blogger >> Mẫu >> Chỉnh sữa HTML 2. Sau đó chép toàn bộ code sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>
Cách Thay đổi màu nền - Các bạn tìm dòng #container-error {rồi men theo dòng đó sẽ thấy dòng background-color: #0dea99; lúc này bạn chỉ cần thay đổi cái #0dea99 thành mã màu cũa bạn Thay đổi cái màu chữ Homepage khi rê chuột vào - Các bạn tìm dòng #buttonerror a:hover { rồi lúc đó sẽ thấy cái color: #0dea99;. Các bạn thay đổi #0dea99thành mã màu của bạn.
Lời Kết
Vậy là mình đã hướng dẫn các bạn Tạo Trang 404 Error Version Minion Cho Blogger - Blogsot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp.
Kể từ tháng 9/2015, Google đã ra thông báo chính thức hỗ trợ HTTPS cho Blogger/ Blogspot. Và khi mở giao thức https cho blog thì blog của bạn sẽ được mã hóa và trở nên bảo mật hơn. Tuy nhiên niềm vui đã dừng lại cho đến biết rằng những blog có tên miền tùy chỉnh sẽ không được bật https đó quả là điều đáng buồn cho những Blogger. Và nay mình sẽ hướng dẫn độc quyền chỉ có tại Chu Bằng AiTi đó là sẽ giúp các bạn bật https cho tên miền tùy chỉnh.
Hướng Dẫn Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh
Mục Đích
Bật giao thức https sẽ giúp blog bảo mật hơn
Google Sẽ ưu tiên các web có https hơn nên sẽ nhanh đứng top hơn trong công cụ tìm kiếm
Thực Hiện
Các bạn nên tạo thử tên miền miễn phí tk. rồi áp dụng cho chắc.
Và đây mình sẽ nói chút về vấn đề có nên bật https hay ko.
Theo bạn đã biết thì https chỉ được áp dụng cho tên miền mặc định blogspot.com, còn thủ thuật bên dưới chỉ là thông qua một host mà nó có (Tức là ban đầu là http sau đó nó gửi qua host, từ host chuyển đổi https rồi gửi về lại cho mình) ko biết có đúng ko nữa mà chắc là vậy.
Các bạn muốn thử cũng được ko cũng được ko có sao hết, nhưng mình nói trước đây chỉ là thủ thuật mới tìm ra. Mính cũng mới test vài cái thì thấy cũng được, cũng đẹp do có cái màu xanh.
Ở đây mình thực hiện thủ thuật này qua trang web www.cloudflare.com . Còn web này có uy tín hay ko thì bạn search google sẽ rõ.
Chú ý lớn: khi làm thủ thuật này thì blog bạn phải ngừng hoạt động trong vòng 24h tiếng Bởi Cái Cloudfare phải cập nhật DNS và Nameservers tên miền của bạn
Mình Cũng không khuyến khích các bạn làm điều này vì lỡ có gì với tên miền của bạn mình ko chịu trách nhiệm1. Vào www.cloudflare.com và đăng ký cho mình một tài khoản (Cách đăng ký thì google nha ) 2. Các bạn vào Addsite -> nhập tên miền blog của bạn vào rồi nhấn Begin Scan
3. Sau đó nó sẽ hiện cái bảng bao gồm cái thông tin DNS mà các bạn làm để tùy chỉnh tên miền blogspot trước đó.
4. Tiếp đến các bạn nhấn Countinue, lúc này nó sẽ hiện ra cái bảng chọn bản PRO hay free gi gì đó. Nếu bạn có tiền thì mua PRO cho ngon, ko thì chọn free
5. Nhấn tiếp Continue lúc này nó sẽ hiện ra cái bảng bắt chúng ta thay đổi tên máy chủ. Các bạn chép hai cái dòng đó lại. rồi qua bảng quản lý tiên miền của bạn.
Nhớ đừng tắt trang web này nha
Tại bản điều khiển của mỗi nhà cung cấp tiên miền là khác nhau, mình ko biết được nên mình sẽ hướng dẫn sơ qua nhà cung cấp tên miền dot.tk.
6. Tại trang chủ dot.tk vào Domains >> My domains >> chọn tên miền hồi nãy bạn nhập vào khung Begin Scan, bạn chọn Manage Domains >> Management Tools >> Nameservers. Sau đó các bạn chọn tùy chọn Use custom nameservers (enter below), rồi xóa hết các dòng trong đó
7. Tiếp các bạn thay thế hai cái dòng mình bắt các bạn hồi nãy copy lại các bạn chép hai cái dòng đó vào trong
8. Nhấn Change Namservers
9. Sau đó các bạn qua trang www.cloudflare.com hồi nãy nhấn Countinue 10. Sau đó xuất hiện cái bảng nhấn Recheck Nameservers, rồi đợi khoảng 1-2 tiếng hay 1 ngày gì đó để nó xác nhận là xong. Khi xác nhận xong thì nó sẽ có như hình rồi chọn cái CRYPTO
11. Tại cái phần SSL chọn Flexible
12. Sau khi làm xong đến đây, các bạn vào tiếp Caching 13. Từ Purge Chache các bạn nhấn vào nút mũi tên bên phải cái nút màu xanh dương chọn cáiPurge Everything
14. Lúc này nó sẽ hiện cái bảng chú ý các bạn cứ nhấn tiếp Cái Purge Everything
15. Lúc này các bạn qua phần Page Rules rồi nhấn chọn Create Page Rules
16. Nó sẽ hiện cái bảng cái bạn nhập như sau
1. tên miền ban đầu của bạn - nó có dạng www.example.com hay .net ,. tk,..... gì đó
2. rồi nhấn chọn Add Setting
17. Tiếp nó sẽ hiện cái Khung Pick a Setting >> rồi chọn Cái Always Use HTTPS >> rồi chọn Save And Deploy
Ờ đây khi làm xong thì thanh địa chỉ sẽ hiện chữ https nhưng lúc này sẽ ko có màu xanh, thay vào đó là màu xám thì các bạn fix lỗi như sau:
- Vào Blogger >> Mẫu >> Chỉnh Sửa HTML, sau đó thay thế toàn bộ từ "http://" thành"//" - Sau đó các bạn vào từng bài viết thay link đó thành // như mình nói hoặc ko được thì "htttps://"
Lời Kết
Vậy là mình đã hướng dẫn các bạn Bật HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công