Wednesday, 7 September 2016

How to make a Cool DEMO and DOWNLOAD Button on Blog

.... ...
How to make a Cool DEMO and DOWNLOAD Button on Blog How to make a Cool DEMO and DOWNLOAD Button on Blog How to make a Cool DEMO and DOWNLOAD Button on Blog

How to make a Cool DEMO and DOWNLOAD Button on Blog


How to make a button DOWNLOAD and DEMO Blog. Here is the tutorial on how to create a cool DEMO and DOWNLOAD button on the Blog. Usually make the download button and this demo was when the post article that needs a demo, for example when a post about blog template or widget blog and so on.

1. place the following code above the code ]]></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 }



 

2. Save template.

Install button on blog

For its use in the posting please use the code below using the HTML mode.

     <div style="text-align: center;">
    <ul class="button">
    <li><a class="demo" href="http://cahmenggora.blogspot.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://cahmenggora.blogspot.com" target="_blank">Download</a></li>
    </ul>
    </div>
    <div class="clear"></div>


Replace the link with the Demo link and link berwarba blue above with links Dowload.

This Display Of His Demo : 

How to make a Cool DEMO and DOWNLOAD Button on Blog