Download and demo Buttons
If you have a templates blog with a showcase of templates then you should have demo and download links. Many who are familiar with CSS use buttons for this. But, now you can also use these buttons instead of demo and download links
Step 1.Go to layout > Edit HTML
Step 2. Click Ctrl and F for a search of code in your blogs Html
]]></b:skin>
Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>
.demo-button {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center top transparent;
float: left;
height: 24px;
width: 90px;
}
.demo-button:hover {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center -24px transparent;
}
To use the Demo Button Use the below HTML code. Editable parts are shown in red-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center top transparent;
float: left;
height: 24px;
width: 90px;
}
.demo-button:hover {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center -24px transparent;
}
<a class="demo-button" href='YOUR_LINK_HERE'>DEMO</a>
Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>
}
.download-button {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center -48px transparent;
float: left;
height: 24px;
margin-left: 10px;
width: 90px;
}
.download-button:hover {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center -72px transparent;
}
.download-button {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center -48px transparent;
float: left;
height: 24px;
margin-left: 10px;
width: 90px;
}
.download-button:hover {
-moz-background-inline-policy: continuous;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nePMMF8XGgFRGzfSjgfHcBJOvKeuEDkmdb1LfIo9QIzj998iEeHd65UK726hxu8dajzJz7cW-k-URyexn4eTIPEe8Qa0c91PXPngOfglJKW0oeyHS84_BQGKwHskcR4MikSo6DEIlLKH/s1600/dbutton.png") no-repeat scroll center -72px transparent;
}
To use the Demo Button Use the below HTML code. Editable parts are shown in red
<a class="download-button" href='YOUR_LINK_HERE'>DOWNLOAD</a>
save and done
0 التعليقات:
Post a Comment