Don't mess up your page with bad or difficult code trying to layer objects such as a search feature above/over your navigation menu or banner. Use a two column widget to do it instead... A Honey Bear Playhomes tip...

  • 3
  • Idea
  • Updated 7 years ago
Fun little tip... Put your javascript code (or images) into a two-column widget and place a negative number in the margin editors top box just enough to place your Google search box in the location on your menu bar that you like. Don't forget to put in a positive number in the bottom box to make all your content below stay where it was meant to.

NOTE: If you are placing an image or HTML widget over your banner ALWAYS follow these rules.

1) Drag a two-column widget onto your page at the very top and slide the center divider all the way to the left.

2) Drag a text widget into the right side of the two-column widget and clear out the default text. (This blank text widget will ensure that if after step 5 you happen to go beyond the sitebuilder editor boundaries that you can get your image or HTML widget back into view to edit the margin settings with a lower top value than before. SEE TUTORIAL BELOW)

3) Drag an additional two-column widget into the right side of the first two-column widget. (always under the blank text widget)

4 A)

Drag a picture widget into either the left or right side of the second two-column widget and select your overlay image from your file manager. (transparent PNGs work best).

Click the "Margin" tab on ONLY this widget and set accordingly for proper placement. Depending upon your site style you should always begin with a lower negative value and work your way up. Additionally, you should always have a positive value in the bottom box to ensure that the content of your site does not follow your layered object over your banner.

OR

4 B)

Drag an HTML widget into either the left or right side of the second two-column widget and paste the code for your Google search feature (or other).

Click the "Margin" tab on ONLY the second two-column widget of step 3 and set accordingly for proper placement. Depending upon your site style you should always begin with a lower negative value and work your way up. Additionally, you should always have a positive value in the bottom box to ensure that the content of your site does not follow your layered object over your banner.

That's it, now you can click "Preview" and see what it would look like in the published site. After playing around with it for a while I am sure that you will get the hang of it.

5) Do the exact identical steps from above (write down the margin settings for reference) for each page on your website.











.
.
.
.
If you have gone beyond the sitebuilder's boundaries and cannot see or access the top portion of the image or HTML widget for editing or placement do the following:

1) Don't panic...

2) Find the blank text widget in step 2 from above and click enter a few times inserting lines of blank text.

You will notice that your one disappeared widget top will come into view. When it does discontinue clicking enter.

3) Click "margin" and set a lower top negative value.

4) Delete the lines of blank text in the text widget and view preview to verify placement on the actual site.







This will ensure that your search box or image overlay remains locked into that one location and won't float around... No CSS what do you know. ;)

Happy site building
Ed

You can see many examples of overlays like the one you want here on my semi-updated site...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes

Posted 8 years ago

  • 3
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Updated thread with images and tutorial...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
The task of overlaying a video over an image was asked in another thread and it was relevant to this thread so I add it here too.

To place an SWF, Youtube or other video over an image follow these easy steps.

1) Drag an image widget onto your page where you would like it.

2) Drag a two-column widget onto your page directly under the image widget from step 1 and slide the center divider all the way to the left.

3) Drag a text widget into the right side of the two-column widget and clear out the default text. (This blank text widget will ensure that if after step 6 you happen to go beyond the sitebuilder editor boundaries (up top) that you can get your image or HTML widget back into view to edit the margin settings with a lower top value than before. SEE TUTORIAL ABOVE where "Don't panic" is step one)

4) Drag an additional two-column widget into the right side of the first two-column widget. (always under the blank text widget)

5) Drag an HTML widget into either the left or right side of the second two-column widget (depending on your video placement requirements) and paste the code for your movie.

6) Click the "Margin" tab on ONLY the second two-column widget of step 4 and set accordingly for proper placement. Depending upon your site style you should always begin with a lower negative value and work your way up. Use your video height value as a reference point. Additionally, you should always have a positive value in the bottom box to ensure that the content of your site after the video does not follow your layered video object over your image.













If you find my threads useful please share my website with your social network friends..
Photo of SilverX

SilverX

  • 492 Posts
  • 40 Reply Likes
Good point Ed,
but,
I disagree that search box placement has impact on SEO.
If you checked the source of a typical web page, you'll see that the placing, and adjusting are done in CSS, not in the template php file.
So I think bots are intelligent enough to skip these boxes.

If search boxes has imapact, all blogger sites should place top in "next blog" and "search" keywords, because all blogspot sites has the navbar.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, what do you use for your screen shots?

Thank you,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Okay, thanks Ed.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Just wanted to add a video for another topic but which relates to layering objects over the banner.

A video which shows some of the steps but for another tutorial.

I hope that the video clears some things up for you.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I just referred to this topic for one of my sites and it worked perfectly! Before I remembered this but I was just dragging over a column divider and then putting an HTML widget in, which wasn't working right. (All of the content was coming up with it) Thanks for the tip :)

Nathan