Hottest Now: How to Write SEO Optimized Post, Get Affordable SEO and Web Development Services from Us

Please Like Us

Tuesday, December 24, 2013

Add Marquee Slideshow to Blog Sidebar



You know Slideshow is one of the popular widgets loved by most people. You can use a slider to show your popular posts, products or services. I shared 2 cool slideshow for blogger. Now I am going share a simple Marquee Slideshow to show your hot products or posts in Sidebar. I mean, the Marquee Slideshow better suites in sidebar. Here only simple marquee code is used. So, this is super fast loading and you can customize easily.

How to Add Sldeshow in Blog

Blogger: For Blogger Add the following Code in a HTML/JavaScript Gadget where you want to add the slider.
Wordpress: Wordpress users can also use this Sldeshow. For this, Go to Appearance >> Widgets >> Add a Text Widget in Sidebar >> Put the below code in text area >> Save. Done.
<div id='ot-slide'>
<marquee scrollamount="5" scrolldelay="10" width="300" height="200" bgcolor="#fff" direction="up" onmouseover="stop();" onmouseout="start();" >
<a href="Post Link" target="_blank">
<img height="150" src="Image-Link" width="300" 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="Post Link" target="_blank">
<img height="150" src="Image-Link" width="300" 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="Post Link" target="_blank">
<img height="150" src="Image-Link" width="300" 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>
</marquee>
</div>

Customization:

I kept slider width 300px and height 200px. You can change it as you like. Add post or product link where it says Post Link and image link where reads Image-Link. Change the scrollamount value, to fasten the speed of scrolling. Thank you. Please comment and share your views if you like the post.

Filed Under: ,

Get free daily email updates!

Follow us!

8 comments:

  1. I can not insert images...what am I doing wrong

    ReplyDelete
    Replies
    1. How are you trying to add a picture?
      First you upload an image online. then paste the image link where it reads Image-link. you can read the article How to upload/host image free

      Delete
  2. https://picasaweb.google.com/103393145121678591039/BadUncleSThailandreisen#5882235532177023938

    What am i doing wrong?

    ReplyDelete
  3. Replies
    1. Upload the picture as I showed in the article I mentioned in previous comment.

      Delete
  4. Great Post! Thank you for sharing your experiences and I look forward to reading more.Textile Help Line

    ReplyDelete
  5. Can I add gif images to this marquee? If yes, how?

    Celebrity Munch

    ReplyDelete

Support Us

If our tutorials helped you, please kindly show your love by adding our Badge bellow on your site.

Ping your blog, website, or RSS feed for Free
 

Need Services?

We provide professional SEO, Web Development, Website Customization and Content writing services.

Step by Step SEO

This is a step by step seo guide for new Bloggers. If you are new to SEO, this is for you.

All Blogging Tutorials

This is a table of content page covering all the blogging and SEO Tutorials.


Free counters!

Contact

If you have any query, send us a mail or you can call us:

Email: contact@onlinetutorials-bd.com
Phone: 880 1552 980981

Online Tutorials © 2013. All Rights Reserved | Template Style and Design by ABDUL AWAL