How to Add Download and YouTube watching Button in Blogger or wordpress website

DreamTrap 1:23 PM 0 comments

How to Add Download and YouTube watching Button in Blogger or wordpress website Info:- Hello Friends, today you learn that how you can add attractive demo or download or YouTube video watch button in your blogger or wordpress website.

How to Add Download and YouTube watching Button in Blogger or wordpress website advantages :- following are some advantages:

Fist main advantage your website look attractive or stylish.
Viewers easily find download button or easily download which you give to viewers to download (material).
In demo button you add demo of your material
You also add watch Facebook video download button in your website.How to Add Download and YouTube watching Button in Blogger or wordpress website

How to Add Download and YouTube watching Button in Blogger or wordpress website steps :- following are steps to add download or demo button in your website.

1. Go to your blogger.

2.go to theme section or click edit html button.

3. Paste below code before </style> code give below code box.

 #firsttechinfo {
margin: 20px auto;
text-align: center;
}
#firsttechinfo br {
display: none;
}
.firsttechinfoar{
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid orange;
margin: 10px;
transition: .5s;
}
.firsttechinfoar:hover {
background-color: orange;
}
.firsttechinfoar:hover span.circle{
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: orange;
}
.firsttechinfoar:hover span.title{
left: 40px;
opacity: 0;
}
.firsttechinfoar:hover span.title-hover{
opacity: 1;
left: 40px;
}
.firsttechinfoar span.circle{
display: block;
background-color: orange;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.firsttechinfoar span.title,
.firsttechinfoar span.title-hover{
position: absolute;
left: 90px;
text-align: center; 
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: orange;
transition: .5s;
}
.firsttechinfoar span.title-hover{
left: 80px;
opacity: 0;
}
.firsttechinfoar span.title-hover{
color: #fff;
}
.firsttechinfoar1{
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid blue;
margin: 10px;
transition: .5s;
}
.firsttechinfoar1:hover {
background-color: blue;
}
.firsttechinfoar1:hover span.circle{
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: blue;
}
.firsttechinfoar1:hover span.title{
left: 40px;
opacity: 0;
}
.firsttechinfoar1:hover span.title-hover{
opacity: 1;
left: 40px;
}
.firsttechinfoar1 span.circle{
display: block;
background-color: blue;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.firsttechinfoar1 span.title,
.firsttechinfoar1 span.title-hover{
position: absolute;
left: 90px;
text-align: center; 
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: blue;
transition: .5s;
}
.firsttechinfoar1 span.title-hover{
left: 80px;
opacity: 0;
}
.firsttechinfoar1 span.title-hover{
color: #fff;
}
.firsttechinfoar2{
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;
}
.firsttechinfoar2:hover {
background-color: red;
}
.firsttechinfoar2:hover span.circle{
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: red;
}
.firsttechinfoar2:hover span.title{
left: 40px;
opacity: 0;
}
.firsttechinfoar2:hover span.title-hover{
opacity: 1;
left: 40px;
}
.firsttechinfoar2 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%;
}
.firsttechinfoar2 span.title,
.firsttechinfoar2 span.title-hover{
position: absolute;
left: 90px;
text-align: center; 
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: red;
transition: .5s;
}
.firsttechinfoar2 span.title-hover{
left: 80px;
opacity: 0;
}
.firsttechinfoar2 span.title-hover{
color: #fff;
}

Read also

4. Now click save theme button.

5. Now go to post. After create new post, paste below code in html section for add demo or download button:-

 
<div id="firsttechinfo">
<a class="firsttechinfoar1" href="http://firsttechinfoar.blogspot.com/" rel="nofollow" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click Here</span>
</a>
<a class="firsttechinfoar" href="http://firsttechinfoar.blogspot.com/" 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>

6. For add YouTube button paste below code:-

 

<div id="firsttechinfo">
<a class="firsttechinfoar2" 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>