Hello Blogger, 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 specially issliye add kiya jata hai. Agar aap kisi widget ya kisi bhi chij ka demo dikna chate hai. basically aap slider demo and download button ka istemal na karke simple link ke duwara bhi kar skate hai.

add slider and demo download buttons in blog webiste

Likin agar ap apne blog website ke design ko Outstading banana chate hai. To website me kuch additional features add karne honge. jisse reader blog ke traf attrect ho jaye. Kyoki 70% vistor blog design dekte hai. To Chalye jante hai. Blog Website Me animated slider demo and download button ko kaise add karte hai.





Demo and downlaod buttons design
Agar Aap Buttons ka demo Dekna chate hai. To Niche demo per check karke Dek skate hai.



How To Add slider demo and download button in website

Finally Agar apko Buttons Ka design passand 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="http://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>







  • Best Email subscribe wedget design for blog website.






  • 15+ Most useful blogger widget blog ke liye.









  • 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 apko demo and downlod buttons ko add karne me khoi bhi Problem aye

    To hame comment karke puch sakte hai. Are assani se apne blog webiste animated slider demo and download button ko add kar skate hai.

    Yeh Bhi Pade:-
    Perfect Design drop down menu for blog website
    Top 5 best Blockquote Design for blog website.
    Stylish Email Subscribe widget for blog webiste.