Skip to content
99techspot logo
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
99techspot logo

Animated Slider Demo And Download Button For Website

Posted onJune 3, 2022May 9, 2020 Updated May 9, 2020

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.

 

विषय-सूची

  • 1 How To Add Slider Demo and Download button in website
  • 2 How to Add Slider demo and download button in Blog article

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>

 

  • The 5 Best Blogger Plugins For Blogspot Blogger
 

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 :-

  • 20+ Best Blogging Seo Tools For Blogger 2018
  • TOP 5 Best Blogger Seo Tools 2019
  • The 5 Best Blogger Plugins For Blogspot Blogger

Post navigation

Previous Previous
Top 50+ Mahadev Status In Hindi Attitude For Boy
NextContinue
11+ बढ़ा हुआ पेट कम करने के उपाय, कारगर तरीक़े और नुस्खे (Pet or Kamar Ki Charbi Kam Karne Ke Upay)
Download Best UPI Apps :-

Download Google Pay Get 150 Rs For Free Vaild 2 Day
Downlaod Phone PeGet 100 Rs For Free Vaild 2 Day
Download Paytm Get 150 Rs For Free Vaild 2 Day
Open Your Demet Account on : -

Download Upstox Free Demat Account
Download Upstox ProOpen Free Demat Account
Download GrowOpen Free Account

Latest Tech update :-


  • Contact us
  • About us
  • Advertisement
  • Guest Post
  • Privacy Policy
  • About Author
Scroll to top
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
Search