Now let’s come across what this related posts blogger widget has to offer.
Related Posts Widget Features:
- 9 attractive styles to tally your needs
- Show Title , excerpt & thumbnails
- Display uncomplicated related posts amongst titles / summaries / post date
- Choose whether to display the post thumbnails or not
- Ability to command the thumbnail ikon size
- Option to select foursquare or circular thumbnails
- Show post text excerpts
- Control the length of the post excerpt / title
- Determine the issue of related posts to display
- The related posts widget recognizes post thumbnails uploaded through Blogger itself (or Picasa Web Albums) , other images from Photobucket , Flickr , or other non-Blogger hosts volition non live supported.
- This widget is compatible amongst the touchstone desktop Blogger templates except Dynamic Views , which does non convey customization.
- The script does non piece of work on soul blogs , hence your weblog / site must live opened upward to the populace inward guild to show.
Adding Customizable Related Posts Widget inward Blogger
Log into your Blogger dashboard , become to ‘Template’ as well as opened upward template editor past times clicking the ‘Edit HTML’ push clit below ‘Live On Blog’ preview.
Next , we’re going to occupation the template search characteristic , live certain to follow these directions exactly:
1. Place your cursor on the template code.
2. Click once.
3. Press CTRL as well as F at the same fourth dimension (PC) or Command as well as F (Mac).
The search box volition opened upward inward the upper correct corner of the template editor.
Type inward the search box , as well as hence press ENTER. This volition convey y’all to the tag inward your template as well as highlight it inward yellow.
Select as well as re-create the entire CSS fashion below as well as glue it straight ABOVE the tag:
Next , nosotros postulate to add together the script – search for the next line:
Once y’all institute it , click the pocket-sized arrow non beside it but amongst 1 degree to a higher identify to expand code as well as scroll downward until y’all come across – correct below this tag , y’all should come across the business including the “postQuickEdit” id.
See the screenshot for to a greater extent than help:
Just ABOVE the tag , add together the next script:
How to Customize the Related Posts Widget for Blogger?
To modify the ‘Related Posts’ text that appears to a higher identify the widget , modify the text inward red:
relatedHeading: "<h4><span>Related Posts</span></h4>" ,
To modify the issue of posts to display , modify the ‘4’ value from this line:
relatedPosts: 4 ,
Note: y’all may postulate to modify the percentages inward the CSS styles to a higher identify inward guild to brand posts fit the related container. Just follow the values inward reddish as well as play amongst them until y’all larn the best results.
To modify the fashion of the related posts widget , modify the ‘4’ value from:
relatedStyle: 4 ,
Available Related Posts Styles
- simple related posts widget that volition demo post titles only
- display post titles as well as snippets
- display post thumbnails , titles as well as snippets
- display related posts thumbnails , titles as well as post engagement (shows past times default)
- display related posts thumbnails as well as titles
- post titles inward front end of thumbnails , instead of having them below the thumbnail
- display thumbnails only
- small thumbnail amongst titles on the correct as well as engagement below
- small thumbnails amongst post titles as well as excerpts on the right
Customizing the Related Post Thumbnail Size & Style
By default , thumbnails are resized as well as cropped automatically to live 300px broad past times 200px tall. If y’all desire to modify the width as well as transcend of the thumbnails , modify the ‘300’ as well as ‘200’ values from:
thumbnailSize: "w300-h200-p-nu" ,
defaultThumb: "https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png" ,
Note: ‘w’ comes from width , ‘h’ comes from height. To brand the thumbnails foursquare , modify the ‘h’ (height) value as well as larn inward equal amongst ‘w’ (width) value. A higher value volition lawsuit inward to a greater extent than high-res images.
If y’all desire thumbnails induce got rounded corners , modify ‘false’ amongst ‘true’:
Customizing Related Titles & Excerpts
To shorten the post championship , modify auto amongst the issue of characters to show:
titleLength: "auto" ,
To trim down or add together to a greater extent than characters to the snippets , modify the “45” value:
snippetLength: 45 ,
If y’all desire to view text (title as well as summary) , modify ‘false’ to ‘true’:
To opened upward links inward a novel tab when visitors click on a related post , modify “false” to “true”:
Once you’re done amongst the settings , click the ‘Save Template’ push clit as well as at 1 time y’all tin come across the related posts widget alive on your Blogger blog.
That’s it! With the novel customizable Related Posts widget for Blogger y’all volition live able to add together unique features to the related content department of your blog. However , all of these styles hold off as well as piece of work slightly dissimilar , hence convey your fourth dimension , as well as pick your favorite.