Thêm Widget Responsive Recent Post Blogspot

Share:
Thêm Widget Responsive Recent Post Blogspot

Thêm Widget Responsive Recent Post Blogspot

Hồng Hải đã đăng Thứ Hai, 18 tháng 6, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • Hello xin chào các bạn đến hẹn mình lại lên đây, Hôm nay mình xin chia sẻ cho mọi người một widget mới rất đẹp

    Cách Thực Hiện
    Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin> nhé
    /* CSS Responsive Slider Recent Post */
    #featuredpost {padding: 0 70px 0 80px;margin:15px auto;}
    #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
    #slides ul{height:320px}
    #slides li{width:50%;height:100%;position:absolute;display:none}
    #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
    #slides li:nth-child(1){left:0;top:0}
    #slides li:nth-child(2){left:50%;width:25%;height:50%}
    #slides li:nth-child(3){left:75%;width:25%;height:50%}
    #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
    #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
    #slides li:nth-child(1) h4 {    font: 600 18px Roboto Condensed;overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
    padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
    height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
    #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
    padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
    #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
    background:#ff6553;margin:0;}
    #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
    padding:5px 21px;text-transform:uppercase;margin:0;}
    #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
    #slides a{display:block;width:100%;height:100%;overflow:hidden}
    #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
    #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
    #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;;background-position:50% 40%;background-repeat:repeat-x;}
    #slides h4{    font: 600 14px Roboto Condensed;position:absolute;bottom:40px;margin:0;
    left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;
    background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
    #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
    position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
    text-transform:uppercase;}
    #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
    #slides .overlayx,#slides li{transition:all .4s ease-in-out}
    #slides li:nth-child(1) .overlayx{display:none;}
    #slides li:hover .overlayx{opacity:0.1}
    @media only screen and (max-width:800px){
    #featuredpost{display: none}
    #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
    @media only screen and (max-width:600px){
      #slides ul{height:600px}
      #slides li:nth-child(1){width:100%;height:50%}
      #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
      #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
      #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
      #slides li:nth-child(5){display:none;}}
    @media only screen and (max-width:480px){
    #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
     Bước 2: Ta tiếp tục chèn code bên dưới vào trước thẻ </body> nha
    <script src='https://cdn.rawgit.com/Arlina-Design/frame/18274fc5/slider-posts.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"https://www.honghaiblog.net/",
    MaxPost:8,
    idcontaint:"#featuredpost",
    ImageSize:500,
    interval:10000,
    autoplay:true,
    tagName:false
    });
    });
    //]]>
    </script>
     Và nhớ là phải thay https://www.honghaiblog.net/ thành tên miền blog của bạn nhé nếu không nó sẽ hiển thị bài viết của mình ở đó.
    Bước 3: Để hiển thị Widget ta chỉ cần chèn nó ở bất kì đâu mà bạn muốn hiển thị
    <div id="featuredpost"></div>
     Vậy là xong có gì không hiểu bạn cứ comment bên dưới mình sẽ hỗ trợ bạn.
    Code: codepen.io
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    50 nhận xét:

    1. "Ae Đừng Lấy Thumbnail của mình nha" :v có cần thiết phải vậy kh a :v

      Trả lờiXóa
    2. tiện ích :v buổi trưa vui vẻ nha a

      Trả lờiXóa
    3. Cho em xin thumbnail về đóng tủ thờ :))

      Trả lờiXóa
    4. Đẹp lắm e, a lấy về xài thử :)

      Trả lờiXóa
    5. Cái GÌ HongHai Share cũng chất + đẹp

      Trả lờiXóa
    6. Ngày nào cũng chờ Post mới -_- doluoibieng :/

      Trả lờiXóa
    7. Theme của ông này đa số là màu graidient :v

      Trả lờiXóa
      Trả lời
      1. graidient cho đẹp nhưng đa số vẫn là màu tím mà :v

        Xóa
    8. Hải trc giờ design luôn tinh tế và đẹp mắt, đổi temp nào cũng zậy nhìn cái nhận ra liền :v

      Trả lờiXóa
    9. Bên chỗ thống kê sao màu graidient chạy đẹp vậy?

      Trả lờiXóa
    10. buổi sáng vui vẻ nha anh
      anh edit theme lại nhìn chất vler :v

      Trả lờiXóa
    11. [img]https://sv1.uphinhnhanh.com/images/2018/06/11/banner.png[/img]

      Trả lờiXóa
    12. https://sv1.uphinhnhanh.com/images/2018/06/11/banner.png

      Trả lờiXóa
    13. Cho em ké template với đc không anh

      Trả lờiXóa
    14. Bữa h đâu mất tiêu rồi hải

      Trả lờiXóa
      Trả lời
      1. bữa giờ domain hư đang sửa chắc mai sẽ ra bài mới

        Xóa
    15. Đợi post mới của a Hải chắc đến già @@

      Trả lờiXóa
    16. LÂU RA BÀI MỚI THẾ

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!