One of the most renowned celebrity, Maya, Japanese model, actress,and writer, recently added a image slider widget in her blog. This widget displayed many beautiful photos of her achievement as World Super Model 2010, with links to her individual posts. This widget showed images one by one scrolling from one side to other. You may add the same widget to your blog, preferably under the header and link it to specific posts. This will attract the visitors and force them to travel through more posts.
Want to see a demo? Click on the picture below
How to add continuous Scrolling Image widget
STEP A
Login to your blogger account – Layout – Page Element – Add Gadget – HTML / JavaScript
STEP B
Now copy the below given code and paste it in the ‘HTML / JavaScript’ box and save. Remember to change YOUR POST URL with the URL of the post which you want to link the scrolling image. Also change YOUR IMAGE URL with the URL of the image which you want to scroll and display. The direction of the scrolling is coded as left. This direction can be changed either to right, or down according to your choice. It is better that you place this widget under the header of your blog.
<!—continuous scroll codes by businessvartha.blogspot.com -->
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="8" onmouseover="this.stop();" onmouseout="this.start();" ><a href="YOUR POST URL" target="_blank"><img src="YOUR IMAGE URL"/></a></marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://businessvartha.blogspot.com/2010/08/add-continuous-scrolling-image-widget.html"/><span style="font-size: 60%">Get this Widget</span></a>
</p></!—continuous scroll codes end>
Other options to add in this widget:
In some templates, there is not much space under the header. In such cases it is ideal to give a box in which the image will scroll according to the direction you choose. But you must fix the size of the picture according to the box you are designing.
If you wish to add a box to include your scrolling image widget, then the below given code must be added just between the first and second line of the above given code.
<style type="text/css">
.html-marquee {height:120px;width:900px;background-color:000000;border-width:4;border-style:dotted;border-color:000000;}
</style>
Areas to edit:
The border color and border style can be changes in this part of the code, border-width:4;border-style:dotted;border-color:000000. The border-style can be changed from dotted to dashed or solid to get different style for the border. The height, width and color of the box, can be changed in this part of the code according to . height:120px;width:900px;background-color:000000.
Code to add continuous Scrolling Image widget in a box
<!—continuous scroll codes by businessvartha.blogspot.com --><style type="text/css">
.html-marquee {height:120px;width:900px;background-color:000000;border-width:4;border-style:dotted;border-color:000000;}
</style><marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="8" onmouseover="this.stop();" onmouseout="this.start();" ><a href="YOUR POST URL" target="_blank"><img src="YOUR IMAGE URL"/></a></marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://businessvartha.blogspot.com/2010/08/add-continuous-scrolling-image-widget.html"/><span style="font-size: 60%">Get this Widget</span></a>
</p></!—continuous scroll codes end>
If you have any doubt related to the installation or customization of this widget, please feel free to ask us.
Happy blogging………
More widgets to add
1 comment:
Excellent pieceѕ. Keеρ ωгіting ѕuch κind of informatіon on youг site.
I am rеally impressеd bу youг blog.
website design
Post a Comment