Không riêng gì blogspot mà với bất cứ website nào, giao diện mobile cũng đều quan trọng. Nó thể hiện tính chuyên nghiệp và sự thiết kế sáng tạo của người quản trị viên.
![[Code] Thủ Thuật Blogspot l Hướng Dẫn Chỉnh Sữa Giao Diện Giao-dien-mobile-blogspot-to](https://1.bp.blogspot.com/-EmjYHOdqvLU/VyhBO0D1VCI/AAAAAAAAK7Q/mOTViwPNoTQ9_NmDsMwleDZFt-6jzVFdgCLcB/s1600/giao-dien-mobile-blogspot-to.png) |
| Hướng dẫn xây dựng và tùy chỉnh giao diện mobile trên blogspot |
Những chia sẻ dưới đây được mình "đóng gói" sau 2 năm gắn bó với nền tảng blogger. Từ một thằng chân ướt chân ráo cho tới khi đã có thể tự chỉnh sửa giao diện blogspot. Dựa trên template có sẵn, bạn có thể làm gì với giao diện mobile ??? Tùy chỉnh đôi chút, thay đổi bố cục hay tạo mới nội dung ... - đó là những thứ mà chúng ta hoàn toàn có thể làm được :)
Lưu ý
- Hãy sao lưu blogspot trước khi thao tác.
- Phạm vi ảnh hưởng là toàn bộ template.
- Nội dung bài viết được xây dựng theo trải nghiệm thời gian, hi vọng các bạn sẽ thấy thích thú
Cách 1 : Sử dụng giao diện mobile mặc định của blogger (Cơ bản)
- Ưu điểm : giao diện đơn giản, tốc độ tải nhanh.
- Nhược điểm : khó tùy chỉnh, tính thẩm mỹ không cao.
Tiến hành tùy chỉnh
- Đăng nhập blogger, bên menu trái chọn Mẫu. Click vào hình bánh răng ở cột Điện thoại di động.
[/size]
![[Code] Thủ Thuật Blogspot l Hướng Dẫn Chỉnh Sữa Giao Diện Tuy-chinh-0](https://1.bp.blogspot.com/-TVmAuMCPjCk/VyhD4YeX1gI/AAAAAAAAK7c/JYRp4a2dKW01LeC8FxSsJ7jNwGTGmIQ-wCLcB/s1600/tuy-chinh-0.PNG) |
| Tùy chỉnh giao diện mobile |
- Tại mục mẫu dành cho điện thoại di động, chọn Mặc định sau đó lưu lại để test thử.
[/size]
![[Code] Thủ Thuật Blogspot l Hướng Dẫn Chỉnh Sữa Giao Diện Xd-tuy-chinh-mobile-1](https://3.bp.blogspot.com/-cQYYdnVkiRw/VyYkP9FMyoI/AAAAAAAAK6w/gq5n19YHxUUZh8YJkwF6-_nFF6ffvWg0QCLcB/s1600/xd-tuy-chinh-mobile-1.PNG) |
| Giao diện mobile mặc định của blogger |
Lần đầu tiên chọn template, nhờ thằng em thì nó gửi mình đúng cái không có giao diện mobile tùy chỉnh
Lúc đấy cũng chả để ý, setup chạy lên giao diện là sướng lắm rồi. Nhìn cái web sơ khai : tên miền đuôi .blogspot chứ không phải 123itvn.com như bây giờ, nội dung chưa có, toàn tiêu đề label mà vẫn thấy tự hào Về sau, khi blog bắt đầu có lượng truy cập, mình đã nghĩ tới việc nâng cấp giao diện mobile để đặt được quảng cáo adsense(mình đang [url=http://www.123itvn.com/search/label/Ki%E1%BA%BFm ti%E1%BB%81n online?&max-results=9]kiếm tiền online[/url] bằng thằng này) mà với giao diện mặc định của blogspot thì điều này là không thể, đó cũng là lúc mà cách 2 ra đời.
Cách 2 : Sử dụng giao diện mobile tùy chỉnh (Nâng cao)
- Ưu điểm : thay đổi giao diện theo ý thích.
- Nhược điểm : chỉ hiển thị duy nhất 1 giao diện trên nhiều thiết bị khác nhau, tức là với smartphone, máy tính bảng hay note book thì bạn vẫn thấy nó như vậy (khác hoàn toàn giao diện đáp ứng responsive nhé).
Cách 2 chủ yếu để tham khảo, mình không khuyến khích anh em làm theo
Tiến hành tùy chỉnh
- Giống như cách 1, nhưng tại mục mẫu dành cho điện thoại di động thì chọn Tùy chỉnh.
[/size]
![[Code] Thủ Thuật Blogspot l Hướng Dẫn Chỉnh Sữa Giao Diện Tuy-chinh-2](https://3.bp.blogspot.com/-xecMAI9Ou5M/VycJThPDgQI/AAAAAAAAK7A/e02TLK605x0lhpn9qKoKPpUXeLqR9p0-wCLcB/s1600/tuy-chinh-2.PNG) |
| Hướng dẫn xây dựng và tùy chỉnh giao diện mobile trên blogspot |
- Quay trở lại menu, chọn Mẫu / Chỉnh sửa HTML.
- Tìm đến thẻ mở <body> và chèn vào trước đó đoạn mã
[/size]
<b:if cond='data:blog.isMobile == "false"'>
[size]
- Tiếp tục tìm thẻ đóng </body> rồi chèn vào sau đó đoạn mã
[/size]
<b:else/>
<body expr:class='"loading" + data:blog.mobileClass'>
Code_thay-thế</body>
</b:if>
[size]
- Copy toàn bộ code CSS + HTML + Javascript trong cặp thẻ <body></body> hiện tại, paste đè lên chữ Code_thay_thế được mình bôi đen.
- Lưu lại template.
Tổng quát lại thì cả đoạn mã là một câu điều kiện với vế 1 là giao diện desktop còn vế 2 là giao diện mobile. Đây là cách mà mình đã từng sử dụng để sở hữu 1 giao diện mobile không giống ai
Để tùy chỉnh, bạn chỉ cần thay đổi lại CSS ở phần mobile thôi nhé.[/size]
![[Code] Thủ Thuật Blogspot l Hướng Dẫn Chỉnh Sữa Giao Diện Tuy-chinh-4](https://3.bp.blogspot.com/--79uhVdqU4c/VyhLKQdGAlI/AAAAAAAAK7s/fFkUfI21HX8DkILURIaPt9OiWI_mysRgQCLcB/s1600/tuy-chinh-4.PNG) |
| Giao diện mobile và desktop trong câu điều kiện If |
Okie, cách thứ 2 cơ bản đến đây là hoàn tất. Tuy nhiên trong quá trình sử dụng mình mới bắt đầu phát hiện thấy nhiều lỗi không ổn.[/size]
- Mỗi lần cập nhật, sửa code trên giao diện desktop là cũng phải sửa code trên giao diện mobile (làm 2 lần).
- Số lượng code nhiều gấp 2 lần nên thao tác rất hay nhầm hoặc sót.
- Giao diện hiển thị xấu dần trên thiết bị có màn hình to.
Chốt : các bạn không nên tùy chỉnh giao diện bằng cách này, mình chỉ chia sẻ để anh em biết thêm thôi. Cách tiếp theo mới là quan trọng này
Cách 3 : Sử dụng code responsive (Tối Ưu)
Đây là cách mình đang áp dụng với 123itvn và có lẽ cũng là cách phổ biến nhất hiện nay khi tùy chỉnh giao diện trên blogspot.
- Ưu điểm : với code responsive, giao diện sẽ hiển thị tốt trên hầu hết các thiết bị.
- Nhược điểm : cập nhât sau =))
Hầu hết tamplate blogspot hiện nay đều có tính năng responsive nhưng nếu bạn nắm rõ hơn về cách code CSS, bạn vẫn có thể tùy chỉnh giao diện theo ý muốn.
Tiến hành tùy chỉnh
- Vào Mẫu / Chỉnh sửa HTML.
- Để khai báo tính năng responsiove, hãy đưa thẻ meta dưới đây vào trong cặp thẻ <head></head>
[/size]
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
[size][size]
- Tiếp đến, copy-paste đoạn mã responsive sau vào phần dưới cùng của CSS.
Ở đây, mình xây dựng giao diện với chiều ngang tối thiểu là 320px ⇒ tối đa 1280px. Bạn có thể bổ sung thêm kích cỡ chiều ngang nếu muốn.
Code CSS tương ứng với việc hiển thị trên từng thiết bị sẽ do bạn tự thiết lập. Sau khi lưu template, check lại bằng công cụ Viewport Resizer nhé :)[/size][/size]
/* Dành cho điện thoại */
@media all and (min-width: 320px)
{Code CSS}
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 480px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 600px */
@media all 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 all 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 all and (min-width: 768px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 1280px (desktop) */
@media all and (min-width: 1280px)
{Code CSS}
[size=22]Lời kết
Việc xây dựng và tùy chỉnh giao diện mobile trên blogspot không hề khó, chỉ cần nắm vững CSS là chúng ta đã có thể thay đổi giao diện theo ý mình thích. Nếu template mà bạn đang sử dụng chưa có tính năng responsive, hãy cập nhật luôn nhé :)[/size]
