We were introduced to the standard header by blogger.com.Now we have grown to design our own header-presentation-style. For instance ,.. I have used a 3 colum header to accomodate a common backgound pic – a clock – brog title & description – and Best viewed text
Some might like to have their custom banner in the header along with the key words scrolling around so as to compliment the design and subject of the blog.This post is for such enthusiastic minds
The code for scrolling the image from left in an infinite loop is
<marquee direction=”left”>
<img src=”URL of the picture“/>
</marquee>
The code to show the text in the manner shown below is
<marquee bgcolor=”turquoise” behavior=”alternate” width=”82%”>
Any text you wish to display
</marquee>
So let’s start by understanding the MARQUEE tagJust like any other HTML tag.. marquee also has the start & the end tags <marquee . . > and the </marquee>
The <marquee…> has the following properties
| WIDTH | Any numeric value as how wide you want it (100 – 250 etc)..even percentage (%) 50% – 20% will be accepted |
| HEIGHT | Any numeric value as how tall you want it (100 – 250 etc)..even percentage (%) 50% – 20% will be accepted |
| DIRECTION | Right – Left – Up – Down |
| BEHAVIOUR | Slide – Alternate – Scroll |
| SCROLLDELAY | This delays the speed of the marquee by milliseconds ( 1000 – 5000 etc)…However its advisable to avoid this and use the scroll amount instead |
| SCROLLAMOUNT | Numeric vaules starting from slowest 1-2-3-4… 1 is the slowest .. increasing numbers means increasing speed |
| LOOP | If you donot mention this in the tag.. then the content is displayed in an infinite loop… But if you say Loop= 2 then the content disappers from view after 2 loops…again not advisable to use |
| BGCOLOR | Any color red – blue- green – turquoise – or #CCFFCC (hexadecimal color code preceeded with # ) |
Now take a closer look at the code I had given for the scrolling image and scrolling text…understand the combination of attributes I have used to arrive at the displayed result
So before you start off with the marque… ascertain yourself..on waht atttributes you will be using and what values would compliment the design and the content of your blog
Anything that is placed between the <marquee> _________ </marquee> tag will behave as per your wish if you would give the values correctly ..it could be a text – image – marquee inside / outside of a table – just unleash your imagination.. You will never know if somethig works or not.. unless you actually try it out…Best of luck..Drop in when you face a roadblock..I shall be glad to help
UPDATE : REMOVING THE HEADER WIDGET
I totally overlooked this mistake in my post,,, Thanks to Kulats and Daryl
I am sooooo sorrry..
In the Template EDit html page ( The Expand widget box is NOT CHECKED)
locate <div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’3colum tester..dont use for other templates (Header)’ type=’Header’/>
</b:section>
</div>
Delete the lines in Red — this will give a warning that your header will be lost forever.. dont worry just confirm – Save
– Go to Template – Page elements – Add new elements
If at any point of time you wish to have your header back in place… just choose PAGE HEADER from the add elements list
Deepa,
Funny but I was just trying to put this code into my blog header a few days ago, exactly as you are showing but couldn’t get it to work. I tried to add it into the header section on the page elements page. I do not understand where you are supposed to insert this code. Please advise.
thanks,
Daryl
Welcome Daryl 🙂
I saw your blog http://darkodorko.blogspot.com/
Since you have not specified what kind of widget you are usning in the header…( if its the blogger’s header widget , or , HTML widget with picture & text )…I asssume you want to apply the marquee funtion to the text “I AM A CAMERA”
IF its blogger’s header widget..Then you may have to remove the header elemt and add a HTML element .. in which you add the
Title :- Darko is Darko
Content:- I AM A CAMERA
< img src=” URL of the pic” />
If this stisfies your look of the header then all you need to do is enclose the I AM A CAMERA (textpart) within the <marquee> tags.. as shown below
< MARQUEE behaviour=”alternate” & gt;
I AM A CAMERA
</marquee>
Hope this helps
Thanks Deepa for this lead, but I’m still confused by some terms you are using. And actually, it is a different blog than the http://darkodorko.blogspot.com/ blog I am trying to work with first. It is the http://dylanbarrett.blogspot.com one, and it is the text “He’s 200 years old! Hoi! Hoi!” that I would like to scroll.
How do I know if it is a Header Widget or a HTML Widget I am using…?
daryl
Hi Daryl..
How do I know if it is a Header Widget or a HTML Widget I am using…?
When you clik on thE edit of the Header element..If you see (” CONFIGURE HEADER”)… Then its a header widget..
If you see (” CONFIGURE HTML/ JAVASCRIPT”)… Then its a html widget..
instructions to add marquee to the text stand same as the above comment
IF its blogger’s header widget..Then you may have to remove the header elemt and add a HTML element .. in which you add the
Title :- Daryl Ebneezra Kadabra
Content:- HE IS 200 YEARS OLD
< src=” URL of the pic” />
If this stisfies your look of the header then all you need to do is enclose the HE IS 200 YREARS OLD
(txtpart) within the <marquee> tags.. as shown below
< MARQUEE behaviour=”alternate” >
HE IS 200 YEARS OLD
</marquee>
Hi Deepa,
How to remove my blog header and replace it with marquee funtion that carry banner as well as text ?
http://kirawangsaku.blogspot.com
Welcome Kulats
You would have to delete the header widget by TEMPLATE-PAGELEMENTS – EDIT (of header) – REMOVE PAGE ELEMENT
After deleting.. you would have to add a HTML/Javascript widget where you may choose to give the title ( TITLE appears stationary)
CONTENT:-
< MARQUEE behaviour=”alternate” />
< img src=”URL of the picture” / >
WHAT-EVER-TEXT- YOU-PREFER
< MARQUEE/>
nice idea,i shold try marqueeing one of my blog’s headers.
Hello again Deepa,
Ok, It is a “Header Widget” inside my blog. I do not see how to remove it though. Do I have to edit the Template HTML to remove the “Header Widget”? If so, how (and where) do I replace it with the code for a “HTML Widget”? In the same location within the template code?
Thanks again!
daryl
Vishesh..
Yest.. give it a try
Hope you like it
Daryl..
So now that you have identified your header-widget.. you can remove it by cliking on EDIT (of the header widget) and click REMOVE PAGE ELEMENT
Once you have removed trhe header.. you may add an HTML widget in its place using the ADD NEW ELEMENT seen the header area
IF you dont see the ADD NEW ELEMENT in the header area.. i recommend you refer this page
PHASE – 1 ALL THE STEPS
PHASE – 2 ONLY UPTO STEP 4
Hi Deepa,
Its kulats again.I tried to delete the header following this step:
TEMPLATE-PAGELEMENTS – EDIT (of header) – but theREMOVE PAGE ELEMENT is not there.
Is it the blog title cant be remove ?
Sorry kulats..
Update posted.. pls see the post
Sorry 🙁
Hi Deepa,
Thanks for your updates.
I have a question here:
If I want to link the banner to my personal link, how should I do ?
ie:
I want to add in my link as the URL picture:
To use an Image as a link .. the code is
<a href=”URL you wnat to link / >
< img src=”URL of the picture/>
</a>
Gracias Gracias!!!!
Will try everything you said!!!!
hi…sorry for the off-topic question….what is the best size for the header in the 3 column template ..i tried …but it eaither deterioated the picture or it was too large…
thanks…
Prashanth..
The optimal width for a pic to be used for header in 1024*768 resolution would be 985pixels
Best of luck ..get twaeking you template..dont forget to save a backup copy before each new tweak
Hi Deepa! I’m embarrassed to have addressed you as “bro” in my reply to your reply on the Blogger forum (I have quite a few male friends named Deepak or Deepa!) But I now know better!!! Thanks for your helping us with all the intricacies of customizing Blogger templates. The only operation I haven’t figured out is how to remove the header wrapper on top of which my personalized banner rests.
If it’s not too complicated, kindly offer one of your helpful tips, thanks 🙂 This is my blog.
Hi Antares..
This goofup seems to be happeing with me most of the time..i have come to enjoy that now 🙂
///////////////////////////////////
how to remove the header wrapper on top of which my personalized banner rests
///////////////////////////////
By this.. if you are refering to the darkblue patch around u r header image.,.then you can remove that
in your tempalte
#header-wrapper {
background:#223344 url(“http://www.blogblog.com/rounders3/corners_cap_top.gif”) < ----DELETE THIS
}
#header {
background:url(“http://www.blogblog.com/rounders3/corners_cap_bot.gif”) no-repeat left bottom; < ----DELETE THIS
}
hope this helps
Deepa
A thousand thanks, Deepa 🙂 I’ll copy & paste your instructions and attempt it after a good night’s sleep! Very dangerous to perform surgical operations on codes when one is drowsy… Bless you, my dear Html Angel! Such a warmhearted and helpful one….
Hi Deepa,
Really need your expertise here.
I want to show a few banner on my blog header.What I want is the banner will appear for a few second and will continue with the next banner.
How to do this ??
http://www.kirawangsaku.blogspot.com
Welocome Antres..
Thank you for the appreciation.. it motivates me alot
Kulats
Please see my recent post in this regard
how do i change the marquee text color and size ?
please and thank you
Hi Anon.
All you need to do is add
< font color=”yellow” size=”4″ > before the marquee tag..
Hope this helps
(how do i change the marquee text color and size ?
please and thank you )
thank you deepa
you doing wonderful job
< font color="yellow" size="4" > before the marquee
i got this error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.
thank you
Hi ellaalan
This is the syntax..
< font color=”yellow” size=”2″>
< marquee tag.. its attributes >
</marquee>
</font>
did u close both marquee and font tag
yes i did
still the same error
leave it
i dont want to bother you
thank you
Thats strange,
I tried and it worked for me.
insted of the template try in HTML widget and see..
You can also move this widget below the header … ie if u need it there…