How to Add Stylish Demo & Download Buttons in Blogger (Step by Step)
Hey Bloggers! 👋 Aaj ke post me hum seekhne wale hain ki aap apne Blogger blog me stylish Demo aur Download buttons kaise add kar sakte ho. Ye buttons na sirf aapke blog ko professional look dete hain balki visitors ke liye interface ko bhi attractive bana dete hain.
Yahan hum step-by-step samjhenge ki kaise HTML aur CSS dono codes use karke ye animated aur responsive buttons add kiye jaate hain. Agar aap Blogger customize karna pasand karte ho, to ye trick aapke blog ko next level look degi. 🔥
Step 1: Add HTML Code in Blogger Theme
Sabse pehle Blogger Dashboard me jao → Theme → Edit HTML par click karo.
Ab </head> tag search karo aur uske just upar niche diya gaya code paste kar do. Ye Font Awesome icons ko load karega jisse buttons ke andar icons dikhai denge.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>Step 2: Add CSS Code for Stylish Buttons
Ab dobara theme editor me jao aur ]]></b:skin> tag search karo.
Uske just upar niche diya gaya CSS code paste kar do. Ye CSS aapke buttons ke color, animation aur hover effect ke liye responsible hai.
/* Stylish Demo and Download Buttons */
.bie-slide,
.bie-slide2 {
position: relative;
display: inline-block;
height: 55px;
width: 200px;
line-height: 50px;
border-radius: 50px;
background: #fff;
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: #fff;
color: #f84f4f;
}
.bie-slide2:hover span.circle2 {
color: #36D7B7;
}
.bie-slide span.circle,
.bie-slide2 span.circle2 {
display: block;
position: absolute;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
color: #fff;
}
.bie-slide span.title,
.bie-slide2 span.title2 {
position: absolute;
left: 90px;
font-size: 16px;
font-weight: bold;
color: #f84f4f;
transition: .5s;
}
.bie-slide2 span.title2 {
color: #36D7B7;
}
.bie-slide:hover span.title,
.bie-slide2:hover span.title2 {
opacity: 0;
left: 40px;
}
.bie-slide:hover span.title-hover,
.bie-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.bie-slide span.title-hover,
.bie-slide2 span.title-hover2 {
position: absolute;
opacity: 0;
left: 80px;
color: #fff;
}
.bie-slide .circle {
background-color: #f84f4f;
}
.bie-slide2 .circle2 {
background-color: #36D7B7;
}Step 3: Add Buttons in Blogger Post
Ab apne Blogger post editor me jao → HTML view me switch karo aur niche diya gaya code paste kar do. Isse aapke post me stylish “Demo” aur “Download” buttons appear honge.
<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="nofollow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" 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>For Only Demo Button
<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="nofollow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>For Only Download Button
<div id="wrap" style="text-align:center">
<a class="bie-slide2" href="#" rel="nofollow" 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>
