Today we will discuss how to set the link button list for WordPress website. These buttons are great tips to increase the views of your site. Especially if you have an education website and if you publish articles according to the class.
Then you can set the category link according to the class in these buttons so that the visitor can visit the article of his required class. The advantage of this is that there will be internal linking and you will be able to increase views on other articles.
Click on the demo button below to see what the style of this button list should look like. Then follow the steps below to set the buttons.
How to Create Link button List for WordPress?
If you want, you can put it in the place of your choice on the site. However, I would suggest setting the buttons before and after each article. However, it is more important to put a button at the end of the article, because the visitor scrolls down the article. And if the button is highlighted at the end, then you understand that the chances of clicking increase a lot.
- First, download the code by clicking the download button below.
- Then open the w3 school site and delete all the default code.
- Then copy my total code and go to the w3 school site and paste it and click on the run option. Then you will see a preview of the buttons.
Now here you need to customize first, place the codes when the customization is complete. Understand the codes well before customizing-
First, Customize Link button List for WordPress:-
- Here I have given a total of ten buttons, you can reduce or increase them if you want. If you want to increase, add more button codes. The button code is-
<a class="w3-btn w3-blue" href="#">Button</a>- And if you want to reduce the button, delete the button code like this.
- Set your custom text by replacing the Button text.
- Set your Link by replacing the #.
- Change the color name to change the button color, ex- blue.
- To change the heading, you need to change the text in the h3 tag. E.g.- January 2022 Model Activity Task.
- Once the customization is complete, click on the Run option once to see the preview.
- When the customization is complete, copy all the code contained in the body tag. Like-
<div class="w3-container w3-center">
<h3 align="center"><span style="background-color: lime;">January 2022 Model Activity Task</span></h3>
<div class="w3-bar">
<a class="w3-btn w3-teal" href="#">Link</a>
<a class="w3-btn w3-red" href="#">Link</a>
<a class="w3-btn w3-purple" href="#">Link</a>
<a class="w3-btn w3-blue" href="#">Link</a>
<a class="w3-btn w3-teal" href="#">Link</a>
<a class="w3-btn w3-teal" href="#">Link</a>
<a class="w3-btn w3-aqua" href="#">Link</a>
<a class="w3-btn w3-yellow" href="#">Link</a>
<a class="w3-btn w3-green" href="#">Link</a>
<a class="w3-btn w3-teal" href="#">Link</a>
</div>
</div>Second, Set Head Code:-
- Copy the following two lines from my code,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">- Click on Theme File Editor option under the Appearance section,
- Open header.php,
- Past the code after <head> tag.
- Save changes.
Third, Set the Body code:-
You can set the body code manually, that is, you can set it in each post. Also, if you want, you can place the code once and set it on all pages, posts, archives, etc. For this, you need the help of a plugin called ad inserter. The plugin that allows you to place AdSense code or place code after AdSense approval.
- First, install and activate the Ad Inserter plugin,
- After activated, click on the Ad Inserter option under the setting section,
- Select 15 number Block,
- Past the body code here and select Posts and Homepage,
- Choose Before post option from the insertion section,
- Then click on the 16 number Block and do the same setting as 15 number Block,
- But Choose the After Content option from Inserationsection,
- Finally, save settings.
- Now visit your site.
Conclusion
Don’t forget to comment on how you like the article. If there is any difficulty in understanding, please let us know in the comments. I will try to solve that problem properly. If you can understand the Bengali language, then the video below will help you a lot.
