--> -->

How to Add floating button in Blogger? | social buttons on Blogger? | Tech Mahesh

  Hello student, welcome to Techno Mahesh. We learn in this article. How to  add a floating effective button in blogger post. Read complete article to customization your button.

 




How to add floating effect button in blogger post


How to add floating effect button in blogger post


Using buttons in blogger post 

You will learn how to  set up  CSS and HTML button in your Blogger Post. These buttons are used for a variety purpose in your blog. The status button is used to get information about the final result of the topic under discussion, and the  download button is used to download data for blog readers




How this button work? 


These buttons are created using HTML and CSS some of which ware simple jQuery button to view and download. Which one of the four designs , you  can crate buttons in blogger for  many  purposes, like download and demo buttons, whenever you hover your mouse over the download button to see amazing animated hover effect.


How to add button in blogger? 


Adding button to blogger is easy and very simple. any beginner with good HTML and CSS skills can add these simple HTML and CSS code to their blog.  Blogger doesn't support plugins , so you'll need to edit the HTML and CSS to manually and this code to your blogger template. Don't be afraid to try the code in your template. You can read step by step guide.  How to upload these HTML and CSS codes and create a download button into the blogger post. 


How to create demo and download button in blogger? 


Demo blogger: 

Demo blogger are clickable blogger button used to display an overviews of manuals and widgets. websites that provide widgets and templates need a demo button to see how the widget or the template looks like. Also, there are blocks with demo buttons for educational posts that provide a better user experience for visitors. 


Download button: 


The download button is the bloggers clickable button used to download the target. if your blog provides any digital products to save offline then need a download button in your blogger blog. 
So today we are going to learn that how to add a demo and download button in  your blogger blog posts. 


Video Customization Tutorial

Steps: 


Step1: go to blogger.com 

Step2: then go to "theme" and click on "edit HTML". 


How do I add a button to my blogger post?



Step3: find 
]]></b:skin> 
How can I add image download button in Blogger?




Step4: then paste give below CSS below it. 

 
 <style> import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");body {  display: flex;  text-align: center;  justify-content: center;  align-items: center;  background: #fff;  height: 100vh;  font-family: "Muli", Arial, sans-serif;}.buttons > button{  margin-right:30px;} .btn-gradient{  background:#1462ff;  color:#fff;  border-radius: 12px;  padding:12px 48px;  box-shadow: 0 6px 30px -10px #4a74c9;  transition:all 0.5s ease;  border:0;  letter-spacing:1px; 
 text-transform: uppercase;}.btn-gradient:hover{  box-shadow: 0 0 0 0 rgba(0,40,120,0); 
 transform:scale(0.93);}.gradient2{  background-image: linear-gradient(60deg, #4aa5fb 10%, #1ccafa 50%, #00e1f9 100%); 
 border-top-left-radius: 20px;  border-top-right-radius: 0px;  border-bottom-right-radius: 20px;  
border-bottom-left-radius: 0px;}.gradient2:hover{  border-top-left-radius: 0px;  border-top-right-radius: 12px;  border-bottom-right-radius: 0px; 
 border-bottom-left-radius: 12px;}.gradient3{  background-image: linear-gradient(60deg, #8c38fe 10%, #b72ee4 50%, #9c66e5 100%); 
 box-shadow: 0 2px 25px 0 rgba(111, 30, 138, 0.35);}.gradient3:hover{  box-shadow: 0 10px 30px 0 #8c38fe, 0 5px 0 0 #9c66e5; 
 transform:translateY(-5px);}.gradient4{  background-image: linear-gradient(60deg, #43fa84 10%, #3afec0 50%, #38fee3 100%);  
box-shadow: 0 2px 25px 0 rgba(56,254,227,0.35);}.gradient4:hover{  box-shadow: 0 10px 12px 0 #48f184b5, 0 8px 2px 0 #57b396; 
 transform: rotateX(50deg);}</style>  

How do I add a Buy Now button on Blogger?



Step5: now "save the theme". 

How do I add a downloadable file to Blogger?



Step6: now go to your blog post







Step7: then paste the given below HTML codes in your post to create buttons. 
  <div class="buttons">    <button class="btn btn-gradient" onclick="window.open('https://www.techmahesh.com')">Twitter</button>    <br /><br />    <button class="btn btn-gradient gradient2" onclick="window.open('https://www.techmahesh.com')">Facebook</button><br /><br />    <button class="btn btn-gradient gradient3" onclick="window.open('https://www.techmahesh.com')">Telegram</button><br /><br />    <button class="btn btn-gradient gradient4" onclick="window.open('https://www.techmahesh.com/')">Tech Mahesh</button>  </div><br /><br />  <button class="btn btn-gradient gradient2" onclick="window.open('https://www.techmahesh.com')">Telegram</button>&nbsp;&nbsp;&nbsp;    &nbsp;&nbsp;&nbsp;<button class="btn btn-gradient gradient4" onclick="window.open('https://www.techmahesh.com')">Download</button>
                                   
Online HTML Button Generator with Link for Blogger Posts

Step8: now publish the post. 

How to Add Download Button in Blogger [Guide + FAQs]



Step9: it's done: 

Summary: 


In blogger we don't give any plugins for buttons, and buttons are so important in some posts, so today with the help of this poster now you are able to create button in your blogger blog posts.