SEO Packages

Add A Sidebar To Your Myspace Layout Using DIV, It’s Simple

October 29, 2011EditorSocial WebsitesComments Off

How would you like to have a column on the left side of your
Myspace profile in which you could place anything you like? Even
better, what if this column was never covered when someone’s browser
window is smaller than the Myspace layout “grid”? Well the solution is
much simpler than you might think, and I am going to give it to you
right now. I’m not going in depth into the working of CSS or the
Myspace structure. There are a lot of great CSS tutorial sites (I am
building one also, see my bio box) out there to learn the deeper and
more complex aspects of modifying your Myspace layout and Myspace
background. Just type Myspace tutorials into Google. Here, I am just
going to give you the code and brief explanation of what it does.

First, just to make sure you understand what I am speaking of. Notice the grey box
in the upper left corner (I left it plain so it would stand out). Now
make your browser window smaller using the resize corner and notice how
the banner ad and table stops when it gets near the box, I’ll show you
why and how.

Let’s dive right into this Myspace layout modification by looking at the code:

Here is the code that actually builds the box seen in the sidebar.
Place this CSS code wherever you put your own modification code. I
prefer the top of the “About Me” edit box.

<div style=”position:absolute”>
float:left;

top:15px;
left:7px;
width:150px;
height:400px;
border:solid 1px black;

padding:0;
margin:0;
background-color:EEEEEE;”>

You can put whatever your want here.

Even aligned images:

<div style=”text-align:center”>
<img src=”http://myspace-642.vo.llnwd.net/01124/24/64/1124424642_m.jpg” />
</div>

</div>

There is only one line of code needed to keep the sidebar from being
covered by the rest of the Myspace layout, it’s in bold below. If you
already have CSS modifications using the ‘body’ tag you just need to
add the line to the current code. Otherwise you can add the entire
style block below the div code above; just be careful not to place it
inside another style block.

<style>
body {
margin-left:155px;
}
</style>

That’s it. The first block of code tells the browser to create a block
of space, 15 pixels from the top and 7 pixels from the left, make it
150 pixels wide and 400 pixels high, give it a 1 pixel border that is
black and solid, don’t put any space between the edge and content
inside (padding) or outside (margin), and make the background color
grey.

The second block of code tells the browser to keep the entire Myspace
layout at least 155 pixels from the left. It’s important to note the
relationship between the margin-left in this block of code and the
width in the previous code. You need to keep margin-left larger than
width or the Myspace layout might cover your sidebar in smaller browser
windows.

Now you can explore with different combinations of colors, widths,
heights, borders and position. For example you can have the sidebar
start lower by changing top to 100px. You can even add a background
image using the same methods you add a Myspace background image.

Click here to discuss this article.

p5rn7vb