Sidebar Categories Widget Code And How To Use It On Your Website

Widget Code

<h3 style="text-align: center; font-size: 14.5px; text-transform: uppercase;">Use This Category Widget On Your Blog...</h3>
<div class="textwidget">
<div class="sidebartable" style="border: 5px solid #f6f6f6; overflow: hidden; text-align: center;">

<div class="sidebartable-1" style="display: block; float: left; width: 50%; border-bottom: 5px solid #f6f6f6;">
<a class="block" style="background-color: white; border-radius: 3px; display: block; padding: 20px 10px;" href="http://www.your-link/"><img style="height: 72px; width: 72px;" src="https://imageforyourlink.com" alt="">
<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;">Category <br> Name</span></a> </div>

<div class="sidebartable-2" style="display: block; float: left; width: 50%; border-bottom: 5px solid #f6f6f6; border-left: 5px solid #f6f6f6;">
<a class="block" style="background-color: white; border-radius: 3px; display: block; padding: 20px 10px;" href="http://www.your-link/"><img style="height: 72px; width: 72px;" src="https://imageforyourlink.com" alt="">
<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;" >Category <br> Name</span></a></div>

<div class="sidebartable-3" style="display: block; float: left; width: 50%; ">
<a class="block" style="background-color: white; border-radius: 3px; display: block; padding: 20px 10px;" href="http://www.your-link/"><img style="height: 72px; width: 72px;" src="https://imageforyourlink.com" alt="">
<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;">Category <br>  Name</span></a></div>

<div class="sidebartable-4" style="display: block; float: left; width: 50%; border-left: 5px solid #f6f6f6;">
<a class="block" style="background-color: white; border-radius: 3px; display: block; padding: 20px 10px;" href="http://www.your-link/"><img style="height: 72px; width: 72px;" src="https://imageforyourlink.com" alt="">
<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;">Category <br>  Name</span></a></div> 

<div class="prowebdesignagency" style="background-color: #f6f6f6;"> <a style="font-size: 8px;" href="https://www.prowebdesign.agency/sidebar-categories-widget-code-and-how-to/">Get Your Own Sidebar Categories Widget</a></div>

</div></div>

———————————————-

Where to place the code:

 

Go To Appearance > Widgets > Custom HTML > Paste the text

 

Changes To Make:

 

1. The category images.

Use your own images, to change the category image, use icons of size 72px*72px

Replace image link of category 1 at <img style=”height: 72px; width: 72px;” src=”https://imageforyourlink.com” alt=””>.

You can find this link in this bit of code:


<div class="sidebartable-1" style="display: block; float: left; width: 50%; border-bottom: 5px solid #f6f6f6;">
<a class="block" style="background-color: white; border-radius: 3px; display: block; padding: 20px 10px;" href="http://www.your-link/"><img style="height: 72px; width: 72px;" src="https://imageforyourlink.com" alt="">
<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;">Category 
 Name</span></a>
</div>


Repeat for all four categories.

 

2. Category Names.

You can change your category name by replacing ” Category <br> Name” with your own category name, eg: replace “Category <br> name” with “Food <br> Recipes”.

The <br> is a line break, for the widget to look uniform, make sure all the categories are two words/or one word.

If all the categories are of one word, remove <br>.

You can find the category name here :

<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;">Category <br> Name</span>

You can find it in this bit of code:

<span class="sidebartable-link" style="display: block; font-family: 'helvetica', sans-serif; font-size: 10px; font-size: 1rem; font-style: italic; letter-spacing: -0.5px; line-height: 1.4; text-transform: lowercase; white-space: nowrap;">Category 
 Name</span>

Repeat for all four categories.

 

3. Category Link

To link to your category headline to your category page,

replace “www.your-link” with the link to your category page in href=”http://www.your-link/”.

For each category, you should replace “www.your-link” with the link to that particular category page.

You can find href=”http://www.your-link/” in this bit of code,

<a class="block" style="background-color: white; border-radius: 3px; display: block; padding: 20px 10px;" href="http://www.your-link/">

 

Repeat for all four categories.

 

4. Sidebar Widget Heading.

Replace “Use This Category Wiget On Your Blog…” in the first line of the code with a heading of your choice.