Add Download and Demo Button in Blogger (Blogspot)

bởiDXOan -
0
Đầu tiên, Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Chèn file css Font Awesome này vào trước thẻ </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Sau đó, chọn 1 trong các Style bên dưới để làm tiếp. (Lưu ý: Style 5 không cần Font Awesome)

Style 1

See the Pen xGJapa by Nguyen Duc (@ducxoan94) on CodePen.

Thêm đoạn css này vào trước thẻ ]]></b:skin> rồi Lưu mẫu lại
#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Bây giờ khi viết bài, bạn muốn chèn nút Download và Demo thì chỉ việc chuyển qua chế độ HTML rồi thêm đoạn code sau
<div id="wrap">
<a href="www.dxoan.com" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="www.dxoan.com" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Style 2

See the Pen eNjLVy by Nguyen Duc (@ducxoan94) on CodePen.

Thêm đoạn css này vào trước thẻ ]]></b:skin> rồi Lưu mẫu lại
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out;text-decoration:none!important}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Bây giờ khi viết bài, bạn muốn chèn nút Download và Demo thì chỉ việc chuyển qua chế độ HTML rồi thêm đoạn code sau
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Style 3

See the Pen QbBVVp by Nguyen Duc (@ducxoan94) on CodePen.

Thêm đoạn css này vào trước thẻ ]]></b:skin> rồi Lưu mẫu lại
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    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);
}

Bây giờ khi viết bài, bạn muốn chèn nút Download và Demo thì chỉ việc chuyển qua chế độ HTML rồi thêm đoạn code sau
<div class="whitebuttondemo">
<a href="www.dxoan.com" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="www.dxoan.com" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

Style 4

See the Pen VLBGEJ by Nguyen Duc (@ducxoan94) on CodePen.

Thêm đoạn css này vào trước thẻ ]]></b:skin> rồi Lưu mẫu lại
.button{text-align:center;width:100%;margin:10px 0;padding:10;margin-left:0!important}.button li{display:inline-block;margin:10px 0;padding:0}.demo{border-radius:3px;padding:10px;background:#e74c3c;color:#fff!important;text-shadow:0 0 1px #222;transition:background-color 1s 0s ease-out;text-decoration:none}.demo:before{content:"\f002";font-family:FontAwesome;padding:10px;background:rgba(0,0,0,0.2);margin-left:-10px;margin-right:6px;border-radius:3px 0 0 3px}.download{border-radius:3px;padding:10px;background:#3498db;color:#fff!important;text-shadow:0 0 1px #222;transition:background-color 1s 0s ease-out;text-decoration:none}.download:before{content:"\f019";font-family:FontAwesome;padding:10px;background:rgba(0,0,0,0.2);margin-left:-10px;margin-right:6px;border-radius:3px 0 0 3px}.demo:hover,.download:hover{background:rgba(0,0,0,0.6);text-shadow:0 0 1px #222;color:#fff}

Bây giờ khi viết bài, bạn muốn chèn nút Download và Demo thì chỉ việc chuyển qua chế độ HTML rồi thêm đoạn code sau
<ul class="button">
<li><a class="demo" href="www.dxoan.com" target="_blank">Demo</a></li>
<li><a class="download" href="www.dxoan.com" target="_blank">Download</a></li>
</ul>

Style 5

See the Pen mJjGoJ by Nguyen Duc (@ducxoan94) on CodePen.

Thêm đoạn css này vào trước thẻ ]]></b:skin> rồi Lưu mẫu lại
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

Bây giờ khi viết bài, bạn muốn chèn nút Download và Demo thì chỉ việc chuyển qua chế độ HTML rồi thêm đoạn code sau
<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a><br /><br />
<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

Tags

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

You may like these posts

Post a Comment

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

Previous Post Next Post

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !