Beginners often fall into the problem of creating buttons for Blogger. Creating a blogger button is easy with HTML codes. One can easily create an HTML button and customize it.
He needs to know the HTML code for the button to create that. But, we can create a button by pasting codes in the HTML of Blogger. First, you need to customize this button code and save it in Notepad.
You can create buttons like these with the HTML code. You can change the color and size of these buttons.
Button Code
<h1 style=”-webkit-text-stroke-width: 0px; line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;”><span style=”font-size: large;”><span><span style=”color: white; font-family: inherit; font-size: x-large;”><div style=”background-color: #f55920; border-radius: 25px; font-weight: 400; text-align: center;”>Text Here</div></span></span></span></h1>
This code is for major heading in Blogger posts. We can change the size of this button by changing its heading tag. If you want to use this button as a heading, subheading, minor heading, or paragraph, then delete the h1 code and write other heading tags there.
We want to use this button as a subheading. So, we replace the h1 code with the h3 code. Now, this code will look like this.
<h3 style=”-webkit-text-stroke-width: 0px; line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;”><span style=”font-size: large;”><span><span style=”color: white; font-family: inherit; font-size: x-large;”><div style=”background-color: #f55920; border-radius: 25px; font-weight: 400; text-align: center;”>Text Here</div></span></span></span></h3>
Changing Color
We can change the color of the button by changing the HTML code of the color. The color code of this button is highlighted in the previous button code. This is the HTML code of the orange color in the button.
So the button will be orange in color. To change color we need to get the HTML code for that color. We can get the HTML code for any color by following these steps.
1. We need to go to the Google Color Picker.
2. Select the color you want to use.
3. You will find the HTML code there and copy the code.
You can get HTML code of any color in the Google Color Picker.
Now we have got the HTML code for the color. We can replace this code #f55920 with that.
Adding Links
We can add any link in the button with HTML code so that clicking this button opens a link. So, we can create read more button html code easily. We will know how to code a link button in html. After creating and customizing the button, we need to paste it into the html code of a Blogger post.
1. Open the Compose View of the post.
2. Select the text on the button and add a link there.
After adding a link this button will work as a link button.
Changing Text
The text on the button will be Text Here as default. We can change this text by replacing this text with HTML code. We need to go to the HTML view of that blogger post.
We need to change this highlighted Text Here code with new text.
<h1 style=”-webkit-text-stroke-width: 0px; line-height: 1.656; margin-bottom: 0pt; margin-top: 0pt;”><span style=”font-size: large;”><span><span style=”color: white; font-family: inherit; font-size: x-large;”><div style=”background-color: #f55920; border-radius: 25px; font-weight: 400; text-align: center;”>Text Here</div></span></span></span></h1>
In this case, we will replace the Text Here code with Changing Text code. We need to delete the Text Here code and write Changing Text in that place.
Changing Height and Width
We can change the height and width of the button by doing some customization to the HTML code. We need to change the highlighted text 1.656 with the new value. If we add a bigger number value, then the height and width will be bigger than the previous.
The button height and width will be smaller if we add a lower number value. Thus we can create and customize a blogger button easily.
Read Now: What Is YouTube Studio and Why Does It Matter So Much
