Demo And Download Button For Blogger

https://bloggersorigin.com/demo-and-download-button-for-blogger/

We know that blogger needs more customization than other CMS. As blogger doesn’t support any plugin so we will have to add this demo and download button in our blogger blog by editing our current blogger template.

This is not so complicated. You just have to add a piece of CSS code into your blogger template. After that, you have to use a small piece of HTML code to show your demo and download button.

1. Login to your blogger account and go to “Template” section. Now you will see “Edit HTM” button. Click on it to open blogger’s template editor. Note: Keep a backup of your blogger template before editing.

2. Search for this line: ]]></b:skin>. Now copy the below CSS code and paste it right above the ]]></b:skin> line. Click on the “Save Template” button.

Demo and Download Button Style 1:

CSS Code (Main):

/* Demo Download Button By BlogOrnate
------------------------------------------------------ */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}
.downloadbtn {background-color: #34d968}
.demobtn:hover {background-color: #2980b9;color: #fff;}
.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}

Note: Replace the highlighted section with style 2, style 3, style 4 or style 5 codes to get your desired button style.

Demo and Download Button Style 2:

.demobtn {background-color: #516EAB;}
.downloadbtn {background-color: #29C5F6}
.demobtn:hover {background-color: #435B8E;color: #fff;}
.downloadbtn:hover {background-color: #26A6CE;color: #fff;}

Demo and Download Button Style 3:

.demobtn {background-color: #EB4026;}
.downloadbtn {background-color: #CA212A}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #A61B22;color: #fff;}

Demo and Download Button Style 4:

.demobtn {background-color: #444444;}
.downloadbtn {background-color: #2C3D4F;}
.demobtn:hover {background-color: #222;color: #fff;}
.downloadbtn:hover {background-color: #24313F;color: #fff;}

Demo and Download Button Style 5:

.demobtn {background-color: #E84C3D;}
.downloadbtn {background-color: #82BF57}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #6FA34A;color: #fff;}

3. Here is the HTML code for adding the demo and download button into your blogger post. Copy the below HTML code > go to the post’s HTML mode > Paste it inside your blog post to show your chosen demo and download button.

HTML Code:

<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="#" rel="nofollow" target="_blank">DEMO</a></li>
<li><a class="downloadbtn" href="#" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Note:
Replace # with your own demo and download URL.