Xây dựng giao diện mobile cho blogspot

GTV - Nhiều bạn nghĩ rằng giao diện mobile cho blogspot rất khó nhằn vì nó có vẻ khó. Thật sự thì sao? Giờ mình sẽ hướng dẫn các bạn xây dựng giao diện mobile cho blogspot xem thực sự thì khó hay dễ nhé.

Bước đầu xây dựng giao diện mobile cho blogspot

Có thể nhiều bạn nghĩ làm giao diện cho mobile ta sẽ phải tự thiết kế một giao diện khác rồi làm nhiều thứ nữa và rất mất công. Thực ra để blog hay website của bạn có giao diện thân thiện với người dùng trên điện thoại không như những gì các bạn nghĩ đâu.
Theo mình biết thì có 2 cách để xây dựng giao diện cho blog và website (thực ra là còn 1 số cách khác nữa). Hai cách đó như sau:

Cách 1: khi vào bằng mobile, website sẽ chuyển sang hẳn một giao diện mới được thiết kế riêng. Các bạn có thể nhận thấy một số trang áp dụng cách này bằng chữ "m". Ví dụ các bạn vào blog bằng PC theo đường dẫn là:
https://www.gocthuvi.net/ nhưng khi vào bằng mobile cũng đường dẫn trên nó sẽ tự động chuyển hướng về m.blogvuicuoilen.blogspot.com.
Cách 2: Vẫn là giao diện trên web nhưng khi vào bằng điện thoại web sẽ co lại cho vừa với màn hình điện thoại và không cần phải thiết kế thêm một giao diện khác.

Cách thứ nhất hơi phức tạp và có nhiều bất cập, mình sẽ hướng dẫn các bạn làm theo cách thứ 2 nhé. Cách thứ hai này vừa dễ làm hơn mà cũng không hề phức tạp như các bạn nghĩ. Quan trọng là các bạn phải hiểu được ý tưởng và cách thực hiện.

Ý tưởng xây dựng giao diện mobile cho blogspot

Ý tưởng của chúng ta đó là sẽ fix CSS cho màn hình điện thoại riêng và cho màn hình PC riêng. Khi kích thước màn hình lớn từ mức nào tới mức nào thì sẽ hiển thị CSS cho PC, khi độ rộng màn hình từ khoảng nào đến khoảng nào thì sẽ hiển thị CSS cho máy tính bảng hay điện thoại.

Về bố cục: các bạn hãy tưởng tượng bố cục của web sẽ co lại cho vừa với màn hình. Ví dụ với trang blogvuicuoilen nhé:

Logo và khung seach sẽ vẫn ở trên nhưng độ dài của khung seach sẽ co lại cho vừa với màn hình điện thoại.
Menu cũng sẽ co lại và ẩn đi các thành phần khác chỉ hiển thị trang chủ.
Phần Thân web trái (nội dung chính) sẽ rộng toàn màn hình để nội dung dễ đọc nhất.
Phần Thân web phải sẽ hiển thị bên dưới phần Thân web trái và cũng rộng toàn màn hình.
Chân trang hiển thị cuối cùng và cũng rộng toàn màn hình luôn.

Cách thực hiện xây dựng giao diện mobile cho blogspot

Với ý tưởng như trên, trong CSS có code dùng để fix CSS theo độ rộng màn hình. Đoạn code này sẽ đặt phía cuối CSS trong trang. Tức là đoạn đó sẽ đặt ngay trước ]]></b:skin>
Mình sẽ giải thích kỹ về nguyên lý của đoạn CSS này cho các bạn hiểu vì nếu không hiểu khi làm sẽ gặp nhiều lỗi và các bạn sẽ không biết phải sửa thế nào (phải hiểu bản chất của vấn đề). Trước tiên nói về nguyên lý load CSS lên blog, load CSS sẽ load từ trên xuống dưới và ưu tiên nhận giá trị ở dưới.
Ví dụ ta có một đoạn CSS

.vi-du {
margin: 10px;
color: red:
margin: 5px;
}

Với đoạn CSS này có 2 margin đều được gán giá trị. Theo nguyên tắc margin: 5px; sẽ được lấy để hiển thị trên web chứ không phải là cái 10px. Đoạn này dễ hiểu mà nhỉ.
Tương tự với nguyên lý đó, khi các bạn đặt đoạn fix giao diện mobile cuối cùng tức là nếu đoạn CSS đó được thực thi thì giá trị đó sẽ được lấy để hiển thị trên web chứ không phải là CSS bên trên. Tức là giá trị nào ta cần thay đổi thì thêm vào phần fix CSS chứ không cần thay đổi hết toàn bộ CSS, nếu cần thêm CSS mới thì thêm vào bình thường. Ok, giờ đi vào thực hiện.

Xây dựng giao diện mobile cho blogspot

Để khai báo tính năng responsiove cho blog, đầu tiên cần thêm thẻ <meta> dưới đây vào trong cặp thẻ <head></head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Tiếp theo vào phần Chủ đề Click theo ảnh:

Vào phần chỉnh sửa giao diện, tích chọn Không. Hiển thị chủ đề dành cho máy tính để bàn trên thiết bị di động. --> Lưu lại.
Bước này để cho blogspot sẽ hiển thị giao diện PC trên thiết bị di động chứ không hiển thị giao diện mặc định của blogspot nữa.

Tiếp đến, vào Chỉnh sửa HTML, tìm ]]></b:skin> copy-paste đoạn mã responsive sau vào trước ]]></b:skin>.

/* Dành cho điện thoại */
@media only screen and (min-width: 320px)
{Code CSS}
/* Dành cho máy tính bảng chiều dọc */
@media only screen and (min-width: 480px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 600px */
@media only screen and (min-width: 600px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 800px (máy tính bảng để ngang, smart phone, ...) */
@media only screen and (min-width: 768px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 800px (máy tính bảng để ngang, smart phone, ...) */
@media only screen and (min-width: 768px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 1280px (desktop) */
@media only screen and (min-width: 1280px)
{Code CSS}

Xong phần khai báo, các bạn chỉ cần hiểu là với mỗi kiểu màn hình các bạn có thể tùy chỉnh CSS khác nhau tức là có thể tùy biến giao diện trên mobile rồi.

Tiếp tục lấy ví dụ nhé: @media only screen and (min-width: 320px) {Code CSS}
Đoạn code này tức là với màn hình hiển thị có độ rộng nhỏ nhất là 320 thì CSS trong đoạn này sẽ có hiệu lực, còn nếu màn hình hiển thị nhỏ hơn 320px thì CSS này sẽ không có hiệu lực.
Ta thử viết vài dòng code trong này xem nhé

@media only screen and (min-width: 320px) {
.than-web {
width:98%;
}
#than-web-trai, #than-web-phai {
float:none;
width: 100%
}
}

Lưu mẫu lại và xem thử kết quả xem sao nhé.

Khi các bạn xem bài viết sẽ thấy ảnh trên giao diện mobile bị lệch về bên phải như này:

Sửa lỗi này các bạn thêm đoạn CSS sau vào trong giao diện dành cho di động là được:

.post img {
margin: 0;
width:100%;
float:left;
}

Giờ ảnh nó sẽ ở giữa, rộng vừa màn hình. Và đây là toàn bộ code CSS fix giao diện mobile của mình:

/* Dành cho màn hình chiều rộng 320 - 600px (máy tính bảng để ngang, smart phone, ...) */
@media only screen and (max-width: 600px) and (min-width: 320px)
{
.than-web {
width:98%;
}
#than-web-trai {
float:none;
width: 100%
}
#than-web-phai {
display:none;
}
.logo-dau-trang {
padding-left:5px;
}
#dau-trang-phai {
}
#searchbox {
padding-right: 5px;
}
form#searchform #s{padding:10px;width:110px;}
form#searchform #sbutton {height:40px;width:42px;}
.post img {
margin: 0;
width:100%;
float:left;
}
}
/* Dành cho màn hình chiều rộng 600 - 1028px (máy tính bảng để ngang, smart phone để ngang, ...) */
@media only screen and (min-width: 600px) and (max-width: 1028px)
{
form#searchform #s{padding:10px;width:250px;}
form#searchform #sbutton {height:40px;width:42px;}
}

Tất cả chỉ có nhiêu đó thôi là đủ để trang blogvuicuoilen load ngon lành trên giao diện mobile rồi

Chú ý: có thể bạn thắc mắc tại sao cái menu của mình nó hiển thị đẹp vậy trong khi mình không fix gì hết. Lý do là trong bài Thiết kế menu cho Blogspot đoạn code đó đã bao gồm cả fix giao diện cho mobile rồi.

Xây dựng giao diện mobile cho blogspot tuy không dài nhưng có lẽ là phần khó hiểu nhất, vì thế mà mình giải thích hơi nhiều. Hi vọng các bạn hiểu được nguyên lý và có thể tự fix được giao diện trên mobile cho blog của mình nhé.

Câu nói muôn thủa, thắc mắc thì comment mình giải đáp. Okie!