[THỦ THUẬT BLOGSPOT] TẠO TRANG RESPONSIVE TEMPLATE TUYỆT ĐẸP

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ạ

DEMO

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é !