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='"loading" + 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