In my last few posts, people were commenting and asks me how we can add or create a demo, download or buy button in the Blogger’s blog post. For this reason, in this post of today, in the blog Mrskt.com, I will tell you how you can easily add such types of buttons to your blog post.
How to add Demo, Download and Buy Button in Blogger Post?
So Friends, to add the stylish type of buttons of Demo, Download, Buy Now, Cart in your Blogger blog post, you have to follow the steps which are given below from that you can easily create this kind of attractive buttons, So please follow the below steps.
Go To Blogger.com and Login to your Blogger account Dashboard.
Open your browser and click on search bar or Url bar and type Blogger.com and then press enter.
Now, Click on Theme Section.
After logged in in your Blogger dashboard,Go To Theme Option by clicking on it
Then,Go To HTML section after clicking on Edit HTML Option
When you are in theme section,you will see a down arrow button and click on that then some more options will be availablebut you have to click on Edit HTML Option
After that,click anywhere on Html Box
Now,you will see a HTML Box,just click anywhere in that box
Now Press Ctrl+f to open search box
After that you have to Press Ctrl+F in your keyboard to open search bar in HTML Box
Now Type or Find ]]></b:skin> or </style>
When you open the search bar,find ]]></b:skin> or </style> in your HTML Box.
Copy the below code
Friends when you find that HTML tags then you have copy the CSS codes that i have provided below and paste it above that tags. If don’s know what is CSS then let me tell you generally CSS codes is used to give style to the HTML elements.
/* Starting Css To DEMO, Download and Buy Button by mrskt.com */
#m-wrap {
margin: 10px auto;
text-align: center;
}
#m-wrap br {
display: none;
}
.egg-btn-slide, .egg-btn-slide2, .egg-btn-slide3 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 0px;
background: #fdfdfd;
border: 2px solid #009688;
margin: 10px;
transition: .5s;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.egg-btn-slide2 {
border: 2px solid #8BC34A;
}
.egg-btn-slide3 {
border: 2px solid #f73d00;
}
.egg-btn-slide:hover {
background-color: #009688;
}
.egg-btn-slide2:hover {
background-color: #8BC34A;
}
.egg-btn-slide3:hover {
background-color: #f73d00;
}
.egg-btn-slide:hover span.circle, .egg-btn-slide2:hover span.circle2, .egg-btn-slide3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
}
.egg-btn-slide:hover span.circle{
color: #009688;
}
.egg-btn-slide2:hover span.circle2 {
color: #8BC34A;
}
.egg-btn-slide3:hover span.circle3 {
color: #f73d00;
}
.egg-btn-slide:hover span.title, .egg-btn-slide2:hover span.title2, .egg-btn-slide3:hover span.title3 {
left: 40px;
opacity: 0;
}
.egg-btn-slide:hover span.title-hover, .egg-btn-slide2:hover span.title-hover2, .egg-btn-slide3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.egg-btn-slide span.circle, .egg-btn-slide2 span.circle2, .egg-btn-slide3 span.circle3 {
display: block;
background-color: #009688;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.egg-btn-slide2 span.circle2 {
background-color: #8BC34A;
}
.egg-btn-slide3 span.circle3 {
background-color: #f73d00;
}
.egg-btn-slide span.title,
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span.title3, .egg-btn-slide3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #009688;
transition: .5s;
}
.egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2 {
color: #8BC34A;
left: 80px;
}
.egg-btn-slide3 span.title3,
.egg-btn-slide3 span.title-hover3 {
color: #f73d00;
left: 80px;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
color: #fff;
}
/* Ending Css To DEMO, Download and Buy Button by mrskt.com */Click on Save button, to save it
When you successfully added that CSS codes above the ]]></b:skin> or </style> then click on the Save button which you can find on the top area on the right side.
Go to your post in which you want add buttons
After Saving It Go to your Blogger’s blog dashboard and then open your existing post or create a new post in which you want to add that buttons. Then, Change compose view to HTML View and now Copy the code below and paste anywhere in the post where you want to add it, Also don’t forget to edit them according to your needs.
<div id="m-wrap">
<a class="egg-btn-slide" href="URL" target="_blank">
<span class="circle"><i class="fa fa-eye"></i></span>
<span class="title">Demo</span>
<span class="title-hover">View Now</span>
</a>
<a class="egg-btn-slide2" href="URL" target="_blank">
<span class="circle2"><i class="fa fa-chevron-circle-down"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Download Now</span>
</a>
<a class="egg-btn-slide3" href="URL" target="_blank">
<span class="circle3"><i class="fa fa-shopping-cart"></i></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Purchase Now</span>
</a>
</div>
</div>Now, Publish/Update your post.
Finally, we are in the last steps in which we only need to update or publish our post’s where we added that stylish buttons.
Here is the Preview:
I hope this article might be helpful for you and you have successfully done it. if you have any problem adding the buy no, emo or download button in your blog post then mention and tell me in the comment section about your problem.
Thanks