TẠO BOX SUPPORT CỰC ĐẸP CHO BLOGSPOT

   Xin chào các bạn!! Hôm nay mình sẽ share cái Box Support khá đẹp mà mình tìm được trên blog Đức Huy Blog


CÁC BƯỚC THỰC HIỆN:
Bước 1: Các bạn truy cập vào Blogger -> Chủ Đề -> Chỉnh Sửa HTML
Bước 2: Chèn đoạn code sau trước thẻ <body>

<style>.switcher{position:fixed;top:20%;right:0;z-index:999999999;background-color:#FFF;margin-right:-200px;transition:.5s;color:#444}.switchom{background-color:#FFF;color:#3b5998;height:50px;width:50px;display:block;line-height:50px;text-align:center;font-size:20px;border-radius:5px 0 0 5px;position:absolute;left:-49px;box-shadow:inset 0 0 1px #666}.fato1{font-size:25px;margin-right:0}.switcher{position:fixed;top:15%;right:20px;z-index:999999999;background-color:#FFF;margin-right:-300px;transition:.5s;color:#444}.switchom{padding:0!important;background-color:#FFF!important;color:#222!important;height:50px!important;width:50px!important;display:block;line-height:50px!important;text-align:center!important;font-size:20px!important;border-radius:5px 0 0 5px!important;position:absolute;left:-49px!important;box-shadow:inset 0 0 1px #666}.contsho{width:280px;height:500px;padding:10px;box-shadow:inset 0 0 1px #666}.contsho a.full{margin-bottom:0}.contsho h3{margin-bottom:10px;font-size:15px;text-align:center;text-transform:uppercase;font-weight:700; color:#55579e; border-top:1px solid #ddd; padding-top:5px}.contsho a:hover{color:#f90}#menu-ndh{display:inline-block;margin: 0 0 10px;}#menu-ndh li{width:43%;float: left;background:#55579e;text-align: center;margin: 5px;padding: 10px;box-sizing: border-box;border-radius: 5px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.13);}#menu-ndh li a{color: #fff;}  #menu-ndh li a:hover{color:#f90}.fb-page{width:100%;box-sizing:border-box;float:left}  .contsho img{width:150px; height:150px; border-radius:50%; margin-left:60px;transition: .3s; z-index:1}  .contsho img:hover{border-radius:0; border:4px solid #55579e;}  .contsho h4{text-align:center; font-weight:500; margin-top:5px;}  .contsho p{text-align:center; font-style:italic;line-height:18px}  .contsho span{padding-bottom:3px;margin-left:13px; position:relative; top:7px}  .contsho span:hover{border-bottom:2px solid #2a2a2a;}</style><div class='switcher'><a class='switchom close' href='#'><i class='fa fa-bars fato1'/></a><div class='contsho'><div id='menu-ndh'><ul><li><a href='https://www.facebook.com/messages/t/BOT.NDH'><i class='fa fa fa-wechat'/> NHẮN TIN</a></li><li><a href='#' rel='nofollow' target='blank'><i class='fa fa-usd'/> ỦNG HỘ TÔI</a></li><li><a href='#'><i class='fa fa-users'/> MÓN QUÀ</a></li><li><a href='#'><i class='fa fa-heart'/> GIỚI THIỆU</a></li><li><a href='#'><i class='fa fa-file-text'/> BÌNH LUẬN</a></li><li><a href='https://www.facebook.com/BOT.NDH'><i class='fa fa-envelope'/> LIÊN HỆ</a></li></ul></div><h3><i aria-hidden='true' class='fab fa-gg' style='margin:0 0 0 0;transform: rotate(180deg)'/> Đôi Chút Về Tác Giả <i aria-hidden='true' class='fab fa-gg' style='margin:0 0 0 0;transform: rotate(180deg)'/></h3><img src='https://i.imgur.com/hzUMs1P.jpg'/>  <h4><i class='fab fa-vaadin'/> NGUYỄN ĐỨC HUY <i class='fab fa-vaadin'/></h4><p>Không phải ai cũng là tương lai của bạn. Một vài người chỉ lướt qua cuộc đời bạn để mang lại cho bạn một số bài học của cuộc sống.</p><span><i class='far fa-thumbs-up'/> Thích</span> <span><i class='fas fa-comments'/> Bình Luận</span> <span><i class='fas fa-share'/> Chia Sẻ</span></div></div><script type='text/javascript'> //<![CDATA[$(document).on("click", ".switchom.close", function() {        return $(".switcher").css("margin-right", "0"), $(this).removeClass("close"), $(this).addClass("opend"), !1    }), $(document).on("click", ".switchom.opend", function() {        return $(".switcher").css("margin-right", "-300px"), $(this).removeClass("opend"), $(this).addClass("close"), !1    });//]]></script><div class='theme-opt' style='display:none'><div class='ibpanel section' id='ibpanel' name='Theme Options'><div class='widget HTML' data-version='1' id='HTML260'><style/></div><div class='widget HTML' data-version='1' id='HTML261'><script type='text/javascript'>              //<![CDATA[              $(document).ready(function() {                if ($(window).width() > 1120) {                        $("#main-wrapper, #sidebar-wrapper").theiaStickySidebar({                    additionalMarginTop: 25,                    additionalMarginBottom: 25                  });                  }              });               //]]>            </script></div></div></div>


Lưu ý: Nếu như thông tin bạn quá dài thì hãy chỉnh lại ( width - height ) ở đoạn CSS này nhé:
.contsho{width:280px;height:500px;padding:10px;box-shadow:inset 0 0 1px #666}

Sau đó các bạn chỉnh sửa thông tin lại nhé. Phần này chắc khỏi cần hướng dẫn rồi nhỉ :v
Lưu lại và tận hưởng thành quả thôi. Chúc các bạn thành công 
NGUỒN:DUCHUYBLOG

3 Comments:

Post a Comment