Customizable Related Posts Widget for Blogger

We've published some tutorials on how to add Blogger related posting puzzles with summaries or headings, which can be combined with powerful options in an all-in-one puzzle. This new customizable related posting blogger for bloggers combines all the features we've seen before and more. Show only thumbnails (square or round), farm dates, tracks, titles / thumbnails.

Let's now look at what this Blogger related puzzle has to offer.

Related posts widget feature

• 9 stylish styles to suit your needs
• Show title, cut and thumbnail
• View simple related posts by title / summary / posting date
• Choose whether you want to show the elements of the nail or not
• Possibility to control the size of thumbnails.
• Option to select square or round thumbnails
• Show post cut
• Check the length of the summary / title
• Determine the number of related posts displayed.

Requirements

1. The Related Posts Wizard recognizes thumbnails of posts uploaded by Blogger itself (or Picasa Web Albums); Photobucket, Flickr, or other Blogger hosts do not support other images.
2. This puzzle is compatible with the standard desktop blog templates, with the exception of dynamic views that do not accept customization.
3. The script does not work on personal blogs, so your blog should be open to the public.

Add a customizable puzzle for related posts in Blogger

Log in to your blog control screen , go to "Template" and open the template editor by clicking the "Edit HTML" button below the "Blog Live" preview.

Next, we will use the pattern search function, make sure you follow these instructions carefully:

1. Place the cursor on the model number.
Click once.
3. Press CTRL and F (PC) or Command and F (Mac) simultaneously.

The search box opens in the top right corner of the template editor.

Old in the search box and then press ENTER. It will get you there Name your model and mark it in yellow.

Select and copy all CSS styles and post more check in

So we need to add the scripture: look for the following line:

Once found, click the arrow next to it, but click one step above to expand the code and scroll down until you see it. - You should see the "PostQuickEdit" line just below this account.

See the screenshots for more help.

directly above Mark, add the following font

Related Articles How can I customize the blog for bloggers?

To change the text of related posts that appear above the puzzle, change the text to red:

Related Topic "

Related Articles

",

Change the value of "4" in this row to change the number of posts displayed

Related Articles: 4 ,

Note: You may need to change the percentages in the CSS styles above to place the text in the correct container. Just follow the values ​​in red and play with it until you get the best results.

To change the style of a related placement, set the value to "4" from:

Related metaphor: 4 ,

Available styles for related posts

1. A simple related mail attachment that only displays mail titles
2. Show job title and clips
3. View posting thumbnails, titles and tracks
4. Show thumbnails, title and publication date (displayed by default)
5. See thumbnails and titles of related posts
6. Place titles in front of the nails instead of headings under the thumbnail
7. Show only thumbnails
8. A small thumbnail with a title on the right and a date below.
9. Small thumbnails with job and section titles on the right

Customize the size and style of the accompanying placement thumbnail

By default, thumbnails automatically adjust to 300 pixels wide and 200 pixels high. If you want to change the width and height of your nails, change the values ​​of "300" and "200" from the following:

Thumbnail size "w 300 -h 200 -p-nu",
defaultThumb ፡ se "https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w 300 -h 200thum -c / no.

Note that 'w' stands for width, 'h' stands for height. Change the "h" (height) value to square nails and match the "w" (width) value. High cost brings high quality images.

If you want your nails to have rounded corners, change them from false to true.

Round finger: lie ,

Customize related topics and tracks

To shorten the post title, it automatically changes with the number of characters displayed:

Title length: " engine ",

Change the value to "45" to shorten the tracks or add more characters.

Neck length: 45 ,

If you want to center the text (title and table of contents), change false to true

middle text

When visitors click on a related post, it changes from fake to true to open the links in a new tab.

openNewTab ፡ False False

When you've completed the setup, click the 'Save Template' button and you'll see the related posts live on your Blogger blog.

Last words

not anymore! Add special features to your blog puzzle with new customizable related posts with the Blogger puzzle. However, all of these styles look slightly different, so take your time and choose the one you like best.