How to add Demo and Download Button in Blogger Post

How to add Demo and Download Button in Blogger Post

Most times the need to add demo or download button to your blog post may arise. Especially in times of sharing a software or a blog template with your cherished readers. It is appropriate to have a download button which makes it easy for the readers to download whichever material you want being downloaded.
Today I’m going to show you how to add an eye catching demo and download button to your blogger post.

Demo and Download Button

Now here we go…
1. Go To Blogger Dashboard > Template > Edit HTML
2. Backup your template before editing.
3. Click the “Expand Widgets Template” box
4. Search for this, ]]> . before it paste the following CSS Code.

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url(“http://www.zurb.com/images/overlay-button.png”) repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

5. Save your template.

Now whenever you want to add the demo or download button you only need to add the following code in the “EDIT HTML” section of your Blogger Editor

For DEMO Button

 YOUR DEMO LINK HERE” rel=”nofollow” style=”float: left;” target=”_blank”>Live Demo

For DOWNLOAD Button

YOUR DOWNLOAD LINK HERE” rel=”nofollow” style=”float: left;” target=”_blank”>Download

Replace YOUR LINK HERE with your DEMO or DOWNLOAD LINK , That’s all.

Cheers!!!

– See more at: http://www.talky-tech.com/2014/06/how-to-add-demo-and-download-button-in.html#sthash.qmYiCHjP.dpuf

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s