Amazing Effect #3! Ehh not really...

UPDATE: the tutorial has been updated (totally changed haha)... scroll down for more!

Hello! I know I have to post the last of the three amazing effects, but I actually thought of one idea but then I realized it would be hard to make you guys understand.

So, instead, here's a banner and a tutorial! :)

The Banner

You guys know this banner right? You can find it in this post.

I've changed the background to a green gradient (you know... for ST PATRICK'S DAYYYY)... coz I had no life for 15 minutes.

Here's how it looks like, and you can grab the code right underneath it! You might notice that the preview below links to the Play Chobots page on our blog... if you copy and paste the code to your blog it won't link to there (it links to the real Chobots). ENJOY! And yeah I guess I'll be making more of these when I have time~~

<object width="190" height="100"><param name="movie" value="http://testblogger.webs.com/stpatricksday.swf"/><param name="FlashVars" value="url=http://chobots.com" /><embed width="190" height="100"src="http://testblogger.webs.com/stpatricksday.swf"flashvars="url=http://chobots.com"/></embed></object>

The Tutorial

So this tutorial is actually a request from Taylorgreenx... and I've always been afraid to do this tutorial LOL

Actually, I can't really explain it clearly...

Basically, use ALL of our tutorials on your blog and BAM! You've got yourself a template!

If you need a further explanation, these are all the components to your basic template:

• Background
• Header
• Pages
• Widgets (search box, labels, archive, etc)

And that's it! You can add way more accessories like a back to top button or fancy borders etc.

IF you're not really good with CSS, use Artisteer.

Artisteer is a template maker and it's completely free. Although I wouldn't suggest it because it doesn't show any of YOUR INNER TALENT *magical sparkles*

You can also use Blogger in Draft... you can make some pretty amazing blogs using that!

Although, I suggest that you play around with your Edit HTML section of your design tab on your blog. Do this with a test blog though! You know.. just in case. W3schools.com also helps you TREMENDOUSLY when it comes to coding and yeah yeah yeah.

...I hope I was helpful as I could've been Taylor.

Well apparently Taylor meant a background for a blog.
That's pretty simple...

I've already made a tutorial on how to do this about a year and a half ago or something...? But then I realized it was probably the most inaccurate and poorly written out tutorial so I decided to delete it and here I am, writing a new one.

How to make a Blog Background

Let me just point out that this tutorial works best for Minima templates. Click here to find out how to change your template to a Minima template before you get started.

First step- clarify if your blog is a 3 column or 2 column. I HOPE you guys can AT LEAST do that.

Click on one of the two templates below to get your blank blog template. Right click + save to save it onto your computer. (BTW the file names are switched so don't worry about that)

2 Column Background

3 Column Background

Now, open this in a photo editing program (Photoshop, Gimp, Paint.net, etc... ANYTHING BUT PAINT.) and create your new background!
Let me just give you a tip. make the middle column (where all your posts and widgets and other stuff goes) a light color so your readers can actually READ your blog posts.

To see a detailed explanation on how to make a background in Photoshop, click here! 

Also, here's a video showing a quick lookthrough on how I would make a background. I didn't "rehearse" for this video so I didn't know what to do or make, I just made it up along the way. So you'll frequently see me screw up and do random things. If you want the link to the final product, click here! It's also in the video description btw. Feel free to use it!



ANYWAY, so once you're done with that, save it as either a .JPG file. I know .PNG images have better quality, but only about 60% of the time it "works" on your blog.

Now, go to Photobucket and create an account. If you already have an account, sign in.

Click the little green "Upload Now" button at the top.

Now you'll be at this screen;

click to enlarge

Click "Customize your upload options" at the bottom...

And make sure that it looks like this, with "Best possible quality (while staying 1mb or less)" is checked.

click to enlarge

Click save, and then upload your background!


Now log into your Blogger account and go to the blog you want to install the background on. Go to Design>Edit HTML.

Hit CTRL+F (or if you have a Mac, I think it's either Apple+F or CTRL+F too) and search for the following code:

body {

then you should come across a code that looks like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
(more code here)

delete "background:$bgcolor;" and replace it with this code:

background: url(LINK TO YOUR BACKGROUND) no-repeat center fixed #FFFFFF;

IF this doesn't work, try this code:

background-image:url(LINK TO YOUR BACKGROUND)
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

♥♥♥

Remember that this works in the Minima Blogger template. Since most of you use Blogger in Draft, this might not work. If none of the codes above work, try this:

First, go to Edit HTML and search for this code:



<Variable name="body.background" description="Body Background" type="background"

Now you'll see a code like this. Your code will be a little different because you'll most likely have a different background...

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMjViZWRiY2ItZTIzMi00MjU1LTgxY2ItOTI5OTQ0MmQ2Y2Fi) repeat scroll top center /* Credit: saw (http://www.istockphoto.com/googleimages.php?id=10763497&platform=blogger) */"/>
   <Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>



So, you'll see two links (highlighted above) in my case they're these two.

http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMjViZWRiY2ItZTIzMi00MjU1LTgxY2ItOTI5OTQ0MmQ2Y2Fi
 



http://www.istockphoto.com/googleimages.php?id=10763497&platform=blogger

You'll also see this.

Credit: saw


http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMjViZWRiY2ItZTIzMi00MjU1LTgxY2ItOTI5OTQ0MmQ2Y2Fi - This is your background link. Replace this with whatever Photobucket link.
Credit: saw - This is the credit to whoever made the background. You can credit yourself if you made the background. (e.g.- Credit: Alexa)
http://www.istockphoto.com/googleimages.php?id=10763497&platform=blogger - This is the credited author's website. (e.g. http://twolegersblog.blogspot.com)


SO, edit all of that, and then once you're done you can also change...



repeat scroll top center



play around with each of those words. I suggest doing...



no-repeat fixed center center

Thats it!



♥♥♥

 Now go back to Photobucket, click on your image, and copy your direct link.

Then, replace "LINK TO YOUR BACKGROUND" with your direct link.
Preview and Save!

Enjoy! :)

Until next time...