Make Simple & designer "Download" and "Demo" Button For your Blog and use with any Article internal links, many buttons also available for Download and Demo and many blogger use Images with Download link in our blog for Download button but every one know these are a foolish methods, Today we tell you a how To make beautiful Download & Demo Buttons For Blogger Blog with Advance CSS, I'm personally use this button on our blog.Download and Demo buttons Look similar to below buttons.
Read and follow some below steps for installing Button on your Blogger Templates
(1). Go to Blogger.com and Login.
(2). Select your Blog Where you Want These Buttons.
(3). Click To Template options after click Edit HTML Button.
(4). Fine This ]]> </ b: skin> Using Ctrl+f.
(5). Add following code before ]]> </ b: skin> and Click to save button.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* -- Copyright © www.24Blogger.com, All Rights Reserved. --*/ | |
| .button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;} | |
| .button ul {margin:0;padding:0} | |
| .button li{display:inline;margin:0;padding:0} | |
| .demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; } | |
| .download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;} | |
| .demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } | |
| .download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } |
(6). After Finishing Above steps go back Blogger Dashboard.
(7). when you make "Download" and "Demo" Buttons, Paste below code (using HTML mode) with any blogger post.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="text-align: center;"> | |
| <ul class="button"> | |
| <li><a class="demo" href="http://www.24blogger.com" target="_blank">Demo</a></li> | |
| <li><a class="download" href="http://www.24blogger.com" target="_blank">Download</a></li> | |
| </ul> | |
| </div> | |
| <div class="clear"></div> |
Please tell your response about this post using comments & subscribe our updates
Incoming Terms-
How to make cool buttons for blogger.
How to use Attractive and beautiful Buttons on blogger each post.
Top 2 Design for Blogger buttons Eg. Download buttons Design.
New Designer Buttons for Blogger with Advance CSS and Html
How to create Smarter buttons For Blogger post
How To Set new Download and Demo Buttons For my Blog
No comments:
Post a Comment