Table of Contents
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.
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”.
2. Click on “HTML mode” in the top of your left side.
3. Copy the below “codes” and paste it into the new post.
4. Now click “publish” & review your post and you’re done!
Add Custom Stylish Link Button to Blogger Post
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.
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.