Saturday, May 29, 2010

Testing marquee with scrolling pictures



After some initial failed testing, finally succeeded to incorporate horizontal scrolling pictures at Testing Blogger xml templates.

The script used to display those horizontal scrolling graphics is as follows:

<iframe src=" http://site.personnel.free.fr/scroller.htm" height="158" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

To do this, it is advisable to first backup whatever page elements (gadgets) that can be backed up and also backup the template so that you can return if anything goes wrong.

Then go to LAYOUT > EDIT HTML to open the template editor and first tick
[ x ] expand widget templates
and search for (make this task easier by keyboard shortcut ctrl+F to find the code):

<div id='header-wrapper'>

and immediately below that line add the iFrame:

<iframe src=" http://site.personnel.free.fr/scroller.htm" height="158" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

and thus finally end up with

<div id='header-wrapper'>
<iframe src=" http://site.personnel.free.fr/scroller.htm" height="158" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>


Preview and if happy, save the template.

9 comments:

Chenna Kesava said...

can u tell how to do this.............

Peter @ Enviroman said...

Tried. Haven't succeeded yet. Later try again.

Peter @ Enviroman said...

OK Chenna Kesava, testing completed successfully and instruction added in this edited post. Happy?

Chenna Kesava said...

thank u.........

Anonymous said...

Genial fill someone in on and this post helped me alot in my college assignement. Thanks you as your information.

Anonymous said...

I would like to exchange links with your site testing-blogger-beta.blogspot.com
Is this possible?

Anonymous said...

Sorry for my bad english. Thank you so much for your good post. Your post helped me in my college assignment, If you can provide me more details please email me.

Ron said...

I am trying to add a border around my header but:

I'm unable to find
div id='header-wrapper'

In my html code i have
div id='header-inner'

What am I doing wrong??

Peter @ Enviroman said...

Different template uses different terms to identify various item so if you cannot find the exact term, look for something similar.