Friday, January 8, 2010
Help is on the way :))
7:15 PM | 
Posted by
Alexa
Hi guys,
I'm guessing that a lot of you are wondering how I do these headers and backgrounds and stuff.
I can't give a tutorial for everything, but I will give you sites that either give-
A. Tips
B. Tutorials
C. Help
So here we go! :)
Headers
Lots of you know how to make a header, but for those who don't, here are some videos to help you understand.
Most computers have the default Paint program installed on them, and Paint can actually make some pretty awesome headers!!
Cuz take a look at this header I made using Paint!!
This was like a really long time ago, like 6 months ago, when I was like only 100 [on Chobots]
Here's a [video] tutorial on how to make headers on Paint!
Oh yeah, and my Chobots fwend Ebtama made it too :D
You can also download Paint.net for free at http://www.getpaint.net
Kinda like Photoshop, but fwwwwwwweeeee!!
Here's a video tutorial made by Chobot Herip! xD
And a Photoshop tutorial, by Loy 121
You can buy Photoshop at Best buy and stores like that for I think $799 USD
Or try a 30 day free trial at http://www.adobe.com
Oh and lastly Gimp, I don't think many of you know it, It's really advanced, more than Paint.net but like about 25% less advanced that Photoshop.
So here are a couple of Gimp header tutorials.
and
Pwetty cool huh?
That's it for headers.
Backgrounds
Ok, now this is the one that gets people wondering. How do you make a background?
Here's an awesome site called The cutest blog on the Block, it shows people tons of cool things, such as blog secrets, and they also offer free backgrounds for blogs :D
So click here to go there!!
Not working? Go copy and paste this URL into your browser.
http://thecutestblogontheblock.com/blog-secrets/144-how-to-make-your-own-background.html
I think I also made one a long time ago. Hmm. Let's see! :)
Here it is!
"YAY! I finally have a tutorial on how to make your own template for your blogger blog! :D
Do you want to make your own? then this tutorial is right for you!
First- choose your template. well you cant exactly CHOOSE it, it depends on if you have a three column or a two column.(hint: If you have a two column, you have only one sidebar and if you have a three column, you have two sidebars.)
So select a template below! Click it! right click and save then.
←TWO column template.
←THREE column template.
Second- Make your template! Open up your template in your fave editing program. I suggest Photoshop, but if its a teeny pricey, you can download paint.net for free at http://www.getpaint.net/! It has most of Photoshops features! :D Anyway back to the template. I added all the tips right on the template, so read em then erase it! I suggest making your template NOT with google images or anythin else like that, because images on google can be copyrighted. What does copyright mean? it means that you are not at all allowed to take images from someone else without getting their permission. So, you can download images from sites like DigiScrapDepot.com. I like that site because you can download thousands of scrap albums and use them yourself! Remember, there are certain things you can do with someone else's designs. you cant take credit for making them and are for personal use ONLY.
Third- Save your background! Click File+Save As and save it as a JPG image. dont do PNG, GIF, BMP, etc. jpg is best for backgrounds.
Fourth- Upload your background! Go to TinyPic.com or Photobucket.com and upload your pic! After uploading on photobucket, you can go back anytime and get what you need for the next step, so dont worry. For TinyPic, once uploaded, DO NOT CLOSE THE WINDOW! We need the direct link later!
Fifth- the hardest part.
Once you successfully uploaded your pictures, log in to blogger and go to your dashboard. Click the blog you want and click Layout, then Edit HTML. Now youll see a hugggeeeeeeeeeee code... ugh eh? But itll get easy. For Windows users, hit ctrl+f to get a search box. Now paste this in there: body {
once there you should see a code like this :
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
and so on.
Then, after "background:$bgcolor" add this code:
background-image:url('direct link');
background-position: center;
background-repeat:no-repeat;
background-attachment: fixed;
Then, take the direct link from TinyPic/PhotoBucket and put it between the parentheses. But make sure to put the ' before and after the link!"
Hehe xD
So that's it for backgrounds.
Nooow for signatures :)
Well, TCBOTB does have a tutorial for siggys, click here or go to http://thecutestblogontheblock.com/blog-secrets/140-how-to-add-a-signature-to-your-blog-posts-updated.html
I think I also have a how to make a siggy tutorial... Here it is!
"I promised you how to make your own signature, and welp, here it is!!!!!!
First I'll give you the basic template. And here it is.
(just click on the giant blank spot)
This one is in 250x100 px, the average signature size :)
This one is the average signature one with the STAR, like mine and Twolegers' and Dorey's.
(still 250x100)
This is one longer one, 400x100, in case you have a longer [user]name.
And this one is the 400x100 one with the star :)
Click the one that best suits your [user]name and right-click and save it!
Ookay, so I suggest paint.net for this. Download it at getpaint.net
Open the blank template and youll see its a checkered design. This means that its TRANSPARENT, and we WANT it to stay like that. In order to do that, just KEEP IT SAVED AS A PNG FILE and dont change it to jpeg or bmp or something like that!!
Now. Many peeps just add text and tada. But here are some tips, and how to DO it (For new paint.net users)
First click the T on your toolbar, if you dont see it just click "Window" then "Tools" or click f8.
Now choose from any font. If you want another font, I suggest going over to dafont.com and choose a font you want! Then extract it and install it, if you dont know how to do that google it.
Choose your font (Thats readable, not liek webdings) and a good size (So that people can read it) and click and type your [user]name. You may choose a color from the color wheel, and get as creative as you want! have fun with it though!!!!!!!!! :)
Now thta you finish it, save it and then just remember where it is on your computer, then head over to tinypic.com.
Now, I suggest Photobucket, cuz for all of the signatures ive made, it has never let me down. But idk about Tinypic, lemme try it out....
...Woot it does!! So you may upload it to Tinypic, just click Browse and look for the file on your comp, click ok, and then click upload now! it should just take a few seconds :)
Then youll see the four usual code choices: Email and IM, HTML code, Direct link, and the IMG code. Copy the html code. And here's how to use it:
after u copy it log into blogger, click settings, then formatting
then scroll to the bottom to a 'post template' box. paste the html code there.
after that, save and voila!
to use ur new signature, just click 'new post' and then drag the signature to the bottom of the screen, type whatever you want, then publish and it should show up!!!
but, you may notice a border outlining the signature in a box.
if you wanna remove this box, first go to layout then edit html.
for windows users, hit ctrl+f to open a search box. paste this in there: .post img
for non windows users or if it doesnt show up, just scroll down and see if you can find .post img
then this should show up (or something like this)
.post img {
padding:4px;
border:1px solid $bordercolor;
}
then change the 1 to 0. itll look like this now.
.post img {
padding:4px;
border:0px solid $bordercolor;
}
then preview and save!!"
And yeah... that's my siggy tutorial.
Three Column Template
My fave of them all.
If you don't have enough space on your blog for widgets, you have a second sidebar!! :)
I dont have a tutorial for this, but click here or go here:
http://thecutestblogontheblock.com/blog-secrets/145-how-to-get-a-3-column-template.html
Hope you liked this quickie post :)
Alexa ♥
I'm guessing that a lot of you are wondering how I do these headers and backgrounds and stuff.
I can't give a tutorial for everything, but I will give you sites that either give-
A. Tips
B. Tutorials
C. Help
So here we go! :)
Headers
Lots of you know how to make a header, but for those who don't, here are some videos to help you understand.
Most computers have the default Paint program installed on them, and Paint can actually make some pretty awesome headers!!
Cuz take a look at this header I made using Paint!!
This was like a really long time ago, like 6 months ago, when I was like only 100 [on Chobots]
Here's a [video] tutorial on how to make headers on Paint!
Oh yeah, and my Chobots fwend Ebtama made it too :D
You can also download Paint.net for free at http://www.getpaint.net
Kinda like Photoshop, but fwwwwwwweeeee!!
Here's a video tutorial made by Chobot Herip! xD
And a Photoshop tutorial, by Loy 121
You can buy Photoshop at Best buy and stores like that for I think $799 USD
Or try a 30 day free trial at http://www.adobe.com
Oh and lastly Gimp, I don't think many of you know it, It's really advanced, more than Paint.net but like about 25% less advanced that Photoshop.
So here are a couple of Gimp header tutorials.
and
Pwetty cool huh?
That's it for headers.
Backgrounds
Ok, now this is the one that gets people wondering. How do you make a background?
Here's an awesome site called The cutest blog on the Block, it shows people tons of cool things, such as blog secrets, and they also offer free backgrounds for blogs :D
So click here to go there!!
Not working? Go copy and paste this URL into your browser.
http://thecutestblogontheblock.com/blog-secrets/144-how-to-make-your-own-background.html
I think I also made one a long time ago. Hmm. Let's see! :)
Here it is!
"YAY! I finally have a tutorial on how to make your own template for your blogger blog! :D
Do you want to make your own? then this tutorial is right for you!
First- choose your template. well you cant exactly CHOOSE it, it depends on if you have a three column or a two column.(hint: If you have a two column, you have only one sidebar and if you have a three column, you have two sidebars.)
So select a template below! Click it! right click and save then.
←TWO column template. ←THREE column template.Second- Make your template! Open up your template in your fave editing program. I suggest Photoshop, but if its a teeny pricey, you can download paint.net for free at http://www.getpaint.net/! It has most of Photoshops features! :D Anyway back to the template. I added all the tips right on the template, so read em then erase it! I suggest making your template NOT with google images or anythin else like that, because images on google can be copyrighted. What does copyright mean? it means that you are not at all allowed to take images from someone else without getting their permission. So, you can download images from sites like DigiScrapDepot.com. I like that site because you can download thousands of scrap albums and use them yourself! Remember, there are certain things you can do with someone else's designs. you cant take credit for making them and are for personal use ONLY.
Third- Save your background! Click File+Save As and save it as a JPG image. dont do PNG, GIF, BMP, etc. jpg is best for backgrounds.
Fourth- Upload your background! Go to TinyPic.com or Photobucket.com and upload your pic! After uploading on photobucket, you can go back anytime and get what you need for the next step, so dont worry. For TinyPic, once uploaded, DO NOT CLOSE THE WINDOW! We need the direct link later!
Fifth- the hardest part.
Once you successfully uploaded your pictures, log in to blogger and go to your dashboard. Click the blog you want and click Layout, then Edit HTML. Now youll see a hugggeeeeeeeeeee code... ugh eh? But itll get easy. For Windows users, hit ctrl+f to get a search box. Now paste this in there: body {
once there you should see a code like this :
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
and so on.
Then, after "background:$bgcolor" add this code:
background-image:url('direct link');
background-position: center;
background-repeat:no-repeat;
background-attachment: fixed;
Then, take the direct link from TinyPic/PhotoBucket and put it between the parentheses. But make sure to put the ' before and after the link!"
Hehe xD
So that's it for backgrounds.
Nooow for signatures :)
Well, TCBOTB does have a tutorial for siggys, click here or go to http://thecutestblogontheblock.com/blog-secrets/140-how-to-add-a-signature-to-your-blog-posts-updated.html
I think I also have a how to make a siggy tutorial... Here it is!
"I promised you how to make your own signature, and welp, here it is!!!!!!
First I'll give you the basic template. And here it is.
(just click on the giant blank spot)
This one is in 250x100 px, the average signature size :)
This one is the average signature one with the STAR, like mine and Twolegers' and Dorey's.
(still 250x100)
This is one longer one, 400x100, in case you have a longer [user]name.
And this one is the 400x100 one with the star :)
Click the one that best suits your [user]name and right-click and save it!
Ookay, so I suggest paint.net for this. Download it at getpaint.net
Open the blank template and youll see its a checkered design. This means that its TRANSPARENT, and we WANT it to stay like that. In order to do that, just KEEP IT SAVED AS A PNG FILE and dont change it to jpeg or bmp or something like that!!
Now. Many peeps just add text and tada. But here are some tips, and how to DO it (For new paint.net users)
First click the T on your toolbar, if you dont see it just click "Window" then "Tools" or click f8.
Now choose from any font. If you want another font, I suggest going over to dafont.com and choose a font you want! Then extract it and install it, if you dont know how to do that google it.
Choose your font (Thats readable, not liek webdings) and a good size (So that people can read it) and click and type your [user]name. You may choose a color from the color wheel, and get as creative as you want! have fun with it though!!!!!!!!! :)
Now thta you finish it, save it and then just remember where it is on your computer, then head over to tinypic.com.
Now, I suggest Photobucket, cuz for all of the signatures ive made, it has never let me down. But idk about Tinypic, lemme try it out....
...Woot it does!! So you may upload it to Tinypic, just click Browse and look for the file on your comp, click ok, and then click upload now! it should just take a few seconds :)
Then youll see the four usual code choices: Email and IM, HTML code, Direct link, and the IMG code. Copy the html code. And here's how to use it:
after u copy it log into blogger, click settings, then formatting
then scroll to the bottom to a 'post template' box. paste the html code there.
after that, save and voila!
to use ur new signature, just click 'new post' and then drag the signature to the bottom of the screen, type whatever you want, then publish and it should show up!!!
but, you may notice a border outlining the signature in a box.
if you wanna remove this box, first go to layout then edit html.
for windows users, hit ctrl+f to open a search box. paste this in there: .post img
for non windows users or if it doesnt show up, just scroll down and see if you can find .post img
then this should show up (or something like this)
.post img {
padding:4px;
border:1px solid $bordercolor;
}
then change the 1 to 0. itll look like this now.
.post img {
padding:4px;
border:0px solid $bordercolor;
}
then preview and save!!"
And yeah... that's my siggy tutorial.
Three Column Template
My fave of them all.
If you don't have enough space on your blog for widgets, you have a second sidebar!! :)
I dont have a tutorial for this, but click here or go here:
http://thecutestblogontheblock.com/blog-secrets/145-how-to-get-a-3-column-template.html
Hope you liked this quickie post :)
Alexa ♥
Subscribe to:
Post Comments (Atom)
5 comments:
the how to make a header video really helped me
aand i think..
THATS AMAZING YOU POSTED ALL THIS INFO!!
(excitment..)
WOW! thank you! thats sooooooo helpful!!!
it helped me alot!
and i learned something i have ben wanting 2 kno 4 a long time!
thank u thank u thanku!!
ur awsome! and ebtama 4 helping
i meet her..shes really nice:D
oh..i also finnly meet ya alexa and u r nice 2! although...
when i talked 2 u...
you semmed like a girl version of zandercute..LOL
both of yall make that weird lookin face(:3)
weird... lol
anyways thnx
~swettie101
glad to help :3
oh yeah... i called that a quickie post xD
a girl version? O.o
oh and. i just like the :3 face... adorable little mouth :D
~alex
ok. i have tried over and over and over!
and i can not get 3 colum 2 work right
D:
can u plz help me?
is there a extra step i need 2 do?
im just really lost and cinfused,
also..
quike post? seriosuly? lol
look liked a post that a lot of effort was pit in2 not a quick one!!!
well, can u help?
thnx...
btw loooooooove the blog :D
~swettie101
nvm i got it,
i am so happy i could scream
if it wuznt 1am right now i am sure i would!!
YESSS!
lol
Awesome blog Zander and Alexa I love ima gonna follow ur blogy
Post a Comment