Tạo trạng 404 đẹp thân thiện với SEO cho blogspot (blogger)

Qua năm tháng My Opera, Yahoo 360 pluss, Joomla lần lượt bị bỏ lại do sự hạn chế trong thiết kế và cái giá mà người sử dụng phải bỏ ra quá lớn.

Trong khi đó Blogspot cập nhật - SEO hoàn hảo”, có rất nhiều tính năng nổi bật cũng chính vì điều này mà blogger trở thành 1 trong 2 nền tảng (thiết kế web) phát triển mạnh nhất hiện nay.

     Đọc thêm:



Ở 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 THY TRANG</h2>
<h1>RT TIT, TRANG KHÔNG TÌM THY</h1>
<p>Trang bn đang tìm không tn ti, hoc có th đả b xóa<br/><br/> Quay li trang ch <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> hoc liên h vi tôi <a href="http://windows2it/p/contact-us.html" title="Liên hệ với tôi"><span style="color: blue;">ti đây</span></a></p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/Windows2it' target='_blank'><img height='147' src='https://3.bp.blogspot.com/-oyqE0y8talY/VJoZKLDmsEI/AAAAAAAACVA/6wkTptJYDcg/s1600/rss.png' width='147'/></a></li>
<li class='twitter-icon'><a href='http://www.twitter.com/Windows2it' target='_blank'><img height='147' src='https://2.bp.blogspot.com/-FIitmqgP0RI/VJoZLK6Hh_I/AAAAAAAACVI/8zQqMjBPhqo/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/Windows2it' target='_blank'><img height='147' src='https://2.bp.blogspot.com/-hK7KiXG7UEc/VJoZKMyoYiI/AAAAAAAACU0/TGEkEFZghk4/s1600/facebook.png' width='147'/></a></li>
<li class='google-icon'><a href='https://plus.google.com/Windows2it' target='_blank'><img height='147' src='https://1.bp.blogspot.com/-XS37wVii2HI/VJoZKSNwwEI/AAAAAAAACU4/vTU-Dtjh134/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'>
Rt tiếc! Hình như bn có nhp vào mt liên kết b hng hoc mt trang không tn ti. <br/> Vui lòng thc hin mt trong các ni 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 li vi mình<a href='Link trang liên hệ của bạn'> Bm vào đây</a>&#160;&#160;&#160; (<em>Liên hệ</em>) </li>
    <li>Tr vè trang ch <a href='Link trang chủ'>Bm vào đây</a>
      <br/></li>
<li>Bn có th s dng hp tìm kiếm thông tin mình cn</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;   &apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' 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'>Cm ơn bn đã ghé thăm Blog!</font></p>
    <p>
<p align='center'><font size='5'>Trang không tn ti!</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(https://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.



>>> Bạn nào chưa hiểu chỗ nào cứ để lại comment nhé @!


Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

2 nhận xét:

  1. Thank you for sharing this post very good post thanks for sharing this post was very good for me ..digital marketing

    ReplyDelete
  2. Chào Bác Admin!
    Cảm ơn bác chia sẽ, rất hay và bổ ích, mình sẽ áp dụng cách này! Theo kinh nghiệm của mình khi làm blog vệ tinh là bạn dành 1 ngày để viết 10 bài về chủ đề mà bạn seo (không cần hay nhưng tuyệt đối phải là unique, bài 600 từ thôi) rồi úp lịch tự động cho nó đăng 2 ngày một bài, sau 5 ngày thì đăng hết 10 bài đó. Trong 5 ngày đó mỗi ngày bạn viết 2 bài unique và copy về 3 bài. sau 5 ngày thù bạn có 25 bài rồi. Bạn lại tiếp tục lên lịch để 2 ngày post một bài. Sau 50 ngày là post xong và bạn có thể đi link chi nó tầm 50 diễn đàn và 50 cái comment blog là đã có một vệ tinh khá ok rồi nhé. Chú ý là bạn sử dụng cái up tin theo lịch có sẵn luôn nhé ko cần code hay plugin gì đâu.
    Blog của mình chuyên biệt về tên miền & thương hiệu www.VuaTenMien.Com, Mời các bạn ghé thăm ! Thanks!

    ReplyDelete

close
Banner Ads Banner Ads