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 độ...
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 ?
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 thẻ <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 ------------*/
}
/* ------------ 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; }
}
{
#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; }
}
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ể.
Nguồn : http://bittuotblog.blogspot.com/
