Saturday, November 15, 2014

How to Add a Stylish Download Button Link on Blogger and Website ?

As we all know that, Blogger is the well known and mostly used blogging platform among all the Blogging platform. Nowadays We can see the all popular Blogger blog is customized with responsively, so that visitors can be easily attracted to the sites.
Stylish Button Link also is the most important to make blog responsive.
Here I am providing most attractive CSS button links for your website or a blogger blog. If you provide free stuff to download, you can use these button links in your blogger blog or website.

How to add Stylish Download Button Links

1. Login to your Blogger Dashboard
2. Go to Template Section
3. Click on Backup/Restore (Always backup your template before making any changes)
4. Now Edit Html and click anywhere at HTML section and press Ctrl+f to find,

]]></b:skin>
5. Now just before or above the ]]></b:skin> Paste the Below code.

/***FIRST STYLE THE BUTTON***/
input#bigbutton {
width:500px;
background: #3e9cbf; /*the colour of the button*/
padding: 8px 14px 10px; /*apply some padding inside the button*/
border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
/*style the text*/
font-size:1.5em;
font-family:Oswald, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald*/
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

6. Save the template.
7. Now Copy this code everytime where you want to put Stylish Button Link on your post and save or publish the post and check the post.
<a href="donwload-link" target="_blank"><input id="gobutton" type="submit" value="Download" /></a>


Now you are done.

Note:-

  • Change download-link with your original download link.

24 comments:

  1. Did it on my blog, and its not stylish, check out http://dhivmusic.blogspot.com/2016/07/maldivian-idol-grand-finale.html

    ReplyDelete
  2. SO WORKING !!!!!!!! thank you !!!!!!!

    I want to change the Font ... Can you help me how ??
    Kind Regards and SO THANKFUL !!

    ReplyDelete

  3. Software can be found in a plethora of different places throughout the internet. Many people are opting to download software on their computers simply because it is inexpensive, and you can have access to your software immediately. http://www.getintopc.co

    ReplyDelete
  4. What this simply means is that you no longer have to sweat while searching for the right drivers for your computer. Get Into Pc

    ReplyDelete
  5. I found so many interesting stuff in your blog especially its discussion. Really its great article. Keep it up. Getintopc

    ReplyDelete
  6. I found so many interesting stuff in your blog Satta King

    ReplyDelete
  7. Software can be found in a plethora of different places throughout the internet. Many people are opting to download software on their computers
    filehippo

    ReplyDelete
  8. It was nice unblock game . Very informative and expressive .things are easily play online at
    unblocked games 66

    ReplyDelete
  9. Get Here if you want download pc games free you are right now check here ocean of games

    ReplyDelete
  10. There are millions of people that navigate the internet on a daily basis, precariously venturing around for downloadable software. However, before you engage in downloading any means of software from a site you need to ensure that the site is safe
    http://getintopcsofts.com

    ReplyDelete
  11. I am really impress with you for the selecting of new and unique topic and also well written article on it. Thanks for sharing with us.
    filehippo
    file hippo
    File hippo
    Download Free PC Software
    File hippo

    ReplyDelete
  12. I am generally awe for you for those selecting for new and exceptional theme Furthermore likewise elegantly composed article on it. Much appreciated to imparting with us.

    ReplyDelete
  13. Extraordinary things you've generally imparted to us. Simply continue written work this sort of posts.The time which was squandered in going for educational cost now it can be utilized for studies.Thanks Get into pc

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Many people are opting to download software on their computers simply because it is inexpensive, and you can have access to your software immediately.download frome www.getinto-pc.co

    ReplyDelete
  17. I read your bog very useful to me. Thanks for sharing it. getintopc

    ReplyDelete
  18. I read your bog very useful to me. Thanks for sharing it. getintopc

    ReplyDelete