Manual Related Articles HTML code or Widget allows site owners to manually select and display related articles or posts alongside the main content. This feature is beneficial for enhancing user engagement, improving SEO, and providing readers with a curated selection of content that complements the main article.
In this article, I’m going to give related post html code and css code widgets that works with all HTML websites and the one that works with UI template only. Let’s dive in.
Related Post for HTML
Below is an example of HTML code to create a simple “Manual Related Post” section. This code includes three related posts as examples, each with a title, image, and brief description. You can modify the structure and styling as needed to fit your website’s design.
The CSS Style:
<style>
/* Basic styling for the Related Posts section */
.related-posts {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.related-posts h2 {
font-size: 24px;
margin-bottom: 15px;
color: #333;
}
.post-item {
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
}
.post-item img {
width: 80px;
height: 80px;
border-radius: 4px;
margin-right: 15px;
object-fit: cover;
}
.post-item a {
text-decoration: none;
color: #0073e6;
}
.post-item a:hover {
text-decoration: underline;
}
.post-content h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.post-content p {
margin: 5px 0 0;
font-size: 14px;
color: #666;
}
</style>The HTML Script
<div class="related-posts"> <h2>Related Posts</h2> <!-- Related Post 1 --> <div class="post-item"> <img src="post1-thumbnail.jpg" alt="Post 1 Thumbnail"> <div class="post-content"> <h3><a href="post1-link.html">Title of Related Post 1</a></h3> <p>A brief description of the related post to give readers an idea of what it's about.</p> </div> </div> <!-- Related Post 2 --> <div class="post-item"> <img src="post2-thumbnail.jpg" alt="Post 2 Thumbnail"> <div class="post-content"> <h3><a href="post2-link.html">Title of Related Post 2</a></h3> <p>A short summary that entices readers to click through and read more.</p> </div> </div> <!-- Related Post 3 --> <div class="post-item"> <img src="post3-thumbnail.jpg" alt="Post 3 Thumbnail"> <div class="post-content"> <h3><a href="post3-link.html">Title of Related Post 3</a></h3> <p>Another snippet of text for context about this related article.</p> </div> </div> </div>Example:
Title of Related Post 1Title of Related Post 2Explanation of the CSS and HTML Code
- HTML Structure: Each related post is wrapped in a
<div class="post-item">block containing an image, a title (wrapped in an anchor tag for linking), and a description. - CSS Styling: The basic CSS styles that are added for layout and appearance are;
.related-postsdefines the main container for the section,.post-itemstyles each individual related post with a border, padding, and flex layout for horizontal alignment, and Hover effects on links improve the user experience by indicating interactivity. - Customization: Replace
post1-thumbnail.jpg,post1-link.html, and the other placeholder links with actual images and URLs. Also, you can customize the text in each<h3>and<p>to reflect your content.
Related Post for UI
This HTML only works for UI blogger template. The CSS style has been added to the template by default, so you don't need to customize any CSS
The HTML Code
<div class='pRelate'> <!--[ Related title ]--> <b>You may want to read this post :</b> <ul> <li><a href='post_link'>post_title</a></li> <li><a href='post_link'>post_title</a></li> <li><a href='post_link'>post_title</a></li> </ul></div>See examples below:
In conclusion, these html and css codes provide a basic framework that you can expand upon or style further based on your website’s needs. Let me know in the commemt section if you’d like additional features, like more detailed styling or JavaScript to add interactivity in the first manual related post
