ByMr. Sultan Posted on Design Blog

Animated Slider Demo And Download Button For Website

Agar aap slider demo and download button ko apne blog website me add karna chate hia. To yeah article apke liye hai. Demo and download buttons ko blog me kaise kare.

Agar aap website par kisi bhi widget ya kisi bhi chij ka demo dikna chahte hai. basically aap slider demo and download button ka istemal na karke simple link ke duwara bhi kar skate hai.

Slider demo and download button

Likin agar ap apne blog website ke design ko Outstanding banana chate hai. To website me kuch additional features add karna jaruri hai. jisse reader blog ke traf attract ho jaye.

Kyoki 70% visitor blog design dekte hai. To chaliye jante hai. Blog Website Me animated slider demo and download button ko kaise add karte hai.

 

How To Add Slider Demo and Download button in website

Finally Agar apko Buttons Ka design pasand hai. To chaliye jante hai. blog me slider demo and download button ko kaise install kare.

 Step 1.

  • Sabse Phale Apne Blogger ke dashboard ke theme per click kare.
  • Ab Edit HTML per click kare.
  • Ab CTRL+F dabakar Search Box me <head> Type karke enter kar de
  • Ab <head> ke Just Niche Diye Gaye css code ko add kar de.

 

<script src=”https://s.codepen.io/assets/libs/modernizr.js” type=”text/javascript”></script> <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet”></link>

 

 

Step 2.

  • Ab dubara Search box me CTRL+F dabakar search Box me ]]></ b: skin> ya </style> Type karke Enter karde.

 

add css code in blog demo and download buttons

 

  • Ab ]]></ b: skin> ya </style> Ke pahle niche diye gaye css code ko add kar de.

 

body {
margin: 50px;
font-family: helvetica, sans-serif;
background: #e9f0f4;
}
#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #ooo000;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}

.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}

.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

  • Ab Templete Ko Save kar dijye.

 

How to Add Slider demo and download button in Blog article

Ab ap jab bhi apne Blog article me slider demo and download button ko add karoge to ap niche diye gaye code ka use karna hai.

*For Demo Buttons
Yeah Code Demo Buttons ke liye blog me add karna hai.

  • <div id=”wrap”>
    <a href=”#” class=”btn-slide”>
    <span class=”circle”><i class=”fa fa-rocket”></i></span>
    <span class=”title”>Demo</span>
    <span class=”title-hover”>Click here</span>
    </a>
    </div>
  • Apne demo site ke link # ke jagaj per paste kar de.

*For Download button

    • Download button ko add karne ke liye Is code ka use karna hai.

 

 

<a href=”#” class=”btn-slide2″>
<span class=”circle2″><i class=”fa fa-download”></i></span>
<span class=”title2″>Download</span>
<span class=”title-hover2″>Click here</span>
</a>
</div>

 

  • Apne download site ka link # ke jagah per paste kar de.

Finally yeh sabhi step follow karne ke bad slider demo and download button apke website yeh blog me add ho jayega. Agar ye animated demo and Download buttons ko add karne me khoi bhi Problem aye

To hame comment karke puch sakte hai. Are asani se apne blog website animated slider demo and download button ko add kar skate hai.

Popular Posts :-

Similar Posts