Thư viện

Trải nghiệm

Thứ Hai, tháng 7 15, 2013

Thiết kế Responsive Blogger Template khi xem bằng mobile và PC

Là thiết kế bố cục một trang web đáp ứng sự linh hoạt, điều chỉnh chiều rộng và phong cách của mình theo kích thước màn hình của các thiết bị có kích thước màn hình khá nhau. Nó sẽ trông khác nhau trên khi xem màn hình máy tính để bàn so với khi xem trên một điện thoại thông minh hoặc Tablet (có hai kích cỡ: chân dung và phong cảnh)

Chia sẻ:
Thiết kế Responsive Template giúp cho blog hoạt động tốt trên điện thoại di động đã trở thành một xu hướng trong phát triển web ngày nay. Công nghệ điện thoại di động hiện nay phát triển vô cùng do vậy lượng người dùng sử dụng điện thoại di động lướt web không ngừng tăng nhanh. hiện nay mọi người thích đọc email, lướt web trên điện thoại so với sử dụng máy tính để bàn của họ. Đơn giản vì tính tiện lợi, dễ dàng kết nối wifi không dây và các mạng GPRS là một lý do khuyến khích sử dụng các thiết bị di động như điện thoại thông minh (Apple và Android), máy tính bảng, netbook và điện thoại di động có độ phân giải thấp như NOKIA.

Nhiều webmaster hiện nay quan tâm đến việc thiết kế các mẫu Blogger linh hoạt so với các bố cục có chiều rộng cố định truyền thống. Namkna đã nhận dược một số yêu cầu như vậy. Do đó bài viết này namkna sẽ hướng dẫn tối ưu hóa Responsive Blogger Templates cho cộng đồng Blogger của Google. Bạn sẽ học cách để thiết kế giúp cho bố cục Blog của bạn tự điều chỉnh tự động để phù hợp vớ các màn hình có kích thước khác nhau. (bài viết có sử dụng một số tư liệu hình ảnh của MTB)

Responsivetemplate là gì?


Là thiết kế bố cục một trang web đáp ứng sự linh hoạt, điều chỉnh chiều rộng và phong cách của mình theo kích thước màn hình của các thiết bị có kích thước màn hình khá nhau. Nó sẽ trông khác nhau trên khi xem màn hình máy tính để bàn so với khi xem trên một điện thoại thông minh hoặc Tablet (có hai kích cỡ: chân dung và phong cảnh)

Đối với người dùng Blogger:

Nếu bạn đã kích hoạt Responsive di động cho blog blogger thì khi bạn xem blog của bạn trên một điện thoại thông minh, bạn sẽ thấy một giao diện hoàn toàn khác so với khi xem trên một máy tính để bàn hay latop của bạn. Theo mặc định, tất cả các blog blogger đã được tối ưu hóa khi xem bằng điện thoại di động nhưng giao diện mobile còn quá đơn giản và không đại diện cho blog của bạn vì vậy chúng ta sẽ học cách tạo và bố trí mang phong cách riêng cho các blogger mình.

Xem thử blog của bạn trên ác trình duyệt khác nhau!
Bạn có thể sem trước blog ủa bạn sẽ thay đổi thế nào khi áp dụng thủ thuật mà namkna sẽ giới thiệu sau đây bằng cách sử dụng công cụ sau: 




☼ Bước 1: Thêm thẻ meta hỗ trợ Responsive template.

1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây vào sau thẻ <head> :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Trong đó:
  • width=device-width sẽ giúp phát hiệ và nhận biết kích cỡ màn hình khác nhau.
5- Lưu mẫu lại và tiến hành bước tiếp theo.

☼ Bước 1: Dùng CSS 3 để truy vấn các cài đặt của bạn cho các giao diện khác nhau.

Các thẻ Media dán trước thẻ ]]></b:skin> sẽ truy vấn theo thuộc tính CSS3 đã định trước để phát hiện kích thước màn hình và áp dụng các cài đặt cho kiểu màn hình đó.
Các bạn có thể xem hai ví dụ về việc truy vấn media cho điện thoại thông minh và các thiết bị Tablet.
@media screen and (max-width : 480px) {
/* nếu kích thước màn hình từ 480px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */
/* Dành cho điện thaoij thông minh */
}

@media screen and (max-width : 768px) {
/* nếu kích thước màn hình từ 768px trở xuống sẽ truy vấn các thuộc tính trong thẻ media này */
/* Dành cho Tablets */
}

Dưới đây là một số lời khuyên thú vị mà các bạn nên ghi nhớ khi áp dụng viết này:
Mẹo để nhớ:
  1. Sử dụng em thay vì các điểm ảnh (px) để xác định font-sizes, padding, margin .v.v....
  2. Sử dụng tỷ lệ phần trăm (%) thay vì giá trị số để xác định chiều rộng của cột
  3. Tạo media riêng cho 3 kiểu màn hình chính là: 480/768/1024
  4. Hãy nhớ sử dụng hộp kích thước (box-sizing), chiều rộng tối đa (max-width) và chiều rộng tối thiểu (min-width).

Ví dụ mình muốn thay đổi độ rộng của phần main, và để phần sidebar xuống dưới phần main khi xem ở điện thoại có kích thước màn hình dưới 480 thì sẽ dán code sau trước thẻ ]]></b:skin>.
@media screen and (max-width : 480px) {
#main-wrapper{width:100%px}
#sidebar-wrapper{float:none}
}

49 nhận xét:

  1. bước chèn mã meta bị lổi anh nam ơi

    Trả lờiXóa
    Trả lời
    1. Anh đã khắ phục rồi e xem lại nha.

      Xóa
    2. đã làm như trên mà ko được anh ơi site của e 123tailieufree.com

      Xóa
  2. Bài viết thì hay nhưng chưa đầy đủ. Bạn phải chỉ chi tiết cách custom template mobile và 1 số tập lênh cho người dùng. Chứ thật ra blogger đã được Google hỗ trợ sẵn rồi và website gì tum lum popup. Hj. Website mình chạy trên mobile cũng mượt mà. Mình chuyên
    đào tạo Seo cần thì liên hệ mình nhé
    Giaiphapthuonghieu.vn

    Trả lờiXóa
    Trả lời
    1. Nếu bạn theo dõi các bài viết và đọc kỹ bài viết sẽ thấy những thứ đó ình đã giới thiệu hết rùi XEM NGAY

      Xóa
  3. mấy mẫu simple của blog mình làm như trên và Testing Responsive Designs nó vẫn thế :| mặc dù tắt chế độ di động rồi .

    Trả lờiXóa
    Trả lời
    1. Tempplate của bạn tải trên mạng và tính năng đó đá được tích hợp sẵn rùi nha.

      Xóa
  4. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  5. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  6. Anh Nam.
    Sao em làm mà nó không được.
    Blog em: Tải game miễn phí

    Trả lờiXóa
    Trả lời
    1. Đây chỉ là hướng dẫn cơ bản muốn làm thành cống em phải viết đủ CSS cho giao diện mobile nha.

      Xóa
  7. Với thời điểm lượng người sử dụng smartphone truy cập internet thì đây là nhu cầu hết sức thiết yếu để phát triển blogspot khi co thể tương thích với cả thiết bị mobile.

    Trả lờiXóa
    Trả lời
    1. Đúng vaayjhieenj nay nhu cầu dùng các thiết bị như smatfone và máy tính bảng đang tăng lên từng ngày nếu tận dụng được thì đó sẽ là một lợi thế không hề nhỏ với tất cả mọi người.

      Xóa
  8. Hi Nam,
    Sao blog của mình chạy chính xác được trên Firefox 17.0 mà không chạy được trên 19.0,24.0, IE thì chỉ chạy được trên 7.0, không chạy được trên phiên bản cũ, Có cách nào chình lại không? Nam xem giúp mình với
    www.hieusports.com

    Trả lờiXóa
    Trả lời
    1. Bạn hãy test thử trên máy tính khác đi nha, Mình đang dùng firefox 24.0 và IE 8 vào blog bạn vẫn thấy nó chạy oke mà. Bạn hãy xóa cookie của trình duyệt thử xem sao nha,.

      Xóa
    2. Thank Nam, mình đã áp dụng rất nhiều tip của Nam vào blog mình. Hiện mình chỉ làm để khách xem giày thôi, rất mong Nam cho ý kiến về blog của mình:
      - làm như vậy thôi đã được chưa
      - có nên làm thêm phần nào và bỏ phần nào không (nếu có)...
      Thank N nhiều nhiều

      Xóa
    3. Về cơ bản thì trang của bạn load nhanh và giao diện cũng tương đối phù hợp.
      Nhưng theo mình phần banner header nên thay thế thành một slider ảnh chạy bằng CSS thì hơn.

      Xóa
    4. Slider thì mình làm theo bài này: http://www.haakblog.com/2013/06/how-to-add-image-slider-in-blogger-post.html
      Mình đã áp dụng bài này http://namkna.blogspot.com/2011/08/huong-dan-tong-quat-viec-chen-flash-vao.html#.UkxAa9JRBLU nhưng không thể nào thay thế header bằng widget hết, hay là template mình đã cố định rồi vậy N?

      Xóa
    5. Bạn đọc kỹ lại bước 3 ở bài viết đó sẽ thấy header hiện thêm tiện ích thôi bạn ak,

      Xóa
    6. Tát cả blog đều có đoạn đó hết,

      Xóa
    7. được rồi Nam ơi, câu hỏi cuối cùng nha Nam, cái widget để chạy cái slider đó giờ làm sao để ẩn đi vậy, làm mọi cách rồi không được,

      Nam giúp giùm cái nha, cho nó ẩn đi hoặc thành màu đen cũng được. Xem hình dưới nha Nam:

      http://1.bp.blogspot.com/-2qdyBM8abJA/Uk1WWwJRfuI/AAAAAAAAAQI/fvXBGAr-W74/s1600/widget.png

      Xóa
    8. - Nếu bạn không sử dụng nữa có thể bấm vào chỉnh sửa và xóa nó đi.

      - Nếu bạn muốn hiển thị nó ở một trang nhất định thì xem BÀI NÀY
      Lưu ý là code dán bao quanh code của widget đó nha.

      Xóa
    9. xóa nó đi thì không chạy được slider N ơi, hiện trang khác thì trang chủ cũng không xài slider được :(

      Xóa
    10. Hãy xóa nó đi và chèn đoạn code mà bạn thêm trong đó vào hẳn template nha bạn,

      Nếu không muốn xóa bạn có thể kéo nó xuống phần footer của trang blog nha bạn,

      Xóa
    11. Khồng có gì dâu bạn ak.

      Xóa
  9. anh Nam cho em hỏi cách khắc phục lỗi khi xem trên IE9, bố cục nó bị hư không còn đúng như trên G Chrom và FFx nữa..:d

    Trả lờiXóa
    Trả lời
    1. Nguyên nhân chính là do CSS của mẫu đó được người viết chưa hack cho IE. E nên liên hệ để tác giả blog cập nhật vestion mới nhất nha.

      Xóa
  10. Bài viết rất có ích.
    Anh làm ơn hướng dẫn thêm làm sao để blog hiển thị Thumbnail của bài viết khi xem trên mobile được ko ạ
    Blog của em chỉ hiện mỗi tiêu đề khi xem trên mobible : http://bikini18.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạn đang sử dụng mẫu mobile tùy chỉnh của blogger. Để có thể hiển thị hình ảnh khi xem bằng điện thoại di dộng thì bạn hãy tải hình ảnh trực tiếp lên trên blog nha.

      Ít nhất trong mỗi bài viết phải có một hình ảnh được tải trực tiếp lên trên trang của bạn nha.

      Xóa
  11. Haiza sáng nay mày mò làm theo hướng dẫn của bạn mà không ra Nam ơi. Của mình sao nó toàn viết là em chứ không có px nên mình ko biết chuyển như thế nào? Vid dụ: 47.2226em, 59.xxx em là cái gì vậy?

    Màn hình 768 có phải là màn hình ipad dựng đứng ko? Nếu dựng đứng thì site mình bị lóp lẹm hẳn widget vậy phải chỉnh dòng nào để khi xem ở chế độ màn hình IPAD dựng đứng thì các widget nó chạy xuống dưới main chính chứ không song song như hiện tại.

    Mình không biết sửa lại dòng nào, bạn xem giúp

    Trả lờiXóa
    Trả lời
    1. Bạn có thể sửa lại đơn vị từ em thành px tuy nhiên trong blog thì bạn không nên để cả 2 đơn vị đó. Thông thường độ rộng của bài viết và sidebar bạn nên chuyển đổi nó sang % như thế nó sẽ hiển thị tốt hơn.

      Với sidebar ở chế độ 720 bạn có thể sử dụng thuộc tính sau cho sidebar:

      float:none !important; width:100%

      Xóa
  12. Dường như Nam vẫn chưa hiểu ý mình và cách bạn hướng dẫn mình cũng ko bít làm thế nào. Mình nhờ bạn test qua cái site của mình trên giao diện responsive và ngó sang phần màn hình 768 xem làm cách nào để chuyển toàn bộ widget bên phải xuống dưới main chính vì nó bị lẹm mất góc đấy.

    Trả lờiXóa
    Trả lời
    1. @media screen and (max-width :768px) {
      #mainblogsec{width:100% !important;}
      #secondarybwrap{float:none !important; width:100%}
      }

      Xóa
  13. Có cách nào để ảnh khi hiển thị dạng responsive zoom lên được không a? E để responsive dùng tay slide thì nó không zoom được. Chỉ hiển thị vừa với kích cỡ màn hình -_-

    Trả lờiXóa
    Trả lời
    1. Câu hỏi của e chưa rõ dàng, hiện tại anh cũng đang dùng thủ thuật này vẫn zoom bình thường mà e.

      Xóa
    2. Anh cho em cái demo em xem thử em nghiên cứu ^^

      Xóa
    3. Anh xem hộ cái blog của em chỉnh sao để ảnh nó zoom được? Em xem trên phone nó không zoom được

      Xóa
    4. Trên giao diện điện thoại chất lượng hình ảnh là do cài đặt thiết bị đó e ak. E có thể xem trang của a với kích thước trình duyệt khác nhau hoặc trên iphone sẽ rõ nha e.

      TRên các thiết bị nếu muốn zome e phải mở file ảnh đó lên sẽ zoom được, tức là chỉ xem từng hình ảnh một.

      Xóa
  14. Blog của em, một số bài viết bị tràn ra ngoài không còn trong khung màn hình.
    Link bài viết: http://www.kemtrangdawhitedoctors.com/2014/07/kem-tri-mun-hieu-qua-white-doctors.html
    Lỗi này khắc phục sao vậy anh Nam ?
    Tư vấn giúp em với ạ !

    Trả lờiXóa
  15. Nam viết bài hướng dẫn cụ thể hơn về các phần nên có trong các thẻ media đi

    Trả lờiXóa
  16. Chào Nam!

    A đã xem và làm theo rất nhiều bài hướng dẫn về blog của e. E viết thật công phu và dễ làm theo. Cảm ơn sự hỗ trợ từ những thông tin trên web của e rất nhiều.

    Tuy nhiên sau khi a áp dụng các thủ thuật cho blog của mình thì chức năng Responsive-Template hiện ĐÃ KHÔNG CÒN HOẠT ĐỘNG ĐƯỢC NỮA (blog này a làm giúp vợ anh bán hàng mà). Cụ thể:
    # Template mẫu a đang dùng: http://johnygantengstore-cart.blogspot.com/
    # Sau khi chỉnh sửa thì hiện giờ blog của a hiện trạng như thế này: http://maykichsua.blogspot.com/

    Nhờ Nam cùng a e hướng dẫn a cách làm thế nào để KHÔI PHỤC CHỨC NĂNG RESPONSIVE-TEMPLATE
    Cảm ơn tất cả các bạn trước vì những bài viết các bạn đã đống góp cho cộng đồng!

    Trả lờiXóa
  17. Mình làm theo hướng dẫn của bạn rồi, nhưng còn quá nhiều lỗi, bạn có thể giúp mình xử lý các lỗi sau cho giao diện mobile ko?
    1. Mình muốn bỏ hết các slide bên phải.
    2. Để quảng cáo dưới trang( dưới body)
    3. Tăng font chữ
    Xin cám ơn và sẽ hậu tạ.
    trang của mình đây: www.soanbaionline.com
    Test với Google Pagespeed chỉ đc 82/100 và 67/100( mobile)
    Email liên hệ: htdoha@gmail.com
    SDT 0933 679 535

    Trả lờiXóa
  18. sao ko làm được thế ad... giúp với Tài liệu miễn phí
    Đang dùng cái mặc định xấu quá ...
    Ad có chỉ em cái làm Responsive giống như trang của được ko ak

    Trả lờiXóa
  19. Chào bạn, mình đang muốn thiết kế riêng 1 cái template riêng cho phiên bản mobile. Quả thực mình đọc bài viết của bạn thì chưa thấy làm thế nào? Bạn còn bài viết nào chi tiết hơn ko?

    Trả lờiXóa
  20. Bạn ơi cho mình hỏi mình muốn làm hiệu ứng khi dê chuột vào ảnh to cho cả trang blog như trang này thì làm như thế nào hả bạn http://blogbanhangv4.blogspot.com/.

    Trả lờiXóa
  21. trang blogger của mình cũng vào bằng điện thoại ko dc, không biết tại sao

    Trả lờiXóa
  22. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  23. trang của mình hiển thị trang chủ ở chế độ mobile bị lỗi, ad giúp mình fix lỗi với, trang của mình là
    http://www.nhavuong.net/

    Trả lờiXóa