How to make an Automatic Download Button on Blogspot
Tuesday, March 17, 2020
Add Comment
How to make Automatic Download button on Blogspot, Many of us find download websites or blogs that have or have interesting Button Download screen. Well, this time I will try to give a tutorial on how to make the download button on the blog. If you usually download link from your website or blog just limited to writing, then by slightly modifying the CSS in HTML Templates blog, we can create a Link Download an attractive appearance.
I had these buttons are downloaded from a variety of template models circulating on the internet. Here are some examples Download Button and how to install it in our blog post.
Simple Download Button.
We can make this button without editing the HTML template of the blog. Simply by adding the code <button> and </button>
Insert the code below directly above the code ]]> </: skin> or ]]> </ b: template-skin>
/* Tombol Download */
.buttonDownload {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #2db300;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDownload:hover {
opacity: .85;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
To make the Download button in a blog post, you simply add code class = "buttonDownload" like the code below.
<a class="buttonDownload" href="https://pengaturanseo.blogspot.com//" rel="nofollow" target="_blank"> Contoh Tombol Unduh </a>
I had these buttons are downloaded from a variety of template models circulating on the internet. Here are some examples Download Button and how to install it in our blog post.
Simple Download Button.
We can make this button without editing the HTML template of the blog. Simply by adding the code <button> and </button>
Insert the code below directly above the code ]]> </: skin> or ]]> </ b: template-skin>
/* Tombol Download */
.buttonDownload {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #2db300;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDownload:hover {
opacity: .85;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
To make the Download button in a blog post, you simply add code class = "buttonDownload" like the code below.
<a class="buttonDownload" href="https://pengaturanseo.blogspot.com//" rel="nofollow" target="_blank"> Contoh Tombol Unduh </a>
0 Response to "How to make an Automatic Download Button on Blogspot"
Post a Comment
Berkomentarlah sesuai dengan topik dan tidak menaruh link aktif. Terima kasih atas perhatiannya.
Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.