Trang chủ Thủ Thuật Thủ Thuật Blogger Tạo Box Support Cực Đẹp Cho Blogspot Xin chào các bạn, cũng đã lâu rồi không đăng về thủ thuật nhiều và cũng không có ý tưởng nên hôm nay share cái Box support khá là đẹp cho anh em. - Hình Minh Hoạ - 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: http://www.sachvui.net/
15 nhận xét
Với lại đăng bài cách làm box admin ( khung tác giả ) như trong blog bn đi