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
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
.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
0 Comments