Wednesday, June 4, 2014

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.

No comments: