Share Widget Info Cực Chất Đã responsive

Share:
Share Widget Info Cực Chất Đã responsive

Share Widget Info Cực Chất Đã responsive

Hồng Hải đã đăng Thứ Sáu, 20 tháng 7, 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
  • Hôm nay vô tình mình qua Đức Huy Blog và thấy có một widget info khá đẹp nên mình đem về edit lại và thêm responsive cho nó.....

    Cách thực hiện
    Bước 1 : thêm code css vào trước ]]></b:skin>
      #information {    background: linear-gradient(160deg, #3492b5, #0ecf8a);
        height: 250px;position:relative;}
      #information .details-info {max-width:1075px;margin:0 auto;}
      #information:before {content:&#39;&#39;;position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.15);}
      .info-cot1, .info-cot2 {display:inline-block;position:relative}
      .info-cot1 {width: 41%;}
      .info-cot2 {    width: 50%;
        top: 39px;
        right: 99px;}
      .profile-img {
        border-radius: 50%;
        width: 183px;
        height: 190px;
        position: absolute;
        top: -41px;
        bottom: 53px;
        left: 26%;}
    .profile-img img {width:100%;border-radius:0; border:4px solid #fff;    position: absolute;bottom:88px; left:50px;-webkit-transition: .3s;}
      .profile-img img:hover{border-radius:20px 0 0 20px;
    }
      .hello {    background: rgba(210, 210, 210, 0.3);
        padding: 15px 25px;
        border-radius: 0 10px 10px 0;
        color: #fff;
        font-size: 15px;
        text-align: justify;
        /* text-shadow: 1px 1px 1px #424242; */}
    .hello h2{font: 600 24px Roboto Condensed;
        text-transform: uppercase;
    }
    .hello a{-webkit-transition: .3s;color:#fff}
    .hello a:hover{color:#444}
      @media all and (max-width:885px){
    #information {height: auto; }
    .info-cot1 {
        width: 22%;
    }
    .profile-img {
        display: none;}
    .info-cot2 {top: 0;
        padding: 25px 0 25px 0px;
        width: 63%;
        right: 5%;
    }
    .hello {text-align: left;
        background: rgba(210, 210, 210, 0.3);
        padding: 15px 15px;
        border-radius: 10px;
        color: #fff;
        font-size: 15px;}
    }
     Bước 2: Ta chỉ cần thêm code vào nơi bạn muốn hiển thị là được
    <div id='information'>
    <div class='details-info'>
    <div class='info-cot1'>
    <div class='profile-img'>
    <img src='https://i.pinimg.com/originals/dd/b0/26/ddb0267bd228fd0f8c356b5670c1eaa8.png'/>
    </div>
    </div>
    <div class='info-cot2'>
    <div class='hello'>
    <h2> Hồng Hải</h2>
      <b>- Facebook:</b> <a href='https://www.facebook.com/HongHai.H.T.H' target='_blank'>www.facebook.com/HongHai.H.T.H</a>
      <br/>
      <b>- Email:</b> honghai251325@gmail.com
      <br/>
      <b>- Website:</b> HongHaiBlog
      <br/>
      <b>- Số điện thoại:</b> 01682253***
      <br/>
    <span>Nỗ lực hết mình trong từng việc làm cho dù có thành công hay không</span>
    </div>
    </div>
    </div>
    </div>
     Vậy là xong rồi đó chúc các bạn thành công....
    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]

    58 nhận xét:

    1. ko có demo là ko thể chấp nhận được

      Trả lờiXóa
    2. đoạn nào là đoạn reponsive vậy anh ?

      Trả lờiXóa
    3. Cho em leo rank cao hơn tí ở Widget liên kết với người đẹp =))

      Trả lờiXóa
    4. Sao vào blog e hay bị cảnh báo bảo mật thế nhỉ, lạ thiệt

      Trả lờiXóa
    5. vào blog tôi xem, cái avt nó lệch quá, chỉnh sao g??

      Trả lờiXóa
      Trả lời
      1. thay .profile-img {
        border-radius: 50%;
        width: 183px;
        height: 190px;
        position: absolute;
        top: -41px;
        bottom: 53px;
        left: 26%;
        }

        thành .profile-img {
        border-radius: 50%;
        width: 148px;
        height: 190px;
        position: absolute;
        top: -41px;
        bottom: 53px;
        left: 34%;
        }

        nhé!!!

        Xóa
      2. phải xóa css cũ ở thẻ skin đi chứ

        Xóa
      3. thêm .profile-img {
        border-radius: 50%;
        width: 148px;
        height: 190px;
        position: absolute;
        top: -41px;
        bottom: 53px;
        left: 34%;
        }
        vào phần in đậm
        #information { background: linear-gradient(160deg, #3492b5, #0ecf8a);
        height: 250px;position:relative;}
        #information .details-info {max-width:1075px;margin:0 auto;}
        #information:before {content:'';position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.15);}
        .info-cot1, .info-cot2 {display:inline-block;position:relative}
        .info-cot1 {width: 41%;}
        .info-cot2 { width: 50%;
        top: 39px;
        right: 99px;}
        .profile-img {
        border-radius: 50%;
        width: 183px;
        height: 190px;
        position: absolute;
        top: -41px;
        bottom: 53px;
        left: 26%;}

        .profile-img img {width:100%;border-radius:0; border:4px solid #fff; position: absolute;bottom:88px; left:50px;-webkit-transition: .3s;}
        .profile-img img:hover{border-radius:20px 0 0 20px;
        }

        Xóa
    6. vào blog toàn bị cảnh báo bảo mật , chắc là ....có ai chơi xấu r đó

      Trả lờiXóa
    7. Càng ngày blog càng chất lừ ra :3

      Trả lờiXóa
    8. [img]https://i.imgur.com/LWcGkNh.png[/img]
      Test nó ra như vậy , Font chữ với màu chói quá , fix sao đây

      Trả lờiXóa
      Trả lời
      1. Màu đúng như bài viết rồi
        Còn font thì thêm thẻ viện font vào Roboto Condensed

        Xóa
      2. sao widget ở bên blog này tinh tế nhỉ

        Xóa
    9. cho em css trượt bên sidebar với

      Trả lờiXóa
    10. Blog des đậm chất HongHai, đẹp mê ly. Chắc RIP cmn quá :))

      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!