Nhận xét mới

[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é !
Share:

84 comments:

  1. Template Fb cho những ai cần :
    http://www.tuoitreit.xyz/2017/12/share-template-facebook-giong-phu-cuong.html

    ReplyDelete
  2. ak bác Quân xem lại thanh top Menu mục Download kìa, ghi sai hay mún tạo điểm nhấn v :V

    ReplyDelete
  3. Replies
    1. Tui mở trên phiên bản mobie thấy vẫn ổn :v

      Delete
  4. Replies
    1. Bài của ông thì view cao ngất ngưởng :v Bài của tui đăng thì thấp tịt :v Buồn :((

      Delete
    2. Hóng qc cho Blog tui với :v View ngày đc 1k5-2k thì bao giờ ms đc 1tr view đây :(((

      Delete
    3. khả năng trong tuần này tôi lên 1tr

      Delete
    4. Ông đặt bên tôi trước đi :v

      Delete
    5. Ok ông giờ online Đt nên k tiện đặt tối tôi đặt nha !

      Delete
    6. Rồi rồi nãy qua thấy rồi :v Khủng thật :v

      Delete
    7. Lên views nhanh vô cùng luôn =)) Chỉ với Nam :(

      Delete
    8. Hổng QC cho Blog gì hết á :v Bùn ghê :V

      Delete
    9. #Tính 1 f5 lên cả chục view lẫn :v

      Delete
    10. tính cứ nói quá lên nhanh đâu

      Delete
    11. https://i.imgur.com/HpcuwJt.png
      view việt chả thấy toàn thấy view nước ngoài

      Delete
    12. Mà bác chỉ đi :(( Blog bác giống zombie win quá, 1 f5 lên cả chục views mà ko chỉ, híchíc

      Delete
    13. mấy bác phải có tính lầy để đi spam :) heheheh

      Delete
    14. Có mail hay FB gì k Nam cho xin ib đii :V

      Delete
    15. tưởng mail thì tôi đưa mail tên miền cho còn gmail : ducnam992@gmail.com

      Delete
    16. Rep hangout mail nminhquan933@gmail.com đi ông :v

      Delete
    17. Rồi rồi :V Thôi xuống dưới cmt tiếp nha chứ để dài ngoằng thế này cũng k tiện :v

      Delete
  5. Cho em xin tên Font trong thumnbail đc k ạ ?

    ReplyDelete
  6. Chỉ tui làm cái khung code như trong bài viết đi :v

    ReplyDelete
    Replies
    1. Cái đấy lên GG tự tìm hiểu nha :v

      Delete
    2. http://www.hungstar.tk/2017/12/cach-lam-khung-chua-code-cho-blogger_11.html đây bác

      Delete
    3. Cho phép quảng cáo 1 lần này thôi đấy :v

      Delete
  7. Hay Hay hay Hay Hay Hay qá anh ơi.

    ReplyDelete
    Replies
    1. Hehe :v Thèn kiu Huy Bấy bi nhé !

      Delete
    2. Huy bấy bi lên Top 1 bình loạn rồi kìa :v

      Delete
    3. Quên Hưng Star rồi à
      :)) top nhé 🔝

      Delete
    4. Lúc nãy Huy Top 1 khi mà ông còn chưa vô đây bật liên hoàn cmt ấy :v

      Delete
  8. Replies
    1. Cảm ơn người anh em Hưng nhé ~

      Delete
    2. Mà tui vừa fix lại cái Top bình luận rồi á :v H ông lên Top 1 đc rồi :v

      Delete
    3. Người anh em Quân thi cử thế nào rồi

      Delete
    4. Qua cái kì thi quan trọng nhất rồi, sắp tới còn thi học kì nữa là ổn :V Có time rảnh nghịch Blog rồi :V

      Delete
    5. Mà người anh em Hưng online mail đi tui nói tí nè :))

      Delete
    6. nminhquan933@gmail.com
      Rep hangout mail này đi :))

      Delete
  9. hay hay lắm man mà cái này của bsw à

    ReplyDelete
  10. Replies
    1. Hello bác Quốc cho nhận xét về bài viết đi :V

      Delete
  11. Replies
    1. Áp dụng cho Blog mình ngay và luôn đi nào !!

      Delete
  12. Cho em xin code nút demo với ạ :))
    Mail : ngominhlongg2906@gmail.com
    Thanks ad <3

    ReplyDelete