slider

Tìm Kiếm từ khóa với Google

» » Cách Code để Blogspot hiển thị tốt trên di động -Mobile

Cách Code để  Blogspot hiển thị tốt trên di động -Mobile

Cách Code để  Blogspot hiển thị tốt trên di động -Mobile. Code hiển thì di động cho blogspot. Làm gì để blogspot hiển thị tốt trên di động.Code Responsive Blogspot. Code blogsger để hiển thị tốt trên moblie

Hiện nay công nghệ phát triển rất nhiều các thiết bị di động hiện đại cấu hình khủng được đưa ra thị trường chính vì vậy nhu cầu lướt web trên nhiều nền tảng khác nhau khiến các web site cũng như blogspot cũng cần thay đổi để làm sao để hiển thị một cách tốt nhất trên các thiết bị này

Qua bài viết này mình xin chia sẻ với các bạn một chút ít kiến thức để các bạn có thể hiểu thêm cũng như tìm hiểu sâu hơn về thiết kế web blog di động.Có thể nói đây là một kiến thức nâng cao có thể là khá khó áp dụng nếu bạn không giỏi về code

Tại sao chúng ta phải thiết kế website blog hiển thị tốt cho di động ?

  • Thiết kế Responsive Blogspot  giúp blog bạn SEO tốt hơn, nhìn chuyên nghiệp hơn
  • Thiết kế Responsive Blogspot  nó sẽ tự điều chỉnh theo mọi kích thước như trên Smartphone, Tablet hoặc các thiết bị khác để người dùng dễ dùng hơn 
  • Thiết kế Responsive giảm tốc độ tải trang web đó có nghĩa là hiệu suất tổng thể của bạn sẽ tăng lên.
  • Designs Responsive cũng tăng Thu nhập của bạn và bạn có thể sử dụng đơn vị quảng cáo adsense đáp ứng cho tối đa hóa thu nhập của bạn.

Chuyển đổi của bạn Blogger của bạn hiển thị tốt trên Mobile

- Trước khi tiếp tục với quá trình này đảm bảo rằng nó đòi hỏi kiến thức cơ bản về HTML5 và CSS3
- Sao lưu code lại để lại 1 bản gốc nếu bạn sửa sai, nên nghịch qua các blog demo để không gây ảnh hưởng gì nhiều

Cách thực hiện

- Điều đầu tiên đăng nhập blog vào phẩn sủa code, mình khuyến khích các bạn tải về rồi sửa bằng phần mềm chuyên dụng code web như notepad ++, Adobe Dreamweaver ....

- 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 hể <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 vaf0c 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ể.


Cách Code để Blogspot hiển thị tốt trên di động -Mobile

Cách Code để  Blogspot hiển thị tốt trên di động -Mobile

Bạn đang xem Cách Code để Blogspot hiển thị tốt trên di động -Mobile tại Blog Bít Tuốt Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt Blog nếu bài viết có ích !
Like Bít Tuốt Blog trên Facebook để ủng hộ mình nhé

«
Next
Newer Post
»
Previous
Older Post

2 comments:

  1. Anh ơi, chia sẻ cách cố định thanh menu cho blog giống của anh với. em làm thử trên mạng ko được

    ReplyDelete
  2. ông viết thế này tôi đọc chả hiểu gì trơn

    ReplyDelete