News Update :
Home » , , , » Add Simple Slideshow of Featuted Posts with Description in Blogger Blog

Add Simple Slideshow of Featuted Posts with Description in Blogger Blog

Penulis : Arafat Hossain on Apr 22, 2013 | 12:58 PM

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:


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. 
Share this article :

+ comments + 17 comments

Anonymous
May 28, 2013

Thank you very much for sharing this informative information which I am searching for last 6 month. Very informative with full of article.

Avow Zone

June 05, 2013

Hello,
Thanks for the info. But please let me know how to reduce the speed of slide show.

Thanks
www.diggbloggers.com

June 05, 2013

You can reduce the speed by increasing the value of scrolldelay which is mentioned at the first line in the script.

Thank you for your query.

Anonymous
June 06, 2013

Is it possible to make it automatically upload newest post photo and title ?

June 27, 2013

Very nice slideshow. Thanks for sharing this blogger slideshow

June 28, 2013

I have applied your giving code for my blog. It is nicely working. Thanks for sharing good information in your blog. But we want more tricks from you. Buy More Instagram Followers

Anonymous
July 23, 2013

Thanks for the great post, I was looking for it. Your code is awesome and working wonderfully at my blog:
http://www.infocenter24x7.blogspot.com/

Thanks Again!

Anonymous
August 25, 2013

you are awsome

August 30, 2013

hey how we can move this images horizontally ??

August 31, 2013

you can change 'direction' attribute by mentioning 'right' or 'left'.
Thank you for being with us.

September 06, 2013

Hellor Arafat Mizan

Can I put your Slide Show code into Template Blogger Dynamic Views ??

October 18, 2013

Very nice and simple marquee slider. Simple to add slideshow to blogger

February 16, 2014

PrimeroTec - Web Designing Company in Tirunelveli >>>>> PrimeroTec - Web Designing Company in Tirunelveli
TN Results - Tn HSC Results 2014 >>>>> TN Results - Tn HSC Results 2014
Ziq - URL Shortener >>>>> Ziq - URL Shortener

August 18, 2014

add and bookmark your site link now : www.openadsus.com

November 03, 2014

Share or Sell your documents, designs, graphic, 3d models, artworks, photographs, etc., earn money, and get hired worldwide. Register via e-mail or your social media account here:http://www.ehuub.com/login/ by choosing category "GRAPHICS, DESIGN, AND MULTIMEDIA", thank you!

April 13, 2016

Mobilefairbd.com আপনাকে বাংলাদেশের সকল ব্রান্ডের স্মার্ট ফোন, ট্যাব এর আপডেট খবরা খবর পৌছে দেবে আপনার কাছে । সকল ব্রান্ডের নতুন ডিভাইস এর ফিচার ও দাম জানতে ঘুরে আসুন-

Mobile Fair

All Smartphones

All Latest Tabs

Discount Offer and News

Post a Comment

 
Privacy policy | Term of use | Widget | Advertise with Us | Site map
Copyright © 2011. :: TechnocareBD :: . All Rights Reserved.
Design Template by panjz-online | Support by creating website | Powered by Blogger