Gia Minh BLOG

WEBSITE CHUYÊN CHIA SẼ PSD BÌA CỰC CHẤT

Hướng Dẫn Tạo Nút Download and Demo Cực Đẹp Cho Blogger

- HELOO


    Chắc hẳn các bạn rất muốn Blog mình trở nên chuyên nghiệp với các nút của CSS3 này phải không, khi dùng CSS3 này sẽ tạo ra các nút mà bạn không cần chèn hình như có sẵn trên mạng Bây giờ bắt đầu thực hiện

    Bước 1: Đăng nhập vào Blogger
    Bước 2: Chọn Mẫu -> Chỉnh sửa HTML
    Bước 3: Dùng tổ hợp phím là Ctrl + F để tìm thẻ ]]></b:skin>
    Bước 4: Copy đoạn css bên dưới & dán trên thẻ vừa tìm được 
     .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;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;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 vừa làm là chỉ thêm css, bước tiếp theo sẽ làm cho xuất hiện 2 nút dưới bài viết

    Khi các bạn đã hoàn thành bài viết thì chuyển qua tab HTML & thêm đoạn copy đoạn code này rồi dán vào 
     <div style="text-align: center;">
    <ul class="btn">
    <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
    <li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
    </ul>
    </div>
    </div>

    Trong đó phần chữ màu đỏ là điền địa chỉ (link demo), còn phần chữ màu xanh là điền địa chỉ (link download).

    CHÚC CÁC BẠN THÀNH CÔNG
    Star Minh Blog
    Lê Gia Minh
    Designer & Admin

    Tìm tòi học hỏi không ngừng nghĩ làm những điều mình thích để có thể tự thiết kế cho mình riêng một cuộc sống tốt đẹp hơn theo ý mình mà không giống một ai khác...

  • 1.685
  • Cùng Bình Luận:

    Hiện tại có 2 nhận xét:

    // Điều kiện cho trang và không load trên mobile