ADDING DOWNLOAD AND DEMO BUTTON IN BLOGGER

01:33 Posted by jaweed

HOW TO ADD DOWNLOAD AND DEMO BUTTON WITH MOUSE HOVER EFFECT.

In this post we are going to show you how to add stylish demo and download buttons to your blog. You can use these CSS buttons instead of demo and download links.

You can find the demo below. Move your cursor on the button for hover effects:

Live Demo

Download

FOLLOW THESE STEPS:

1. Go To Blogger Dashboard > Template > Edit HTML
2. Backup your template before editing.
3. Search for this, ]]></b:skin> . 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);
}

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

FOR DOWNLOAD BUTTON

5.FINISH..

Share your views...

21 Respones to "ADDING DOWNLOAD AND DEMO BUTTON IN BLOGGER"

Raees Hussain said...: Thanks for these codes, helped a lot

29 January 2015 at 04:57
Unknown said...: This code is really nice and working fine on my blog- you can see it here-- www.themescraft.blogspot.com

2 May 2015 at 00:43
Unknown said...: how will u make money from the blog

11 July 2015 at 05:41
RavinduDeSilva said...: how can I find the download link of an img ?

27 September 2015 at 04:07
Anonymous said...: How to add HTML

7 December 2015 at 07:40
jithin said...: for free genuine softwares go http://www.downloadblogg.com

18 December 2015 at 00:16
Unknown said...: Thanks. I applied it on
http://bookishfreak.blogspot.com/
If anyone wants to see how it worked, refer to the link above. This code is a real deal. Thanks again jaweed

20 February 2016 at 05:13
Vivek meee said...: Thanks For This!!!!!!!

19 March 2016 at 22:42
Ubong Nsini said...: thank you

12 April 2016 at 09:23
b3nsh4 said...: Great Article..!!

6 May 2016 at 07:01
Toqeer said...: Reaally Amzaing
Visit

3 September 2016 at 12:16
Unknown said...: Not working on my blog.
www.kingkanishk.blogspot.in ?

6 September 2016 at 22:38
Bilal said...: Great job

17 October 2016 at 04:07
Bilal said...: Working...

oldhatworld.blogspot.com

17 October 2016 at 04:08
ऋषि लोनकर said...: Bye google adsense.you can do. You just need to complete some steps

3 November 2016 at 03:26
Unknown said...: This comment has been removed by the author.
Unknown said...: How to increase your earning as a Pro Blogger.
reputatustech.blogspot.com/2016/11/how-to-increase-your-earning-as-pro.html

11 December 2016 at 16:28
Amit Kumar said...: Thanks. I applied it on
http://www.sexstorian.com/

2 February 2017 at 05:13
Unknown said...: Does Not Work !!!

I Wanted A Download Button...It Gave Me A Download Link...Which Can Be Added By The Normal Blogger Editing...

Better Post The Real Code...

I Want A Download Button !!

Not A Download Link !!

Thank You For Wasting 1 Precious Hour Of My Life !!

8 February 2017 at 02:23
Unknown said...: nice i try on www.codingseek.blogspot.com

1 May 2017 at 12:42
Anonymous said...: Adding And Demo Button In Blogger >>>>> Download Now

>>>>> Download Full

Adding And Demo Button In Blogger >>>>> Download LINK

>>>>> Download Now

Adding And Demo Button In Blogger >>>>> Download Full

>>>>> Download LINK

23 March 2022 at 01:59

explore the world

ADDING DOWNLOAD AND DEMO BUTTON IN BLOGGER

Share your views...

Post a Comment

Popular Posts

About Me

Our Partners

Followers