Ngày
nay số người dùng di động, máy tính bảng để sử dụng internet ngày một đông
chính vì thế google cũng điều chỉnh và yêu cầu các website phải có giao diện di động (responsive) để phục
vụ người dùng
Vì
thế mình cũng đã tìm hiểu và điều chỉnh và tạo giao diện di động cho blogspot của
mình cho phù hợp với người dùng. Sau đây thì mình sẽ chia sẻ cho các bạn
Để
có thể thiết kế được giao diện di động
(responsive) cho trang blogspot của bạn, đầu tiên đòi hỏi bạn phải có
những kiến thức cơ bản về html và css đã, vì những hướng dẫn bên dưới này chỉ
là những hướng dẫn chung, bạn muốn tùy chỉnh chính xác cho website của mình thì
bạn phải nắm rõ thành phần của web mình đã.
- Đầu tiên các bạn truy cập trang
quản trị của Blogger, tiếp tục vào Mẫu (Template) -> Chỉnh sửa HTML (Edit
HTML):
- Tìm đến thẻ <head>, thêm
code sau bên dưới nó:
<meta
name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1"/>
- Tiếp tục
tìm đến thẻ ]]></b:skin>, và thêm đoạn code này vào phía trên nó:
@media screen
and (max-width : 1280px) {
/* Cho kích thước màn hình nhỏ hơn 1280 ---*/
/* code css cho desktop ---*/
}
@media screen and (max-width : 1024px) {
/* Cho kích thước màn hình nhỏ hơn 1024 ---*/
/* code css cho tablets ---*/
}
@media screen and (max-width : 768px) {
/* Cho kích thước màn hình nhỏ hơn 768 ---*/
/* code css cho tablets nhỏ ---*/
}
@media screen and (max-width : 640px) {
/* Cho kích thước màn hình nhỏ hơn 640 ---*/
/* code css cho iphone ---*/
}
@media screen and (max-width : 480px) {
/* Cho kích thước màn hình nhỏ hơn 480 ---*/
/* code css cho smartphone ---*/
}
@media screen and (max-width : 320px) {
/* Cho kích thước màn hình nhỏ hơn 320 ---*/
/* code css cho điện thoại nhỏ ---*/
}
/* Cho kích thước màn hình nhỏ hơn 1280 ---*/
/* code css cho desktop ---*/
}
@media screen and (max-width : 1024px) {
/* Cho kích thước màn hình nhỏ hơn 1024 ---*/
/* code css cho tablets ---*/
}
@media screen and (max-width : 768px) {
/* Cho kích thước màn hình nhỏ hơn 768 ---*/
/* code css cho tablets nhỏ ---*/
}
@media screen and (max-width : 640px) {
/* Cho kích thước màn hình nhỏ hơn 640 ---*/
/* code css cho iphone ---*/
}
@media screen and (max-width : 480px) {
/* Cho kích thước màn hình nhỏ hơn 480 ---*/
/* code css cho smartphone ---*/
}
@media screen and (max-width : 320px) {
/* Cho kích thước màn hình nhỏ hơn 320 ---*/
/* code css cho điện thoại nhỏ ---*/
}
Thay thế các
thuộc tính css #outer-wrapper,
#header-wrapper,#naviga,#content-wrapper,#footer-wrapper trong templates của bạn
(có nhiều người viết khác nhau) bạn kiểm tra cấu trúc Templates của bạn xem và
làm theo cho phù hợp.
Sau khi chỉnh
sửa xong thì code giao diện di động (responsive) cho blogspot mình là:
/* Màn hình PC
----------------------------------------------- */
@media only screen and (max-width:1024px){
#header-wrapper,#menu,#content-wrapper,#footer-wrapper{padding:0 0;width:990px}}
----------------------------------------------- */
@media only screen and (max-width:1024px){
#header-wrapper,#menu,#content-wrapper,#footer-wrapper{padding:0 0;width:990px}}
/* Màn hình iPad
----------------------------------------------- */
@media only screen and (min-width:768px) and (max-width:989px){
#outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{width:100%}
#main-wrapper{width:60%}
#sidebar-wrapper{width:40%}
.post{padding:10px}
#headtitle{width:260px}
#headtitle {display: block;float: left;margin: 15px auto;text-align: center;}}
----------------------------------------------- */
@media only screen and (min-width:768px) and (max-width:989px){
#outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{width:100%}
#main-wrapper{width:60%}
#sidebar-wrapper{width:40%}
.post{padding:10px}
#headtitle{width:260px}
#headtitle {display: block;float: left;margin: 15px auto;text-align: center;}}
/* Màn hình iPhone Androi
----------------------------------------------- */
@media only screen and (max-width:767px){
#header-wrapper, #outer-wrapper, #main-wrapper, #content-wrapper, #footer-wrapper {
width: 100%;}
#sidebar-wrapper{width:100%;padding: 10px 0 0;}
#headads{display:none}
#headtitle {display: inline-block;float: none;margin: 5px 0;text-align: center;width: 100%;}}
----------------------------------------------- */
@media only screen and (max-width:767px){
#header-wrapper, #outer-wrapper, #main-wrapper, #content-wrapper, #footer-wrapper {
width: 100%;}
#sidebar-wrapper{width:100%;padding: 10px 0 0;}
#headads{display:none}
#headtitle {display: inline-block;float: none;margin: 5px 0;text-align: center;width: 100%;}}
/* Màn hình Smartphone
----------------------------------------------- */
@media only screen and (max-width:479px){
#outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{width:100%}
.post{padding: 5px;}
a.Thumbnail {height: 69px;width: 69px;}
.PopularPosts img {height: 39px;padding: 1px;width: 39px;}
}
----------------------------------------------- */
@media only screen and (max-width:479px){
#outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{width:100%}
.post{padding: 5px;}
a.Thumbnail {height: 69px;width: 69px;}
.PopularPosts img {height: 39px;padding: 1px;width: 39px;}
}
Mình làm mãi ko đc. Xem giúp mình với http://mazdalongbien3s.blogspot.com
Trả lờiXóaMình làm mãi ko đc. Xem giúp mình với http://mazdalongbien3s.blogspot.com
Trả lờiXóaThay mặt kính samsung galaxy s3 chính hãng giá rẻ bạn có thể tham khảo thêm
Trả lờiXóacám ơn admin
Trả lờiXóatrang tin tức
TMS Luxury Đà Nẵng
Dịch vụ thay mặt kính ipad mini 3 lấy ngay
Trả lờiXóaCảm ơn bài viết nhưng mình có thử sao hok d vậy bạn, vui lòng giúp mình Mail :
Trả lờiXóaquangtuyen2504.qn@gmail.com
Cảm ơn bạn đã chia sẻ, qua đây mình cũng muốn chia sẻ đến bạn và mọi người địa chỉ cung cấp DV phiên dịch, dịch thuật đa ngôn ngữ, đa ngành nghề uy tín, nhanh chóng, chất lượng.... trên toàn quốc. Công Ty Phiên Dịch - Dịch Thuật A2Z, đơn vị cung cấp DV phiên dịch, dịch thuật số 1 tại Việt Nam. Điểm lợi khi khách hàng sử dụng DV phiên dịch, dịch thuật tại A2Z: tiết kiệm tối đa chi phí, thời gian, tăng khả năng thành công trong công việc, hoàn phí khi có lỗi từ DV. Tham khảo chi tiết địa chỉ và các ngôn ngữ phiên dịch: Phiên dịch tiếng trung Đồng Nai, Phiên dịch tiếng trung tại Đà Nẵng, Phiên dịch tiếng trung tại Bắc Giang, Phiên dịch tiếng trung tại Bình Dương, Phiên dịch tiếng anh tại Đà Nẵng, Phiên dịch tiếng Trung tại Hải Phòng, Phiên dịch tiếng nhật tại Hải Phòng, Phiên dịch tiếng Hàn tại Hà Nội, Phiên dịch tiếng Hàn tại Hải Dương,....................
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóathanks ad nhiều
Trả lờiXóatop thuoc viet