5 Best Stylish Sliders Demo and Download Button for Blogger Post

5 Best Stylish Sliders Demo and Download Button for Blogger Post

 5 Best Stylish Sliders Demo and Download Button for Blogger Post


हैलो दोस्तों! स्वागत है akHelpPoint.IN ब्लॉग में । 

अगर आप अपने Blogger Site के Template में Stylish Sliders Demo and Download Button Add कैसे करते हैं जानना चाहते हैं तो आप इस पोस्ट को शुरू से अंत तक जरूर पढ़ें क्योकि मैंने इस पोस्ट में Blogger में Stylish Demo/Download button कैसे लागतें हैं पूरा Details से बताया गया है और इस पोस्ट के द्वारा आपको 5 Best Stylish Sliders Demo and Download Button in Blogger आपको अपने ब्लॉगर के Website में Add करने के लिए दिया गया है । 

तो चलिये जानतें हैं How to Add Stylish Slider Demo and Download Button for Blogger हिन्दी में । 

5 Best Stylish Sliders Demo and Download Button
5 Best Stylish Sliders Demo and Download Button


How to Add Stylish Slider Demo and Download Button for Blogger Site


Stylish Demo and Download Button Blogger में क्यों Add करें । 

दोस्तो आपलोग समझते होंगे की आजकल का ये Digital जमाना धीरे धीरे Fast होता जा रहा है और लोग किसी भी काम को बहुत कम Time में पूरा करना चाहते है । 

जब कोई Visiter हमारे ब्लॉग पर जिसके लिए आता है और अगर वो उसे न मिल पाये तो वह Skip कर के किसी दूसरे साइट में देखने लगता है जिसके वजह से हमारी Blog का Bounce Rate बढ़ने लगता है , Page Authority नहीं बढ़ पाती है Earning कम होने लगती है इसलिये  हमारा Blog और Blog का Page Attractive दिखना भी बहुत जरूरी है।


अगर आप अपने Blog में कुछ ऐसा Post लिख रहें हैं जैसे Template Download, Script Download, Movies Download, या कोई और File Download तो ऐसे पोस्ट में हमे Demo or Download का Link Add करना पड़ता है ।

ऐसे में अगर हम Direct Text में Link Add करें तो अच्छा नहीं दिखता है और हमारे visiters को जल्द नजर नहीं आ पाता है।


इसलिए हमे अपने पोस्ट को Attractive बनाने के लिए Stylish Demo and Download Button Blogger में Add करना चाहिए।

तो आज के इस पोस्ट में ऐसे ही 5 Stylish Demo and Download Button Code Blogger Site में add करने के लिए लाया हूं तो इस पोस्ट को ध्यान से शुरू से अंत तक समझिए ।


Blogger Post me Stylish Demo And Download Button Kaise Lagaye?

Blogger Post में Stylish Demo और Download Button को लगाना चाहते हैं तो आपको नीचे Box में Code दिए हुए हैं और उसका View Style Image Screenshot भी दिया गया है। 

Code Box 1 में HTMLCode हैं और Box 2 में CSS/JavaScript Code है

आपको नीचे दिए गए Style मे से कोई एक Style को चुनिये : 

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



Demo and Download Button को अपने Blogger Post में कैसे Show कराएं?


अगर आप ऊपर दिये गए Stylish Slider Demo and Download Button Style को Select कर लिया है तो अब आपको नीचे दिये गए steps को Follow करना है : 


  1. Blogger के Dashboard open करें >>Theme पर Click करके Edit Html पर Click करें । 
  2. Edit Html Box में कहीं पर Click करके </head> tag को Search करें । 
  3. अब इस Post में आपने जो Stlye Select किया है उसका Second वाला Code Box मे CSS/JavaScript Code है इसे Copy कर लें । 
  4. अब Copied Code को </head> Tag के पहले Paste करके Save कर दें । 
  5. अब आपको Post लिखना है या Edit करना है । इसके लिए Post को Edit Post पर Click करना है । 
  6. अब पोस्ट को Edit Html View मे open करना है और उस Position पर click कर के Space/Enter Press करना है जहां पर आप Demo / Download Button को Show करना चाहते हैं । 
  7. फिर उपर पहला Code में Html Code है इसे Copy करना है और वहाँ Paste कर देना है । 
  8. आपको उपर के सभी HTML Code में Url की जगह # लिखा हुआ है वहाँ पर आपको अपने Site के Demo और Download Url को Enter करना है । 
  9. अब आपको Post को Publish/Update करना है । 
  10. अब अपने पोस्ट को View कर के देख सकतें हैं आपके Post में Demo and Download Button Show होने लगा होगा । 

Guide Video: How to add Stylish Slider Demo and Download Button


  

Comments