Add Simple Slideshow of Featuted Posts with Description in Blogger Blog

Featured Posts are very important element of a site to give idea to the visitors about most important posts in the blog. Users can easily track the most important post among all the posts which they want. There are many clarified gadgets to show featured posts to attract the visitors. Slideshow of featured posts is one of them.

Generally slideshow of images is made by javascript which looks good but it may lengthen the time of loading your page which will discourage the visitors to stay on the page. So if you want to add slideshow of featured posts I suggest to add simple HTML slideshow of featured posts in blogger blog.

Now take a look what you are going to do:

Samsung Vs HTC One || Battle between technology giants

Samsung Galaxy S4 | Full Featured Smartphone

Price List of Tablet PC's in Bangladesh

Now I am going to write about how make a simple image slideshow of featured post with their description.


How to Add Simple Slideshow of Featuted Posts with Description in Blogger Blog:

1.  Go to the Dashboard of blogger.
2.  Click on the Layout and Click on 'Add a gadget'.
3.  Select the 'HTML/Javascript' gadget.
4.  Now paste the code given below.

<div id='tc-slide'>
<marquee scrollamount="9" scrolldelay="75" width="200" height="200" bgcolor="#fff" direction="up" onmouseover="stop();" onmouseout="start();" >
<a href="LINK1" target="_blank"><img height="150" src="Image Link1" width="200" alt=""></a> <h4 align='center'><a href='Title Link1' target='_blank'>Title text 1</a></h4> <p align='center'>Your post description goes here...</p>
<a href="LINK2" target="_blank"><img height="150" src="Image Link2" width="200" alt=""></a>  <h4 align='center'><a href='Title Link2' target='_blank'>Title text 2</a></h4> <p align='center'>Your post description goes here...</p>
<a href="LINK3" target="_blank"><img height="150" src="Image Link3" width="200" alt=""></a>  <h4 align='center'><a href='Title Link3' target='_blank'>Title text 3</a></h4> <p align='center'>Your post description goes here...</p>
<a href="LINK4" target="_blank"><img height="150" src="Image Link4" width="200" alt=""></a>  <h4 align='center'><a href='Title Link4' target='_blank'>Title text 4</a></h4> <p align='center'>Your post description goes here...</p>
<a href="LINK5" target="_blank"><img height="150" src="Image Link5" width="200" alt=""></a> <h4 align='center'><a href='Title Link5' target='_blank'>Title text 5</a></h4> <p align='center'>Your post description goes here...</p>
</marquee>
</div>

Note:  Change color marked text as your own like Red for link which redirects from image, Blue for image link, Pink for your Tile Link and the Green color for your Title Text.

5.  Now Save the Gadget and check it out.