How to Make a Demo & Download Button on Blogger

How to Make a Demo & Download Button on Blogger

A. Dengan Edit Html Template Blogger

1. Log in to Blogger.com >> Themes >> Edit Html

2. Copy the code below.

.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:#0070b0!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 taste.

2. Find the code ]]> </ b: skin> or </style>, save the code above it.



3. Save



4. To display it. when making a post enter HTML mode and put the following code:

<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>

Replace LINK with the link address that will be displayed or addressed.



5. Publish and see the results.





B. With Edit Post


This method is not complicated just paste the code in the article html post without having to mess with the template.



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:#0070b0!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. Replace "link" with your URL link.