Web and Blog Design Services

How to keep your blog sidebars clean with some basic HTML!

0 Flares Filament.io 0 Flares ×

Sidebar Clean Up Time!

Step 1 – Sizing your images! The first thing you need to do is check the width size of your sidebars in your HTML codes. Now when you decide to put an image or an ad up you’ll know not to try to cram one in that’s larger than your sidebar width. For Blogger users you will go to your advanced settings and check the width size there. For WordPress users it’s going to depend on what theme your using. Okay, so what happens when you really want to put that ad or image up and it’s larger than your side bar? Well that’s where the code displayed in blue below comes into play! The code in red is our regular basic image code for any picture. Adding the blue code towards the end of the red code will allow you to change the size of your image to what ever you need! Code 3 below shows you how your code should look. Now you can change the width and height to what ever you want!

1. width=”100″ height=”100″

2. <img border=”0″ src=”http://www.justmarriedwithcoupons.com/wp-content/uploads/2011/09/Your-Ad-Here.png” />

3. <img border=”0″ src=”http://www.justmarriedwithcoupons.com/wp-content/uploads/2011/09/Your-Ad-Here.png” width=”100″ height=”100″ />

Step 2 – Aligning your images! – Now that we got that out of the way it’s time to choose what alignment you want for your images. If one image is centered then the others have to be too! It’s a blogger rule! Okay, it’s really not but seriously it’s super gross if one image is centered and then the other image is cram to the left. There are many codes for this but lets just start simple and center the images on your sidebars. It’s takes two simple codes to fix this problem. Again, some may know this but many of us just don’t! Automatically your images will always be aligned to the left. So, let’s start with the red basic image code again. Surrounding the two blue codes around your regular image code (red code below) will center your image! Code 3 below shows you how your code should look. Done!

1. <img border=”0″ src=”http://www.justmarriedwithcoupons.com/wp-content/uploads/2011/09/Your-Ad-Here.png” />

2. <center> </center>

3. <center><img border=”0″ src=”http://www.justmarriedwithcoupons.com/wp-content/uploads/2011/09/Your-Ad-Here.png” /></center>

If you need more help with your blog please stop by at my Custom Graphic Store to see what I can do for you! I also offer auto custom decorative sidebar sub-headers to keep your content neatly separated with style! Contact me I would love to hear from you!

0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 LinkedIn 0 Reddit 0 Email -- Filament.io 0 Flares ×

Speak Your Mind

*

Copyright © Since 2010 Just Married with Graphics · All Rights Reserved · Policies · Powered by the Genesis Framework