Quảng Cáo

dịch vụ thành lập doanh nghiệp
dịch vụ kế toán
học kế toán tổng hợp

Liên Kết Hữu Ích

Thứ Tư, 19 tháng 8, 2015

Thiết Kế Responsive Cho Blogger. tùy biến website trên mobile

Thiết Kế Responsive Cho Blogger Template
---------------------------------------------------------------
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head>:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
* * *
Bước 2: Chèn đoạn code sau vào trước thẻ ]]></b:skin> và tùy chỉnh CSS cho phù hợp khi duyệt site trên mỗi thiết bị khác nhau:
các bạn tự viết css cho những mẫu bên dưới nhé :

@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 ------------*/
}


Hoặc có thể fix theo mẫu dưới :

/* Màn hình PC
----------------------------------------------- */
@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;}}

/* 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%;}}

/* 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;}
}


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.

Không có nhận xét nào:

Đăng nhận xét

Thủ thuật internet - chia sẻ công nghệ với cộng đồng. Mang tất cả thông tin đến với bạn chỉ với 1 click. I LIKE IT

Bài Xem Nhiều Nhất