Hướng Dẫn Tạo Nút Button Cực Đẹp Cho Blogspot

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 .
Code này của bạn Hồng Hải Blog tạo ra và ở đây mình đã chỉnh sửa đi một tý rồi nhé :D


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://ttcnstarquuocblog.blogspot.com/"><i aria-hidden="true" class="fa fa-facebook-square"></i> Demo</a></button>
<style>/*----BUTTON STARQUOCBLOG----*/
.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="http://vnurl.net/2Q3es"><i class="fa fa-download"></i> Download</a></button>
<style>/*----BUTTON STARQUOCBLOG----*/
.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 
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    26 nhận xét:

    1. Ra bài buổi trưa không biết ai xem không ta :v

      Trả lờiXóa
    2. đoạn code gán trong bài dài vc -.-

      Trả lờiXóa
    3. Trả lời
      1. Ông cmt link tôi đặt cho

        Xóa
      2. TÊN HIỂN THỊ: LÊ ANH ĐỨC
        LINK: http://www.leanhduc.tk/

        Xóa
    4. Trả lời
      1. Ùhm ôg
        Cái chèn vào bài đăng ấy
        Dài bome, dùg cái này cho sướng :)

        Xóa
    5. qua tương tác chơi bác Quốc ơi

      Trả lờiXóa
    6. Bài viết rất hay
      CTV Thông Báo....
      Hiện tại Star Phong Blog đang bệnh rất nặng nên tạm thời hoãn blog
      Các bạn có thể hủy liên kết

      Trả lờiXóa
    7. Button đẹp lắm anh, nhìn quá chuyên nghiệp, cứng!

      Trả lờiXóa
    8. Thấy blog e nhiều bài thủ thuật FB với PSD cmnd mà a thì ko rành mấy cái đó mấy nên ghé xem bài này!

      Trả lờiXóa