How To Add Stylish Demo And Download Button In Blog Post ?

आज इस Post में हम Stylish Demo and Download Button Add करने के बारे में जानेंगे ।

Stylish Demo and Download Button को Blog में कैसे Add करते हैं इसकी पूरी जानकारी देने जा रहा हूँ तो चलिए जानते हैं How To Add Stylish CSS Slider Demo and Download Button In Blogger Post.

Stylish Slider Demo and Download Button for Blogger

आपने कई ऐसे Blogs और Websites देखी होगी जिनमें अलग - अलग तरह के Demo और Download Buttons लगे होते हैं ।

यदि आपका भी कोई ऐसा Downloading Blog या Website है तो ये Post आपके लिए बहुत ही Useful है ।

इस पोस्ट को पढ़ने के बाद आप आसानी से अपने Blog में Stylish CSS Slider Demo And Download Button लगा लेंगे ।

On Page SEO क्या है ? 18 Best On Page SEO Techniques

How This Demo And Download Button Work ?

ये Demo And Download Button HTML और CSS से मिलकर बना है मतलब ये दोनों की Script है । जब भी इन Buttons पर Mouse का Curser ले जाया जाता है तो ये Buttons Slide करते हैं और एक बहुत ही Amazing Hover Effect बनाते हैं जो कि आपके Blog को Stylish बनाता है ।

ये Demo and Download Buttons सभी Blogger Templates में Work करते हैं । इन Buttons का Live Demo आप यहाँ देख सकते हैं - देखें ।

चलिये अब जानते हैं How to add stylish demo and download button in blogger.

How To Add Demo And Download Button In Blogger Post ?

यदि आपको Coding की जानकारी नहीं है तो भी आप अपने Blog में Demo और Download Button add कर सकते हैं । Blogger Blog Post में Demo and Download Button add करना बहुत ही आसान है ।

जिसकी जानकारी इस पोस्ट में Step by Step दी गई है यदि आप नीचे दी गई Steps को सही से Follow करते हैं तो Definitely आपके Blog में Demo and Download Button Show होगा ।

Step 1.

सबसे पहले नीचे दिए गए Code Copy करें

Step 2.

अब अपना Blogger Dashboard Open करें और Theme पर Click करें ।

Step 3.

अब Edit HTML पर Click करें लेकिन ध्यान रहे Code में Change करने से पहले Template का Backup जरूर ले लें ।

Step 4.

अब </head> tag search करें और </head> के Just ऊपर Copy किये गए Code को Paste करें ।

Step 5.

अब Stylish Demo and Download Button Add करने के लिए निचे दिए गए CSS Code को Copy करें ।

#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 #ff0000;
        margin: 10px;
        transition: .5s;
    }
    .btn-slide2 {
        border: 2px solid #0000ff;
    }
    .btn-slide:hover {
        background-color: #ff0000;
    }
    .btn-slide2:hover {
        background-color: #0000ff;
    }
    .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
        left: 100%;
        margin-left: -45px;
        background-color: #fdfdfd;
        color: #ff0000;
    }
    .btn-slide2:hover span.circle2 {
        color: #0000ff;
    }
    .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: #ff0000;
        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: #0000ff;
    }
    .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: #0000ff;
        transition: .5s;
    }
    .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        color: #0000ff;
        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;
    }

Step 6.

अब इस code को Theme>Edit Html में जाएँ और ]]></b:skin> के ठीक ऊपर Paste कर दें और Theme को Save कर दें ।

Now Add Demo And Download Button

अब Post में Demo and Download Buttons को Show करने के लिए लिखी गई Post में एक और Code Add करना है इसके लिए नीचे दी गई Steps को Follow करें -

Step 1.

सबसे पहले नीचे दिए गये Code Copy करें ।

<div id="wrap">
<a class="btn-slide" href="#">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="btn-slide2" href="#">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>
</div>

Step 2.

अब जिस Post में Demo and Download Button लगाना है उसे Open करें ।

Step 3.

अब HTML select करें और जहाँ Demo और Donwload Button लगाने हैं वहाँ इस Code को Paste कर दें ।

Step 4.

अब पहले वाले '#' की जगह Demo link और दूसरे वाले '#' की जगह Download Link डाल दें ।

उदाहरण के लिए जैसे मान लीजिए मुझे नीचे Image में दिखाई Post में Buttons को Add करना है तो मैं पहले इसे HTML View में Change करूँगा ताकि Codes को Paste कर सकूं ।

Blogger blog me download button kaise lagaye

अब मुझे दिखाए Paragraph के नीचे Buttons को लगाना है तो में ये Lines HTML View में Search करूँगा और Lines के बाद Image में दिखाये अनुसार Codes को Copy कर दूंगा ।

अब # की जगह पर अपने Demo and Download Links Paste करूँगा ।

इस तरह से मैं अपने Blog में इन Buttons को Add करता हूँ और आप भी इसी तरीके को Follow करके बहुत ही आसानी से Demo & Download Buttons को Add कर सकते हैं ।

Final Words :

उम्मीद करता हूँ इस पोस्ट को पढ़ने के बाद आपके Blog में Stylish CSS Demo and Download Button Add हो गया होगा ।

इस Post को देखने और पढ़ने के बाद शायद आपको यह Process बहुत ही Tough लगे लेकिन यदि आप इसे ध्यान से पढ़कर सही तरीके से Steps Follow करते हैं तो आपको Stylish Demo and Download Button Add करने में कोई भी परेशानी नहीं आयेगी ।

तो आज की इस Post में हमने जाना कि Blogger Blog में Stylish CSS Slider Demo and Download Button कैसे add करते हैं । आपको हमारी How to Add Sylish CSS Slider Demo and Download Button Post कैसी लगी हमें Comment में बताएं ।

यदि Demo and Download Button Add करने में कोई Problem आती है तो हमें Comment Box में जरूर बताएं , मैं Button Add करने में आपकी Help करूँगा ।

Stylish CSS Slider Demo and Download Buttons for Blogger Posts - HindiCraze