Download this Safelink Theme. Download now!
Home
blogging
Home

Make Best blogger slider For Blogger 2022|Online web

   [ad_1]

Hello friends! Welcome to the onlineearning blog.

If you want to know how to add stylish slider demo and download buttons to your blogger site template , you must read this post from beginning to end because in this post I am Blogger and in this post I will explain in full detail how to make stylish demo / download button. I said. You are given the 5 best stylish slider demos on Blogger and download buttons to add to your Blogger website.

So let's know how to add stylish slider demo and download button for blogger in hindi.

5 Best Stylish Slider Demo and Download Buttons
5 Best Stylish Slider Demo and Download Buttons

 

How to add stylish slider demo and download button for blogger site

Why add stylish demo and download buttons to Blogger.

Friends, you must have realized that the digital age is slowly gaining momentum these days and people want to get anything done in a very short time.

When a visitor comes to our blog for whom and if he can't find it, he avoids it and starts looking at other sites, due to which bounce rate of our blog keeps increasing, page authority cannot increase, revenue decreases. It seems that is why it is so important for our blog and blog to look interesting.

If you are writing some posts on your blog such as template download, script download, movie download, or any other file download then we need to add demo or download link to such post.

In this case, if we add a link in the direct text, it does not look good and our visitors do not see it quickly.

So to make our post interesting, we should add stylish demo and download button on Blogger.

So in today’s post, I’ve come up with 5 stylish demo and download button codes to add to the Blogger site, so read this post carefully from start to finish.

How do bloggers post me stylish demos and download buttons?

If you want to have a stylish demo and download button in the blogger post, you are given the code in the box below and also a screenshot of its view style image.

Code Box 1 contains HTMLCode and Box 2 contains CSS / JavaScript code

You should choose any one of the following styles:

Stylish slider demo / download button 1 HTML code

<!-- [Demo and Download button by www.akhelppoint.com] --->
<div class="container">
  <h2>Demo and Download button</h2>
<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="#" target="_blank">Demo</a></li>
    <li><a class="download" href="#" target="_blank">Download</a></li>
  </ul>
</div>

 

Stylish slider demo / download button 1 CSS code

<!-- CSS by www.akhelppoint.com -->
<style>
@import url(https://fonts.googleapis.com/css?family=Open + Sans:400, 700);
a:link {
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited,
a:link:hover,
a:visited:hover {
  text-decoration: none;
}

body {
  background: #eee none repeat scroll top left;
  color: #444;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  background: #fff;
  max-width: 320px;
  margin: 4% auto;
  padding: 20px;
  font-family: "Open Sans", sans-serif;
  border-radius: 5px;
  overflow: hidden;
}

.container h2 {
  background: #fff;
  position: relative;
  overflow: hidden;
  margin: 0 0 20px 0;
  font-size: 0.8em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  vertical-align: middle;
  padding: 0 12px 20px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.button {
  float: left;
  list-style: none;
  text-align: center;
  width: 95%;
  margin: 10px;
  padding: 2px;
  font-size: 14px;
  clear: both;
}

.button ul {
  margin: 0;
  padding: 0;
}

.button li {
  display: inline;
  margin: 5px;
  padding: 0;
  list-style: none;
}

.button li a.demo,
.button li a.download {
  position: relative;
  padding: 9px 48px 9px 16px;
  background: #f39c12;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
  line-height: normal;
  transition: all 0.3s;
}

.button li a.download {
  background: #3498db;
}

.button li a.demo:hover,
.button li a.download:hover {
  background: #666;
}

.button li a.demo:active,
.button li a.download:active {
  cursor: pointer;
}

.button li a.demo:after,
.button li a.download:after {
  content: "f135";
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0;
  top: 0;
  font-weight: normal;
  display: inline-block;
  margin: 0 0 0 10px;
  color: #fff;
  padding: 11px;
  font-family: fontawesome;
}

.button li a.download:after {
  content: "f019";
}
</style>

 

Demo / Download Button Image 1
Demo / Download Button 1 image

 

Stylish slider demo and download button HTML code 2

<!-- [Demo and Download button by www.akhelppoint.com] --->
<div id="btnripplebsd">
  <a class="bsdripplebtn btnone ripple-effect-bsd" href="#0">DEMO</a>
  <a class="bsdripplebtn btntwo ripple-effect-bsd" href="#0">DOWNLOAD</a>
</div>

 

Stylish slider demo and download button CSS / JavaScript code 2

<!-- CSS by www.akhelppoint.com -->
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');

body {
  background: #ecf0f1;
  font-family: 'Fira Sans Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 30vh auto 0 auto;
}
/* Bloggersstand Material Design Ripple Effect Buttons */
#btnripplebsd{margin:19px auto;text-align:center}
#btnripplebsd a{text-decoration:none}
.bsdripplebtn{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.6em;border-radius:4px;color:rgba(255,255,255,0.7);font-weight:400;padding:19px 24px;margin:0 14px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.bsdripplebtn:hover,.bsdripplebtn:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.bsdripplebtn.btnone{background:#33ccff}
.bsdripplebtn.btntwo{background:#ff3333}
.bsdripplebtn.btnone:hover,.bsdripplebtn.btnone:active{background:#4dd2ff}
.bsdripplebtn.btntwo:hover,.bsdripplebtn.btntwo:active{background:#ff4d4d}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.06)}
.ripple-effect-bsd{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.bsdeffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.4}
.bsdeffect.animate{animation:ripple-effect-bsd 0.4s linear}
@keyframes ripple-effect-bsd{100%{opacity:0;transform:scale(2.4)}}
@-webkit-keyframes ripple-effect-bsd{100%{opacity:0;transform:scale(2.4)}}
*/
</style>
<!-- JavaScript by www.akhelppoint.com -->
<sript>
//<![CDATA[
!function(a){a(".ripple-effect-bsd").click(function(b){var c=a(this);0===c.find(".bsdeffect").length&&c.append("<span class="bsdeffect"></span>");var d=c.find(".bsdeffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</sript>
Demo and Download Button Image 2
Demo and Download Button Image 2

Stylish slider demo and download button HTML code 3

<!-- [Demo and Download button by www.akhelppoint.com] --->
<!-- HTML -->
<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">2.5MB .rar</span></div>

Stylish slider demo and download button CSS code 3

<!-- CSS by www.akhelppoint.com -->
<style>
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #3CC091;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: 'f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}
</style>
Stylish slider demo and download button image 3
Stylish slider demo and download button image 3

 

Stylish slider demo and download button HTML code 4

<!-- Demo and Download Button by www.akhelppoint.in -->

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

Stylish slider demo and download button CSS code 4

<!-- CSS by www.akhelppoint.in -->
<style>
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: #fdfdfd;
    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;
} 
</style>
Stylish slider demo and download button image 4
Stylish slider demo and download button image 4

 

Stylish slider demo and download button HTML code 5

<!-- Demoand Download Button Code by www.akhelppoint.in -->

</div>
<div class="whitebuttondemo" style="text-align: right;">
<a href="#">demo</a>&nbsp;<span class="up">name</span></div>
<span style="font-size: x-large;"></span><br />
<div class="whitebutton" style="text-align: right;">
<a href="#">Download</a>&nbsp;<span class="up">name</span>&nbsp;<span class="down">name</span><br />
</div>
</div>

Stylish slider demo and download button CSS code 5

<!-- Css code By www.akhelppoint.in -->
<style>
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: 'f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

</style>
Stylish slider demo and download button image 5
Stylish slider demo and download button image 5

 

How to show demo and download button in your blogger post?

If you chose the stylish slider demo and download button styles above, now you need to follow the steps below:

  1. Open Blogger Dashboard >> Click on Theme and click on Edit Html.
  2. Search for the tag by clicking anywhere in the Edit HTML box.
  3. Now the Stlye you selected in this post is CSS / JavaScript code in the second code box, copy it.
  4. Now paste and save the copied code before the tag.
  5. Now you need to write or edit the post. For this you have to click on Edit Post in the post.
  6. Now you have to open the post in Edit HTML view and by clicking on the location you have to press space / enter where you want to show the demo / download button.
  7. Then the first code above is the HTML code, copy it and paste it there.
  8. All the above HTML code has # written in place of Url, there you have to write demo and download Url of your site.
  9. Now you need to publish / update the post.
  10. Now you can see your post by looking at it, the demo and download button will start showing in your post.

Guide video: How to add stylish slider demo and download button

 

Post a Comment

© ‧ Online Web. All rights reserved. Distributed by Pixabin Official