Tuesday, December 8, 2015

Cách tạo trang báo lỗi Error 404 đẹp cho Blogger/Blogspot

10:58 PM    0 nhận xét

Khi bạn truy cập vào một địa chỉ, một đường dẫn của một website hay một blog nào đó mà đường dẫn đó không còn tồn tại hoặc đả bị xóa thì bạn sẽ được đưa đến trang thông báo lỗi 404 Page Not Found, nó nhằm thông tin cho bạn rằng địa chỉ mà bạn đang truy cập hiện không còn tồn tại hoặc đả bị tác giả xóa. Nay xin chia sẽ cho bạn một giao diện thông báo lỗi 404 đơn giản và đẹp mắt cho blog khi bạn sử dụng blogspot

Huong dan tao trong bao loi 404 Page Not Found cho Blogger/Blogspot

Nếu bạn thích giao diện thông báo lỗi 404 như trên, bạn có thể cài đặt nó cho blogspot của bạn bằng cách dưới đây. 
Cách 1 :  - Có nhiều cách để tạo trang thông báo lỗi cho Blogspot, ở đây ta sử dụng biểu thức điều kiện trong blogspot để tạo, nó có cấu trúc đơn giản như sau:
1<body>
2   <b:if cond='data:blog.pageType != "error_page"'>
3      //Thành phần chính Blog của bạn
4   </b:if>
5   <b:if cond='data:blog.pageType == "error_page"'>
6      //Nội dung thông báo lỗi 404 của bạn
7   </b:if>
8</body>
 Xem thêm: Hướng dẫn cách sử dụng Biểu thức điều kiện if- else trong Blogspot
- Bước 1: Chèn đoạn css dưới đây vào template của bạn bằng cách vào Mẫu >> Chỉnh sửa HTML và chèn nó sau </b:skin>
01<b:if cond='data:blog.pageType == "error_page"'>
02#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
03#error-inner{margin:11% auto}
04.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
05#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0auto 20px;font-family:monospace;background-color:#34647E;margin:5px}
06#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px}
07#error-inner p{line-height:0.7em;font-size:15px;color:#999}
08#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px0;padding:0 0 0 0;border-bottom:none;list-style:none}
09#social-icons li a{line-height:1px;display:block}
10#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
11#social-icons li a span{display:none!important}
12</b:if>
- Bước 2: Sao chép mã dưới đây và đặt nó ngay dưới <body> 
<b:if cond='data:blog.pageType != "error_page"'>
- Bước 3: Cuối cùng, copy đoạn HTML dưới đây và đặt nó trước thẻ đóng </body>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<h2>404: KHÔNG TÌM THẤY TRANG</h2>
<h1>RẤT TIẾT, TRANG KHÔNG TÌM THẤY</h1>
<p>Trang bạn đang tìm không tồn tại, hoặc có thể đả bị xóa<br/><br/> Quay lại trang chủ <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> hoặc liên hệ với tôi <a href="http://nhatchanh.info/p/contact-me.html" title="Liên hệ với tôi"><span style="color: blue;">tại đây</span></a></p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/nhatchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVEL1aCLR14b-_LKIRYe35oLNFtsgB3HDN5ewUgh3pTsTbxkOPmU2-re-OQQ-xcfr1ebtGJG7lssbhDmLDRdfuTNXVIyAcnhyphenhyphenbup2jRnm4LS__fSXwZVVX6eMIYUFNID8J2nGDHxSgsL6/s1600/rss.png' width='147'/></a></li>
<li class='twitter-icon'><a href='http://www.twitter.com/tv0656m006' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi9LTdeKeRVAUS_CcdHS_pvJqKp2y2I0bpkfosAG6UB9aOXy1UbcoPGU-bVl6RN5wqIk53P4ad6ykd2JCDbWuh9lfMIax7oWz6quIJnwHiHtsBzcoLWXNm6g9ejaUkZujfqE0mLtoytEUo/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/pnchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMjSZSI41Vt7toI_hRwrVjsZN6fpnR1AoQaTRewzmmQbqiEgcWI7ysN5URAGcPulCGHe2gBo5uwGxjwel7La74MdNYNB2hrPk19sp5H1bLjeuoBRtVUCS4dJ8qm4vVdI1gA7FIgev3X_xi/s1600/facebook.png' width='147'/></a></li>
<li class='google-icon'><a href='https://plus.google.com/113291429631989826321' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9fBhfuFtEaYPfuBWzAs5FOpaN-PZktjDBNQ5SEh0rwqmegubl3MBXG3iUoS7Vk_ciOtknLPhpITA-RstWnuejyLhrwcm8QF8XWIogs6WnX6CFpoZSjXiRsLWCr2VNJ7LND7YfA7f77bmz/s1600/google.png' width='147'/></a></li>
</ul>
</div>
</div></div>
</b:if>
- Bước 4: Là bước khó khăn và quan trọng nhất là Lưu lại và kiểm tra kết quả :D Chúc thành công!

Kiểm tra kết quả bằng cách gõ vào thanh địa chỉ một đường dẫn không đúng
VD: http://địa-chỉ-blog-của-bạn/abcdefghizklmn và nếu xuất hiện trang báo lỗi 404 là bạn thành công

Cách 2 :  Hoặc Bạn có thể làm trang chuyển hướng lỗi về trang chủ của bạn theo cách sau 

 Đầu tiên hãy vào Blogger.Com -> Vào blog của bạn quản lý -> Cài đặt -> Tùy chọn tìm kiếm -> Lỗi và chuyển hướng -> Không tìm thấy trang tùy chỉnh -> Chỉnh sửa -> Copy đoạn mã code sau đây vào và Lưu thay đổi  !



<div id="te-container">



<script type='text/javascript'>



//<![CDATA[



document.write('<\/SCR'+'IPT>');



//]]>



</script>



</div>



<script type='text/javascript'>



//<![CDATA[



if (document.getElementById("te-container").clientHeight < 11 || document.getElementById("te-container").style.position == "absolue") {window.location = "http://www.tivi16k.com/";} 



//]]>



</script>

Posted in: ,

0 nhận xét:

Post a Comment