.png)
Blogger itself contain many widgets related to "posts" like "Popular Posts" but unfortunately there is absence of a Recent Posts widget. If still you want such a widget, this tutorial will guide you to create your own.
This Recent Post widget has two variations, you can have it with both the title and snippets of post, or with post titles only. To make it fit your own design, you will need to modify the CSS style in order to make the following changes:-
- Display post titles only
- Change the number of posts
- Change the number of characters of the post snippet/excerpt
- Change the link or background color, the size and color of text/links.
- Show/hide the post dates
However there is the absence of thumbnails of the posts. If you want such thumbnails as well, see our next tutorial, Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot
Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript
Step 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:
Option 1: Recent Posts Widget with Snippets:
Option 2: Recent Posts Widget Showing Post Titles Only:
Step 3: Customization:
- Change 5 (option 1 in line # 5) and 10 (option 2 in line # 3) with the number of posts that you want to display.
- Change false to true in line # 3 if you want the posts dates to appear
- Change 100 (option 1 in line # 5) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in line # 11 in option 1 and in line # 7 in option 2 (links) and line # 11 and in line # 7 in option 2 (font-size) respectively
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the http://blog-address.com text with your URL
Step 4. Save your widget. And that's it! Enjoy!
This Recent Post widget has two variations, you can have it with both the title and snippets of post, or with post titles only. To make it fit your own design, you will need to modify the CSS style in order to make the following changes:-
- Display post titles only
- Change the number of posts
- Change the number of characters of the post snippet/excerpt
- Change the link or background color, the size and color of text/links.
- Show/hide the post dates
However there is the absence of thumbnails of the posts. If you want such thumbnails as well, see our next tutorial, Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot
Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript
Option 1: Recent Posts Widget with Snippets:
Option 2: Recent Posts Widget Showing Post Titles Only:
Step 3: Customization:
- Change 5 (option 1 in line # 5) and 10 (option 2 in line # 3) with the number of posts that you want to display.
- Change false to true in line # 3 if you want the posts dates to appear
- Change 100 (option 1 in line # 5) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in line # 11 in option 1 and in line # 7 in option 2 (links) and line # 11 and in line # 7 in option 2 (font-size) respectively
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the http://blog-address.com text with your URL
Step 4. Save your widget. And that's it! Enjoy!
0 comments