Thursday, May 21, 2020
How to Make a Demo & Download Button on Blogger
There are many ways to make Buttons on Blogger Post.They are all similar, but today I want to show you not only the traditional way of installing buttons.
I want to add another method that is much easier and maybe for those who are just starting their Blogs now and don't know how to edit Template in HTML mode, would be much easier to write a nice Post. Let's start.
A. First way - Edit the Blogger template in HTML mode
1. Log in to Blogger.com >> Themes >> Edit Html
2. Find the code ]]></b:skin> or </style> , save the code above it.
3. Copy the code below.
@charset "UTF-8";
.buttonx {
display:inline-flex;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
box-shadow:0 1px 2px rgba(0,0,0,.2);
color:#FFF !important;
border:2px solid #FFF !important;
background-color:#75539e !important;
background:0;
margin:5px 0;
padding:8px 25px;
text-shadow:none !important;
transition:all 0s !important;
}
.buttonx:hover {
background-color:#f78d1d !important;
background:0;
}
.buttonx:active {
position:relative;
top:1px;
}
NOTE: Change the background color according to the colors of your Blog design. #0070b0
4. Past the copied code above the ]]></b:skin> or </style>
5. Save Template
6. To display it. when making a post enter HTML mode and put the following code:
<html>
<head></head>
<body>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="LINK" target="_blank">Demo</a>
<a class="buttonx" href="LINK target=" _blank"="">Download</a>
</div>
</body>
</html>
7. Publish and see the results.
Replace LINK with the link address that will be displayed or addressed.
B. Second Way - With Edit Post
1. In edit mode the article enters HTML mode, then paste the code below.
<style>
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#75539e!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#f78d1d!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="LINK" target="_blank">Demo</a>
<a class="buttonx" href="LINK" target="_blank">Download</a>
</div>
2. Publish and see the results.
Replace LINK with the link address that will be displayed or addressed.
NOTE: Change the background color according to the colors of your Blog design. #0070b0