Thủ Thuật Blogspot | Thêm nút DEMO và nút DOWNLOAD cho Blogger [ Blogspot ]



Thủ Thuật Blogspot | Thêm nút DEMO và nút DOWNLOAD cho Blogger [ Blogspot ]



Đối với các cậu làm Blog hay chia sẻ các loại thì nhất định phải có hai nút DEMO và nút DOWNLOAD vào để cho người đọc có thể xem bản DEMO và quyết định có tải về hay không. Hoặc các công việc tương tự như thế.
Nhưng chả lẽ các chỉ để nó như thế này :

DEMO
DOWNLOAD

😑😑 ???  . Không. Như vậy trong rất xấu và mất thiện cảm với người đọc  [ Tớ một thời cũng như vậy đấy ^-^ ] . Vì vậy bạn cần ít nhất là như thế này 😎😎😅 .
Vậy làm thế nào ??

Thủ Thuật Blogspot | Thêm nút DEMO và nút DOWNLOAD cho Blogger [ Blogspot ]

Lưu ý : Sao lưu trước khi thực hiện  và Template của các cậu phải có sẵn font-awesome nếu không bạn có thể thêm code sau vào trước thẻ </head> :
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Và đây là các mẫu mà các các có thể tham khảo. Tớ sưu tầm được đó nhé, không phải của tớ, mà tớ quên nguồn rồi, bạn nào thấy nếu là nguồn của mình thì bình luận tớ sẽ thêm vào.

Cách chèn, các cậu chèn đoạn mã sau vào trước thẻ ]]></b:skin>

Mẫu 1 :


#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;
}

Cách dùng :
<div id="wrap">
<a href="#" 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="#" 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>

Mẫu 2 :


.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);
}

Cách dùng :
<a class="demobutton button" href="#" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Demo</span></a> 
<a class="button downloadbutton" href="#" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

Mẫu 3 :


.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;}

Cách dùng :
 <div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="#" target="_blank">Demo</a></li>
<li><a class="download" href="#" target="_blank">Download</a></li>
</ul>
</div>

Mẫu 4 :


.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;
}

Cách dùng :
<ul class="button">
<li><a class="demo" href="#" target="_blank">Demo</a></li>
<li><a class="download" href="#" target="_blank">Download</a></li>
</ul>

Mẫu 5 :
.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);
}

Cách dùng :
<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>

Ở mẫu này, các cậu thay click to begin và 1.6MB .rar bằng các các giá trị mà các cậu muốn.

Đối với các bạn nào không muốn hai nút DEMO và DOWNLOAD nằm trên cung một dòng thì có thể thêm <br/> như cách dùng mẫu 5 . Vì đây đều là mã CSS nên các bạn có thể tự do chỉnh sửa để phù hợp với yêu cầu của mình.

Lưu ý vô cùng quan trọng :  Đối với template của một số bạn vì sẽ có săn class button rồi. Nên khi các bạn chèn đoạn code đó vào sẽ gây lỗi cho template khiến một số đối tượng hiển thị sai. Do đó nếu gặp phải trường hợp đó thì vô cùng đơn giản, các bạn thay chữ button thành bất cứ chữ gì bạn muốn, miễn sao nó không trùng với các class đã có sẵn trong Template của các bạn.

OK ! DONE 

[ "  Hãy cố gắng trở thành cầu vồng trên đám mây của một ai đó " ] 
Mới hơn Home Cũ hơn

Giới thiệu qua về Trương Hướng

Cuộc đời là những chuyến đi vậy thì hãy đi một quãng đường dài nhất đẹp nhất có thể để đẹp nhất cuộc đời là mỗi người ăn hại ăn cứt là cuộc đời mỗi con người trong nhân loại

Cuộc đời là những chuyến đi vậy thì hãy đi một quãng đường dài nhất đẹp nhất có thể để đẹp nhất cuộc đời là mỗi người ăn hại ăn cứt là cuộc đời mỗi con người trong nhân loại

Cuộc đời là những chuyến đi vậy thì hãy đi một quãng đường dài nhất đẹp nhất có thể để đẹp nhất cuộc đời là mỗi người ăn hại ăn cứt là cuộc đời mỗi con người trong nhân loại

Trương Hướng truonghuong.com
Một số mẹo nhỏ
Trương Hướng @truonghuong

Xin chào mọi người! Là mình đây, người viết những hồi kí về những chuyến đi của chính mình và hy vọng sẽ gặp được những người cùng chung sở thích với mình trên blog này!