| Forums > General > "[Tutorial] How to make a blogskin." (31 replies)
|
|
|
[edit]
IF you cant see the examples, click
HERE for a live preview.
[/edit]
Yes, this thread is a tutorial on how to make a blogskin.
Here goes...
How do I make a blogskin?
To the average blogger, a blogskin is made of random text that nobody understands.
But however, blogskins are not random text. It is a code called HTML.
First, you must know HTML, and a bit of CSS. Most schools teach this by Secondary One,
so if you don't know anything about HTML, perhaps borrow a book or something.
What is HTML/CSS and what does it do?
HTML basically is text that tells the browser (Internet Explorer, Firefox, Etc.) how to
show the page you are viewing. CSS is a kind of style. Without CSS, plain HTML would look
very, very boring.
Ok, enough talk. I want to LEARN how to make a blogskin.
Firstly, you need to know some HTML tags and their properties.
Okay, here goes...
Each HTML tag is contained inside angled brackets <>.
Basically a tag has a start and an end.
A start tag looks like this: <This is a starting tag>
and an ending tag looks like this: </this is an ending tag>
So the difference is only the slash.
So, if I were to describe a typical person using HTML, it would be like this.
<person>
<head>
</head>
<body>
</body>
<legs>
</legs>
</person>
So you can see that the <person> tag wraps up all the content inside it.
Hope this example can clear up the mess.
So, like the example above, HTML uses tags.
A typical HTML document looks like this:
<HTML>
<head>
</head>
<body>
</body>
</HTML>
Yes. A HTML document does not have the 'legs' part of the example above.
So what is applied to the <HTML> tag is also applied to the <head>
and <body> tags, simply because the <HTML> tag wraps around both tags.
If a tag were to be outside any other tag, the rule will not be applied to that tag.
To make it simpler, imagine this.
A rule is like a special order for that ingredient.
Just read below.
A super unhealthy BURGER.
=================================
BUN (+ oil)
MEAT (+ salt)
VEGGIE (rotten)
CHEESE (smelly)
TOMATO (spicy)
/TOMATO
/CHEESE
/VEGGIE
/MEAT
/BUN
=================================
Okay. let's explain this. In HTML, it goes like this.
SINCE the MEAT, VEGGIE, CHEESE and TOMATO are inside the bun, they all get (+ oil).
SINCE the VEGGIE, CHEESE and TOMATO are wedged in between the MEAT, they get (+ salt).
SINCE THE CHEESE and TOMATO are wrapped inside the VEGGIE, they are (rotten).
SINCE the TOMATO is inside the CHEESE, the TOMATO is (smelly).
BUT HOWEVER, NOTHING IS INSIDE THE TOMATO, SO ONLY THE TOMATO IS SPICY.
GEDDIT? (:
If you don't, hmm maybe try reading until you understand.
Here are some common HTML tags to help you:
HTML TAGS
<html> The opening of ANY HTML document.
<head> The "head" of a HTML document, inside you can place STYLE and SCRIPT tags.
<body> The "body" of a HTML document, here is where the general interface is.
<style> Defines the style of a HTML, like colours of LINKS or BACKGROUNDS.
<script> You can put javascript content inside.
<br> A break tag, use it to go down a line when editing.
<li> List tag, use it when you are making lists.
<ul> An unordered list. Numbers, etc.
<div> This tag defines a division or a section in an HTML document.
<h1> to <h6> headers. h1 (largest heading) h6 (smallest heading).
<font> defines font elements.
<b> Bold.
<u> Underline.
<i> Italics.
<s> Strikeout.
<a> The starting of a Link tag.
====================================================================
CSS
CSS stands for Cascading Style Sheets. CSS is very flexible and allows
the designer to create dynamic and pleasing pages.
Here is a tutorial on CSS.
All CSS is put in the <head> section of the page.
Remember that a CSS always starts with a HTML tag to define what it is.
Most people will use this tag.
<style type="text/css">
So every style sheet starts with this HTML tag. Inside the style sheet,
the format is totally different from normal HTML. One thing, it's easier to understand.
With CSS, you can do ANYTHING with a page. You will be able to define colours, images and
positions. So let's start!
Let's say you want to make the background of a div (called stupiddiv) tag red,
the width set to 100px; and the font colur white, and add a black border, with the text in the center, the stylesheet would look like this.
<style type="text/css">
#stupiddiv{
background-color: red;
color: white;
border: 3px solid black;
width: 100px
text-align: center
}
</style>
Yes, even the stylesheet needs a closing tag. As you can see, you can name a div anything you want.
the # sign is known as a selector. Basically it tells the browser what the style is applied to.
The two most common selectors are .(class) and #(id).
There is no difference between them, except that class can be applied more than once on many elements.
So, if I were to take the example stylesheet above, and apply it to the div below, it would work.
<div id="stupiddiv">HELLO</div>
It would turn out like this:
HELLO
So, to make an entire PROFILE COLUMN, this is how to do it.
<HTML>
<head>
<style type="text/css">
#profile{
background-color: ivory;
color: black;
font-family: arial;
font-size: 11px;
width:200px;
border:3px solid black;
padding:3px;
}
.head{
background-color: gray;
font-weight:bold;
color:black;
font-family:century gothic;
font-size: 12px;
border-bottom: 3px solid yellow;
}
</style>
</head>
<body>
<div id="profile">
<div class="head">
Profile
</div>
Hi my name is blah.
<div class="head">
Links
</div>
links here
<div class="head">
Tagboard
</div>
cbox here
<div class="head">
Archive
</div>
archive here
And the result would be:
Profile
Hi my name is blah.
Links
links here
Tagboard
cbox here
Archive
archive here
Yes, so now you have learned CSS!
Resources
a{color:#333333; text-decoration:none;}a:hover{color:#999999; text:decoration:none;}
Image Hosting
PhotoBucket
ImageShack
TinyPic
Flickr
Hexadecimal Color Codes
Html-color-codes.com
Html-color-codes.info
HtmlColorCodes.org
Help and Reference
W3Schools HTML Help
W3Schools CSS Help
Bloghosts
Blogger/Blogspot
LiveJournal
WordPress
Webs (Previously Freewebs)
Image Sites
DeviantArt
PhotoBucket
ImageShack
TinyPic
Flickr
Note: Remember to ask for permission from DeviantArt users.
Image hosting sites can be used for browsing too.
Complied © 2009 iLoveNotepad
Edited 3.4 years ago. |
| |
|
| |
|
| |
Umm why r the rest of the words striked out?!
Anyway nice try helping other blogskinners out there.
|
| |
| |
|
| |
Ok now it's better.
|
| |
| |
|
| |
lol
|
| |
| |
|
| |
P.S I can't imagine a boy would use a really cute image for his icon. :0
Edited 3.4 years ago. |
| |
| |
|
| |
very useful. but shouldn't this be under help forum?
|
| |
| |
|
| |
CLICK ON THE LIVE PREVIEW, CAUSE THE DIVS WON'T DISPLAY ._.
Live Preview
|
| |
| |
|
| |
o.o
|
| |
| |
|
| |
I like the hamburger formula for the example, great job 
|
| |
| |
|
| |
ya but its disgusting -.-
|
| |
| |
|
| |
Wow, not bad eh.
blogskins.com/forum/1/118008/
A little something after you've read this tutorial and want to get down to making a proper skin. 
|
| |
| |
|
| |
HEY U ANTI-TWILIGHTER!
|
| |
| |
|
| |
LOL.
|
| |
| |
|
| |
I'm anti twilight BOOKS. We're FRIENDS. Lai.
|
| |
| |
|
| |
im anti movie and books.
DONT START TWILIGHTING HERE.
|
| |
| |
|
| |
HAHA.
Like I'm not a twilighter nor a anti-twilighter.
I don't read but I watched.
The movie SUCKED.
|
| |
|
| |
|
| |
quote
"I don't read but I watched.
The movie SUCKED. "
agreed
|
| |
| |
|
| |
Hey.
Everyone agrees.
Except that Edward is "romantic", nothing else is better.
|
| |
| |
|
| |
id rather watch madagascar or something .
|
| |
| |
|
| |
LOL. Movie was okay la. But Robert Pattinson has bushy eyebrows. D:
|
| |
| |
|
| |
hey is there any reference links archive? i remember someone created it some time ago.
just want to put them here for easy ref.
|
| |
| |
|
| |
Extra References, If you need them. Good luck!
|
| |
| |
|
| |
Software Guide
|
| |
| |
|
| |
FAQ
its pointless linking the FAQ.
|
| |
| |
|
| |
HTML + CSS Guide
|
| |
| |
|
| |
Haha, nice one
This will probably be useful to those who keep asking "How to make a blogskin?"
|
| |
| |
|
| |
i notice that those who keep asking that question don't actually bother looking for these sort of threads but they put up their own thread asking that question -.-
|
| |
| |
|
| |
Yey, thanks for this
I liked the burger thing, hahha.
|
| |
| |
|
| |
HELPED ALOT.
|
| |
| |
|
| |
lol np
|
| |
| |
|
| |
Second ostentatiously.
|
| |
|
| |
|
| |
isn't this kinda like self-plug too
|
| Subscribe To This Thread: RSS 2.0 or Atom (?) |
| This thread has been locked, and no new replies can be posted. |
Home | Top Skins | Tags | All Skins | Forums | Contribute |
About
