Thủ Thuật Blogspot | Thêm CSS Giúp Hình Ảnh Chuẩn Responsive Trong Blogspot


Chào các bạn , Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ thông thường nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được. Thông thường khi muốn responsive một template thì chúng ta thường hay lên một website có sẵn tính năng này và sử dụng, nhưng bây giờ chúng ta có thể áp dụng nó ngay trên những Blog/website của bạn chỉ bằng một vài bước đơn giản sau :
Hình Minh Hoạ

CÁC BƯỚC THỰC HIỆN :

Bước 1: Tạo một trang mới cho blogspot, và chuyển sang phần viết HTML
Bước 2: Chèn đoạn code sau vào :
<div id="content-BSWcontent_v2" itemscope="itemscope" itemtype="//schema.org/Blog" role="main"> <div class="main section" id="main"> <div class="widget Blog" data-version="1" id="Blog1"> <div class="breadcrumbs"> <a href="http://www.quanchanhkun.tk/" rel="tag"> <i class="fa fa-home"></i></a> <i class="fa fa-angle-right" style="color: #ededed; filter: brightness(50%);"></i> Testing Responsive Template</div> <div class="blog-posts hfeed"> <!--Can't find substitution for tag [defaultAdStart]--> <div class="date-outer"> <div class="date-posts"> <div class="post-outer"> <div class="post hentry"> <div class="post-header"> <div class="post-header-line-1"> </div> </div> <div class="post-body entry-content" id="post-body-5156723274066430178"> <div class="ty-inner"> <div class="post-body entry-content" id="post-body-6997401890727193252" itemprop="articleBody"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> #header-top,#header-wrapper,#navigation-menu,#comments,#footer-wrapper{display:none} input{margin-bottom:10px} #content-wrapper, #post-wrapper{width:100%;} .trim{max-height:300px} .display {     position: relative;     left: 0px;     height: 600px } .url {     float: left;     background-color: #cc4e46;     width: 100%;     margin: 0 auto;     box-shadow: 0px -2px 5px #333 } .responsivewrapper  {     width: 100%;     max-width: 1200px;     margin: 0 auto     background-color: #fff;     background-image: url("https://3.bp.blogspot.com/-R1JkQieIFiw/WOsu76b8FzI/AAAAAAAAZyk/TGvjyp5sYOgbP6H8OX-8_IHzkPklEjl3ACLcB/s1600/background.jpg");     background-size: 100%;     background-size: cover;     margin-top: 20px;         margin: 0;     padding: 0 } iframe.RS {     transform: scale(0.219);     -webkit-transform: scale(0.219);     -o-transform: scale(0.219);     -ms-transform: scale(0.219);     -moz-transform: scale(0.219);     transform-origin: top left;     -webkit-transform-origin: top left;     -o-transform-origin: top left;     -ms-transform-origin: top left;     -moz-transform-origin: top left;     margin: 0;     padding: 0;     position: relative;     background-color: #fff;     border-color: #000 } .mobile {     background-image: url("https://1.bp.blogspot.com/-ZomsyswvBpI/WOsqrPv240I/AAAAAAAAZyM/5LCuuPNhvws4wvGyrmPLwz12Ijg_DefeQCLcB/s1600/iphone-optimised.png");     position: absolute;     width: 95px;     height: 196px;     top: 375px;     left: 300px;     z-index: 5 } .mobile iframe.RS {     width: 320px;     height: 480px;     top: 32px;     left: 11px;     overflow-y: hidden } .tablet {     background-image: url("https://3.bp.blogspot.com/-4ciCGF0jDKM/WOsq1igXzFI/AAAAAAAAZyQ/wa792M1UDaAq75RY4KvmA6v6JjpJMlbeACLcB/s1600/ipad-optimised.png");     background-repeat: no-repeat!important;     width:246px;height:420px;z-index:3;position:absolute;left:120px;top:230px; } .tablet iframe.RS {     width: 800px;     height: 1080px;     top: 36px;     left:41px;     overflow-y: hidden !important; } .laptop {     background-image: url("https://1.bp.blogspot.com/-Yzrqhz948YA/WOsrACxrkxI/AAAAAAAAZyU/mF0RrhFITOoPJMVOKUhVBYl_CTRQhQC1QCLcB/s1600/laptop-screen-optimised.png");     width: 477px;     height: 307px;     top: 264px;     left: 560px;     position: absolute;     z-index: 2 } .laptop iframe.RS {     width: 1280px;     height: 802px;     top: 26px;     left: 60px;     transform: scale(0.277);     -webkit-transform: scale(0.277);     -o-transform: scale(0.277);     -ms-transform: scale(0.277);     -moz-transform: scale(0.277);     transform-origin: top left;     -webkit-transform-origin: top left;     -o-transform-origin: top left;     -ms-transform-origin: top left;     -moz-transform-origin: top left } .desktop {     position: absolute;     width: 566px;     height: 538px;     background-image: url("https://1.bp.blogspot.com/-j8a2M2d4F5Y/WOsrRBRA8vI/AAAAAAAAZyY/3gGckkMZE2oQVTs46JdwdR2IZS6B054JQCLcB/s1600/large-screen-optimised.png");     top: 0px;     left: 220px;     z-index: 1 } .desktop iframe.RS {     left: 28px;     top: 38px;     width: 1600px;     height: 992px;     transform: scale(0.3181);     -webkit-transform: scale(0.3181);     -o-transform: scale(0.3181);     -ms-transform: scale(0.3181);     -moz-transform: scale(0.3181);     transform-origin: top left;     -webkit-transform-origin: top left;     -o-transform-origin: top left;     -ms-transform-origin: top left;     -moz-transform-origin: top left } @media (max-width: 1160px) {     .display {         width: 95%;         height: 550px;         transform: scale(0.81);         -webkit-transform: scale(0.81);         -o-transform: scale(0.81);         -ms-transform: scale(0.81);         -moz-transform: scale(0.81)     }     .desktop {         left: 180px     }     .laptop {         left: 520px     }     .tablet {         left: 80px     }     .mobile {         left: 260px     }     input {         width: 88%     } } @media (max-width: 1070px) {     .display {         left: -50px     } } @media (max-width: 1000px) {     .display {         height: 500px;         transform: scale(0.71);         -webkit-transform: scale(0.71);         -o-transform: scale(0.71);         -ms-transform: scale(0.71);         -moz-transform: scale(0.71);         top: -40px     }     .desktop {         left: 140px     }     .laptop {         left: 480px     }     .tablet {         left: 40px     }     .mobile {         left: 220px     } } @media (max-width: 850px) {     .display {         height: 500px;         transform: scale(0.65);         -webkit-transform: scale(0.65);         -o-transform: scale(0.65);         -ms-transform: scale(0.65);         -moz-transform: scale(0.65)     }     .desktop {         left: 100px     }     .laptop {         left: 440px     }     .tablet {         left: 0px     }     .mobile {         left: 180px     } } @media (max-width: 768px) {     .display {         height: 450px;         transform: scale(0.55);         -webkit-transform: scale(0.55);         -o-transform: scale(0.55);         -ms-transform: scale(0.55);         -moz-transform: scale(0.55)     }     a.button {         font-size: 1.6em;         line-height: 1.75em;         margin-top: 0.5em;         width: 100%     }     input {         height: 1.2em;         width: 100%     } } @media (max-width: 670px) {     .display {         height: 400px;         left: -70px;         transform: scale(0.45);         -webkit-transform: scale(0.45);         -o-transform: scale(0.45);         -ms-transform: scale(0.45);         -moz-transform: scale(0.45)     } } @media (max-width: 560px) {     .display {         height: 270px;         top: -65px;         transform: scale(0.37);         -webkit-transform: scale(0.37);         -o-transform: scale(0.37);         -ms-transform: scale(0.37);         -moz-transform: scale(0.37)     } } @media (max-width: 440px) {     .display {         left: -17px;         top: -65px;         width: 70px;         transform: scale(0.35);         -webkit-transform: scale(0.35);         -o-transform: scale(0.35);         -ms-transform: scale(0.35);         -moz-transform: scale(0.35)     } } @media (max-width: 380px) {     .display {         height: 235px;         left: -17px;         top: -65px;         width: 70px;         transform: scale(0.27);         -webkit-transform: scale(0.27);         -o-transform: scale(0.27);         -ms-transform: scale(0.27);         -moz-transform: scale(0.27)     }     .desktop {         left: 100px     }     .laptop {         left: 515px     }     .tablet {         left: 0px     }     .mobile {         left: 180px     }      } </style> <!-- IE8 BugFixes thanks to @ingozoell details are https://github.com/justincavery/am-i-responsive/issues/2?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer8b8d6&utm_medium=twitter --> <!--[if IE 8]> <style> .desktop iframe.RS { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3181, M12=0, M21=0, M22=0.3181, SizingMethod='auto expand')"; } .laptop iframe.RS { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.277, M12=0, M21=0, M22=0.277, SizingMethod='auto expand')"; } .tablet iframe.RS { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.234, M12=0, M21=0, M22=0.234, SizingMethod='auto expand')"; } .mobile iframe.RS { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.219, M12=0, M21=0, M22=0.219, SizingMethod='auto expand')"; } </style> <![endif]--> <!--[if lte IE 7]> <style> .desktop iframe.RS { filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.3181, M12=0, M21=0, M22=0.3181, SizingMethod='auto expand'); } .laptop iframe.RS { filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.277, M12=0, M21=0, M22=0.277, SizingMethod='auto expand'); } .tablet iframe.RS { filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.234, M12=0, M21=0, M22=0.234, SizingMethod='auto expand'); } .mobile iframe.RS { filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.219, M12=0, M21=0, M22=0.219, SizingMethod='auto expand'); } </style> <![endif]--> <script src="//ami.responsivedesign.is/js/jquery-1.11.2.min.js"></script> <script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script> /* <![CDATA[ */ jQuery(document).ready(function()  {     jQuery("#testRS").click(function(event){      alert(jQuery( '#url' ).val());         jQuery("iframe.RS").attr('src', jQuery( '#url' ).val());     });     jQuery('.display div').click(function() {         jQuery(this).addClass('top').removeClass('bottom');         jQuery(this).siblings().removeClass('top').addClass('bottom');         jQuery(this).css("z-index", a++);   }); }); /* ]]> */ </script> <img border="0" src="https://lh4.googleusercontent.com/-YIchbB18aEQ/WOtCl2cbw2I/AAAAAAAAZy4/rfRE1ka0q7wjZDgLS-Ep1pT_Vz5kjGTlACLcB/s1600/test-responsive-design.png" style="display: none;" /> <div class="responsivewrapper"> <section class="display"> <div class="mobile bottom"> <div class="trim"> <iframe class="RS" id="mobile" src="http://www.quanchanhkun.tk/"> </iframe> </div> </div> <div class="tablet top"> <div class="trim top"> <iframe class="RS" id="tablet" src="http://www.quanchanhkun.tk/"> </iframe> </div> </div> <div class="laptop bottom"> <div class="trim"> <iframe class="RS" id="laptop" src="http://www.quanchanhkun.tk/"> </iframe> </div> </div> <div class="desktop bottom"> <div class="trim"> <iframe class="RS" id="desktop" src="http://www.quanchanhkun.tk/"> </iframe> </div> </div> </section></div> <div style="background: #66A182; color: white; margin: 0 0 12px 0; padding: 12px;"> <span style="font-size: medium;"><b>Link website cần test</b></span></div> <form id="rwdform" name="rwdform"> <input id="url" name="url" placeholder="http://www.quanchanhkun.tk/" style="height: 45px; width: 300px;" type="url" value="" /> </form> <a href="javascript:void(0);" id="testRS" style="background-color: #66a182; color: white; padding: 6px;">TEST!</a></div> </div> </div> </div> <div class="comments" id="comments"> <a href="https://www.blogger.com/null" name="comments"></a></div> </div> </div> </div> </div> </div> </div> </div>
Bước 3 : Lưu lại và tận hưởng !

LỜI KẾT :

Đơn giản vậy thôi, chúc các bạn thành công và đừng quên truy cập vào Blog mỗi ngày để ủng hộ mình nhé !

Bình luận tại đây:

32 nhận xét:

  1. Mọi thắc mắc liên hệ Bác Quân :v Không liên quan tới Tui kk :v

    Trả lờiXóa
  2. Đùa chứ đoạn code này dài hơn đoạn code bên anh lắm á!

    Trả lờiXóa
    Trả lời
    1. Em đâu biết :v Bài này của tác giả :v

      Xóa
    2. Nhầm của cộng tác viên :v

      Xóa
  3. Có vẻ như nó không đc hoàn hảo như mình nghĩ :( Để CN rảnh sẽ fix lại và update ngay nhé !
    http://www.upsieutoc.com/image/4RZOow

    Trả lờiXóa
  4. đoạn code của a có 2 dòng, đoạn code này dài lê thê :v

    Trả lờiXóa
    Trả lời
    1. Em đâu biết mấy này :v Của Bác Quân up :v

      Xóa
  5. E thay giúp a domain mới nhé e
    https://phucuongblogger.com

    Trả lờiXóa
  6. temp đẹp vll, có share temp cũ k ông ơi :D

    Trả lờiXóa
  7. Cái này hình như ông mod lại giữa template cũ và template mới đúng không nhỉ

    Trả lờiXóa

Hãy chứng minh bạn là người có văn hóa qua cách nói chuyện của chính mình.