Do you love Add Pro Download Button With Mouse Hover Effect on your blog?
Pro Download Button is very important for the blogger . after you have an honest and professional blogger then you need to own set transfer button in your post.if you wish to add a button which provides some downloading stuff then you'll simply add this button and additionally it'll give a terribly professional look to your diary which is very necessary in today's day be'coz many visitors perpetually assume and feel about the expertise of the blogger model and buttons and others stuff like widgets, buttons, plugins they perpetually gives importance to the look of any model, which appearance likes an expert.
Add Pro Download Button for blogger |
How to Add Pro Download Button in blogger
1. Go To Blogger Dashboard > Template > Edit HTML2. 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.
#RWG-probutn .pure {
background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7h26vLzDhyW2L6c4ituCoS4bNrAeg4bk0zpunDQGbraslfZeaxW4Z-BCvtBwH-jtR15d_fjkFFV8eFsQkoRMd2rqSLJgUa7111lsbAY6vEstX6eBQ49kmK12OWRz48EyfaDzWs6YJX5uu/s1600/RWG-probutn.png) 3px 0 no-repeat;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
color:#212121;
float:none;
height:80px;
width:80px;
line-height:80px;
padding-top:1px;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out, background-color .25s ease-in-out;
transition:width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
margin:10px auto 0;
}
#RWG-probutn a span {
display:none;
font-size:1.4em;
}
#RWG-probutn:hover a span {
display:inline;
}
#RWG-probutn:hover .pure {
width:420px;
}
#RWG-probutn .download {
background-position:0 0;
}
5. Save your template.
How To Use It In Post?
Open post editor
Click HTML button
Post below code in it
<div id="RWG-probutn">
<a href="#" class="pure download"><span>Download</span></a>
</div>
Make Changes
Replace it # with your button link.
Replace it Download with your button name.
0 yorum:
Yorum Gönder