Monday, July 13, 2009

Create Template:Page Structure(Part 1)

» Click to show Screenshot«


Hi all...from now on i will share my thought to you about how to create a template,but i'm not guarantee you can create very cool template after this,because it's up to to your imagination after all :D....hmm at least you'll know how to create it, i think...
before we start, i must tell you something first,you must have knowledge of HTML and CSS language to create a template, although it's only a basic you must understand this language(because it's impossible to create a template if do not understand at all)

okay...in this part i'll tell you the page structure of the template.
a webpage divided into three parts...that is..Header,Content,and footer (see the screenshot above)
in the header section,you know,this is where your header image or your web title placed,you can put the navigation on this section too if you want.
the content section is a place where your blog content with the article in the mainbar and widget in the sidebar .
and the footer itself usually used for credits to someone,like a link..you know..:D

Now we go to the script
in our blog template script itself divided into two parts...that is CSS section and HTML section,in the Css section you can modify your blog style ,like changing the text color,text size,mainbar and sidebar size and many more..
curious???? hmmmm...okay let's give it a try :)


in this section i take an example with Violet Rose Script
you can download the script here
» Click to show CSS - click again to hide... «


nah..that is the css for the body,if you already familliar with Css you should understand that code right...in that script i'm not using background image,i'm just using background color with #000000(Hex Color for black) and #FFFFFF(Hex Color for white) for the text color
see the width with 985 pixel in the outer wrapper,thats your page width,you can modify on your own as you wish.
now the HTML section,this is the place where the widget you placed...you can put javascript too in this section ,okay for the example ,this is where you can put the javascript on the HTML section

]]></b:skin>


<script language='JavaScript' type='text/javascript'> >


YOUR JAVASCRIPT CODE


</script>


</head>



or upload the javascript file and put the url like this

]]></b:skin>


<script src='YOUR JS URL' type='text/javascript'/>


</head>



hmm i think thats it for the page structure...next time i will tell you how to moved a sidebar and create new sidebar...so keep in touch until the next part

To be Continued....



13 comments:

  1. pertamax bro =)) nice posting nieh ;;)

    ReplyDelete
  2. post menarik.. tp stil x fhm la.. cmne nk uat?? urmm

    ReplyDelete
  3. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif
    http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif
    thanks info kerennya sob.

    ReplyDelete
  4. bisa buat menambah pengetahuan kerana aq selalu ubah-suai di template ekspiremenku. cuma 'head'ini ada di 2 tempat yang mana satu ya tempatnya??

    ReplyDelete
  5. copas dri artikel orng ya,,,,,=))

    ReplyDelete
  6. @Anonymous
    anda bilang begitu atas dasar ap??
    klo emank sy copas harusnya anda menunjukan buktinya ,jangan asal ngomong aj...cuz ne artikel emank ori saya buat sndiri;;)
    saya brani ngomong kek gni cuz anda pke anonymous...dsini kesannya anda cm ngomong doank...habis ngomong lari;))

    ReplyDelete
  7. link aq...


    firmanadihindarsyah.blogspot.com

    ReplyDelete
  8. Hahaha, gara-gara yag di atas sudah ga bisa anonymous lagi....parah tuh orang hehehe...
    Thanks udah berkunjung sob...

    ReplyDelete
  9. nice tips keep sharing my friend

    ReplyDelete

.