Friday, September 2, 2011

Html Tutorial for Blogger Menu

Hello everyone! 
So i decided to post what i've learned so far about blogging. And i mean the technical stuff. 
First of all, some things might appear easy but believe me they are not!
and of course this post is about all of us who have almost NO clue about html and stuff like that...

So first:
First we made Google account which was of course easy. Then we made our blogger account (after we decided on a name)

Our first thought was to try and make our page as cute as possible but we had trouble finding something we actually like or when we did we couldn't get it to work.. (i told you, no html knowledge what so ever)

So we decided to make our own banners, buttons etc

So i wanted to draw our banner. I am not a graphic designer and i only know a few things on photoshop but i had an idea. But since my idea would take hours and hours we decided to leave the drawing for later on and try to make something much more simple.

Here's what we created:
We simply used some cute fonds and made it! 
It might be simple but i really like it :D

the fonds we used are from this site:
U should definately go and check it out! most of the fonds are trully amazinggg!

Well what you have to do is go there and select a font u like. Then you download it on your desktop. After you download it you right-click on it and select "Install". And thats it!! From now on you can use the fonts in microsoft word (or whatever program you like).  There you can change the color,  the size etc.

Then we saved the fonts as a pictures. (well we copy and pasted them in photoshop and saved them as a picture but i'm sure there is  a better way to do that).

So now that you have the picture you want to use, You  select design --> page elements

there you click on edit (at the header  section) and then import your image.

2) Putting your image in the center:

this was a bit tricky for me but after some time i managed to get it to work
you should use a little html...

1)you must go at the "edit HTML" tab
2) press Ctrl+F buttons and type  "]]></b:skin>"
3) once you found that copy and paste right above it, this code:
text-align: center;
width: 660px;
margin: auto;
And thats it! your new header is centred :)

(to be continued tommorow)

0 Bubbles:

Post a Comment

Related Posts Plugin for WordPress, Blogger...