Adding buttons in blogger post / page is quite easy if you are familiar with the a little knowledge of HTML and CSS . If you don't have that knowledge don't worry I will be guiding you step by step with picture though this. You can also add button in the home page of your blogger in the side column where gadgets are present. I will explain the second part in the later part of this post.
This will contain HTML ( body ) and CSS( styling ). lets get started. Your end result will look like this.
Step 1: Open blogger then create a post or page where you want to insert a button . ( if you come to this page then I assume that you know how to create a new page or post )
Step 2: After opening the new post give this a name (optional) then click on HTML editor of the post/page and paste the below HTML code. ( we are adding two button in the page , you can add as many you like , you just need to add one more line with LINK 3, LINK 4..... and so on. )
<a href="#"><button class="button button2">LINK 1</button></a>
<a href="#"><button class="button button2">LINK 2</button></a>
# denote the link address for the button.
Step 3: Save and update the post/page where you have added the buttons. Then view the page how it looks in browser. after adding above code your button will look very basic , now we will add style to it by adding CSS code.
.button {
background-color: #007874;
border: none;
color: white; /* text colour */
padding: 10px 10px;
text-align: CENTER;
text-decoration: none;
display: inline-block;
font-family: Georgia, sans-serif;
font-size: 16px;
margin: 6px 4px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.22);
}
button2 {width: 45%; border-radius: 8px;}
.center {
margin: auto;
width: 100%;
padding: 10px;
}
Step 5: Save HTML code after updating the code and now after reloading view your page in the browser your button ready to server your purpose.You can modify CSS code as per your requirement like color of text , box , padding , border radius , margin etc.
Adding button in place of gadgets in blogger
You have your CSS ready you just the need to put your HTML code in the right place. For this you need to follow these steps. End result will look something like this.
Step 1: Open blogger main home page and click on the layout. Then click on add new gadgets ( where you like to add your buttons)
Step 2: Select add HTML/Javascript code and paste below code in the gadget.
<div class="center">
<a href="#"><button class="button button2">Side Button 1</button></a>
<a href="#"><button class="button button2">Side Button 2</button></a>
<a href="#"><button class="button button2">Side Button 3</button></a>
<a href="#"><button class="button button2">Side Button 4</button></a>
</div>
Class "center" will align your button in the middle of the section.
Step 3: After adding the codes save and reload your page , go back to your page and view it. you will see something like this (above picture 👆). and you are ready to go now.
I hope it will be a great help to you .😉
Post a Comment