Hiển thị các bài đăng có nhãn Tối Ưu SEO Website. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Tối Ưu SEO Website. Hiển thị tất cả bài đăng

Thứ Hai, 12 tháng 9, 2016

Tối ưu tiêu đề bài viết thành thẻ H1 trong Blogger

Đối với 1 blogger chuẩn SEO thì tiêu đề bài viết hoặc từ khóa cần SEO phải nằm trong thẻ H1, Thẻ H1 là đánh dấu từ khóa mạnh nhất mà Google dành cho SEO.

Do vậy nhiều trang web có tiêu đề bài viết không nằm trong thẻ H1 nên SEO mãi không lên, việc chỉnh sửa lại thẻ này cần phải đụng vào code web

Tối ưu tiêu đề bài viết thành thẻ H1 trong Blogger
Tối ưu tiêu đề bài viết thành thẻ H1 trong Blogger

Hướng dẫn tối ưu tiêu đề bài viết thành thẻ H1

Thủ thuật này sẽ tối ưu tiêu đề bài viết của bạn nằm trong thẻ h1, ngoài trang chủ tiêu đề này sẽ chuyển thành thẻ h3 để nhận tiêu đề web thành thẻ h1.
Mỗi trang đều có từ khóa cần SEO khác nhau trang chủ sẽ nhận tiêu đề blog làm thẻ H1 để làm từ khóa, các tiêu đề bài viết ngoài trang chủ thành thẻ h3. Trong bài viết thì tiêu đề bài viết làm thẻ H1 tiêu đề blog làm thẻ H3

Thủ thuật này sẽ áp dụng các thẻ điều kiện trong blogger

Bước 1: Đăng nhập và Blogger, Mẫu

Tìm:
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Thay thành:
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:blog.pageType != “static_page”‘>
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>      
<data:post.title/>
</b:if></b:if></h3>
</b:if><b:else/>
<h1 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

Bước 2: Sửa CSS kích thước, màu sắc cho các thẻ H1 H3 này

Tìm các dòng:
.post h3 {…}
.post h3 a, .post h3 a:visited {…}
.post h3 a:hover {…}

Sửa thành 
.post h1, .post h3 {…}
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {…}
.post h1 a:hover, .post h3 a:hover {…}

Hoặc muốn tách riêng ra thì dùng
.post h1 {…}
.post h1 a {…}
.post h1 a:hover {…}
.post h1 a:visited {…}
.post h3 {…}
.post h3 a {…}
.post h3 a:visited {…}
.post h3 a:hover {…}

Chúc bạn thành công!

Thứ Tư, 27 tháng 7, 2016

Tối ưu tiêu đề blog h1 cho blogspot

Khi xây dựng website trên nền tảng blog hơn 90% các blog khi sử dụng logo hình ảnh sẽ bị lỗi không lấy tên blog ở trang chủ làm thẻ h1.

Tối ưu tiêu đề blog h1 cho blogspot
Tối ưu tiêu đề blog h1 cho blogspot
Do vậy đoạn code mà mình chia sẻ dưới đây sẽ làm cùng lúc 2 nhiệm vụ là tối ưu lỗi HTML5 tại logo và đặt lệnh điều kiện để nhận tiêu đề blog ở trang chủ làm thẻ h1, tiêu đề blog sẽ tự động đổi thành thẻ h3 khi ở bài viết. Lúc đó tiêu đề bài viết sẽ chuyển thành thẻ h1 để bạn có thể dễ dàng SEO bài viết hơn


Về phần tối ưu tên bài viết làm thẻ h1 sẽ được mình chia sẻ sau, bài này mình chỉ hướng dẫn tối ưu phần logo thôi.

Hướng dẫn tối ưu logo tiêu đề blogger

Bước 1: Đăng nhập vào blogger.com và chuyển đến phần mẫu
Bước 2: Tìm đoạn code bên dưới
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
Bước 3: Thay đoạn code vừa tìm được ở bước 2 thành:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/><span style='display: none;'><data:blog.title/></span></a></h1>
<b:else/>
<h3 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/><span style='display: none;'><data:blog.title/></span></a></h3>
</b:if>
Kiểm tra: Bạn dùng tiện ích SEOquake và kiểm tra ở trang chủ. Tên blog đã được chọn làm thẻ h1 ở trang chủ và tự động chuyển thành thẻ h3 ở trang bài viết.

Chúc các bạn thành công! 

Thứ Hai, 25 tháng 7, 2016

Tối ưu SEO ONPage - #4 Nén CSS và Javascript trên blogger

Trong loạt bài viết tối ưu SEO Onpage chúng ta đã cùng đi qua 3 bài viết gồm tối ưu CSS3, Tối ưu HTML5, Tối ưu cấu trúc dữ liệu trên structure data tool của google.

Bài viết tiếp theo sẽ hướng dẫn các bạn 2 công việc tiếp theo là nén CSS và Javascript.

Nén CSS và Javascript trên blogger
Nén CSS và Javascript trên blogger

I. Tối ưu CSS cho Blogger

Nhiệm vụ của phần tối ưu SEO Onpage nén CSS này là giảm tải CSS cho code bạn cần làm 2 việc
1. Xóa các id và các class trùng lặp, xóa bỏ một số lên css không cần thiết để giảm dung lượng
2. Nén CSS bằng 1 trong các công cụ sau
Các công cụ này sẽ giúp xóa bỏ các khoảng trắng giúp code CSS được nén lại giảm dung lượng
csscompressor.com
Lưu ý: bạn nên phân từng đoạn nhỏ để nén không nên nén 1 lần toàn bộ CSS sẽ rất dễ bị lỗi. Mỗi lần lưu nên kiểm tra lại giao diện xem có lỗi phần nào không. Để an toàn bạn nên backup template thường xuyên
Nén CSS giúp website load nhanh hơn
Nén CSS giúp website load nhanh hơn

Nén CSS tại chỗ














II. Tối ưu Javascript

1. Thêm   async='async'   vào giữa cặp thẻ <script> </script>
Ví du:
Thay 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
Thành
<script async='async' src='https:///ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>
Lưu ý nếu xảy ra tình trạng lỗi thì bạn không nên xử lý thằng này nhé và thằng này cũng giúp cỉa thiện nhiều đến điểm Google Insight 

Cách khác:

Bạn có thể thay link .js với url bất kì
Thay
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
Thành
 <script type="text/javascript">
function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "https:///ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";
 document.body.appendChild(element);
 }
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script> 

 2. Sử dụng các công cụ online để nén Javascript

Các công cụ mình thường dùng là:

  1. jscompress.com
  2. javascript-compressor.com

Lưu ý: bạn chỉ cần copy phần code nằm trong cặp thẻ <script> và </script> lại chừa cặp thẻ <script> lại nhé
Chúc các bạn thành công!

Chủ Nhật, 17 tháng 7, 2016

Tối ưu SEO Onpage - #3 Tối ưu cấu trúc dữ liệu trên Blogger

Structured-data hay còn gọi là Cấu trúc dữ liệu hay Dữ liệu có cấu trúc nếu gọi riêng cho Google là cấu trúc khai báo của code web. Việc tối ưu cấu trúc theo chuẩn này sẽ giúp Google dễ đọc các thành phần code web hơn. Mỗi trang web (nói đến blogger) hiện nay có đến 3000-4000  đoạn code hoặc hơn. Do vậy, cấu trúc lập trình không rõ ràng hoặc chưa khai báo sẽ làm Google khó xác định được cấu trúc website.
Tối ưu cấu trúc dữ liệu trên Blogger
Tối ưu cấu trúc dữ liệu trên Blogger
Cấu trúc lập trình mới sẽ khai báo phần Header, Sidebar, Footer.... với các chuẩn khai báo mới.
Các cấu trúc lập trình cũ thường sửa dụng <div để khai báo cho các thành phần blog như:
<div id='header-wrapper'>
<div id='sidebar-wrapper'>
<div id='footer-wrapper'>
......

Sẽ được thay thành:

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
......

Trong bài viết này theo kinh nghiệm của mình sẽ hướng dẫn các bạn tối ưu cấu trúc của blogger của bạn. Bài viết #3 nằm trong chuỗi bài viết Tối ưu SEO Onpage

Kiểm tra website của bạn đã tối ưu cấu trúc chưa?

Truy cập trang web structured-data và kiểm tra website của bạn. Công cụ sẽ hiện cấu trúc của website và để xuất cho bạn các lỗi cần phải sửa, lưu ý là các lỗi này khi fix rất khó khăn và không phải ai cũng có thể làm được nếu chưa rõ sâu được cấu trúc lập trình của các ngôn ngữ mà mình nói ở đây chỉ là blogger.

Kiểm tra Tôi Là Quản Trị Blog sẽ cho bạn biết thông tin gì?

Mình đã khai báo đầy đủ các cấu trúc website cho google, có thể thấy ở đây chúng ta có 9 việc cần phải làm và mình sẽ hướng dẫn từng công việc một.

Tối ưu cấu trúc dữ liệu
Tối ưu cấu trúc dữ liệu

1. Tối ưu WPHeader trên blogger

Tìm:
<div id='header-wrapper'>
Thay thành:
<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Việc sử dụng cấu trúc này sẽ khai báo cho Google biết đây là đoạn code của phần Header từ đó Google có thể đọc code dễ dàng hơn hay còn gọi là bạn đang tối ưu công cụ tìm kiếm (SEO)

2. Tối ưu WPSideBar trên Blogger

Tìm
<div id='sidebar-wrapper'>
Thay thành
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

Tìm thẻ đóng </div> của nó và thay thành </aside> nhé.

Từ đây về sau khi lưu mẫu lại sẽ gặp lỗi bạn cần thay các thẻ </div> thành các thẻ đóng tùy vào thẻ mở của nó nhé

3. Tối ưu WPFooter trên Blogger

Tìm
<div id='footer-wrapper'>
Thay thành
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Thay thẻ đóng </div> của nó thành </footer>

4. Tối ưu phần website tìm kiếm

Mình cũng chưa biết gọi tên phần này như thế nào. Khi tìm kiếm trên thanh địa chỉ Google và bạn nhập với cú phát toilaquantri.com_[Phím Tab]_Từ khóa bạn sẽ có thể sử dụng công cụ tìm kiếm ngay trên blogger Tôi Là Quản Trị.
Cách thực hiện là chèn đoạn code vào giữa cặp thẻ <head> ... </head> trong website của bạn. Nhớ đổi lại tên miền nhé

<script type='application/ld+json'>
{ "@context": "http://schema.org", "@type": "WebSite", "url": "http://www.toilaquantri.com/", "potentialAction": { "@type": "SearchAction", "target": "http://www.toilaquantri.com/?q={search_term}", "query-input": "required name=search_term" } }
</script>

5. Tối ưu phần SiteNavigationElement

Phần này dùng để khai báo vị trí của menu, bạn thực hiện các bước sau
Tìm phần
<div id="id của phần menu">
Mỗi menu thường có khai báo Id khác nhau nên bạn cần tìm id bao phần menu của bạn
Thay thành
<nav id='menu-wrap' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

id='menu-wrap' bạn thay lại cho giống id menu của blog mình nhé
Thay thẻ đóng </div> của nó thành </nav>

6. Tối ưu phần chính của BLOG

Phần này khai báo phần Main chứa nội dung của Blog
Tìm
<div id='content-wrapper'>
Hoặc một số blog thường dùng <div id='main-wrapper'> để khai báo, sẽ tùy vào mỗi blog và dùng cho phù hợp
Thay thành
<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
Hoặc
<div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Còn các phần Product là sử dụng các đánh dấu Schema dạng sản phẩm mà có dịp mình sẽ hướng dẫn sau. Bạn có thể tìm hiểu trước tại đây: https://schema.org/

Các chuẩn đánh dấu PersonHatom thường thì gặp lỗi, do vậy bạn nên chọn Template Blogger đã chuẩn 2 dòng này sẳn vì qua thời gian mình đã tìm và cố gắng fix 2 lỗi này nhưng vẫn chưa được nên không thể hướng dẫn các bạn.

Tham khảo thêm bài viết khác:
Chúc các bạn thành công!

Thứ Ba, 12 tháng 7, 2016

Tối ưu SEO Onpage Blogger - #2 Sửa lỗi HTML5

Đây là bài viết thứ 2 trong loạt bài Tối ưu SEO Onpage xử lý với nền tảng Blogger.
Bài viết #2 này sẽ hướng dẫn các bạn tối ưu cấu trúc HTML5 cho blogger/website của bạn.
Website chuẩn HTML5 cũng là một trong những tiêu chí SEO hàng đầu mà mình đưa ra. Các cấu trúc lập trình mới như CSS3 và HTML5 có nhiều cải tiến mới, các ngôn ngữ lập trình mới đưa ra hỗ trợ nhiều lệnh hơn hơn nữa là trình duyệt sẽ đọc code chuẩn mới này nhanh chóng nhờ đó tăng tốc độ load website.
Sửa lỗi HTML5 cho blogger
Đầu tiên bạn cần tìm hiểu thuật ngữ SEO là gì

Kiểm tra chuẩn HTML5 cho website

Trang website validator.w3.org sẽ giúp bạn kiểm tra cấu trúc HTML5 cho website/blog của bạn và những đây là những kinh nghiệm để fix các lỗi HTML5 để tối ưu SEO Onpage sau này.

Kiểm tra sơ qua Tôi Là Quản Trị Blog's

Sửa lỗi HTML5
Sửa lỗi HTML5
Các kết quả trả về toilaquantri.com hoàn toàn chuẩn HTML5 và không có bất kì lỗi gì. Sau đây là những kinh nghiệm mình chia sẻ để cho các bạn thực hiện việc tối ưu HTML5 cho blog của bạn.

Việc tối ưu HTML5 cũng có liên quan mật thiết đến việc tối ưu CSS3

1. Tối ưu cho các file .CSS nhúng link từ bên ngoài

Nếu khi kiểm tra HTML5 nếu có thấy lỗi từ các link nhúng ngoài này thì có 2 cách xử lý:
** Cách a) 
Copy hết toàn bộ CSS trong link đó và dán lại trước thẻ Skin và tối ưu
** Cách b) dành cho những người làm biếng hơn :))
Dạng file .CSS nhúng bên ngoài:
<link href='http://abc.xyz/mnx.CSS' rel='stylesheet' type='text/css'/>
Thay thành:
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://abc.xyz/mnx.CSS");
//]]>
</script>
Lưu mẫu lại và kiểm tra HTML5 lại sẽ mất các lỗi từ file này

2. Sửa lỗi HTML5 tại logo

Khi blog của bạn sử dụng Logo và check với công cụ kiểm tra HTML5 bạn sẽ thấy phát hiện lỗi HTML5 tại logo và đây là cách khắc phục để đạt chuẩn HTML5 tại logo
Tìm đoạn code sau:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
Và thay thế bằng
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/><span style='display: none;'><data:blog.title/></span></a></h1>
<b:else/>
<h3 itemprop='name'>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/><span style='display: none;'><data:blog.title/></span></a></h3>
</b:if>
Đoạn code thay thế mình đã sử dụng điều kiện nếu là ở trang chủ thì tên Blog sẽ khai báo là thẻ H1 và vào bài viết thì tên Blog sẽ chuyển thành thẻ H3. Nên các bạn cố gắng tìm các thẻ <b:if> .... </b:if>  bao đoạn code tô đỏ để thay thế toàn diện.

3. Fix lỗi HTML5 phiên bản ver2

Xóa các khai báo trong đầu blog

Đối với các template sử dụng version 2 bạn sẽ luôn thấy đoạn code sau:
<html b:version='2' class='v2' lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Khi kiểm tra HTML5 bạn sẽ thấy 7-8 lỗi từ đoạn code này vì vậy cách sửa là bạn xóa và giữ lại đoạn code sau
<html b:version='2' class='v2' lang='vi'>
Mỗi lần truy cập vào mẫu đoạn code đầu lại xuất hiện, do đó bạn phải luôn xóa nó đi mỗi lần lưu template lại

4. Sửa lỗi liên quan tới ảnh

Lỗi
Sửa lỗi ảnh thiếu thẻ Alt
Lỗi này liên quan đến hình ảnh thiếu khai báo thuộc tính alt="mô tả ảnh" bạn chỉ cần thêm thuộc tính alt vào sau thẻ mở ảnh <img alt="mô tả ảnh" src="url_ảnh"......../>

Lỗi này thường rất nhiều bạn hãy thêm thuộc tính alt vào hết trong ảnh nhé

Các lỗi thông thường khác công cụ đã báo cho các bạn chỉ cần tinh ý đọc được đề xuất bằng tiếng anh của nó bạn sẽ sửa lỗi nó dễ dàng.

Nếu gặp khó khăn trong quá trình fix lỗi HTML5 cho blog của mình các bạn liên hệ hỗ trợ với mình tại facebook cá nhân Huỳnh Phụng

Chúc blog bạn đạt chuẩn HTML5

Thứ Hai, 11 tháng 7, 2016

Tối ưu SEO Onpage Blogger - #1 Tối ưu CSS3

Xin chào các bạn!
Trong khá nhiều những bài viết trước mình đã chia sẻ cho các bạn khá nhiều kiến thức về SEO hơn hết là sử dụng trên nền tảng Blogger.
Trong bài viết SEO là gì? đã chia sẻ cho các bạn 2 khái niệm quan trọng trong SEO chính là SEO OnpageSEO Offpage.

Cho nên bắt đầu từ bài viết #1 về tối ưu Onpage mình sẽ không nói nhiều về lý thuyết mà chia sẻ nhiều về kỹ thuật nâng cao để các bạn tối ưu Onpage trước cho các bạn có thể bắt đầu làm SEO được ngay lập tức
Tối ưu SEO Onpage Blogger - #1 Tối ưu CSS3
Tối ưu SEO Onpage Blogger - #1 Tối ưu CSS3
Với kinh nghiệm SEO Onpage của mình, mình sẽ lần lượt chia sẻ các kỹ thuật tối ưu SEO Onpage quan trọng là tối ưu code CSS3 và HTML5 với 2 bài viết hướng dẫn #1 là tối ưu CSS3 và bài hướng dẫn #2 là tối ưu HTML5 sau đó mà khá nhiều bạn trong group đang quan tâm.

Trải nghiệm chuẩn SEO Onpage cùng Tôi Là Quản Trị Blog's

Check bằng công cụ jigsaw.w3.org sẽ giúp bạn kiểm tra website của bạn đã chuẩn CSS3 chưa?. Website chuẩn CSS3 sẽ giúp trình duyệt web giải mã code nhanh hơn -> website load nhanh hơn -> Hơn nữa sẽ giúp con bọ Google đọc và index dễ dàng hơn. Hơn hết là tối ưu được với người dùng khi người dùng trãi nghiệm load website trong tít tắc.

Tối ưu SEO Onpage Blogger không còn lỗi
Sau khi kiểm tra với blog http://www.toilaquantri.com các cấu trúc CSS3 đã được mình tối ưu chuẩn CSS3 100% hoàn toàn. 
Nhiều bạn đã hỏi làm như thế vậy? 
Và sau đây là lời giải đáp, mình không che giấu kiến thức cho AE làm gì, mặc dù cũng có =)). Mình sẽ chia sẻ ngay luôn các bước mình đã từng thực hiện như sau thế nào để các bạn nắm rõ hơn


1. Tối ưu CSS3 cho Font-Awesome và Font Google

Font-Awesome là tiện ích giúp bạn có thể tạo ra các icon trong blogger thường sử dụng cho menu và các khai báo thông tin website <xem ảnh minh họa>
Sử dụng Font-Awesome trong Blogger

Khi sử dụng Font Awesome bạn sẽ thấy khá nhiều lỗi xuất phát là tiện tích này với hơn 70 lỗi và để sửa lỗi CSS3 xuất phát từ file này bạn sẽ dùng đoạn code sau đây để thay thế nó:
Xóa (tìm code tương tự thôi vì mỗi blog có thể khác nhau)
<link href='http://fonts.googleapis.com/css?family=Ruda:400,700' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
Thay bằng:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic");
//]]>
</script>
Đoạn code trên còn sử dụng để lấy Font từ Google là sử dụng font Roboto Condensed để khai báo cho website, bạn có thể thay cho font khác đơn cử như font kinh điển của giao diện Metro UI là font Segoe UI. Tên font có khoảng trắng thì bạn thay thế thành dấu (+) sẽ thành Segoe+UI để thay cho font Roboto+Condensed đang dùng.

Đoạn script trên để thay thế cho link Font Awesome và link Google Fonts nên bạn có thể xóa 2 link này trong code luôn
Lưu mẫu và test CSS3 lại bạn sẽ fix được hơn 70 lỗi liên quan đến thằng Font-Awesome này.

Tối ưu CSS mặc định của Blogger

CSS mặc định của blogger thường có dạng:
https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css đôi lúc sẽ được ẩn đi nhưng test CSS3 sẽ thấy mặt nó :D

Khi kiểm tra CSS3 thì rất nhiều lỗi phát sinh từ CSS tự sinh ra mặc định của thằng Blogger nên ta sẽ dùng đoạn script để bọc nó lại, khi tìm kiếm trong mẫu có thể bạn sẽ không thấy nó nhưng cứ copy nó lại:
Từ
<link href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' rel='stylesheet' type='text/css'/>
Sửa thành
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css");
//]]>
</script>
Hoặc cách khác
Thay:
<b:skin><![CDATA[/* và */ ]]></b:skin>
Lần lượt thành:
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[/* và */]]></b:skin> 
Các đoạn code ở giữa 2 thằng này các bạn để nguyên không thay đổi gì cả, việc sửa lại thẻ này hiển nhiên là sẽ xóa CSS mặc định của Blogger nên có thể dẫn đến tình trạng vỡ cấu trúc CSS của blog, lúc đó bạn chỉ cần code nhẹ CSS lại
Đến đây hãy thở phào vì 50% công việc tối ưu CSS3 đã xong rồi đấy. Tiếp tục

Các lỗi cấu trúc CSS3 vặt khác

Thông thường jigsaw.w3.org nó sẽ báo lỗi CSS ngay phần phía dưới phần báo lỗi dưới địa chỉ tên miền. Bạn chỉ cần xóa các CSS dư không hợp với chuẩn CSS3 được đề xuất là sẽ được thôi phần này chủ yếu là xóa bớt thôi. Mình sẽ không demo nhiều phần này vì biết đọc tiếng anh là sẽ hiểu được nó yêu cầu cái gì thôi
Nếu các lỗi còn lại các bạn cảm thấy khó khăn để fix thì liên hệ với mình qua facebook cá nhân tại đây: Huỳnh Phụng
Cùng ngắm lai chuẩn xanh lè nào :))
Chúc các bạn thành công!
Đón chờ bài sau hướng dẫn tối ưu HTML5 nhé!
MD-StoTop