Now let's see what these related messages his blogger widget has to offer.
Next, we use the template search function, follow these instructions exactly:
1. Place the cursor on the template code.
2. Click once.
3. Press CTRL and F (PC) or Command and F (Mac) at the same time.
The search box will open in the upper-right corner of the template editor.
Type in the search box, and then press ENTER. This will take you to the tag in your template and mark it in yellow.
Select and copy the full CSS-style below and paste it directly TOP tag:
Next we have to add the script – look for the following line:
Once you've found it, click on the little arrow next to it but with a level above it to expand the code and scroll down until you see – exactly below this tag you should see the rule including the "postQuickEdit" id.
See the screenshot for more help:
Just ABOVE the tag add the following script:
How to customize the related messages Widget for Blogger?
If you text & # 39; Related messages & # 39; appearing above the widget, change the text to red:
relatedHeading: "& lt; h4 & gt; & span; Related posts & lt; / span & gt; & lt; / h4 & gt;"
To change the number of posts to show, change the & # 39; 4 & # 39; value of this rule:
Note: You may need to change the percentages in the CSS styles above to ensure that messages fit into the related container. Follow the values in red and play with them until you get the best results.
Change the value & # 39; 4 & # 39; from:
to change the style of the related widget with posts
Available related posts Styles
- simple related messages widget that will only show post titles
- display message titles and excerpts
- display messages, titles and fragments
- display related messages thumbnails, titles and post date (is shown by default)
- display-related messages thumbnails and titles
- place titles for miniatures, instead of keeping them under the miniature
- only shows thumbnails
- small miniature with titles right and date under
- small miniatures with post titles and excerpts
Modifying the corresponding post Thumbnail size and style
By default, thumbnails are adjusted and automatically cropped to 300px wide and 200px high. To change the width and height of the thumbnails, change the values & # 39; 300 & # 39; and & # 39; 200 & # 39; from:
thumbnailSize: "w 300 -h 200 -p-nu"
standardThumb: "https://4.bp.blogspot.com/ -BLiit18tHXA / V9gCeNNCXzI / AAAAAAAALt8 / SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB / w 300 -h 200 -c / non-thumb.png "
Note: & # 39; w & # 39; comes from the width, & # 39; h & # 39; comes from the height. To make the thumbnails square, change the value & # 39; h & # 39; (height) and make it equal to the & # 39; w & # 39; (width) value. A higher value results in more images with a high resolution.
If you want thumbnails to have rounded corners, change & # 39; false & # 39; in & # 39; true & # 39 ;:
Adjusting related titles and fragments
To shorten the message title, change car with the number of characters to show:
titleLength: " car "
To add more characters to the fragments, change the "45" value:
To center text (title and summary), change & # 39; false & # 39; in & # 39; true & # 39 ;:
To open links in a new tab when visitors click on a related post, change & # 39; false & # 39; in & # 39; true & # 39 ;:
open NewTab: false
When you are done with the settings, click the & # 39; Save template & # 39; and now you can view the related message widget live on your Blogger blog.
That is it! With the new customizable widget Related posts for Blogger, you can add unique features to the related content section of your blog. However, all these styles look and work differently, so take the time and choose your favorite.