How to Create Stylish Download Button for Blogger?

नमस्कार दोस्तों! स्वागत है आपका Techly360 हिंदी ब्लॉग में. और आज के इस आर्टिकल में हम जानेंगे की कैसे हम Blogger Blog Post में Stylish Download Button लगा सकते है. या कहे की आज हम जो भी आपको Unique और Advance Download Button Script for Blogger देने वाले है.

क्या है Stylish Download Button for Blogger?

दोस्तों अगर आप एक ब्लॉगर है तो आपको इस डाउनलोड बटन के बारे में जरुर से पता ही होगा. लेकिन कभी आपने Stylish Download Button के बारे में सुना है. नही पता तो मैं आपको बता दूं की स्टाइलिश बटन में कुछ अलग ही features उपलब्ध होते है.

Download Now!

Ever Free

5 MB

तो आज हम आपको Stylish Download Button for Blogger Script के बारे में विस्तारपूर्वक बताएँगे. तो चलिए हम निचे जानते है. की हम कैसे इस स्टाइलिश डाउनलोड बटन को अपने ब्लॉगर पोस्ट में लगा सकते है.

How to Create Stylish Download Button for Blogger Script?

तो निचे मैंने आपको stylish download button in html script के जरिये बताया है की कैसे आप कुछ स्टेप्स को फॉलो करके आसानी से इस stylish download button को ब्लॉगर ब्लॉग पोस्ट में लगा सकते है. निचे दिए गये स्टेप्स को फॉलो करे.

सबसे पहले आपको ब्लॉगर डैशबोर्ड को ओपन करना है.
अब आपको Creat New Post पर क्लिक करना है.
अब आपको निचे दिए गये Script को कॉपी करना है.

<div>
<style>
.abt-button{margin:50px auto;width:200px}.abt-button a{background:-moz-linear-gradient(center top ,#00b7ea 0,#009ec3 100%) repeat scroll 0 0 transparent;color:#fff;display:block;font:17px/50px Helvetica,Verdana,sans-serif;height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;color:#fff;font:17px/50px Helvetica,Verdana,sans-serif;text-decoration:none;text-align:center;text-transform:uppercase;background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#00b7ea),color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:linear-gradient(top,#00b7ea 0,#009ec3 100%)}.abt-button a,.abt-button p{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 8px rgba(0,0,0,.2);-moz-box-shadow:2px 2px 8px rgba(0,0,0,.2);box-shadow:2px 2px 8px rgba(0,0,0,.2)}.abt-button p{background:#222;color:#fff;display:block;font:12px/45px Helvetica,Verdana,sans-serif;height:40px;margin:-40px 0 0 10px;position:absolute;text-align:center;transition:margin .5s ease 0s;width:180px;z-index:1;-webkit-transition:margin .5s ease;-moz-transition:margin .5s ease;-o-transition:margin .5s ease;-ms-transition:margin .5s ease;transition:margin .5s ease}.abt-button:hover .up{margin:-5px 0 0 10px!important}.abt-button:hover .down{line-height:35px!important;margin:-85px 0 0 10px!important}.abt-button a:active{background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(36%,#00b7ea),color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:linear-gradient(top,#00b7ea 36%,#009ec3 100%)}.abt-button:active .up{margin:-20px 0 0 10px!important}.abt-button:active .down{margin:-70px 0 0 10px!important}	
</style>
<div class="abt-button">
      <a href="#" target="_blank">Download Now!</a>
      <p class="up">Ever Free</p>
      <p class="down">5 MB</p>
    </div>
	</div>

अब आपको न्यू पोस्ट के html सेक्शन में जाकर कोड को पेस्ट कर देना है.
अब आपको आपके इस पोस्ट को पब्लिश कर दे.
आपका Stylish Download Button तैयार है.

नोट – इस कोड में डाउनलोड लिंक (#) के जगह अपनी लिंक पेस्ट करे!

निष्कर्ष – So दोस्तों आपको यह How to Create Stylish Download Button for Blogger? का आर्टिकल कैसा लगा. निचे हमे कमेंट करके जरुर बताये. और पोस्ट को अधिक से अधिक शेयर जरुर करे.