Thêm nút Demo và Download đẹp cho Blogger


Nhiều người dùng yêu cầu chúng tôi cung cấp mã nút download hoặc demo riêng vì họ đang sử dụng các mẫu hoặc mẫu cũ hơn của chúng tôi từ các nhà phát triển khác thiếu tính năng tuyệt vời này. Các nút này rất thanh lịch và tìm kiếm tối thiểu, với thiết kế sạch sẽ, nó sẽ giúp bạn xuất bản các liên kết ngoài hoặc trong theo cách sành điệu nhất.

Dựa trên html và css đơn giản và các biểu tượng được thêm thông qua Fontawesome, điều này sẽ không ảnh hưởng nhiều đến tốc độ blog của bạn, bạn có thể thêm các nút này bất cứ nơi nào bạn muốn, cho dù bạn muốn thêm chúng vào bài đăng, trang hoặc thanh bên hoặc chân trang, nó sẽ trông hiện tượng.

Thêm nút Demo và Download đẹp cho Blogger

Thêm font Fontawesome (Quan trọng)

Thêm fontaweomse là rất quan trọng đối với tiện ích này, vì hiển thị các biểu tượng là cần thiết cho các nút.

Truy cập Blogger.com >> Your Blog >> Template. Bây giờ Sao lưu mẫu của bạn.

Sau đó chọn Edit HTML >> Proceed
Đừng quên Nhấp/Đánh dấu vào ô Mở rộng Mẫu Widget.
Tìm kiếm <head> và ngay bên dưới nó dán mã CSS sau.

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Thêm css cho button

Bây giờ, hãy để thêm vào kiểu dáng và phần quan trọng của tiện ích, Tìm kiếm đoạn mã ]]></b:skin và ngay bên trên nó dán mã sau đây

.button{
    background-color:#2c3e50;
    float:left;
    padding:5px 12px;
    margin:5px;
    color:#fff;
    text-align:center;
    border:0;
    cursor:pointer;
    border-radius:3px;
    display:block;
    text-decoration:none;
    font-weight:400;
    transition:all .3s ease-out !important;
    -webkit-transition:all .3s ease-out !important
}
a.button{
    color:#fff
}
.button:hover{
    background-color:#27ae60;
    color:#fff
}
.button.small{
    font-size:12px;
    padding:5px 12px
}
.button.medium{
    font-size:16px;
    padding:6px 15px
}
.button.large{
    font-size:18px;
    padding:8px 18px
}
.small-button{
    width:100%;
    overflow:hidden;
    clear:both
}
.medium-button{
    width:100%;
    overflow:hidden;
    clear:both
}
.large-button{
    width:100%;
    overflow:hidden;
    clear:both
}
.demo:before{
    content:"\f06e";
    margin-right:5px;
    display:inline-block;
    font-family:FontAwesome;
    font-style:normal;
    font-weight:400;
    line-height:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.download:before{
    content:"\f019";
    margin-right:5px;
    display:inline-block;
    font-family:FontAwesome;
    font-style:normal;
    font-weight:400;
    line-height:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

Cách thêm nút demo:

Truy cập blog của bạn Bài viết – nhấp vào Chỉnh sửa trên bất kỳ bài đăng nào của bạn hoặc thêm một bài đăng mới. sau đó chuyển sang khu vực HTML của trình chỉnh sửa bài đăng và thêm mã bên dưới vào bất cứ nơi nào bạn muốn làm cho bảng xuất hiện.

<div class="small-button">
<a class="button small demo" href="https://www.blogger.com">Demo Button</a>
<a class="button medium demo" href="https://www.blogger.com">Demo Button</a>
<a class="button large demo" href="https://www.blogger.com">Demo Button</a>
                <br>
<div class="clear">
</div></div>

Cách thêm nút tải xuống:

Truy cập blog của bạn Bài viết> nhấp vào Chỉnh sửa trên bất kỳ bài đăng nào của bạn hoặc thêm một bài đăng mới. sau đó chuyển sang khu vực HTML của trình chỉnh sửa bài đăng và thêm mã bên dưới vào bất cứ nơi nào bạn muốn làm cho bảng xuất hiện.

<div class="small-button">
<a class="button small download" href="https://www.blogger.com">Download Button</a>
<a class="button medium download" href="https://www.blogger.com">Download Button</a>
<a class="button large download" href="https://www.blogger.com">Download Button</a>
                <br>
<div class="clear">
</div>
</div>

Xem thêm :Tại Đây
Blog Download Template Blogspot : Tại Đây
Blog Download Phần Mềm Free : Tại Đây
Blog Download Acapella : Tại Đây
Trang mã hóa URL : Tại Đây


Welcome to F4vnn.com - Blog Thủ Thuật, tất cả nội dung trên website được chúng tôi sưu tập trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ với và chúng tôi sẽ xóa bài viết ngay lập tức . Liên lạc với Admin qua mail: hoangvansy90@gmail.com!

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!