Tạo trang báo lỗi 404 kèm nút Search Google chuyên nghiệp cho Blogspot

Trang báo lỗi 404 hiển thị khi liên kết bị hỏng hoặc không tồn tại, đây là một tiện ích hỗ trợ SEO cho Website, giảm tỉ lệ thoát Website... Trang báo lỗi 404 có vai trò như công cụ điều hướng cho người truy cập khi họ vô tình vào những link hỏng. Hôm nay mình giới thiệu đến các bạn mẫu trang báo lỗi 404 kèm công cụ search chuyên nghiệp choBlogspot/Website.

Error 404! Page not found!

Các bước thực hiện

Bước 1: Các bạn vào Trang quản trị của Blogger→Cài đặt→Tùy chọn tìm kiếm→Tìm đến mục Lỗi và chuyển hướng→Không tìm thấy trang tùy chỉnh→Chỉnh sửa

Bước 2: Các bạn tiến hành chèn đoạn code sau: Đây là mẫu 404! của trang Blogger Yard mang tên "Blogger Yard 404 Page"

Mẫu mặc định của Blogger Yard

<!-- Blogger Yard 404 Page share by vanvietblog.blogspot.com-->
  <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)'>&#171; 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>&#160;&#160;&#160; (<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 == &apos;&apos;) {this.value = &apos;Tìm kiếm&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Tìm kiếm'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></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:98%!important}
.post{width:98%!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>

Lưu ý: Các bạn tùy chỉnh mẫu cho phù hợp với Blog của mình nhé!

Mẫu cải tiến công cụ search Google

<!-- 404 Page share by vanvietblog -->
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Lỗi 404! Trang không tồn tại!
<br/>
</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)'>&#171; Trở lại</a> </li>
    <li>Liên hệ báo lỗi với mình <a href='http://www.vanvietblog.blogspot.com/p/lien-he.html'>Bấm vào đây</a>&#160;&#160;&#160; (<em>Liên hệ</em>) </li>
    <li>Về trang chủ <a href='www.vanvietblog.blogspot.com'>Bấm vào đây</a>
      <br/></li>
<li>Bạn có thể sử dụng hộp tìm kiếm thông minh với 2 lựa chọn:</li>
</ol><center>
<form method=get action="http://www.google.com/search" class="googlesearch">
<input type="hidden" name="ie" value="UTF-8"/>
<input type="hidden" name="oe" value="UTF-8"/>
<table align="center">
<td class="bodyText"><input type="hidden" name="domains" value="vanvietblog.blogspot.com"/>
<input type="radio" name="sitesearch" value=""/>Google<input type="radio" name="sitesearch" value="vanvietblog.blogspot.com" checked />Văn Việt Blog's<br/>
<input type="text" name="q" size="22" maxlength="255" value=""/>
<input class="button" type="submit" name="btng" value="Tìm kiếm"/></td></table></form></center>
  <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'> Error 404! </font></p>
<br />
<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:98%!important}
.post{width:98%!important}
#searchinput{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_sqD8ZOfcSaxABlMMSPt3c4cckmNoLqWLGCdOwdtm0rtHHlIW7Su8yETEphGhhqtGacm8gEJcOyOnXErbLvg7WlDNIJCz-R8WWHGDV-EzkkY3vOiM-1uepe3W6itkGdU_CPr9otVc_r7q/s0/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:#555}
</style>

Tùy chỉnh để có được mẫu phù hợp với Blog của mình!
Lưu ý: Khi chèn đoạn code trên, trang báo lỗi 404! Sẽ không hiển thị cột sidebar. Để hiển thị, hãy xóa đoạn code #sidebar-wrapper,#midsidebar-wrapper,.gapad2,.blog-pager,.post-header-line-1,.post-footer,#rsidebar-wrapper{display:none !important} này đi nhé!