Thứ Hai, 18 tháng 6, 2018

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

Nhận Thiết Kế

fb.com/HongHai.H.T.H
instagram.com/honghai.des
01682253xxx
honghai251325@gmail.com

Facebook Comments

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. 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
  14. Đợi post mới của a Hải chắc đến già @@

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

    Trả lờiXóa