How to make table of contents with thumbnails for certain categories or topics

Another interesting thing in the way how to make table of contents (blog contents) on blogger is by creating list of contents with selected categories.
By using this style you can display list of your blog posts in some certain preferred / selected categories.

On this article I am going to share with you steps how to make blog contents to be displayed in selected categories with thumbnails.

Feel free to check the following steps out if you want to give it a try:

1. Login to your blogger account.
2. Select Layout --> Add a Gadget (if you want to put list of contents on the sidebar or any area of your blog by using add HTML/JavaScript widget feature).    OR     Click Pages ---> New Page -- > switch html input mode by check tab HTML (if you want to put list of contents on a page).
3. Copy and paste the below codes:

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}
</style><script src="http://codecbd.googlecode.com/files/recent-post-label-thumbnail.js">
</script><script>
var numposts = 20;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src="http://mysimpleblognote.blogspot.com/feeds/posts/default/-/How%20To?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs">
</script></div>

Note:

• Replace my url http://mysimpleblognote.blogspot.com with yours.
• Replace How%20To with any category belong to your blog or category you select to display.

Save the widget or publish page. Voila! You have a table of contents with your selected categories now.

Other customization:

- Put image thumbnail on the left or the right side of the excerpt texts : see these below mentioned codes and change word LEFT or RIGHT as you wish.

img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}

- To Hide or display date, Hide or display more link, Hide or display momentum Hide or display summary text : Find these below code and make change as you want by switch the word TRUE to False or vice verse.

var numposts = 20;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;

Still want to explore the customization?? just see more details for other codes and make change according to your taste.

Have fun!