Putting Custom Text, links, video or other content in Blog and/or Extended Network

There is no direct access to the table cells, which contain the extended network and blogs, to modify or add text.

There are 3 strategies which can be used to place custom content in these areas

1) Table Cell Background Image
via style, we can change attributes of the table.
One attribute we can change is the background.
Changing the background to an image, combined with turning the default content invisible we can get a custom image into the area.
This is only an image, This technique (alone) does NOT work if you want to turn the picture into a link, or put in content other than a picture.

You can use this technique combined with a clear gif, to turn the area into a link.
You can turn text into an image if you want text in this area.

Code To Put Picture in Extended Network

Turn Extended Network Into Link


2) Absolute Placement
Another method I have used (and seen other's use), is absolute positioning.
I recommend this ONLY IF
1) YOU ARE KEEPING YOUR BLOGS.
AND
[ 2) You have multiple links in the picture, and/or they are small enough in area, that the exactness of the link area is more important than the exactness of the picture (or table) placement.
OR
3) You are trying to place other content, such as a video or slide show.
]

Why?
Because getting horizontal (left/right) positioning correct, so it is correct across multiple platforms (browser, resolution, dpi) is difficult (maybe not possible).
So there will be some variance. Even vertical alignment is difficult to get perfect. But since we are measuring from the top of the page, and placing the item very close to the top of the page, it works well enough.

The below code will place a video in place of the extended network:
[If you are not keeping your blogs, and you care about left/right alignment, this may not be the best solution.]

<style>
.extendedNetwork {visibility:hidden; height:310px !important}
</style>
<div class="myDclassExtNet"; style="position:absolute; top:190px; left:50%; margin-left:-40px;">
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/pn2aGpje5QA" width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/pn2aGpje5QA">
</object>
</div>

(myspace will change the code, but that is fine, I just start with the above and let them add in what they want.
I used youtube in the above example.
For a guide on how to create the correct code, for various video sites, go here: Video Posting Guide
Here are some screen shots of how this came out. I am showing shots from multiple platforms, to show the difference.

Notice the difference.
In this case I did use the extreme of the differences I expect to see. One picture is IE and 120dpi The other is FF and 96dpi (I am finding the dpi matters more than actual resolution, although there is resolution variance as well).

There are some things I can do to decrease the differences.
I can decrease the font of the top menu, so that it does not overflow to a 2nd line.
I can increase the width of the top menu, to prevent overflow to a 2nd line.

However, if I really want accuracy, in alignment, I choose a strategy which is far more complex, and far more accurate:
[note: The next strategy, only works IF you have either removed the blogs or replaced them with something of static px size].

3) Remove the Blogs and/or Extended network, Move up Blurbs, place your desired text at the top of your Blurbs.
This method is actually my favorite. It has more flexibility for creating links out of the content.
To remove blogs and extended network, and move blurbs up, see this:
Move blurbs up to replace area taken by blogs and extended network
The above strategy gives the flexibility to place a variety of content in this area, including flash, links, text (which has not been made into an image) and more.