Customizable Related Posts Widget for Blogger

We've already posted some instructions on how to add a thumbnail linked post widget in Blogger with only abstract or title, which can be compiled into one all-in-one widget with powerful options. This new customizable related post widget for Blogger integrates all the features we've seen before and more, such as photo (square or round), post date, snippet, title/thumbnail view only.

Now let's see what this widget offers in relation to blogger posts.

Similar post widget features:

• 9 eye-catching styles to meet your needs
• Show title, fragment and thumbnail
• Show simple posts linked by post title/abstract/date
• Choose whether or not to show post thumbnails.
• Ability to control thumbnail size.
• Option to choose square or round thumbnails
• Show excerpts from post text
• Check the length of the snippet/post title
• Specify the number of related posts to display

Request:

1. The Related Posts widget recognizes post thumbnails uploaded from Blogger (or Picasa Web Albums); Photos from Photobucket, Flickr or other non-blogger hosts will not be accepted.
2. This widget is compatible with standard Blogger desktop templates, except for dynamic views, which don't allow for customization.
3. The script doesn't work on private blogs, so your blog/site must be open for public viewing.

Add a customizable linked post widget to Blogger

Log into your Blogger dashboard , go to Templates and open the template editor by clicking the Edit HTML button in the blog live preview.

Next, we will use the model search function, make sure you follow these instructions correctly:

1. Hover over the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.

write In the search box, then press ENTER It will get you Mark it in the template and mark it yellow.

Select and copy the entire CSS style below and paste directly above it Marker:

Next we need to add the script; Search for the following line:

Once you find it, click on the little arrow next to it, but go up one level to expand the code and scroll down until you see - Just below this tag, you will see the line containing the id "postQuickEdit".

See the screenshot for more help:

Just above tag, add the following script:

How to Customize Affiliate Posts Widget for Blogger?

To change the "Related Posts" text that appears above the widget, change the text to red:

Related titles: "

Similar posts

",

To change the number of posts to display, change the value of this row to "4":

Related posts: 4 ,

Note: You may need to change the percentage in the above CSS style to fit the posts to the respective container. Just follow the values ​​in red and play with them until you get the best result.

To change the widget style of the corresponding post, change its value to '4':

Similar styles: 4 ,

Similar post styles are available

1. Simple post related widget that will only display the post title
2. View the post title and snippet
3. View post thumbnails, titles, and snippets
4. Show related post image, post title and date (shown by default)
5. Show relevant images and post titles
6. Place the title before the thumbnail, not below the thumbnail
7. Show thumbnails only
8. Small miniature with title lower right and date
9. Small thumbnails of post and section titles on the right

Customize the size and style of the corresponding post thumbnail

By default, images are automatically resized and cropped to 300 pixels wide by 200 pixels high. If you want to change the width and height of the thumbnail, change the "300" and "200" values ​​from:

Thumbnail size: "w 300 -h 200 -p-nu",
defaultThumb: "https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w 300 -h 200 -hng"

Note: 'w' comes from width, 'h' comes from height. To square the thumbnails, change the "h" (height) value to equal the "w" (width) value. A higher value will produce more high resolution images.

If you want thumbnails to have rounded corners, replace 'false' with 'true':

Round thumbs: knit ,

Adjust the title and related snippet

To shorten the post title, change the number of characters to automatically display:

Title Length: " Car ",

To reduce blocks or add more characters, change the value to "45":

Fragment length: 45 ,

If you want to center the text (title and abstract), change 'false' to 'true':

Text in the center: False ,

To open links in a new tab when visitors click a linked post, change false to true:

Open new tab: false

Once you are done with the settings, click on the "Save Template" button and now you will see the corresponding post widget directly on your Blogger blog.

last word

This! With the new customizable Linked Posts Widget for Blogger, you'll be able to add unique features to relevant content sections of your blog. However, all of these styles look and work a little differently, so take your time and choose your favorite.