Tạo Nút Demo Và Download Flat UI (Giao Diện Phẳng) Cho Blogger - Blogspot

Đối với Blog chuyên chia sẻ phần mềm, các ứng dụng hay theme blog, wordpress thì việc chứa các link download hay Demo (tạm hiểu là Xem Trước mặc dù nghĩa nó là thử nghiệm) là rất cần thiết. Nhưng đôi khi người đọc lại không thấy đâu do ta không làm nổi bật lên nó vì thế người xem hay lướt qua rồi bình luận xin Link download. Vì vậy hôm nay mình sẽ hướng dẫn các bạn tạo các nút Demo và Download làm nổi bật lên link.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết        

Mục Đích

• Với giao diện phẳng (Flat UI) tạo sự thích thú của người đọc
• Giúp kéo người đọc ở lại lâu hơn
• Giúp người xem biết đâu là link Download hay Demo cho dù họ có đọc lướt qua.
• Tránh các comments xin link Download và thay vào đó là những comments tốt cho Blog như tks ad, Link tốt...

Thực Hiện

Ở đây có hai mẫu nên các bạn thích mẫu nào thì chọn cho phù hợp

A. Style 1
1. Đầu tiên các bạn vào Blogger > Mẫu > Chỉnh sửa HTML
2. Các bạn tìm đến thẻ đóng </head> sau đó link này vào trước thẻ đóng </head>

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

Chú ý, nếu các bạn thấy blog mình đã có link đó thì bỏ qua bước này nha  

3. Sau đó các bạn dán đoạn css Của các button sau vào trước thẻ đóng ]]></b:skin> hay thẻ đóng </style>

CSS/* CSS Button Style 1 */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

4.Sau đó Save Template (Lưu mẫu) lại, thế là xong.
5. Tiếp đến để sử dụng chúng thì khi viết bài các bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng:

HTML<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://www.vnitworld.net" target="_blank">Demo</a></li>
    <li><a class="download" href="http://www.vnitworld.net" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Chú ý: các bạn thay link màu xanh nước biển: http://www.vnitworld.net thành link bạn muốn. Nếu bạn muốn chèn link demo thì thay bằng cái trên, link demo thì cái dưới.

Các bạn có thể xem Demo trực tuyến dưới đây

Demo
click to view

B. Style 2
1. Đầu tiên các bạn vào Blogger > Mẫu > Chỉnh sửa HTML
2. Các bạn tìm đến thẻ đóng </head> sau đó link này vào trước thẻ đóng </head>

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

Chú ý, nếu các bạn thấy blog mình đã có link đó thì bỏ qua bước này nha 

3. Sau đó các bạn dán đoạn css Của các button sau vào trước thẻ đóng ]]></b:skin> hay thẻ đóng </style>

CSS/* CSS Button Style 2 */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

4.Sau đó Save Template (Lưu mẫu) lại, thế là xong.
5. Tiếp đến để sử dụng chúng thì khi viết bài các bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng:

HTML<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://www.vnitworld.net" target="_blank">Demo</a></li>
    <li><a class="download" href="http://www.vnitworld.net" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Chú ý: các bạn thay link màu xanh nước biển: http://www.vnitworld.net thành link bạn muốn. Nếu bạn muốn chèn link demo thì thay bằng cái trên, link demo thì cái dưới.

Các bạn có thể xem Demo trực tuyến dưới đây

Demo
click to view

Nâng Cao

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Nút Demo Và Download Flat UI (Giao Diện Phẳng) Cho Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.