Welcome to 434Tuto!

Meet the Author

The author is a man to whom Teknology like it. this blog can get different insights on: Blogger's, programming languages etc.

Looking for something?

Subscribe to this blog!

Receive the latest posts by email. Just enter your email below if you want to subscribe!

Wednesday, July 30, 2014

How to add Demo and Download Button in blogger


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, ]]></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(&quot;http://www.zurb.com/images/overlay-button.png&quot;) 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 
<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a> 
 For DOWNLOAD Button
<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a> 
Replace YOUR LINK HERE with your DEMO or DOWNLOAD LINK , That's all.

0 comments:

Post a Comment

 
Back to top!