Vy Huỳnh: Hướng dẫn tạo nút Demo và Downloand đẹp cho blogspot

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo nút Demo và Downloand cực đẹp cho blogspot. Đầu tiên các bạn sẽ tham khảo demo nhé!!!

DEMO

Hướng dẫn tạo nút Demo và Downloand:

Bước 1: Các bạn đăng nhập vào blogger

Bước 2: Các bạn vào Chủ đề => Chỉnh sửa HTML

Bước 3: Các bạn nhấn Ctrl + F và tìm thẻ </style> hoặc ]]></b:skin>

Bước 4: Các bạn dán đoạn code bên dưới vào trước thẻ </style> hoặc ]]></b:skin>

CSS#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Bước 5: Lưu mẫu lại

Bước 6: Bạn vào bài đăng mới và chuyển sang Tab HTML và dán đoạn code sau vào:

HTML<div id="wrap">
<a href="http://www.vyhuynhthuthuat.tk" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="http://www.vyhuynhthuthuat.tk" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Các bạn có thể thay link http://www.vyhuynhthuthuat.tk bằng link liên kết của bạn!!!

Mẫu 2:

Bước 1: Các bạn đăng nhập vào blogger=> Chỉnh sửa HTML. Sau đó Ctrl + F và tìm thẻ </style> hoặc ]]></b:skin>, Các bạn dán đoạn code bên dưới vào trước thẻ vừa tìm

CSS.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Bước 2: Khi các bạn viết thì các bạn chuyển sang Tab HTML và copy đoạn copy sau vào

HTML<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="http://www.vyhuynhthuthuat.tk" target="_blank">DEMO</a></li> </br> </br> <li><a class="download" href=" http://www.vyhuynhthuthuat.tk" target="_blank">DOWNLOAD</a></li> </ul> </div>

Mẫu 3:

Bước 1: Các bạn đăng nhập vào blogger=> Chỉnh sửa HTML. Sau đó Ctrl + F và tìm thẻ </style> hoặc ]]></b:skin>, Các bạn dán đoạn code bên dưới vào trước thẻ vừa tìm

HTML/* CSS Simple Button Flat UI by Libra Yanada */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#3b3f48; padding:6px 14px; font-size:14px; margin:0 3px; color:#fff!important; border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out; } .btn.down { background:#3b3f48; color:#fff!important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#fc4f3f; color:#fff; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#fff; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; }

Bước 2: Khi các bạn viết thì các bạn chuyển sang Tab HTML và copy đoạn copy sau vào

HTML<div id="wrap"> <a class="btn down" href="http://www.vyhuynhthuthuat.tk" rel="nofollow" target="_blank">Button 1 <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href="http://www.vyhuynhthuthuat.tk" rel="nofollow" target="_blank">Button 2 <i class="fa fa-file"></i></a></div> 

Mẫu 4:

Bước 1: Các bạn đăng nhập vào blogger=> Chỉnh sửa HTML. Sau đó Ctrl + F và tìm thẻ </style> hoặc ]]></b:skin>, Các bạn dán đoạn code bên dưới vào trước thẻ vừa tìm

HTML/* CSS Simple Button */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#fff ; padding:10px 14px; font-size:14px; margin:0 3px; color:#fff !important; border-radius:3px;border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out;border:#F20000 3px solid } .btn.down { background:#fff ; color:#F20000 !important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#333; color:#fff ; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#F20000 ; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; } .quickedit{ display:none; }

Bước 2: Khi các bạn viết thì các bạn chuyển sang Tab HTML và copy đoạn copy sau vào

HTML<div id="wrap"> <a class="btn down" href="http://www.vyhuynhthuthuat.tk " rel="nofollow" target="_blank"> Demo <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href=" http://www.vyhuynhthuthuat.tk" rel="nofollow" target="_blank">Download <i class="fa fa-file"></i></a></div>