Hướng dẫn thêm tính năng reponsive cho Blogspot

Thảo luận trong 'Sưu Tầm & Lưu Trữ' bắt đầu bởi ducquan1008, 18/3/15.

Đã xem: 343

Trạng thái chủ đề:
Không mở trả lời sau này.

  1. ducquan1008 Khách

    Đối với những bạn đang seo blogspot mà dùng những template cách đây vài năm thì chắc chắn chưa có tính năng reponsive. Tuy nhiên, khi GG yêu cầu các website cần phải thân thiện với mobile thì mỗi blogspot của chúng ta cần phải có tính năng này. Có bác thì lựa chọn cách đổi Template mới, còn e thì vẫn thích tem cũ nên vẫn giữ nguyên và chỉ thêm vài đoạn code giúp blog có thêm tính năng reponsive. Cách làm như sau:

    - Chèn vào trước thẻ <head>: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    - Chèn vào trước thẻ ]]></b:skin>:
    /* 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;}
    }

    P/S: Em đã áp dụng thành công vào blog của mình, các bác có thể xem qua chứ kí ở dưới. Còn bác nào có cách hay hơn thì chia sẻ cùng anh em nhé! Thanks!


    "Bài viết được VNSEOSEM.COM lựa chọn trích dẫn từ nhiều nguồn chỉ nhằm mục đích sưu tầm và tham khảo. Không thảo luận theo chủ đề này, vui lòng mở chủ đề mới trên diễn đàn nếu bạn cần trao đổi về vấn đề liên quan đến nội dung bài viết."
     
    ducquan1008, 18/3/15
    #1
    Đang tải...
    nam lim xanh

    Bình Luận Bằng Facebook

Bài viết liên quan

Trạng thái chủ đề:
Không mở trả lời sau này.

Chia sẻ trang này