Ở bài Mình hướng dẫn cho các bạn tạo một trang 404 đẹp và thân thiện
với SEO (một trong những tính
năng mới của Blogspot)
Mình cũng đã đọc một số bài về cách hướng dẫn tạo trang 404 nhưng
đơn thuần chỉ là một hình ảnh và thường thì có 2 cách để
tạo một trang 404. Sau đây mình sẽ hướng dẫn chi
tiết:
Cách
1: Tạo
trang 404 bằng cách sửa trực tiếp trong template “không hề đá động gì tới tính
năng có sẵn của blogspot”
Bước 1: Blog => Mẫu => Chỉnh sửa HTML và chặn đoạn
code dưới vào sau thẻ </b:skin>
<b:if cond='data:blog.pageType == "error_page"'>
#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0 auto 20px;font-family:monospace;background-color:#34647E;margin:5px}
#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px}
#error-inner p{line-height:0.7em;font-size:15px;color:#999}
#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px 0;padding:0 0 0 0;border-bottom:none;list-style:none}
#social-icons li a{line-height:1px;display:block}
#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
#social-icons li a span{display:none!important}
</b:if>
Bước 2: Chằn đoạn code sau vào dưới thẻ <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://windows2it/p/contact-us.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/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BOiPYpsBeKwjswacct7CaG5waymPKEfqAN_LHAuIYvFdeM_tAXba1kETmwekR4pIgwBuGpofJhtN2mKEZ8NbT8de-JkX6k9b4BZ6ZMsz0_D6Rp_unkSK0kAivAiRVegQ9MqGPVb1w6WN/s1600/rss.png' width='147'/></a></li><li class='twitter-icon'><a href='http://www.twitter.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqnFp_H7nIoPUe4CAU2jqMt8-vb6OEkllL2oKfoVuyHCUcfaTBnEhDoeQ5QhQnCcl5urp_0u79DEfv8icjnFRZFh5NPtOOqH0hOT5G5UHOLTZ9qobIeWpRXRJyL-weKgDJbMQS_bkTDRL/s1600/twitter.png' width='147'/></a></li> <li class='facebook-icon'><a href='http://www.facebook.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqOyRIgMqp7fRLI1HkaxNEyB8JWkCQAVpCD8sW7d7BVICqW4bKz0Bpg7XzAn3YHS1AGKgFKqK4Glx14SKaT3ugYWhL5XPUvI-xc6Wm9HsJ4Mw5Rzpaoae54A6LuS65IWJGx0pnKixLYpN/s1600/facebook.png' width='147'/></a></li><li class='google-icon'><a href='https://plus.google.com/mchiase' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz5KURMA3cNebLvMaQAb1rLWLoAdnhyTuo2fcsrbV76mkjJ_NvOTMifNhJMK579m3-sD1C3EeSNs2DfRh-0GyTvZPNS_4xq-16D_qjCKuJ12_Yd0uaUaNc8g53vR_WjHE9A63auubeSGDi/s1600/google.png' width='147'/></a></li></ul> </div> </div></div> </b:if>
Bước 4: Khó nhất trong các bước: Lưu và xem kết quả nhé
!
Cách
2: Khai
thác tính năng có sẵn trong blogspot, không cần chỉnh sữa trực tiếp trong
template:
Blog => Cài đặt => Chỉnh sửa HTML => Tùy chọn tìm
kiếm => Không tìm thấy trang tùy
chỉnh (chọn chỉnh sửa)
Copy gián đoạn Code dưới đây vào và Lưu thay đổi lại.
<!-- Blogger Yard 404 Page share by Windows2it--> <p style='line-height: 30px'><strong> <font color='#ff0000' size='5'> Oh no! </font> <font color='#666666'>Rất tiếc! Hình như bạn có nhấp vào một liên kết bị hỏng hoặc một trang không tồn tại. <br/> Vui lòng thực hiện một trong các nội dung sau: </font></strong></p> <ol style='line-height: 25px'> <li><a href='javascript:history.go(-1)'>« Trở lại</a> </li> <li>Liên hệ báo lỗi với mình<a href='Link trang liên hệ của bạn'> Bấm vào đây</a>    (<em>Liên hệ</em>) </li> <li>Trở vè trang chủ <a href='Link trang chủ'>Bấm vào đây</a> <br/></li> <li>Bạn có thể sử dụng hộp tìm kiếm thông tin mình cần</li> </ol> <br /> <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'> <input id='searchinput' name='q' onblur='if (this.value == '') {this.value = ' ';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value=' '/> <input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/> </form></center> <p> <br/> <br/> <br/></p> <p align='center'><font size='4'>Cảm ơn bạn đã ghé thăm Blog!</font></p> <p> <p align='center'><font size='5'>Trang không tồn tại!</font></p> <br /> <br /> <br /> <p align='center'> <font style='font-size:150px; font-weight:bold;' color='#098047'>404</font></p> <style> <style>.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%} .status-msg-border{display:none} .status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto} .status-msg-wrap a{padding:none;text-decoration:inherit}#sidebar-wrapper,#midsidebar-wrapper,.gapad2,.blog-pager,.post-header-line-1,.post-footer,#rsidebar-wrapper{display:none !important} #main-wrapper{width:66%!important} .post{width:66%!important}#searchinput{background:#FFF url(http://2.bp.blogspot.com/-PAOe2YSxpxo/VCX4BlzcSSI/AAAAAAAABKU/m76c7h-xyvQ/s1600/search.png) no-repeat 7px 8px;background-color:#FFF;border:1px solid #ddd;color:#A0A0A0;display:inline-block;font-family:arial;font-size:12px;font-weight:bold;height:24px;width:300px;margin:0;margin-top:5px;padding:5px 15px 5px 28px;vertical-align:top} #searchinput:hover{border:1px solid #bebebe;box-shadow:0 1px 2px rgba(5,95,255,.1);padding:5px 15px 5px 28px} #searchbutton{background:#444;color:#fff;height:35px;border-radius:5px;box-shadow:1px 2px 1px 1px #ABABAB;border:1px solid #fff;margin-top:3px;padding:8px} #searchbutton:hover{background:#098047} </style>
Trên
đó là đoạn code mẫu các bạn cũng có thể chỉnh sữa để phù hợp với site của bạn.
Đoạn code trên mình đã tích hợp luôn công cụ Search.
Kết
luận
- Cách 1: Bạn có thể thêm và chỉnh các phần từ cách một các thỏa mái
(Vì có thể ẩn toàn bộ site) _ Đối với cách này bạn phải tối ưu Code không thì
site của bạn sẽ phát sinh nhiều vấn đề @!
- Cách 2: Các phần tử của bạn phải co lại, chỉ vì không thể được
toàn bộ site như cách 1_ Đối với cách này Code này nằm độc lập nên không ảnh
hưởng đến site của bạn.
- Các Code trên bạn hoàn toàn có thể tùy biến Chiều cao, thấp, màu
,… Vì các bác Pro nên mình
không nói nhiều.
0 nhận xét:
Đăng nhận xét