Hướng dẫn tạo Demo và Download botton cho blogspot

Demo Và Download botton

Chào các bạn!
Đối với một blog chuyên về tài liệu và lưu trữ thì việc chèn một nút Demo và Download là hoàn toàn cần thiết, blog sẽ trông đẹp và gọn gàng hơn nhiều, hơn nữa lợi ích của việc chèn botton thể loại này không làm giảm tốc độ load trang. Ngay sau đây 4Tipsvn sẽ hướng dẫn các bạn cách thực hiện.
Cách làm

Bước 1: Bạn coppy và chèn đoạn mã sau lên trước thẻ ]]></b:skin>

/* 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: Lưu mẫu

Artikel Terkait

Bước 3: Chèn mã sau vào bài viết, nơi mà các bác muốn xuất hiện nút Demo và Download

<div id="wrap"> <a class="btn down" href=" Links Demo " rel="nofollow" target="_blank"> Demo <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href=" Links Download" rel="nofollow" target="_blank">Download <i class="fa fa-file"></i></a></div>