Header Ads Widget

Chỉnh sửa css blog trên điện thoại

Tiến Duật tháng 1 14, 2016
Việc chỉnh sửa CSS trên điện thoại rất khó. vì chúng ta không thể xem mã nguồn trang của nó trên chiếc mobile
Mình sẽ chỉ cho các bạn xem kiểu mobile trên máy tính trước nhé
Các bạn làm như sau : 
Ví dụ : link trên máy tính có dạng : http://muabanjaovat.blogspot.com/
giờ các bạn chỉ cần thêm ?m=1    : http://muabanjaovat.blogspot.com?m=1

Chỉnh sửa css blog trên điện thoại

OK. giờ các bạn có thể xem nguồn trang được rồi

giờ ta tiến hành làm nhé 

Trước khi làm cần :

– Nắm tương đối vững các kiến thức cơ bản về CSS3 và HTML5
– Sao lưu lại code template để đảm bảo có thể khôi phục lại nếu thao tác chỉnh sửa bị lỗi.

Các bước thực hiện responsive cho template blogspot

– Đ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 đọan code này vào dưới nó :
– Tìm thẻ  <body>  rồi sửa nó thành <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Làm các widget responsive với mobile
Code định nghĩa thông thường của 1 widget
Để hiển thị trên di động các bạn cần sửa nó thành
Các tùy biến khác
  • mobile=’yes’ ==> cho phép hiển thị mobile
  • mobile=’no’ ==> không 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
– 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:
Một số lưu ý khi đặt các thuộc tính cho CSS
1. Luôn luôn sử dụng trong % thay 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ể.
Tags:
Tiến Duật

Posted by: Tiến Duật

Tên đầy đủ : Dư Tiến Duật

Đăng nhận xét

2 Nhận xét

Nhập nội dung