How to Add Pro Download Button With Mouse Hover Effect in Your Blog

<div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmy9XDkzMUmLauFvzoiCjAgfZsS4tT4jkJtEjssjoVE1MUwl2mzcsClooucltPdjjiYbOWaVtG5zv51IXy0qALxKu75rVt1z4HA6P5dcGYLZPIsaU3u02Ym7wcXvHY0yFt1yE6Agd-Obg/s1600/How+to+Add+Pro+Download+Button+With+Mouse+Hover+Effect.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmy9XDkzMUmLauFvzoiCjAgfZsS4tT4jkJtEjssjoVE1MUwl2mzcsClooucltPdjjiYbOWaVtG5zv51IXy0qALxKu75rVt1z4HA6P5dcGYLZPIsaU3u02Ym7wcXvHY0yFt1yE6Agd-Obg/s640/How+to+Add+Pro+Download+Button+With+Mouse+Hover+Effect.gif" width="640" /></a></div> <span style="font-family: inherit;">Buttons are very important for the blogger OR if you want to add a button which gives some downloading stuff then you can easily add this button and also It'll give a very professional look to your blog which is very important in today's day be'coz many visitors always think and feel about the professionalism of the blogger template and buttons and others stuff like widgets, buttons, plugins they always gives importance to the look of any template, which looks likes a professional.</span><br /> <b><span style="color: #0b5394;"><br /></span></b> <b><span style="color: #0b5394;">Step 1 :</span></b> Now let's start adding it... <br /> <div> <div style="text-align: right;"> <div style="text-align: left;"> <b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <span style="color: #0b5394;"><b>Blogger Dashboard></b><b style="background-color: white;">Template</b>> <b><span style="background-color: white;">Edit HTML</span></b>> <b>Proceed</b>.</span></div> </div> <br /> <div style="text-align: right;"> <div style="text-align: left;"> <span style="color: #0b5394;"><br /></span></div> </div> <div style="text-align: right;"> <div style="text-align: left;"> <b><span style="color: #0b5394;">Step 3:</span></b> Find [by pressing <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: Georgia, serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:</div> </div> </div> <blockquote class="tr_bq"> <span style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;">]]></b:skin></span></span></blockquote> <br /> <b><span style="color: #0b5394;">Step 4:</span></b> <span style="font-family: inherit;">Paste below code just before ]]></b:skin> </span><br /> <blockquote class="tr_bq"> <span style="font-family: "Courier New",Courier,monospace;">#RWG-probutn .pure {<br />background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0iIRQfXxF7gt9IP9lP_S5P2HWGL4OhRpiISIqky9i5UznYkK7j-SvT0uf7rYV_jYNDeMukGyugFOLIq_VY13ucWQHDjNQyzZcUFpT0iUSL8swbVrpqS6oMGzZbb3OwdHniubGmt_OJsi/s1600/RWG-probutn.png) 3px 0 no-repeat;<br />-moz-border-radius:10px;<br />-webkit-border-radius:10px;<br />-o-border-radius:10px;<br />border-radius:10px;<br />display:block;<br />color:#212121;<br />float:none;<br />height:80px;<br />width:80px;<br />line-height:80px;<br />padding-top:1px;<br />position:relative;<br />text-shadow:0 1px 0 #FAFAFA;<br />text-align:center;<br />text-decoration:none;<br />white-space:nowrap;<br />-webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-ms-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-moz-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-o-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;<br />-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;<br />-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;<br />box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;<br />margin:10px auto 0;<br />}<br /><br />#RWG-probutn a span {<br />display:none;<br />font-size:1.4em;<br />}<br /><br />#RWG-probutn:hover a span {<br />display:inline;<br />}<br /><br />#RWG-probutn:hover .pure {<br />width:420px;<br />}<br /><br />#RWG-probutn .download {<br />background-position:0 0;<br />}</span></blockquote> <br /> <b><span style="color: #0b5394;">Step 5:</span></b> Now Save Your Template.<br /> <h2> <span style="color: #0b5394;"><span style="font-family: inherit; font-size: large;">Q: How to Use it in Post....?</span></span></h2> <br /> <div> <span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 1:</span></b><span style="color: #0b5394;"> </span>Open post editor</span></div> <div> <span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 2:</span></b> Click HTML button</span></div> <div> <span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 3:</span></b> Post below code in it</span></div> <blockquote class="tr_bq"> <span style="font-family: "Courier New",Courier,monospace;"><div id="RWG-probutn"><br /><a href="<span style="background-color: white;"><span style="color: red;"><b>#</b></span></span>" class="pure download"><span><span style="background-color: white;"><b><span style="color: #a64d79;">Download</span></b></span></span></a><br /></div></span></blockquote> <br /> <span style="color: #0b5394; font-family: inherit; font-size: large;"><b>Make Changes...</b></span><br /> <span style="font-size: medium;"><span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 1:</span></b> Replace it <span style="background-color: white;"><span style="color: red;"><b>#</b></span></span> with your button link.</span></span><br /> <span style="font-size: medium;"><span style="font-family: inherit;"><span style="color: #0b5394;"><b>Step 2:</b></span> Replace it <span style="background-color: white;"><span style="color: #a64d79;"><b>Download</b></span></span> with your button name.</span></span><br /> <span style="font-size: medium;"><span style="font-family: inherit;"><br /></span></span> <br /> <div style="text-align: center;"> <span style="font-size: medium;"><b><span style="color: #0b5394; font-family: inherit;">Finally, Publish Your Post and You're Done.</span></b></span></div> <br /> <div style="text-align: center;"> <span style="color: #0b5394; font-family: inherit;"><b>Pro look is very important for all kind of blogger's and also for all kinds website's and some plugins like buttons, widgets etc. they gives a good and fine look to every blog and also to a website so, I think you should try it MUST.</b></span></div>

How to Add Pro Download Button With Mouse Hover Effect in Your Blog

Buttons are very important for the blogger OR if you want to add a button which gives some downloading stuff then you can easily add t...

Read more »