| 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. |
|
|
| |
|
| |
|
| |
o-o lollo.
|
| |
| |
|
| |
this is very well explained.
|
| |
| |
|
| |
this helped a lot! thanks. =)
|
| |
| |
|
| |
nop:/
|
| |
| |
|
| |
Hi, 1st of all thanks for the info.
umm I was just wondering, where do you put the header image?
~I don't really know about this codes~
|
| |
| |
|
| |
header image? what do you mean? D:
copy & paste the code down? ._.
|
| |
| |
|
| |
er... im still confused.. =[
Oh, btw... we do it on wordpad, right??
Edited 11 months ago. |
| |
| |
|
| |
notepad or whatever you use to.
|
| |
| |
|
| |
Ughh, I Still Dont Understand ):
|
| |
| |
|
| |
._.
|
| |
| |
|
| |
Yeahh, I Dont Understand Everything(:
Sorry For My Dumbness!
|
| |
| |
|
| |
hmms, arghzx, i try to explain everything again.
|
| |
| |
|
| |
done, re-explained everything
|
| |
| |
 |
Author: {Jas
Posted: 11 months ago
(link)
|
|
| |
This is great ! Thanks a whole lot !
|
| |
| |
|
| |
nope(: , erm, is the tutorial understandable?
|
| |
|
| |
|
| |
Hey 1st time i came here i completely dont understand a single thang, those codes and all. But after i tried t experiment w it, i managed t make skins alr! And now i sorta know all these and cld understand it yea. Great job!
|
| |
| |
|
| |
argh, thanks :/ so it's consider erm, understandable? ._.
|
| |
| |
|
Author: {Jas
Posted: 11 months ago
(link)
|
|
| |
Yeahs , understandable uhh [: Great job ehh , now i understand codes better
Edited 11 months ago. |
| |
| |
|
| |
that's good, wont waste my effort. LOL.
|
| |
| |
|
| |
It'll be better if you include some websites as to where to obtain HEXADECIMAL CODES.
|
| |
| |
|
| |
Yayness Viv! 
|
| |
| |
|
| |
got a few to recommend? x.x lol.
hmm, lissaexplain have also .
|
| |
| |
|
| |
thanks Vivian! this really help me a lot.I'll surely credit you for this!Really helpful.Once again,thanks for sharing your tutorials.
|
| |
| |
|
| |
Hm, should you also create another thread on 'The way to make a navigational skin' ? Haha, just suggesting yeah, i've been struggling with the navigational codes.
|
| |
| |
|
| |
Ashley ; no problem .
xOH!thatcirus% ; gaaa, my navi ._. some works in FF , some dont. LOL. x.x but next time ._. lol. sorry.
|
| |
| |
|
| |
I prefer the other one cause this one is messy.
|
| |
| |
|
| |
Thanks a lot! This really helped me when I was making my skin with my first own codes. ;D
|
| |
| |
|
| |
im curious, what are the differences between html and css?
|
| |
| |
|
| |
where r u supposed to type the code in
|
| |
| |
|
| |
notepad o.o or test in blogger?
|
| |
|
| |
|
| |
This is useful, but I wished I have found this 3 years ago. At that time, I downloaded as many skins as I can, found the patterns and worked out what the codes mean using Google and an out-dated book about web design. Microsoft FrontPage (Windows 98) also helps.
I find div layouts easier to grasp than tables layouts. Tables layouts also mess-up easily if not made with care.
Aethereality.net is good for learning tables layouts, especially the tables layouts made by Ivy.
|
| |
| |
|
| |
Thx lots for your help but im still blur.. Where should i paste the [$BlogItemDateTime$] thingy??
|
| |
| |
|
| |
inside the div (: align thingy.
|
| |
| |
|
| |
[div style="position: absolute; top: 0px; left: 0px;"]
content here !
[/div]
replace it with the content x:
|
| |
| |
|
| |
Wow lissaexplains is still around.
I first went there like 9 years ago.
Lol.
Lissa rocks! :x
|
| |
| |
|
| |
LOL, h has
|
| |
| |
 |
Author: *くロ*
Posted: 7 months ago
(link)
|
|
| |
thank you!
|
| |
| |
|
| |
where and how to make a html code for the blog skin , i'm just a starter and i really wanna know where and how to make a blogskin.
|
| |
| |
|
| |
Im wondering what about navi skins :/ those that i like.
|
| |
| |
|
| |
I still dun quite understand it...Do u mind explaining to me again ?  Thx!
|
|
|
| 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
