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


Mẹo nhỏ: Để tìm kiếm chính xác thủ thuật của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: code đóng khung html f4vnn). Tìm kiếm ngay

Welcome to f4vnn.com: là một web/blog cá nhân, chủ yếu chia sẻ kiến thức về máy tính, internet, công nghệ và thủ thuật WordPress, Blogger... Mình hi vọng một điều là: Tại đây, các bạn có thể học thêm được rất nhiều kinh nghiệm và thủ thuật khi sử dụng máy tính ^_^ !

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

Blog Tips f4vnn

Là người yêu thích công nghệ và công việc cũng làm làm trong ngành công nghệ, nên mình muốn chia sẻ những gì mà mình biết và từng tìm hiểu qua muốn chia sẻ cho mọi người cùng sở thích.

  Bài viết cùng chuyên mục

  • Thêm box search trên menu cho WordPress không cần Plugin
  • SoraSoft giao diện chia sẻ phần mềm cho Blogger
  • Hướng dẫn cách cài đặt WordPress trên Fastpanel
  • 3 cách thêm CSS tùy chỉnh vào trang web WordPress
  • ChickPro Blogger Template giao diện blogger thời trang