Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

Cách thiết kế giao diện responsive cho Blogspot

Trần Bá Đạt bởi Trần Bá Đạt
15/12/2017
trong Blogspot, Thủ thuật Blogspot
1
CHIA SẺ
3.7k
LƯỢT XEM
Chia sẻTweetPinChia sẻ

Thiết kế giao diện responsive hiện nay là một phần của một trang web chuyên nghiệp, và cả bạn, tôi và nhiều người khác đều thích một trang web có giao diện responsive. Hiện nay giao diện responsive đã trờ thành sống còn, khi các công cụ tìm kiếm ưu tiên nó hơn, và việc phải thiết kế 1 phiên bản di động cho website làm tốn chi phí nhiều hơn nữa.

Rất nhiều template tùy chỉnh cho blogspot có responsive, tuy nhiên nhiều template bạn thích lại không có giao diện responsive này? Vậy điều bạn nên làm chính là tùy chỉnh lại giao diện cho blogspot theo hướng dẫn ở bài viết này để trang web của bạn có một giao diện responsive tương thích với mọi kích cỡ màn hình.

Trước tiên, giao diện responsive là gì?

Giao diện responsive dễ hiểu nhất là làm cho trang web tương thích với mọi thiết bị có kích cỡ màn hình khác nhau như PC, laptop, tablet, phablet, smartphone…

Thời gian gần đây rất nhiều blog được thiết kế có giao diện responsive để thay thế giao diện di động mặc định được cung cấp cho Blogger. Vì vấn đề xảy ra là giao diện cho di động chỉ tương thích với điện thoại, trên các máy tính bảng thì giao diện này không thể sử dụng được, vì thế giao diện responsive sẽ là giải pháp.

Câu hỏi đặt ra là: giao diện responsive tốt hơn giao diện di động mới chổ nào?

  1. Giao diện responsive sẽ thân thiện với SEO hơn giao diện di động
  2. Thiết kế responsive có thể tự điều chỉnh cho phù hợp với kích thước màn hình như máy tỉnh bảng, phablet…
  3. Thiết kế responsive giúp giảm tốc độ tải trang, tức là giúp tổng thể trang web được tối ưu hơn
  4. Nếu bạn sử dụng Google Adsense, thì quảng cáo đáp ứng sẽ tốt hơn rất nhiều trên giao diện responsive, giúp bạn tăng thu nhập

Hướng dẫn thiết kế giao diện responsive cho Blogspot

Để có thể thiết kế được giao diện 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 đã.

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

– 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):

Cách thiết kế giao diện responsive cho Blogspot

– Click vào vùng code, và 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ỏ —*/
}

Đây là code css tương ứng với từng thiết bị và kích thước màn hình. Bây giờ bạn có thể tùy chỉnh code các thành phần tương ứng với các kích thước màn hình được rồi.

Thay thế / * code css cho…—* / bằng các id và class của tiêu đề, body, sidebar, footer và các phần khác của blog của bạn.

(max-width: ** px) là chiều rộng tối đa mà code sẽ làm việc giống như nếu bạn đặt mã trong phần max-width là 320px thì khi kích thước màn hình nhỏ hơn 320 px thì đoạn code trên sẽ được áp dụng, còn lớn hơn 320px thì code này sẽ không có tác dụng

Nếu bạn đặt css cho ID1(ví dụ thôi) trong max-width 480 nhưng không phải đặt 320 thì có nghĩa là code css ID1 đó sẽ áp dụng cho khoảng kích thước màn hình từ (0-480), nhưng nếu cả css ID1 trong max-width 320 (Có tùy chỉnh thông số) thì code css sẽ áp dụng: ID1 (tùy chỉnh thông số) từ (0;320) và ID1 từ (320-480).

Ví dụ:

@media screen and (max-width: ****px)
{
#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}

Một số css quan trọng trong thiết kế giao diện responsive:

  1. Chiều rộng luôn sử dụng %, không được sử dụng px, ví dụ như width:100%
  2. Luôn sử dụng đơn vị em cho kích thước, thay thế cho px. Ví dụ 10em thay cho 10px
  3. Margin:auto để tự động căn giữa và nếu muốn cách các mép một giá trị nào đó thì sử dụng đơn vị % nhé
  4. Display:none để ẩn các thành phần khác

Chú ý: Các đơn vị chiều dài trong giao diện responsive nên là đơn vị % nhé, để tránh trường hợp một số thành phần bị lỗi không hiển thị được.

  • Xem thêm: Cách ẩn / hiện widget trong Blogspot

Hy vọng với bài viết này đã giúp cho bạn “thông não” được các vấn đề liên quan đến giao diện responsive, và hy vọng bạn sẽ thiết kế được một giao diện responsive tốt cho blogspot của bạn. laugh

4/5 - (2 bình chọn)
Chia sẻ1TweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 35

  1. MR minh says:
    7 năm trước

    Bạn cho hỏi mình của Trang blog https://nhatshops.blogspot.com/2018/06/Quat-dieu-hoa-akizo-zt-nhap-khau-lan.html
    Khi vào bằng iPad thì tiêu đề lại bị đè lên giá tiền. Cách sửa nó như thế nào bạn giúp với .

    Trả lời
  2. Mr Vui says:
    7 năm trước

    Cũng đang mò mẫm làm cái repone
    Chưa đâu vòa đâu. hi

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Cố lên bạn, sự cố gắng sẽ được đền đáp like

      Trả lời
  3. NGUYỄN TRẦN HUY HOANG says:
    7 năm trước

    Bạn có thể cho mình biết nguyên nhân và cách khắc phục 1 nửa bài viết thì hình hiện chuẩn,còn nửa bài viết tiếp theo thì hình tràn ra hết khung màn hình.Làm sao khắc phục được.Xin cảm ơn
    Như link sau https://www.hadaicon.com/2018/02/chinh-phuc-va-truot-cat-binh-dinh.html

    Trả lời
  4. Nam says:
    7 năm trước

    Cho mình hỏi chút với!
    Mình có trang channi.vn khi dùng di động vào trang thì nó hay chuyển web sang chế độ xem trên di động. Nhưng do mình làm web bằng landingpage nên muốn khi người dùng vào bằng điện thoại thì nó hiện luôn chế độ xem trên PC ạ!
    Mong bạn chỉ cách khắc phục!
    thanks u!

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Bạn vào code tìm và xóa dòng này đi nhé:
      meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’. Xóa nguyên dòng đó luôn, bao gồm cả dấu < và dấu /> trước và sau đoạn đó.

      Trả lời
  5. Văn Thịnh Lục says:
    8 năm trước

    anh có dịch vụ sửa giao diện blogspot không? em có cai blog hay cực kỳ nhưng nó bị lỗi cấu trúc: 1 lỗi date không phù hợp nó hiện kiểu 26-7, 2017. 2 lỗi author. 3 lỗi img phù hợp.
    anh inbox giá cho em nha email: [email protected] còn đây là blog thử nghiệm, ko phải blog chính của em: https:/ /hoanghonhon. blogspot. com/

    Trả lời
  6. Trần Bá Đạt says:
    8 năm trước

    Nếu muốn header và footer full màn hình thì bạn chỉ cần CSS nó có width 100% thôi. Tuy nhiên thực tế thì phải xem giao diện đó như thế nào mới làm được, vì có nhiều kiểu code. Bạn nên học CSS đi sẽ làm được. (o)

    Trả lời
  7. Trần Bá Đạt says:
    8 năm trước

    # là id và . là class, là những quy định trong CSS. Các giá trị phía trong nó là do người làm tùy đặt sao cho dễ hiểu theo ý họ thôi.

    Trả lời
  8. Ree says:
    8 năm trước

    Làm cách nào để làm thành header và footer dài full màn hình vậy

    Trả lời
    • dang says:
      4 năm trước

      max-width

      Trả lời
  9. Trần Bá Đạt says:
    8 năm trước

    Bạn có thể view-source tìm nền của nó để xóa. laugh

    Trả lời
  10. Khôi Ròm says:
    8 năm trước

    Bạn cho hỏi blog của mình muốn xóa bỏ nền thì làm ntn

    Trả lời
  11. Kem Trái Cây says:
    9 năm trước

    blogspot code mobile interface

    Trả lời
  12. Admin web says:
    9 năm trước

    mình làm hoài k dc 01208899507 lh chỉ mjk với cãm ơn

    Trả lời
  13. uyen le says:
    9 năm trước

    Nhận code thêm giao diện điện thoại, máy tính bảng cho website – thiết kế giao diện responsive cho tất cả các website mã nguồn wordpress, Joomla, open card, code PHP… giá rẻ
    Làm cho tất cả khách hàng trên toàn quốc
    Giá: 1.5 T
    Liên hệ: 0933 430 108
    Ngoài ra chúng tôi nhận thiết kế website, chỉnh sửa giao diện website theo yêu cầu

    Tại sao cần làm giao diện Responsive (giao diện di động, máy tính bảng)?
    1. Ngày nay smartphone, điện thoại di động ngày càng nhiều , và giá thành rẻ khiến cho số lượng người sử dụng Smartphone và điện thoại di động thay vì dùng desktop/laptop để truy cập web ngày càng tăng . Thêm vào đó sử dụng điện thoại để lướt web rất tiện với những người hay phải di chuyển thường xuyên.
    2. Google kết hợp tính năng “mobile-friendliness” của một trang web trong thuật toán xếp hạng kể từ 21 Tháng Tư, năm 2015, Nghĩa là các websie có giao diện Responsive được đánh giá và xếp hàng cao hơn so với các website đối thủ chưa có tính năng này
    3. Website có tích hợp giao diện di động sẽ có thứ hạng tốt hơn những website cùng lĩnh vực không tích hợp giao diện responsive
    PS: Thật thật xin lỗi nếu thông tin này gây phiền hà cho các bạn

    Trả lời
  14. trung nguyen says:
    9 năm trước

    Blog của mình là http://www.benhhoc.net nhờ admin sửa lỗi giúp mình ạ. cảm ơn admin nhiều

    Trả lời
  15. trung nguyen says:
    9 năm trước

    Admin ơi giúp mình với
    Blog của mình thực hiện responsive trên các lọa màn hình rồi nhưng khi vào xem bào viết thì trên những màn hình nhỏ thì lại bị lỗi không xem được toàn bộ bài viết.
    Nhờ Admin sủa giúp mình với!
    Cảm ơn Admin rất nhiều. Chúc Admin luôn thành công

    Trả lời
  16. Đào Mộng Tân says:
    9 năm trước

    blog của mình vốn là giao diện responsive nhưng khi mình thêm cái code slide show hình ảnh vào thì cái slide show này nó không co giãn theo màn hình là sao hả bạn?
    Mình mù code nên bạn nói chi tiết giúp mình với nhé.
    Thank bạn.
    blog mình: http://thuoctriviemxoangmui.blogspot.com/

    Trả lời
    • Sơn mobi says:
      7 năm trước

      Blog của anh đẹp quá. anh tự thiết kế hay mua template vậy ạ

      Trả lời
      • Trần Bá Đạt says:
        7 năm trước

        Hiện tại blog này mình đã chuyển sang sử dụng nền tảng WordPress nha laugh Bạn muốn template giống thì có thể sử dụng template phiên bản cũ mình có share trong mục Template Blogspot ấy

        Trả lời
        • ly says:
          5 năm trước

          anh ơi e cho cái này vào blog thi bj lôix cú pháp

          Trả lời
  17. Sinhvatcanh24h says:
    9 năm trước

    mình làm theo hướng dẫn thì được rồi, nhưng menu của mình nó drop xuống dài quá nên những menu ở dưới cùng không thể nào xem được vì không có thanh scroll cho cái menu drop xuống đó.
    Bạn chỉ mình cách khắc phục với, cảm ơn bạn.
    – Đây là file chụp màn hình điện thoại https://drive.google.com/file/d/0BxWNgCsaqt_Sa0FtODFHQ0g2RHI1U0lLYW5QeXNkV0JvNWlJ/view?usp=sharing
    – Đây là website của mình: sinhvatcanh24h.com

    Trả lời
  18. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    Vấn đề không phải copy bạn ạ. Mà là code responsive của nó như thế rồi @@
    Vì thiết kế css của mỗi blog khác nhau nên không thể chỉ rõ được phải làm thế nào. Bạn có thể viewsource của blog mình và kiểm tra ở các blog khác, sẽ thấy tất cả các blog này đều có phần responsive khác nhau. Đó là vì đặc điểm thiết kế khác nhau. Bạn muốn chi tiết hơn nữa không được. @-)

    Chỉ còn cách là bạn nhờ người khác xem và code dùm nếu bạn không biết thôi :-s

    Trả lời
  19. Kiên Phạm Văn says:
    9 năm trước

    toàn đi cóp py của người khác về viết ko có gì khác biệt

    nản
    đang làm cho http://dengiaco.com mà kiếm toàn trùng lặp

    Trả lời
  20. Nguyen Thanh Truong says:
    9 năm trước

    làm một bài về mấy cái này đi cậu…đang tìm hiểu…ý là tên có thể khác chứ bản chất là giống nhau hả…? Giống như một người mà mặc nhiều áo…? mà cái "#" , "." là sao…không hiểu lắm…? cũng là do cách người thiết kế đặt hả…?

    Trả lời
  21. Nguyen Thanh Truong says:
    9 năm trước

    à quên…mình có thấy là cái menu ở giao diện web nó không hiện thị ở giao diện mobi…bạn xem hướng dẫn mình làm menu giao diện mobi với…@@…

    Trả lời
  22. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    @@ Cái đấy là mình ví dụ thôi, vì mỗi code đặt các ID và Class khác nhau cũng như cấu trúc khác nhau dẫn tới không thể làm 1 bài chuẩn được @-)

    Trả lời
  23. Nguyen Thanh Truong says:
    9 năm trước

    Ngoài mấ cái này @media screen and (max-width: ****px)
    {
    #main-wrapper { width:100%; margin:0px auto; }
    .header-wrapper { width:100%; }
    #content { margin-right:0; width:100%; float:left; }
    #sidebar { display:none; }
    #footer-wrapper { display:none; }
    }

    thì còn có những phần nào nữa không bạn(Ghi chú luôn thì quá tốt)…?
    Sr nha…hỏi hơi bị nhiều vì code mình không rành…@@… :-d

    Trả lời
  24. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    Đây nhé https://www.tranbadat.com/2015/11/cach-tuy-chinh-quang-cao-adsense-tren-mobile.html (o)

    Trả lời
  25. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    Để tối mình về xem có rảnh không thì viết cho nhé laugh (o)

    Trả lời
  26. Sáng Kiến Lê says:
    10 năm trước

    Khi nào viết đó bạn ơi

    Trả lời
  27. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    Ok, để đó mình viết laugh

    Trả lời
  28. Cần là có says:
    10 năm trước

    Bạn hướng dẫn cách hiển thị quảng cáo vào giao diện mobile đi

    Trả lời
  29. nguyễn dũng says:
    10 năm trước

    x-)

    Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    62 chia sẻ
    Chia sẻ 60 Tweet 0
  • Cách bỏ gạch đỏ trong Word/Excel/PowerPoint

    1 chia sẻ
    Chia sẻ 1 Tweet 0
  • [Nâng cao Ninja Coming] Làm thế nào để mạnh ngay từ đầu khi chơi Ninja Coming?

    146 chia sẻ
    Chia sẻ 144 Tweet 0
  • Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Những tính năng cơ bản của game Pocket Ninja

    6 chia sẻ
    Chia sẻ 5 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.