2 style trang lỗi 404 đẹp và chất cho Blogger

Bởi -
Trang 404 tôi nghĩ là cần cho quá trình tự học seo của các bạn, nó là công cụ chuyển hướng tốt nhất cho blogger giúp blog của bạn không còn những đường dẫn lỗi khi bài viết không còn nữa.
2 style trang lỗi 404 đẹp và chất cho Blogger
2 style trang lỗi 404 đẹp và chất cho Blogger
Dưới đây tôi giới thiệu đến các bạn 2 mẫu trang 404 đẹp cho blogger nhé

1. Style 1

Bước 1 : Thêm đoạn code sau trên thẻ </body>
<b:if cond="data:blog.pageType != &quot;error_page&quot;">
... Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti main-wrapper, sidebar-wrapper, hingga footer-wrapper. Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran. ...
</b:if>
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
<div id="container-error">
<div id="error-page">
Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan.
</div>
</div>
</b:if>
 Bước 2 : Thêm css
<style>/* CSS Error by Bloghong */
#container-error{text-align:center;z-index:99999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#3498db;color:#fff;font-size:3rem;font-weight:700}
#container-error h3,#container-error h4{display:block;text-align:center;margin-bottom:30px;font-size:2rem;font-weight:700;color:#aaa}
#container-error h3{margin-top:30px}
#error-page{position:relative;max-width:920px;margin:6% auto;line-height:normal}</style>

2. Style 2

DEMO 
Tương tự như ở trên chúng ta có 2 bước thêm code
Bước 1 :  
<b:if cond="data:blog.pageType != &quot;error_page&quot;">
... Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti main-wrapper, sidebar-wrapper, hingga footer-wrapper. Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran. ...
</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 expr:href='data:blog.homepageUrl'>Homepage</a></div>
</div>
</b:if>
Bước 2 : Thêm css
/* CSS Custom Error Minion by arasdesign */
#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:#EC7E65;color:#fff}
#buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#EC7E65;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:#EC7E65}
.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 #EC7E65;border-right:10px solid transparent}
.legs .right:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #EC7E65;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}
Đơn giản chỉ cần có thể bạn đã áp dụng ngay 1 kỹ thuật đẹp cho blogspot của mình rồi đấy chúc các bạn thành công. Xem thêm >>seo onpage blogspot <<

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Cách xem tin nhắn Messenger Facebook không hiện trạng thái Đã Xem

Bởi -
Hình ảnh
Vì một lý do nào đó, có thể là bạn không thích trả lời họ, có thể là vì giận hay ghen với người yêu, mà bạn lại không thích người đang nhắn tin với mình thấy trạng thái Đã Xem. Bởi vì xem rồi thì phải trả lời tin nhắn, còn không sẽ bị người ta nói là mình khinh người hay gì đó. Bạn yên tâm, vì đã có cách giúp bạn vẫn xem được tin nhắn mà không cho người đó thấy được trạng thái Đã Xem. Hãy xem hết video dưới đây sẽ biết ngay nhé.
Đọc thêm

Tổng hợp các trang web chia sẻ miễn phí Template Blogger - Blogspot

Bởi -
Hình ảnh
Như các bạn cũng đã biết, Blogger là một nền tảng miễn phí của Google, các bạn sẽ sở hữu ngay 1 website với chi phí 0 đồng, chỉ cần 1 tài khoản Google. Nhưng các giao diện của Blogger/ Blogspot cung cấp không đẹp và không có nhiều chức năng. Nên chúng ta cần phải thay đổi những giao diện này theo sở thích của mình. Hiện tại, có rất nhiều trang web của nước ngoài chia sẻ giao diện Blogger/ Blogspot miễn phí rất đẹp, mình đã tổng hợp lại và chia sẻ theo danh sách dưới đây. Xem tiếp »
Đọc thêm

Hướng dẫn cài nhạc chuông cho điện thoại iPhone không cần Máy Tính

Bởi -
Hình ảnh
Lúc trước, khi nhắc đến việc cài nhạc chuông cho điện thoại iPhone thì chúng ta liền nghĩ đến việc phải dùng Máy Tính mới có thể cài đặt được. Vì không có ứng dụng nào có thể làm được việc này. Ngày nay, chúng ta không cần phải lo lắng nữa vì đã có cách cài nhạc chuông trên điện thoại iPhone một cách đơn giản mà không cần đến Máy Tính, chỉ bằng một ứng dụng đơn giản là GarageBand . Bạn chỉ cần lên mạng tải bất kỳ bài hát nào về, sau đó dùng ứng dụng GarageBand để làm nhạc chuông thôi. Bạn hãy xem hết video dưới đây để biết cách làm ngay nhé. Download GarageBand
Đọc thêm