We have already posted a few tutorials about adding related messages widget with thumbnails in Blogger with summaries or titles only, which can be compiled into a single All-in-One Widget with powerful options. This new customizable related message widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, tracks, titles / thumbnails only.

Now let's see what these related messages his blogger widget has to offer.

 related messaging widget, blogger widget "border =" 0 "height =" 245 "src =" https://1.bp.blogspot.com/-klS- ZV7SIf0 / V9gOKOH_iwI / AAAAAAAALuk / DEUdh6GKbOY8o2y_PJY0enmUYa-LysK2ACLcB / s400 / related-posts-widget-for-blogger.png "title =" Customizable related messages Widget for Blogger "width =" 400 "/> </div>
<p> </p>
<h3> Related posts Widget functions: </h3>
<ul>
<li> 9 attractive styles to meet your needs </li>
<li> Show title, fragments and thumbnails </li>
<li> Show simple related messages with titles / summaries / publication date </li>
<li> Choose whether to display the post thumbnails or not </li>
<li> Ability to control the size of the thumbnail image </li>
<li> Option to choose square or round miniatures </li>
<li> Show post text excerpts </li>
<li> Determine the length of the excerpt / title of the post </li>
<li> Determine the number of related messages to be displayed </li>
</ul>
<h4> Requirements: </h4>
<ol>
<li> The related message widget recognizes mail thumbnails uploaded via Blogger itself (or Picasa Web Albums), other images from Photobucket, Flickr or other non-Blogger hosts are not supported. </li>
<li> This widget is compatible with the default Blogger templates except dynamic views, for which no customization is allowed. </li>
<li> The script does not work on private blogs, so your blog / site must be public to show. </li>
</ol>
<h2> Add to customizable related posts Widget in Blogger </h2>
<p>Log in to your <a href= Blogger dashboard go to & # 39; Template & # 39; and open the template editor by clicking the Edit & # 39; HTML & # 39; under the live preview & # 39; Live On Blog & # 39; to click.

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:

relatedPosts: 4

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
relatedStyle: 4

Available related posts Styles

  1. simple related messages widget that will only show post titles
  2. display message titles and excerpts
  3. display messages, titles and fragments
  4. display related messages thumbnails, titles and post date (is shown by default)
  5. display-related messages thumbnails and titles
  6. place titles for miniatures, instead of keeping them under the miniature
  7. only shows thumbnails
  8. small miniature with titles right and date under
  9. 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 ;:

roundThumbs: false

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:

snippetLength: 45

To center text (title and summary), change & # 39; false & # 39; in & # 39; true & # 39 ;:

centerText: false

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.

Last words

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.




 http://helplogger.blogspot.com/ "class =" icon-action "height =" 18 "src =" https://resources.blogblog.com/img/icon18_edit_allbkg.gif "width =" 18 " /> </a><br />
</span><br />
</span></p>
</div>
</pre>
</pre>
<div class=

Leave a Reply

Your email address will not be published. Required fields are marked *