Demo and Download botton Blogspot

Cách chèn rất đơn giản gồm 2 bước nhỏ
Bước 1: Các bạn chèn đoạn CSS sau lên trước thẻ ]]>&llt;/b:skin>, thẻ này nằm trong Mẫu (Template), các bạn mở mẫu ra edit rồi tìm thẻ trên sẽ thấy. Chèn xong 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;text-decoration:none!important;color:#FFF!important}.btn ul {margin:0;padding:0}.btn li{display:inline;margin:5px;padding:0;list-style:none;}.demo,.download,.buy, .install, .docs{padding:15px 15px 15px 0!important;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;opacity:.95;border:0;transition:all .2s ease-out}.buy2 {padding: 15px 15px!important; color: #fff!important; font-weight: 400; font-size: 18px; text-align: center; text-transform: uppercase;border: 0;}.docs {background-color:#2ecc71;}.docs:hover {opacity:9;}.demo {background-color:#1FA376}.install {background-color:#CE102A}.buy {background-color:#567883;}.buy2 { background-color: #f1ae28; }.download {background-color:#F99517;}.demo:hover {background-color:rgba(31, 163, 118, 0.8);color:#fff;opacity:1;}.install:hover {opacity:0.9;color:#fff}.download:hover {background-color:rgba(249, 149, 23, 0.78);color:#fff;opacity:1;}.buy:hover {background-color:#668E9B;color:#fff;opacity:1;}.demo:before {content: '\f06e'; display: inline-block; font-weight: normal; margin-right: 10px; font-family: fontawesome; transition: all 0.5s ease-out; background: rgba(0, 0, 0, 0.08); line-height: 17px; padding: 15px 10px;}.install:before {content:'\f019';display: inline-block; font-weight: normal; margin-right: 10px; font-family: fontawesome; transition: all 0.5s ease-out; background: rgba(0, 0, 0, 0.08); line-height: 17px; padding: 15px 10px;}.buy:before {content:'\f07a';display: inline-block; font-weight: normal; margin-right: 10px; font-family: fontawesome; transition: all 0.5s ease-out; background: rgba(0, 0, 0, 0.08); line-height: 17px; padding: 15px 10px;}.download:before {content:'\f019';display: inline-block; font-weight: normal; margin-right: 10px; font-family: fontawesome; transition: all 0.5s ease-out; background: rgba(0, 0, 0, 0.08); line-height: 17px; padding: 15px 10px;}.docs:before {content:'\f121';display: inline-block; font-weight: normal; margin-right: 10px; font-family: fontawesome; transition: all 0.5s ease-out; background: rgba(0, 0, 0, 0.08); line-height: 17px; padding: 15px 10px;}

Bước 2: Chèn đoạn code sau vào bài viết, nơi mà các bạn muốn cái nút Demo và Download đó xuất hiện. Nhớ thay Link Download và Demo của các bạn nha!

<div style="text-align: center;"><ul class="btn"><li><a class="demo" href="http://blueapk-msdesignbd.blogspot.com/" target="_blank">Demo</a></li><li><a class="buy" href="http://store.msdesignbd.com/checkout?edd_action=straight_to_gateway&amp;download_id=36" rel="nofollow" target="_blank">Buy Now - $15.95</a></li><li><a class="download" href="http://template.msdesignbd.com/2015/12/blue-apk-responsive-blogger-template.html" target="_blank"> Free Download</a></li></ul></div>

Chèn font Awesome trước thẻ </head> nếu template bạn chưa có nhé! Nếu có rồi thì thôi! Font ngay bên dưới

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Blogger Tips

https://severphim.blogspot.com/2016/08/demo-and-download-botton-blogspot.html

Previous Post

Next Post

Top Post