How to: Add Link Button to Blogger Posts using HTML Codes

Share:
If you provide downloadable resources or files to your blog posts, then adding a clickable link button will be a good practice to let your users easily download any files from your blog.

how to add link button to blogger post

In blogger, creating an anchor text or clickable link in your blog post is easy, but inserting a custom link button is difficult. To add a button to your blog post, you need put some HTML codes in the HTML editor mode of your blog post.

In this tutorial, I will show you how to add a link button to blogger posts in the next 5 minutes. So, let's get started.

Why do I add a link button to blogger post?

Adding a link button to your blog post can be a little tricky if you are new to blogging. A link button will help your visitors to easily download any file using a simple download button; all you need is the piece of HTML codes. Once you implement the codes, the download button will automatically appear in your blog post.

There are many benefits of using a button to your blog, below are some of them:
  • A button can help your visitors to easily download any files from your blog.
  • This button can be used for showing demo, preview, etc. on your blog.
  • It looks more professional than an anchor text.
  • This button will make your navigation easier & save time.

How to Add Link Button to your Blogger post

1. Login to your blogger dashboard and click on "New Post".

Add Link Button to your Blogger

2. Click on "HTML mode" in the top of your left side.

Add Link Button to your Blogger post

3. Copy the below "codes" and paste it into the new post.

insert Link Button to your Blogger post

4. Now click "publish" & review your post and you're done!

Add Custom Stylish Link Button to Blogger Post

Below is the list of 5 stylish link buttons HTML codes.

1. Clickable link button


<form>
<input type="button" value="Link button 1" onclick="window.location.href='your link goes here'" /></form>
2. Rounded corner button

<form>
<input onclick="window.location.href='your link goes here'" style="-moz-box-shadow: 6px 6px 5px #999; -webkit-box-shadow: 6px 6px 5px #999; background: #21bded;
 border-radius: 10px; border: 1px solid #999;
 box-shadow: 6px 6px 5px; color: black; cursor: pointer;
 font-size: 100%; font-weight: bold; padding: 10px; width: 150px;
" type="button" value="Link button 2" /></form>
3.Light blue hover button

<style>
input.MyButton {
width: 160px;
padding:15px;
cursor: pointer;
font-weight: bold;
font-size: 100%;
background: #2f8fc6;
color: #fff;
border: 1px solid #122e66;
border-radius: 10px;
-moz-box-shadow:: 6px 6px 5px #999;
-webkit-box-shadow:: 6px 6px 5px #999;
box-shadow:: 6px 6px 5px #999;
}
input.MyButton:hover {
color: #ffffff;
background: #244f8b;
border: 1px solid #fff;
}
</style>

<form>
<input class="MyButton" type="button" value="Link button 3" onclick="window.location.href='your link goes here'" />
</form>
4. Simple blue color button

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<style>
.w3-button {width:250px;}
</style>
</span></span><br />
<div class="w3-container">
<div style="text-align: center;">
<a class="w3-btn w3-blue" href="your link goes here" target="_blank">Link button 4</a></span></span></div></div>
Customization:
  • Replace the blue code with the text that you want people to see. Such as; download, demo, preview, etc.
  • Replace the yellow code with the actual URL that you want, peoples to visit.
Congratulation! You have successfully added a simple button to your blogger post.

Note: Above 5 button codes are created by Hyperlink Code and w3schools. If you need more information about HTML buttons, visit these two sites.

Conclusion
These clickable link buttons will help your audience to easily download any files from your blog in seconds. All you need to do is install above custom stylish buttons to your blog post and you are ready to go!

Getting error while adding codes to your blog post? Let me know in the comment box below.

No comments