| Forums > Tips & Tricks > "The way to make a skin. ( Improvised )" (94 replies)
|
|
|
* You might want to learn basic HTML before you get started ya?
- lissa explains
Many people wanna know how to make a blogskins yea..
I will give a rough idea[:
But to make the skin better is your creativity not the code[:
TAKE NOTE, the ones in italic are the codes, in bold are the body 'parts' & underline are the explanation D: !
* I think, giving codes first & explaining them after, should be better yea.
Head - The code for the first part , FIRSTTTTT ._.
[HTML]
[head]
[title]Change this to the one that you want[:[/title]
Body / CSS stylesheet - second part  !
[style type="text/css"]
body {
background-color: ;
background-repeat: ;
font-family: ;
cursor: ;
color: ;
font-size: ;
line-height: ;
text-align: ;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFF;
scrollbar-darkshadow-color: #FFF;
scrollbar-shadow-color: #FFF;
scrollbar-arrow-color: #FFF;
scrollbar-track-color: #FFF;
}
a:link, a:visited, a:active {
text-decoration: none;
font-family: ;
font-size: ;
color: ;
background: ;
font-weight: ;
line-height: ;
text-transform: ;
}
a:hover {
text-decoration: ;
font-weight: ;
color: ;
font-family: ;
text-transform:;
cursor: ;
}
blockquote {
background: #;
font-family: ;
font-size: ;
border: ;
color: ;
padding: ;
}
[/style]
[/head]
[noembed][body][/noembed]
[div style="position: absolute; top: 0px; left: 0px;"]
content here !
[/div]
Ending - Short and sweeet [:
[/body]
[/html]
SEPARATED ! After the [/html] there's no more code -.- .
This is for the blog arhcieves code.
[BloggerArchives][a href='[$BlogArchiveUrl$]'][$BlogArchiveName$][/a][br]
[/BloggerArchives]
[p]
Blog post code.
[Blogger]
[BlogDateHeader][$BlogDateHeaderDate$][/BlogDateHeader][br]
[$BlogItemBody$][br]
[$BlogItemDateTime$][br]
[/Blogger]
--------------------------------------
Yes, this is editted, & please, if you're clever enough, you should know that the square bracket should change to the pointed brackets.
& now, for the explanation, please, do not just copy the codes and go -.- , you wont know anything duh.
& PLEASE, MAKE AN EFFORT TO PLAY WITH THE CODE, AND UNDERSTAND IT BETTER, JUST ON THIS TUTORIAL ON MINE WONT HELP -.-, no one can help someone to the fullest.
Don't know whats a title is? Click here.
For the body part, it is the most general erm, how do i say. Means, without any headers, blockquote all these, and you just type any plain code, the body part would apply to it.
Like, you put arial 8pt, and I typed 'content here !' in the div alignments, it would come out as arial 8pt, and not any headers that you've customised.
For cursors, it means for the whole page, what your cursor would become. & you don't understand you should experiment it yea.
There's many type of cursor available, crosshair, help, ne-resize, se-resize, nw-resize, n-resize, text, vertical-text.
Line-height , as the name says so, it is the height between two line. Other than px, you could also put % .
Text-align , is aligning your text . If you put text-align: left; and your words should be on the left, same to right, center, justify.
If you want to make a header, type this code in,
.header{
}
Between the } & { Type in your own customisation.
Like, font family, font size & colors & many more, to your creativity, you can make as many headers as you want, but name them differently please.
PLEASE REMEMBER TO PUT THE DOT IN FRONT OF THE NAME OF THE HEADER.
to use the header, type this code in ,
[div class="header"]this is my header[/div]
Please remember to close it please, or it'll screw your whole skin up !
BLOCKQUOTE(: ! See, it doesn't have a DOT infront, so it would go like this,
[blockquote]lalalaa[/blockquote]
& now , the alignment parts & its the last, yo ! !
TOP - defines how far do you want from the image/text to the page from the TOP.
LEFT - defines how far do you want from the image/text to the side of the page. LEFT.
Still don't understand? Click here.
& Yes, of course, you could still customised it further, by adding background, borders, paddings.
PADDING - defines how much spaces ( px ) from the borders to the text/image.
& MARGIN - It's almost the same as PADDING BUT BUT BUT , It counts from OUTSIDE of the border, whereas, padding are INSIDE.
AND YES, I left blanks, for you to fill it yourself(: , so read up if you wanna know.
PLEASE fill in after the ' : ' and before the ' ; '
---
Yes, it's done, anymore problem? PLEASE comment.
& I'll try to answer.
---
Edited 7 months ago. |
|
|
| |
|
| |
|
| |
thank you so much! this do help! u rock; im always tryin 2 learn html but only learning by myself won't help; so i'll thank you 1000000000000000 times!! thank you again!!
|
| |
| |
|
| |
Hahas np{:
|
| |
| |
|
| |
blockquote { - blockquote. should know.
You didn't explain about what was a blockquote. I don't think newbies know what are blockquotes.
Great tutorial though(: Thanks!
|
| |
| |
|
| |
Oh x= Sorry.
ahahs thanks [:
|
| |
| |
 |
Author: 狂然怪異
Posted: 1.1 years ago
(link)
|
|
| |
blockquote is the indented paragraph in blogs that usually is used to denote quotes etc.
It is indented, i.e. the paragraph goes inwards 
It is automatically applied if you press the " button, i.e. the inverted commas in Blogger. But I think it sucks. :/ I'd rather type the [blockquote] by myself.
|
| |
| |
|
| |
Blockquote can be used for cool designs!
Customize it to not be an indented paragraph.
This would be useful, the code.
But there are different types of skins, and this is a simple one.
|
| |
| |
|
| |
ehh..i dun really understand.
can u tell me more about it??
becoz i tink it is really very helpful.
i learned alot. thanks
|
| |
| |
|
| |
Hm. which part did you not understand?
|
| |
| |
|
| |
the body thing..
|
| |
| |
|
| |
WOw thanks for the help
|
| |
| |
|
| |
Sorry late reply x= Hmms body.
De
Headers all this ?
|
| |
| |
|
| |
Really helpful, thanks. (:
|
| |
| |
|
| |
This is the most basic html codes bah....if you really want to learn more, you can google about html codes content, like moving words, example , you also able to change your colours of word using html color codes....
Or you can learn more html codes by examine through other blogskins codes.
Compare with CSS, html coding is far more easier.
|
| |
| |
|
| |
what is "text/css"?
|
| |
| |
|
| |
this is good!ilove it!
|
| |
|
| |
|
Author: 狂然怪異
Posted: 1.1 years ago
(link)
|
|
| |
text/css is a value belonging to [style type="..."] which represents the opening tag of a CSS style. CSS, Cascaded Style Sheets, are declarations which set common styles to be used within the body of the code.
|
| |
| |
|
| |
oh by the way,9 and 5 are my favourite numbers.yea hoo^^
|
| |
| |
|
| |
hmm....i dun really understand.how to use the names i give in the style section?
|
| |
| |
|
| |
instead of using font-family, font-size, font-weight, you can type shorter:
Example, font: normal 9pt tahoma. If you want the font bold, replace the normal with "bold".
Also, instead of using a:link, a:visited, a:active {...}, you can shorten in by typing a {...}
Edited 1.1 years ago. |
| |
| |
|
| |
this is so useful.it really helped me alot.thanks yaw!
|
| |
| |
|
| |
can say more...???
|
| |
| |
|
| |
lol...
actually she posted the standard full length skin
theres another one on the one where you click and it changes to "blog,Profile,cbox whatever"
|
| |
| |
|
| |
Thanks alot, I shall try it after the exams ... haha.
|
| |
| |
|
| |
Yeah this is good for people who know html and css already.
But maybe not for beginners because not so well elaborated.
Nice job anways
|
| |
| |
|
| |
Oh yea I think its quite helpful. I did learn something 8D
But details are not explained properly.
ha nice one
|
| |
| |
|
| |
good job!
|
| |
| |
|
| |
Thanks a million!
I was wondering in the past what the things like "padding"
was about.
|
| |
| |
|
| |
huh?
|
| |
| |
|
| |
This is helpful, thanks!
Although I think more details can be given.
I'm a newbie, and though I've made a blogskin, it was my friend's basecode. So some places here can be better explained (the things that people explained in their comments).
And more codes like moving words be included next time?
Thanks anyway!
|
| |
| |
|
| |
OMG thanks x100000000000000000000 Now i can make blogskins HEHE
THANKS!
|
| |
|
| |
|
| |
Im sorry.
I wasn't too good in explainning :/
|
| |
| |
|
| |
thnx! now i can make blogskins!
|
| |
| |
|
| |
This is very helpful!
Thanks a lot (:
|
| |
| |
|
| |
i tried using ur method & it doesnt help.but nvm.i ask some1 to teach me and i get it now! btw great job explaining
Edited 11 months ago. |
| |
| |
|
| |
oh, this helps me a lot!!!! i will try to do!!! TY!!!
|
| |
| |
|
| |
i don`t understand all the thingy you are talking about all i know is gibberish you are writing
|
| |
| |
|
| |
her* x= er.
LOL i wasn't good at explaining duh.
|
| |
| |
|
| |
Thanks you so much!^^
|
| |
| |
|
| |
np(:
|
| |
| |
|
| |
Viv rocks.
|
|
|
| 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
