Code chuyển hướng website/blog bằng HTML

4 Comments

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.
<meta http-equiv="refresh" content="1;url=http://chubangaiti.blogspot.com/">
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é!
Chúc Các Bạn Thành Công!

Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot

2 Comments

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() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![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:
[Widget] Bài Đăng Phổ Biến Nhiều Màu Sắc Cho Blogger - Blogspot

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. 
Chúc các bạn thành công

Tạo Bài Đăng Phổ Biến Với Sao Vàng

Comment
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 đó
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
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

[Widget] Tạo Bài Đăng Phổ Biến Với Sao Vàng
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

Chèn Comments Facebook Responsive Cho Blogger

Comment
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

<meta content='ID Facebook Admin' property='fb:admins'/>
<meta content='ID Application Facebook' property='fb:app_id'/>
Các bạn thay ID facebook Admin và ID Application Facebook thành cái mã của bạn.
Tìm mã ID Facebook Admin 3. Sau đó chèn đoạn JQuery sau và trước thẻ đóng </head>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
 var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width(); 
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( ); 
  });
//]]>
</script>
4. Tiếp các bạn tìm đoạn code  <data:post.body/> và chèn đoạn code bên dưới và sau <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>
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.
Chúc các bạn thành công

Hướng Dẫn Tạo Trang 404 Error Minion Cho Blogger - Blogsot

Comment
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 AiTi sẽ 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>
/* CSS Custom Error Minion */#container-error{text-align:center;z-index:9999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#0dea99;color:#fff}
#buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#0dea99;position:absolute;left:0;right:0;bottom:15%;margin:auto;max-width:250px;padding:20px;z-index:99999;border-radius:10px;border:5px solid #fff;transition:all .5s}
#buttonerror a{color:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}
#buttonerror:hover{background-color:rgba(255,255,255,1)}
#buttonerror:hover a,#buttonerror a:hover{color:#0dea99}
.minion{position:absolute;background-color:#ffed41;height:360px;width:218px;border-radius:218px 218px 130px 130px;position:absolute;left:50%;top:45%;margin:-180px 0 0 -109px;z-index:99999}
.glassesline1{background-color:#494949;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px}
.glassesline2{background-color:#2d2d2d;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px;box-shadow:0 3px 0 0 rgba(0,0,0,0.15)}
.glass1,.glass2{background-color:#e2e2e0;height:102px;width:102px;border-radius:102px;position:absolute;top:55px;box-shadow:-4px 4px 0 0 rgba(50,50,50,0.15),1px -1px 0 0 rgba(255,255,255,1)}
.glass1{left:10px;right:auto;z-index:2}
.glass2{right:10px;left:auto;z-index:1}
.glass1:before,.glass2:before{background-color:#e5bf36;height:78px;width:78px;border-radius:78px;display:block;position:relative;top:12px;left:12px;content:""}
.glass1:after,.glass2:after{background-color:#FFF;height:58px;width:78px;border-radius:78px;position:absolute;top:22px;left:12px;content:"";animation:eyes 5s linear 1s infinite}
.eye1,.eye2{background-color:#724c25;height:28px;width:28px;border-radius:28px;position:absolute;top:44px;z-index:3}
.eye1{left:46px}
.eye2{right:46px}
.eye1:before,.eye2:before{background-color:#2c2d2f;height:12px;width:12px;border-radius:12px;display:block;position:relative;top:8px;left:8px;content:""}
.eye1:after,.eye2:after{background-color:#FFF;height:8px;width:8px;border-radius:8px;position:absolute;top:6px;left:12px;content:""}
.mouth{background-color:#603814;height:36px;width:106px;position:absolute;border-radius:0 0 106px 106px;top:182px;left:55px;overflow:hidden}
.mouth:before{background-color:#FFED41;height:80px;width:205px;position:relative;display:block;border-radius:0 0 150px 150px;top:-70px;left:-50px;content:"";z-index:2;box-shadow:0 3px 0 0 rgba(50,50,50,0.15)}
ul.teeth{list-style:none;z-index:1;position:absolute;top:-10px;left:-25px}
ul.teeth li{float:left;height:15px;width:20px;background:#FFF;display:inline-block;border-radius:0 0 15px 15px}
ul.teeth li:first-child,ul.teeth li:last-child{height:10px}
.pants{background-color:#2b5b89;height:66px;position:relative;top:270px;border-radius:0 0 128px 128px;z-index:2}
.pants:before{background-color:#2b5b89;height:58px;width:138px;display:block;position:relative;top:-58px;margin:0 auto;content:""}
.pants:after{background-color:#224467;height:44px;width:58px;display:block;position:relative;top:-76px;border-radius:0 0 58px 58px;margin:0 auto;content:""}
.belt-left,.belt-right{background-color:#224467;height:16px;width:70px;position:absolute;top:225px;z-index:3}
.belt-left{left:-10px;transform:scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
.belt-right{right:-10px;transform:scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
.belt-left:after,.belt-right:after{background-color:#2d2d2b;height:11px;width:11px;border-radius:11px;position:absolute;content:""}
.belt-left:after{left:56px;top:3px}
.belt-right:after{right:57px;top:3px}
.legs .left,.legs .right{background:#224467;height:22px;width:44px;position:absolute;top:358px;z-index:1}
.legs .left{left:60px}
.legs .right{right:60px}
.legs .left:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #0dea99;border-right:10px solid transparent;left:0}
.legs .right:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #0dea99;border-left:10px solid transparent;right:0}
.shoe-l,.shoe-r{background-color:#424242;width:52px;height:18px;position:absolute;top:380px}
.shoe-l{left:50px;border-radius:18px 0 0 0}
.shoe-r{right:50px;border-radius:0 18px 0 0}
.shoe-l:after,.shoe-r:after{background-color:#2d2d2d;width:56px;height:5px;position:absolute;content:"";top:18px;left:-2px}
.shoe-l:before{position:absolute;content:"";height:0;width:0;border-top:5px solid #224467;border-left:34px solid transparent;left:20px}
.shoe-r:before{position:absolute;content:"";height:0;width:0;border-top:5px solid #224467;border-right:34px solid transparent;right:20px}
.hands .left,.hands .right{background-color:#e5c034;height:100px;width:16px;position:absolute;top:242px}
.hands .left{left:-16px;border-radius:16px 0 0 0}
.hands .right{right:-16px;border-radius:0 16px 0 0}
.hands .fingers-l,.hands .fingers-r{background-color:#424242;position:absolute;content:"";height:16px;width:16px;top:350px;z-index:1}
.hands .fingers-l{left:-6px;border-radius:0 16px 0 0}
.hands .fingers-r{right:-6px;border-radius:16px 0 0 0}
.hands .fingers-l:after,.hands .fingers-r:after{background-color:#383838;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:15px;z-index:2}
.hands .fingers-l:after{left:0}
.hands .fingers-r:after{right:0}
.hands .fingers-l:before,.hands .fingers-r:before{background-color:#2c2c2c;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:8px;z-index:1}
.hands .fingers-l:before{left:5px}
.hands .fingers-r:before{right:5px}
.hands .glove-l,.hands .glove-r{background-color:#424242;position:absolute;height:36px;width:16px;border-radius:0 0 16px 16px;top:342px;z-index:3}
.hands .glove-l{left:-15px}
.hands .glove-r{right:-15px}
.hands .glove-l:before,.hands .glove-r:before{position:absolute;content:"";height:0;width:0;top:-15px;border-bottom:30px solid #424242;border-left:30px solid transparent;transform:scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
.hands .glove-l:before{left:-7px}
.hands .glove-r:before{right:-7px}
3. Sau đó tìm thẻ mở <body hoặc <body>, rồi chèn code sau vào sau nó
<body>
  <b:if cond="data:blog.pageType != &quot;error_page&quot;">
  </b:if>
  <b:if cond="data:blog.pageType == &quot;error_page&quot;">
    <div id="container-error">
      <div class="minion">
        <div class="hands">
          <div class="left"></div>
          <div class="right"></div>
          <div class="fingers-l"></div>
          <div class="fingers-r"></div>
          <div class="glove-l"></div>
          <div class="glove-r"></div>
        </div>
        <div class="glasses">
          <div class="glassesline1"></div>
          <div class="glassesline2"></div>
          <div class="glass1">
            <div class="eye1"></div>
          </div>
          <div class="glass2">
            <div class="eye2"></div>
          </div>
        </div>
        <div class="mouth">
          <ul class="teeth">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="belt-left"></div>
        <div class="belt-right"></div>
        <div class="pants"></div>
        <div class="legs">
          <div class="left"></div>
          <div class="right"></div>
          <div class="shoe-l"></div>
          <div class="shoe-r"></div>
        </div>
      </div>
      <div id="buttonerror">
<a href="http://chubangaiti.blogspot.com/">Homepage</a></div>
    </div>
  </b:if>
</body>
Chú ý: nhớ thay link màu đỏ http://chubangaiti.blogspot.com/ thành link blog của bạn4. Sau đó Lưu mẫu lại và xem kết quả.

DEMO
CLICK TO VIEW

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. 
Chúc các bạn thành công!

Hướng Dẫn Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

1 Comment
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

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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 đó.

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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.

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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 đó
[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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 

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh
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

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

11. Tại cái phần SSL chọn Flexible

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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ái Purge Everything 
[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh
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

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

15. Lúc này các bạn qua phần Page Rules  rồi nhấn chọn Create Page Rules

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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 

[Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

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
 [Tutorial] Bật Giao Thức HTTPS Cho Blogspot Có Tên Miền Tùy Chỉnh

18. Xem Thành quả
19. Demo thử
DEMO
CLICK TO VIEW

Ờ đâ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
Subscribe to: Posts (Atom)