How To Add Demo And Download Button In Blogger Post

So Friends! Today In This Article We Are Going To Talk About Adding Stylish Demo And Download Slider Button In Blogger.

So We Will Know All These Things In This Article. So Stay Here I'll Teach You With Full Details And Demo.

Step 1 : Adding HTML Code Of Demo And Download Button

So Now You Have To First Open Your Blogger Dashboard,

Then You Have To Go To Theme>Edit HTML, And Search For </head>,

Then Paste The Code Given Below Before </head> Tag And Click On Save Button.

Double Click To Copy This HTML :

Step 2 : Adding CSS Code Of Demo And Download Buttons

In The Second Step, You Have To Add CSS To Your Blogger Template For Both Buttons,

Again You Have To Click On Theme>Edit Theme And Search For ]]></b:skin>,

Then Paste The CSS Given Below Before

]]></b:skin> Tag.

Double Click To Copy This CSS :

/* CSS Demo And Download Buttons By Techno Krrish*/ .bie-slide,  .bie-slide2 {   position: relative;   display: inline-block;   height: 55px;   width: 200px;   line-height: 50px;   padding: 0;   border-radius: 50px;   background: #fdfdfd;   border: 2px solid #f84f4f;   margin: 10px;   transition: all 0.5s ease-in-out;  }  .bie-slide2 {   border: 2px solid #36D7B7;  }  .bie-slide:hover {   background-color: #f84f4f;  }  .bie-slide2:hover {   background-color: #36D7B7;  }  .bie-slide:hover span.circle,  .bie-slide2:hover span.circle2 {   left: 100%;   margin-left: -45px;   background-color: #fdfdfd;   color: #f84f4f;  }  .bie-slide2:hover span.circle2 {   color: #36D7B7;  }  .bie-slide:hover span.title,  .bie-slide2:hover span.title2 {   left: 40px;   opacity: 0;  }  .bie-slide:hover span.title-hover,  .bie-slide2:hover span.title-hover2 {   opacity: 1;   left: 40px;  }  .bie-slide span.circle,  .bie-slide2 span.circle2 {   display: block;   background-color: #f84f4f;   color: #fff;   position: absolute;   float: left;   margin: 5px;   line-height: 42px;   height: 40px;   width: 40px;   top: 0;   left: 0;   transition: .5s;   border-radius: 50%;  }  .bie-slide2 span.circle2 {   background-color: #36D7B7;  }  .bie-slide span.title,  .bie-slide span.title-hover,  .bie-slide2 span.title2,  .bie-slide2 span.title-hover2 {   position: absolute;   left: 90px;   text-align: center;   margin: 0 auto;   font-size: 16px;   font-weight: bold;   color: #f84f4f;   transition: .5s;  }  .bie-slide2 span.title2,  .bie-slide2 span.title-hover2 {   color: #36D7B7;  }  .bie-slide span.title-hover,  .bie-slide2 span.title-hover2 {   left: 80px;   opacity: 0;  }  .bie-slide span.title-hover,  .bie-slide2 span.title-hover2 {   color: #fff;

Step 3 : Adding HTML Portion To Blogger Posts

For Demo Button

For Download Button

भक्ति स्टेटस हिंदी में - captions in Hindi | सूविचार हिंदी

भक्ति शायरी *⛳हमसे उम्मीद मत रखना की हम कुछ और लिखेंगे..🤕,* हम कट्टर हिन्दू हैं साहब💫जब भी लिखेंगे 📝जय श्री राम लिखेंगे..😇🙏🏻!!* *⚜️"किसी की पहचान की जरूरत नहीं हमें,...😇🙏🏻* *⚜️"लोग हमारा चेहरा देखकर💫 ही जय श्री राम बोल देते हैं..😍🚩!!* * *⛳जय श्री राम🙏🏻🚩* *⚜️"माला से 🌸मोती तुम तोडा ना करो, धर्म से मुहँ तुम मोड़ा ना करो,...😏* *⚜️"बहुत कीमती है (जय श्री राम )का नाम,जय श्री राम बोलना कभी छोड़ा ना करो..😇🙏🏻🚩!!* * *जय जय श्री राम🚩* *🌄भोर सुहानी🌄* *रिश्ते अंकुरित होते हैं प्रेम से.!* **जिन्दा रहते हैं संवाद से.!* *महसूस होते हैं संवेदनाओं से.!* **जिए जाते हैं दिल से.!* *मुरझा जाते हैं गलतफहमियों से.!* **और* *बिखर जाते हैं अहंकार से.!* *🙏 मंगलमय प्रभात 🙏* 😘प्यारे कान्हा...!! तुम्हारी 📸तस्वीर खींची थी मैंने, अब तुम्हारी 📸तस्वीर खींचती है मुझे...!! 🙏🏼 जय श्रीकृष्णा 🙏🏼 🔔♥️🔱♥️🔔 ॐ नमः शिवाय श्री महाकाल भस्मारती श्रृंगार दर्शन ...

Captions

यह ब्लॉग खोजें