N/B: If you missed the tutorials please click link below to read them. Don’t forget to subscribe to our newsletter, it’s a sure way to catch up with the trends.
Related Read: Ten (10) Twitter For Business Tricks
Today, we are gonna learn how to add related posts widgets at the bottom of every blog post. This widget comes with Thumbnails and Summary features.
- Related Posts Widgets with Thumbnails & Summary
- How to Add CSS for the Widget in Blogger Template
- How to Add the Fragment
- Saving changes on Template
You are going to learn how to implement a Related Posts widget that comes along with Thumbnails and Posts Snippets, as well. Its gonna be a long tutorial; tighten up your seatbelt, buckle up and lets mean business here. Make sure you follow the steps below meticulously:
N/B: Please when copying the codes below, don’t copy and paste directly from our website, first copy the code from our site, paste it in a HTLM Editor, like Notepad or Notepad++, then copy it from there and paste into your template.
Step 1: From your Blogger Dashboard, go to Template and click on Edit HTML
Step 2: Tick the "Expand Widget Templates" checkbox:
Step 3. Findtag using keyboard shortcut (CTRL + F).
Paste the following code just above thetag.
- To change the number of posts that are being displayed, modify the value in red (4)
- To change the number of characters to be shown in posts summary, modify the value in green (75)
- To change the default pic for posts with no images, add your Image URL to replace the one marked in blue.
Step 4: With your keyboard. press (CTRL + F) to search for the following fragment:
Copy code below and search in your template.
Step 6: Now, we are going to add some styling to it using the following CSS code snipets.
1. Search for this tag:
2. Paste the below code just ABOVE it:
- Modify the values in yellow to adjust the width (120) and height (210) of the widget area
- Replace #linkcolor with the hex value of your color to change the color of post titles
- To change the size of thumbnails, modify the values marked in violet (82)
- To determine the border roundness, modify the values in red (100)
- To change the color of the post snippet, change #summarycolor with color hex value
Step 7: Save your Template
Yuppie! You are done, view your blog. You are gonna see the widget adoring the end of every post.
Got suggestions? Drop it in the COMMENT BOX!