Thứ Bảy, ngày 11 tháng 7 năm 2015

Cách tối ưu blogspot thân thiện trên thiết bị di động

Cách tối ưu blogspot thân thiện trên thiết bị di động sẽ giúp cho website của bạn thân thiện với người dùng và đặc biệt là nó có thể ảnh hưởng tích cực đến việc xếp hạng tìm kiếm trên các công cụ tìm kiếm như google, coccoc và nhiều công cụ khác.
Như các bạn đã biết google vừa công bố thuật toán ảnh hưởng đến các kết quả tìm kiếm trên các thiết bị di động, Các trang web nào mà chưa được tối ưu trên các thiết bị di động sẽ mất cơ hội đứng tốp khi người dùng tìm kiếm một cái gì đó, vấn đề đó làm ảnh hưởng, làm giảm sút số lượng rất lớn các khách hàng vào trang web của bạn. Vì do thời đại phát triển nên số lượng người dùng internet tăng cao đặc biệt trên các thiết bị di động (Người dùng có thể dùng điện thoại, các thiết bị di động mọi lúc mọi nơi không phải gò bó về thời gian cũng như địa điểm như máy tính nên số người tìm kiếm trên thiết bị di động nhiều gấp hàng nghìn lần so với trên các thiết bị máy tính). Với lý do đó google đưa ra thuật toán mới giúp cho khách hàng có kết quả tìm kiếm tốt nhất trên các thiết bị di động. Nếu chúng ta không tối ưu trang web cho thân thiện thì web chúng ta sẽ mất lượng khách hàng rất lớn, vì vấn đề đó nên hôm nay chiase69.com sẽ hướng dẫn với các bạn Cách tối ưu blogspot thân thiện trên thiết bị di động.
Cách tối ưu blogspot thân thiện trên thiết bị di động

Cách tối ưu blogspot thân thiện trên thiết bị di động

Để tối ưu blogspot thân thiện thì việc đầu tiên bạn cần làm đó là sau lưu lại theme để có lở tay làm hư hỏng chổ nào mà không biết thì còn lấy theme sau lưu mà dùng chứ đừng để hỏng cả bộ theme mà không biết cách sữa nhé.
Cách tối ưu blogspot thân thiện trên điện thoại

+ Đầu tiên bạn vào blogspot ==> Mẫu ==> Chĩnh Sữa HTML để tối ưu tốt nhất các bạn nên copy theme đó vào notepad + + để chĩnh sữa cho dể
+ Vào code tìm lấy thể <head> rồi thêm đoan code này vào dưới nó
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Tìm thẻ <body> rồi sửa nó thành <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Hiển thị mobile cho widget

- Code định nghĩa thông thường của 1 widget
<b:widget id='ID-type' locked='true' title='Widget-Title'/>
Để hiển thị trên di động các bạn cần sửa nó thành
<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>
Một số tùy biến bạn có thẻ quan tâm

mobile='yes' ==> cho phép hiển thị mobile
mobile='no' ==> ko cho phép hiển thị trên mobile
mobile='only' ==> chỉ được hiển thị trên mobile

Để hiển thị tốt trên các thiết bị khác nhau bạn cần thêm code CSS sau:
@media screen and (max-width : 1280px) {
/* ------------ CSS tùy chỉnh cho PC ------------*/
}
@media screen and (max-width : 1024px) {
/* ------------ CSS tùy chỉnh cho iPad ------------*/
}
@media screen and (max-width : 768px) {
/* ------------ CSS tùy chỉnh cho iPad nhỏ ------------*/
}
@media screen and (max-width : 640px) {
/* ------------ CSS tuỳ chỉnh cho iPhone ------------*/
}
@media screen and (max-width : 480px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động đời cao ------------*/
}
@media screen and (max-width : 320px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}
- Mình xin lấy ví dụ khi các bạn thêm các thuộc tính CSS vào cho tưng phần để hiển thị phù hợp

@media screen and (max-width: ****px)
{
#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}
Một số lưu ý khi đặt các thuộc tính cho css

1. Luôn luôn sử dụng trong % vì dùng px . Ví dụ như Width: 50%;

2. Luôn luôn sử dụng em  thay cho px như . Ví dụ như 10em thay vì 10px.

3. Margin: auto; cũng cần được khuyến khích sử dụng

4. Display:none để ẩn bất kỳ phần cụ thể.
Nhận Chỉnh Sửa Tối Ưu Cho Blogspot
Liên Hệ
Email: anhhunglh@gmail.com
Yahoo: anhhung_249
Skype: anhhung249

Cách tối ưu blogspot thân thiện trên thiết bị di động
  • Cách tối ưu blogspot thân thiện trên thiết bị di động

  • Đăng : Lúc 15:53:00
  • Từ Khóa :
  • Blogger Comments
  • Facebook Comments

6 nhận xét:

  1. Bài của bạn rất hay, mình đã áp dụng thành công nhưng còn phần : "Để hiển thị tốt trên các thiết bị khác nhau bạn cần thêm code CSS sau:" mình không hiểu. Bạn có thể hướng đãn cụ thể hơn giúo mình được không? vì mình cũng là người mới, am hiểu về code cũng "hơi giới hạn" :). Cảm ơn bạn vì bài viết rất hữu ích.

    Trả lờiXóa
    Trả lời
    1. Cái hiển thị css đó thì rất khó đó bạn, phải chỉnh sữa mầu theme css lại hoàn toàn cho phù hợp với đt nên khó. nếu người không chuyên css thì khó sửa lắm

      Xóa
  2. Web của mình sau khi áp dụng hướng dãn của bạn
    mời bạn tham quan nhé : http://www.vnhomelist.com/

    Trả lờiXóa
  3. cảm ơn bạn đã chia sẻ mình đã áp dụng thành công ,bạn ghé qua thăm quan nhé

    Trả lờiXóa
  4. mình không tìm được cái mục trong code ạ
    giải thích giúp mình với thanks

    Trả lờiXóa
    Trả lời
    1. để làm giao diện cho mobile thì đòi hỏi bạn phải nắm vững css và html nhé. Nếu không nắm vững thì sử dụng giao diện mobile của blogspot cũng được hoặc là kiếm giao diện khác thay. Chứ mà làm cái này mất nhiều thời gian lắm

      Xóa

Top