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

• 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

CSS/* 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}

HTML<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>

Lời Kết

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.

Ở đâ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

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ái Purge 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
 

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

Mục Đích

• Tạo tính khoa học, chuyên nghiệp cho Blog, hơn thế nữa giúp cho người đọc, biết đâu là code, đâu là câu viết bình thường.
• Khung code rất ngầu, tạo sự thích thú cho người đọc, làm tăng lượt view cho Blog, giúp cho việc phát triển Blog hơn.
• Với giao diện nền tối không chói mắt

Thực Hiện

CSS/* CSS Pre Code Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
}

Jquery<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

Jquery<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

HTML<pre title="HTML" data-codetype ="HTML"><code class="language-marp"> ... Để Code HTML ở đây ... </code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css"> ... Để Code CSS ở đây ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScript"><code class="language-javascript"> ... Để Code JavaScript ở đây ... </code></pre>
<pre title="jQuery" data-codetype ="JQuery"><code class="language-javascript"> ... Để Code jQuery ở đây ... </code></pre>

Nhớ chọn code cho phù hợp

Nâng Cao

Thay đổi màu khung tiêu đề bên trên

• Các bạn để ý dòng data-codetype tiếp theo đó sẽ là một trong bốn chữ HTML, CSS, Javascript, Jquery. . Nếu dòng nào có chữ nào thì khi thay đổi sẽ có màu đó.
• Giả sử bạn thay đổi cái có chữ HTML thì khi bạn sử dụng code chèn HTML ngay bên dưới bước 4 ở trên cũng sẽ xuất hiện màu bạn thay đổi. Tương tự với cái còn lại