Home | Top Skins | Tags | All Skins | Forums | Contribute | About

BlogSkins.com Forums

Forums > General > "[Tutorial] How to make a blogskin." (31 replies)
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
[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 5.7 years ago.
 
 
vivianrawks's icon Author: vivianrawks
Posted: 5.7 years ago
(link)
  Umm why r the rest of the words striked out?!
Anyway nice try helping other blogskinners out there.
 
 
vivianrawks's icon Author: vivianrawks
Posted: 5.7 years ago
(link)
  Ok now it's better.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  lol
 
 
vivianrawks's icon Author: vivianrawks
Posted: 5.7 years ago
(link)
  P.S I can't imagine a boy would use a really cute image for his icon. :0

Edited 5.7 years ago.
 
 
dreamerinREALITY's icon Author: dreamerinREALITY
Posted: 5.7 years ago
(link)
  very useful. but shouldn't this be under help forum?
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  CLICK ON THE LIVE PREVIEW, CAUSE THE DIVS WON'T DISPLAY ._.

Live Preview
 
 
collinwyx's icon Author: collinwyx
Posted: 5.7 years ago
(link)
  o.o
 
 
j0AnNe's icon Author: j0AnNe
Posted: 5.7 years ago
(link)
  I like the hamburger formula for the example, great job :D
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  ya but its disgusting -.-
 
 
unholycress's icon Author: unholycress
Posted: 5.7 years ago
(link)
  Wow, not bad eh. :D

blogskins.com/forum/1/118008/

A little something after you've read this tutorial and want to get down to making a proper skin. ;)
 
 
vivianrawks's icon Author: vivianrawks
Posted: 5.7 years ago
(link)
  HEY U ANTI-TWILIGHTER!
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  LOL.
 
 
unholycress's icon Author: unholycress
Posted: 5.7 years ago
(link)
  I'm anti twilight BOOKS. :D We're FRIENDS. Lai.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  im anti movie and books.

DONT START TWILIGHTING HERE.
 
 
vivianrawks's icon Author: vivianrawks
Posted: 5.7 years ago
(link)
  HAHA.
Like I'm not a twilighter nor a anti-twilighter.
I don't read but I watched.
The movie SUCKED.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  quote
"I don't read but I watched.
The movie SUCKED. "

agreed
 
 
vivianrawks's icon Author: vivianrawks
Posted: 5.7 years ago
(link)
  Hey.
Everyone agrees.
Except that Edward is "romantic", nothing else is better.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  id rather watch madagascar or something .
 
 
unholycress's icon Author: unholycress
Posted: 5.7 years ago
(link)
  LOL. Movie was okay la. But Robert Pattinson has bushy eyebrows. D:
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  hey is there any reference links archive? i remember someone created it some time ago.
just want to put them here for easy ref.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  Extra References, If you need them. Good luck!
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  Software Guide
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  FAQ

its pointless linking the FAQ.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  HTML + CSS Guide
 
 
70th-(entury's icon Author: 70th-(entury
Posted: 5.7 years ago
(link)
  Haha, nice one ;)
This will probably be useful to those who keep asking "How to make a blogskin?"
 
 
ostentatiously's icon Author: ostentatiously
Posted: 5.7 years ago
(link)
  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 -.-
 
 
//& tessa *'s icon Author: //& tessa *
Posted: 5.7 years ago
(link)
  Yey, thanks for this :D
I liked the burger thing, hahha.
 
 
Krey-zee?'s icon Author: Krey-zee?
Posted: 5.7 years ago
(link)
  HELPED ALOT.
 
 
iLoveNotepad's icon Author: iLoveNotepad
Posted: 5.7 years ago
(link)
  lol np
 
 
f-urballs's icon Author: f-urballs
Posted: 5.7 years ago
(link)
  Second ostentatiously.
 
 
nervouswreck's icon Author: nervouswreck
Posted: 5.7 years ago
(link)
  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.


Site

- Home
- About
- Feeds
- Privacy Policy
- Contact Us

Skins

- Tags
- Search Skins
- All Skins
- Random Skin
- Skin Of The Day
- Contribute

Forums

- General
- Tips & Tricks
- Help!
- Suggestions
- Skin Requests
- Blogging Software
- Web Hosting

Account

- Log In
- Register
</BlogSkins>

Warning! Do not follow this link! It is a trap for poorly-behaved bots. If you follow this link, you will be banned from accessing this site and several others. I will not have mercy on you. Do not follow this link!