Seo Onpage Blogspot - #2 Tối ưu CSS3

#Thủ Thuật #Windows #Blogger #Facebook

Seo Onpage Blogspot - #2 Tối ưu CSS3

Share:
Chào các bạn tiếp tục với chuyên mục tối ưu blogspot hôm nay mình sẽ hướng dẫn các bạn cách Tối ưu CSS3

Tối ưu CSS3 để làm gì?

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ích tắc.
Bạn có thể kiểm tra bằng công cụ jigsaw.w3.org để thử xem website của bạn đã chuẩn CSS3 hay chưa?

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.
Khi sử dụng Font Awesome và Font Google bạn sẽ thấy khá nhiều lỗi xuất phát là tiện tích này và để sửa lỗi CSS3 xuất phát từ file này bạn sẽ tìm đoạn code sau đây để thay thế nó:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Ruda:400,700' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Và thay thế nó thành:
<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.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Droid+Sans|Ruda:400,700");
//]]>
</script> 
Đ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 khá nhiều lỗi liên quan đến thằng Font-Awesome này.

2. 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

Thường thì sẽ không xuất hiện nhưng khi test CSS3 sẽ thấy mặt nó. Nếu bạn muốn xoá bỏ có 2 cách làm như sau:
Cách 1: Bạn tìm đoạn code sau:
<b:skin><![CDATA[/*
Và thay thế nó thành
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[/*
Cách 2: Bạn copy code sau
<link href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' rel='stylesheet' type='text/css'/>
Và 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>

3. 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ư thừa 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.
Nếu bạn có vướng mắc chỗ này thì hãy để lại bình luận phía dưới mình sẽ hỗ trợ
Cuối cùng lưu lại và tận hưởng 1 màu xanh chuẩn CSS3 nào!




CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.