How to add Sliding CSS Demo & Download Buttons to blogger?

How to add Sliding CSS Demo & Download Buttons to blogger?




1:Header stuff

Put below Code before <head> press save.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

2-CSS

To install CSS code for demo and download buttons. Open blogger> Templates> Edit HTML and apply the code below right before the </ style> or]]> </ b: skin>

/* Demo and Download Buttons by www.BloggersStanD.com */
#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.bsd-btn-slide, .bsd-btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #00CC00;
    margin: 10px;
    transition: .5s;
}

.bsd-btn-slide2 {
    border: 2px solid #FF3300;
}

.bsd-btn-slide:hover {
    background-color: #00CC00;
}

.bsd-btn-slide2:hover {
    background-color: #FF3300;
}

.bsd-btn-slide:hover span.circle, .bsd-btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #00CC00;
}

.bsd-btn-slide2:hover span.circle2 {
    color: #FF3300;
}

.bsd-btn-slide:hover span.title, .bsd-btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.bsd-btn-slide:hover span.title-hover, .bsd-btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.bsd-btn-slide span.circle, .bsd-btn-slide2 span.circle2 {
    display: block;
    background-color: #00CC00;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.bsd-btn-slide2 span.circle2 {
    background-color: #FF3300;
}

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

.bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    color: #00CC00;
    left: 80px;
}

.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    color: #fff;
}
Save template.

3-HTML

Now in this add html tag where you want to put css demo and download buttons. I hope you liked it. Thank your visiting Blog

<div id="wrap">
<a href="www.bloggersstand.com" class="bsd-btn-slide" 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 href="www.bloggersstand.com" class="bsd-btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>


Thanks to :-bloggersstand.com 

Comments

Post a Comment

இந்தப் பதிவு பற்றிய உங்கள் கருத்து எங்களுக்கு முக்கியம். எதுவானாலும் தயங்காம எழுதுங்க!

Popular posts from this blog

HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER

Image
HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER Adding this notification bar to blogger: Login to your  blogger dashboard  and  select your blog . Select  Layout  option and select  Add a gadget  option. Select  HTML/JavaScript  widget from the list. In the HTML/JavaScript widget paste  following code  and save it. Preview your blog to see the new changes. Note:  In the following code replace  red colored code  with your post titles and remove  #  symbols with links to these posts. CODE: <style> #wcnot-cont { top:0px; left:0px; z-index:9999999; position:fixed; width:100%; background:#222222; color:#ffffff; font:16px georgia; box-shadow:2px 2px 5px  #444444; -moz-box-shadow:2px 2px 5px  #444444; -web-kit-box-shadow:2px 2px 5px  #444444; -goog-ms-box-shadow:2px 2px 5px  #444444; } #wc-movtext { text-align:center; padding:8px; font-family:  Ve...
Keep reading

Hacking அறிந்தும் அறியாமலும் – பாகம் 2

Image
Hacking அறிந்தும் அறியாமலும் – பாகம் 2 ஹக்கிங் பற்றிய இந்த தொடரில், ஹக்கிங் என்றால் என்ன? என்பது பற்றியும் மற்றும் ஹக்கேர்ஸ் பற்றியும் கடந்த பதிவில் பார்த்தோம்.ஹக்கிங் அறிந்தும் அறியாமலும் – பாகம் 1 அதன் தொடர்ச்சியாக இன்று அனைவரும் கட்டாயம் அறிந்து வைத்திருக்க வேண்டிய சிலவற்றை பற்றி பார்க்கலாம். அதாவது தனிநபர் பாதுகாப்புக்கு அச்சுறுத்தல் விடும் ஹக்கிங் முறைகள், அவற்றிற்கான பாதுகாப்பு ஏற்பாடுகள் பற்றிய விடயங்களை தொடர்ந்து பார்க்கலாம். ஹக்கேர்ஸ்ஸைப் பொறுத்தவரையில் அவர்கள்  ஒரு தனிநபரின் இணையக்கணக்குகளின் மீதோ அல்லது அதையொத்த தனிநபர் தகவல்கள் மீதோ தாக்குதல் நடாத்துவதற்கு குறிப்பிட்டு சொல்லக்கூடிய ஒருசில வழிவகைகளை பயன்படுத்துகிறார்கள். அவை வருமாறு தனிநபர் கணக்குகள்/தகவல்கள் மீதான ஹக்கேர்ஸ்ஸின் தாக்குதல் வழிமுறைகள் 1. Phishing 2.Key Loggers 3.Social Engineering 4.Tap Napping இந்த மேற்குறிப்பிட்ட வழிமுறைகளையே தனிநபர் கணக்குகள்/தகவல்கள் மீதான தாக்குதல்களுக்கு இன்று அதிகம் ஹக்கேர்ஸ் பயன்படுத்துகின்றனர். இவற்றைப்பற்றியும் இதிலிருந்து எவ்வாறெம்மை பாதுகாத்துக...
Keep reading