How To Make Demo, Download And YouTube Subscribe Button On Blogger
How To Make Demo, Download And YouTube Subscribe Button On Blogger
Hii, Everyone Through this article i am going to let you know how can you add demo button, download button and YouTube Button on blogger or any other platform like wordpress to add these buttons you needed to follow some simple steps to add stylish button on blogger.
I have added three buttons which must be helpfull for those blogger who provide some sites link which consists of demo so you can use demo button and if you provide some download files then you can use download button and if you are a youtuber then you can add youtube subscribe button blogger with some simple html codes.
#STEP 1 : ADD CSS TO BLOGGER TEMPLATE TO ADD BUTTON
To add stylish button on blogger you need to add some css code to your blogger theme i hvae provides some css below just copy it and go to your blogger theme section then clickk on edit html button after that click ctrl+f and search for "<style" then after finding that add the copied css code after that style tag then save it .
#See Coin{margin:20px auto;text-align:center}#See Coin br{display:none}.seecoin2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid red;margin:10px;transition:.5s}.seecoin2:hover{background-color:red}.seecoin2:hover span.circle{left:100%;margin-left:-45px;background-color:#fdfdfd;color:red}.seecoin2:hover span.title{left:40px;opacity:0}.seecoin2:hover span.title-hover{opacity:1;left:40px}.seecoin2 span.circle{display:block;background-color:red;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}.seecoin2 span.title,.seecoin2 span.title-hover{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:700;color:red;transition:.5s}.seecoin2 span.title-hover{left:80px;opacity:0}.seecoin2 span.title-hover{color:#fff}.seecoin{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #00c600;margin:10px;transition:.5s}.seecoin:hover{background-color:#00c600}.seecoin:hover span.circle{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#00c600}.seecoin:hover span.title{left:40px;opacity:0}.seecoin:hover span.title-hover{opacity:1;left:40px}.seecoin span.circle{display:block;background-color:#00c600;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}.seecoin span.title,.seecoin span.title-hover{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:700;color:#00c600;transition:.5s}.seecoin span.title-hover{left:80px;opacity:0}.seecoin span.title-hover{color:#fff}.seecoin1{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0000c6;margin:10px;transition:.5s}.seecoin1:hover{background-color:#0000c6}.seecoin1:hover span.circle{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0000c6}.seecoin1:hover span.title{left:40px;opacity:0}.seecoin1:hover span.title-hover{opacity:1;left:40px}.seecoin1 span.circle{display:block;background-color:#0000c6;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}.seecoin1 span.title,.seecoin1 span.title-hover{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:700;color:#0000c6;transition:.5s}.seecoin1 span.title-hover{left:80px;opacity:0}.seecoin1 span.title-hover{color:#fff}#STEP 2 : ADD HTML TO POST TO ADD BUTTON
After adding that css code now edit the post that you want to add demo button or download button now edit the blog post via edit html now copy the below html code and paste there then save the changes.
All your setting done to add demo or download button on blogger.
<div id="See Coin"><a class="seecoin" href="https://www.youtube.com/channel/UCk-fq1dQ6nsG63lFrFhyiFw" rel="nofollow" target="_blank"> <span class="circle"><i class="fa fa-eye"></i></span><span class="title">Demo</span><span class="title-hover">Click Here</span></a><a class="seecoin1" href="https://www.youtube.com/channel/UCk-fq1dQ6nsG63lFrFhyiFw" rel="nofollow" target="_blank"> <span class="circle"><i class="fa fa-download"></i></span><span class="title">Download</span><span class="title-hover">Click Here</span></a></div>
#HOW TO ADD YOUTUBE SUBSCRIBE BUTTON ON BLOGGER
<div id="See Coin"><a class="seecoin2" href="https://www.youtube.com/channel/UCk-fq1dQ6nsG63lFrFhyiFw" rel="nofollow" target="_blank"> <span class="circle"><i class="fa fa-youtube-play"></i></span><span class="title">YouTube</span><span class="title-hover">Subscribe Now</span></a></div>