Button Demo và Download chuyên nghiệp cho blogger

By Unknown

Thứ Sáu, 7 tháng 11, 2014

Nút Demo và Download là phần không thể thiếu đối với một blog chuyên thiết kế mẫu template miễn phí và trả trí. Mỗi người có một cách thiết kế riêng cho button demo và download cho template của mình để làm cho blog của mình chuyên nghiệp hơn.

Button Demo và Download mình giới thiếu ở bài này với một chút HTML và một chút CSS3 khá chuyên nghiệp cho một trang blogger chuyên thiết kế template .
Chúng ta đi vào vấn đề chính là chèn CSS và HTML vào template thôi nào.

Button Demo và Download chuyên nghiệp cho blogger

Đầu tiên các bạn đăng nhập vào tài khoản blogger.com của mình, các bạn chọn Mẫu >> Chỉnh sửa HTML >> Ctrl+F tìm đến thẻ </head> và thêm font awesome bên dưới lên trước thẻ </head>

Font awesome Demo và Download

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Sau khi thêm font awesome xong chúng ta thêm đoạn CSS bên dưới lên trên thẻ ]]></skin>

CSS3 Demo và Download

.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}
.whitebutton a {
    background: #B5D012;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}
.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}
.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}
.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}
.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}
.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}
.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}
.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}
.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}
.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}
.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}
.whitebuttondemo a:hover {
    color: #fff;
}
.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}
.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}
.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

Sau đó các bạn lưu lại thế là xong phần CSS và Fonts trong template. Nhưng nó vẫn chưa đủ để có Button Demo và Download hoàn thiện được ta cần gọi hàm của nó trong bài đăng để hoàn chỉnh nó cụ thể đoạn HTML như sau

HTML Demo và Download

<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

Khi đăng bài ta nhớ chuyển sang HTML và copy đoạn HTML này vào nhớ thay # thành link demo và # thành link doanload nhé. Còn 1.6MB.rar là file mình úp lên host nhớ thay đổi theo kích thước từng file nhé.

DEMO

Video hướng dẫn

Vậy là xong Button Demo và Download cho blogger các bạn nhé. Chúc các bạn thành công !

Tag : CSS, HTML5