HOW TO INSTALL SLIDE DEMO AND DOWNLOAD BUTTON IN BLOGGER

HOW TO INSTALL SLIDE DEMO AND DOWNLOAD BUTTON IN BLOGGER


On this occasion I would share the tutorial about to install sliding demo and download buttons to blogger blog! and such hack is really awesome.

This tutorial have an awesome and amazing animation effect,you may name it mouse hover slide effect,Okay lets start how you enjoy this widget in your blog.
First of all you have to put a CSS code in your blogger blog,follow the instruction below;

INSTRUCTION TO FOLLOW:


Step 1: Open your blogger dashboard select your blog.
Step 2: Select Template option and Click on Edit HTML option.
Step 3: In the template code find ]]></b:skin> or </style>oo

CSS CODE:


#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.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;
}


Save the template. 

Now,follow this Step, for the calling code please apply to Post HTML tab. 

So that it looks neat when inserting HTML code into the post, you should use the  Press "Enter" for a new line  on the menu "Options" as shown below.

Now,at this you have to insert below piece of code to your new blog post but keep in mind you have to insert below code in POST HTML section.

HTML CODE:

<Div id = "wrap">
<a href="#" class="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="#" class="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>
You have successfully done.

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