Hello xin chào các bạn đến hẹn lại lên mình xin chia sẻ cách làm nút button khi đăng bài viết cực đẹp cho Blogger tạo thêm sự hấp dẫn cho người xem và khiến họ hứng thú ghé thăm blog của các bạn nhiều hơn .



Bước 1: Chèn code này dưới thẻ ]]></b:skin>
.post blockquote{margin:10px 0;text-align:left!important;padding:50px 10px 10px 15px;transition:.3s;font:400 17px Monospace;color:#888;max-height:400px;overflow:hidden;line-height:1.5;position:relative;background:#f4f4f4;border:2px solid #ddd;overflow:auto}
.post blockquote:before{content:'\f121 CODE';font-family:"Font Awesome 5 Free",Roboto Condensed;font-weight:700;position:absolute;font-size:1em;left:0;top:0;margin:0;display:block;width:100%;background:#ddd;padding:10px;box-sizing:border-box; -webkit-transition: .3s;}
.post blockquote::-webkit-scrollbar{width:8px}
.post blockquote::-webkit-scrollbar-thumb{background:#ddd}
.post blockquote:-webkit-scrollbar-thumb:window-inactive{background:#ddd}
.post blockquote::-moz-scrollbar{width:8px}
.post blockquote::-moz-scrollbar-track{background:#eee}
.post blockquote::-moz-scrollbar-thumb{background:#ddd}
.post blockquote::-o-scrollbar{width:8px}
.post blockquote::-o-scrollbar-track{background:#eee}
.post blockquote::-o-scrollbar-thumb{background:#ddd}
.post blockquote:after{content:'Cick Double Để Copy Code';padding:2px 5px;width:auto;height:auto;font-family:"Font Awesome 5 Free",Roboto Condensed;position:absolute;right:8px;top:8px;color:#595b8a;font-weight:700;background-color:none;transition:all 0.3s ease-in-out;font-size:1em}
.post blockquote:hover::after{opacity:0;top:-8px;visibility:visible}
code{display: inline-block; position: relative; color: #6aafa3; margin: 0 5px; padding: 0 10px; transition: all .3s; border: 1px solid; border-radius: 4px; font: 400 18px Monospace;}

Bước 2 : Khi các bạn đăng bài chuyển qua HTML rồi dán code bên dưới :
<div style="text-align: center;">
<button class="button-box"><a class="green" href="https://www.facebook.com/daicagiabl"><i aria-hidden="true" class="fa fa-facebook-square"></i> FB</a></button>
<style>/*----BUTTON NGUYENGIA1988.BLOGSPOT.COM----*/
.button-box a{color: #fff!important}
.button-box {
margin: 10px;
background: #26A65B;
width: 14%;
padding: 7px;
border-radius: 20px;
font: 700 17px Roboto Condensed;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
transition: all .5s ease-in-out;
}
.button-box:hover {
background: #1E824C;
transform: scale(1.05);
transition: all .3s ease-in-out;
}
@media screen and (max-width: 414px){.button-box {width: 27%!important}}
</style>

<button class="button-box"><a class="green" href="https://nguyengia1988.blogspot.com/2018/12/cach-tao-nut-button-cuc-dep-cho-blogspot.html"><i class="fa fa-download"></i> Cách Làm</a></button>
<style>/*----BUTTON HOANGGIA1988.BLOGSPOT.COM----*/
.button-box a{color: #fff!important}
.button-box {
margin: 10px;
background: #26A65B;
width: 14%;
padding: 7px;
border-radius: 20px;
font: 700 17px Roboto Condensed;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
transition: all .5s ease-in-out;
}
.button-box:hover {
background: #1E824C;
transform: scale(1.05);
transition: all .3s ease-in-out;
}
@media screen and (max-width: 414px){.button-box {width: 27%!important}}
</style>

</div>

 Chúc các bạn thành công!

Tags