How to Make DEMO and DOWNLOAD Buttons on Blog

Picture below is a screenshot of it

If you are interested , what's wrong with you try , free ...

How to Make DEMO and DOWNLOAD Buttons on Blog


1 . Go to blogger.com

2 . Choose a Template , then Edit HTML

3 . Search Code  ] ] > < / b : skin>

4 . Copast script code below , above ] ] > < / b : skin>

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

5 . Click the " Save Settings "

6 . To install it extremely easy course ..

7 . Click the " new entry "

8 . Choose HTML Mode

9 . Copast code below

<div style="text-align: center;">

<ul class="button">

<li><a class="demo" href="http://tutorialen.blogspot.com" target="_blank">Demo</a></li>

<li><a class="download" href="http://tutorialen.blogspot.com" target="_blank">Download</a></li>

</ul>

</div>

<div class="clear">

</div>

Replace " http://tutorialen.blogspot.com " first with the URL you want to link in Demo Button
Replace " http://tutorialen.blogspot.com " the second with the URL you want to link in Download Button

Done .....

That Tutorials Blog How to Make DEMO and DOWNLOAD Buttons in Blog from me,

So much from me , if there are not clear , please leave a comment

Tweet

Blog, Updated at: 10:54 PM