-->
U3F1ZWV6ZTgxNTE0OTE0NjFfQWN0aXZhdGlvbjkyMzQ1MTU0NjUz
recent
أخبار ساخنة

How To Make Demo Button And Download In AMP Blogger Validator

In this article we will talk about How To Make Demo Button And Download In AMP Blogger Validator.
This button is very useful if blog friends want to share programs, movies, Android apps, and more. This button is obviously very important as it makes the article beautiful.
Just follow these steps to create a View and Download button.

Login Dasboard Blogger > Theme > Edit HTMLThis Widget uses Awesom Fonts so please if not found in your blogger template you can Add the following CSS above </ head>


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


After that.s Copy and Place the CSS below above ]]> </ b: skin> or </ style>


/* CSS Button by www.ampbloggerseo.com */ .button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both} .button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none}.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden} .button2 li a.download{background:#3498db} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s} .button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}


Save Template.
To use, please enter the following code in the new post in HTML mode.


<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="https://www.ampbloggerseo.com/" target="_blank">Demo Link</a></li> <li><a class="download" href="https://www.ampbloggerseo.com/" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>


Note: replace https://www.ampbloggerseo.com/ with the link would to be go.
The result as our site:
الاسمبريد إلكترونيرسالة