CSS

Pengenalan CSS

CSS Merupakan singkatan dari Cascading Style Sheet. Dengan CSS, Anda bisa memisahkan antara desain tampilan website dengan konten/isi website.

HTML/xHTML sebenernya digunakan untuk memberi tahu browser bagaimana sebuah tag HTML ditampilkan di browser. Misalnya saja tag HTML Teks miring, tag tersebut sama artinya dengan “Halo web browser, teks ini tolong dicetak miring”. Dengan begitu, web browser yang Anda gunakan akan menampilkan teks secara miring(italic). Contoh lainnya, tag HTML halo semua, sama artinya dengan “Browser, tolong teks halo,semua ditampilkan dengan cetak tebal” yang selanjutnya web browser akan menampilkannya dengan cetak tebal.

Tapi bagaimana jika Anda ingin menampilkan teks tersebut agar tampil dengan teks yang miring dan bercetak tebal? Jika menggunakan HTML, solusinya adalah menuliskan tag HTML sebagai berikut :

teks ini blod dan italic

Yup, masalah selesai dengan tag tersebut. Tapi bagaimana jika Anda memiliki banyak teks yang harus dicetak tebal sekaligus miring? Apakah dengan menuliskan tag HTML seperti contoh diatas? Bisa saja tapi sangat tidak direkomandasikan dan tidak ada orang yang melakukan hal seperti itu. Selain karena harus mengetikkan berulang-ulang, juga akan memperbesar ukuran file HTML. Solusi untuk permasalahan diatas adalah dengan menggunakan CSS.

CSS sebenarnya berguna untuk memberikan perintah tambahan terhadap web browser agar suatu teks/elemen HTML bisa ditampilkan dengan tampilan tertentu sesuai yang dideskripsikan pada perintah stylesheet. Intinya, CSS berfungsi untuk memberikan style pada suatu tag/elemen HTML.

Ada 3 cara dimana kita bisa meletakkan kode CSS, yaitu:

Internal StyleSheet

Internal StyleSheet adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag dan tag . Formatnya bisa seperti contoh dibawah:

Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang Anda buat akan mengandung kode CSS. Cara ini bagus jika Anda hanya perlu untuk memberikan style pada halaman HTML itu saja. Jika Anda ingin agar tiap halaman HTML memiliki style yang berbeda-beda, Anda bisa menggunakan cara ini.

Inline Style

Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode CSS pada file HTML (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:

teks warna merah 

Hasil dari kode diatas adalah:

teks warna merah

Seperti yang bisa Anda lihat, disini kode CSS diletakkan langsung pada elemen paragraf (tag

), dengan menambahkan atribut style dan mengetikkan kode CSS. Cara ini bagus jika Anda ingin suatu elemen memiliki tampilan yang berbeda. Misalnya saja Anda ingin ada teks yang berwarna merah dan ada teks yang berwarna biru.

External StyleSheet

External StyleSheet adalah peletakkan kode CSS pada file yang berbeda. Dimana nantinya Anda akan membuat sebuah file khusus yang berekstensi .css dimana nantinya kode-kode CSS akan diletakkan pada file tersebut. Setelah kode CSS diketikkan pada file tersebut, Anda bisa menghubungkan file CSS dengan file HTML yang Anda buat dengan mengetikkan perintah:

Perintah diatas diketikkan pada bagian head. Atau dengan cara kedua seperti berikut ini:

Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengna mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:

• Maintenance kode CSS lebih mudah
• Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
• Dapat menghemat bandwidth

Yang mana yang lebih baik ?

Dengan banyaknya cara untuk meletakkan kode CSS Anda mungkin bertanya cara yang mana yang sebaiknya dipilih? Jawabannya adalah tergantung kebutuhan. Tapi saya sendiri lebih menyukai menggunakan External StyleSheet karena beberapa alasan yang sudah disebutkan tadi.

Bagaimana jika ketiga cara diatas digabungkan?

Jika ketiga cara diatas digabungkan atau jika Anda menggunakan 2 cara, maka web browser akan membuat style baru hasil dari penggabungan style tersebut dengan prioritas pertama ada pada Inline Style, kedua adalah Inline StyleSheet dan terakhir adalah External StyleSheet.

Maksud dari prioritas disini adalah jika pada External StyleSheet anda mengetikkan kode CSS untuk menampilkan teks warna merah, sedangkan di Internal StyleSheet Anda mengetikkan kode CSS untuk menampilkan teks warna biru, maka hasil yang tampil adalah teks warna biru akan prioritas Internal StyleSheet lebih diutamakan daripada External StyleSheet.

Tampilan berbeda di tiap web browser

Semakin Anda mendalami CSS maka Anda akan semakin sadar bahwa setiap browser mempunyai cara berbeda dalam menterjemahkan kode CSS. Inilah yang membuat sedikit kerja keras bagi para web designer untuk membuat tampilan sebuah halaman bisa tampil sama pada browser yang berbeda.

Pada artikel berikutnya saya akan membahas tentang Syntax CSS. Syntax CSS adalah bentuk kode CSS. Untuk mendapatkan update terbaru, jangan lupa untuk berlangganan via feed. Jika ada pertanyaan silahkan ditanyakan via komentar.

http://majalahweb.com/pengenalan-css/

Step 1: writing the HTML

For this tutorial, I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

Don't use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:

  
Home page

  
Musings

  
My town

  
Links

My first styled page

Welcome to my styled page!

It lacks images, but at least it has style.

And it has links, even if they don't go

anywhere…

There should be more here, but I don't know

what yet.

Made 5 April 2004

  by myself.

(If you are using TextEdit on the Mac, don't forget to tell TextEdit that the text is really plain text, by going to the Format menu and selecting “Make plain text”.)

The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means DOCument TYPE). In this case, it is HTML version 4.01.

Words within <> are called tags and, as you can see, the document is contained within the and tags. Between and there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.

The is where the actual text of the document goes. In principle, everything in there will be displayed, except for the the text inside , which serves as a comment to ourselves. The browser will ignore it.

Of the tags in the example,

introduces an “Unordered List”, i.e., a list in which the items are not numbered. The
• is the start of a “List Item.” The

  is a “Paragraph.” And the is an “Anchor,” which is what creates a hyperlink.

  If you want to know what the names in <…> mean, one good place to start is Getting started with HTML. But just a few words about the structure of our example HTML page.

  • The “ul” is a list with one hyperlink per item. This will serve as our “site navigation menu,” linking to the other pages of our (hypothetical) Web site. Presumably, all pages on our site have a similar menu.
  • The “h1” and “p” elements form the unique content of this page, while the signature at the bottom (“address”) will again be similar on all pages of the site.

  Note that I didn't close the “li” and “p” elements. In HTML (but not in XHTML), it is allowed to omit the

and
tags, which I did here, to make the text a little easier to read. But you may add them, if you prefer.

Let's assume that this is going to be one page of a Web site with several similar pages. As is common for current Web pages, this one has a menu that links to other pages on the hypothetical site, some unique content and a signature.

Now select “Save As…” from the File menu, navigate to a directory/folder where you want to put it (the Desktop is fine) and save the file as “mypage.html”. Don't close the editor yet, we will need it again.

(If you are using TextEdit on Mac OS X before version 10.4, you will see an option Don't append the .txt extension in the Save as dialog. Select that option, because the name “mypage.html” already includes an extension. Newer versions of TextEdit will notice the .html extension automatically.)

Next, open the file in a browser. You can do that as follows: find the file with your file manager (Windows Explorer, Finder or Konqueror) and click or double click the “mypage.html” file. It should open in your default Web browser. (If it does not, open your browser and drag the file to it.)

As you can see, the page looks rather boring…

Step 2: adding some colors

You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)

We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

We need to add a

[etc.]

The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.

Style sheets in CSS are made up of rules. Each rule has three parts:

1. the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;
2. the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;
3. and the value ('purple' and '#d8da3d'), which gives the value for the style property.

The example shows that rules can be combined. We have set two properties, so we could have made two separate rules:

body { color: purple }

body { background-color: #d8da3d }

but since both rules affect the body, we only wrote “body” once and put the properties and values together. For more about selectors, see chapter 2 of Lie & Bos.

The background of the body element will also be the background of the whole document. We haven't given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The 'color' property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden. (We will add some other colors later.)

Now save this file (use “Save” from the File menu) and go back to the browser window. If you press the “Reload” button, the display should change from the “boring” page to a colored (but still rather boring) page. Apart from the list of links at the top, the text should now be purple against a greenish yellow background.

Colors can be specified in CSS in several ways. This example shows two of them: by name (“purple”) and by hexadecimal code (“#d8da3d”). There are about 140 color names and the hexadecimal codes allow for over 16 million colors. Adding a touch of style explains more about these codes.

Step 3: adding fonts

Another thing that is easy to do is to make some distinction in the fonts for the various elements of the page. So let's set the text in the “Georgia” font, except for the h1 heading, which we'll give “Helvetica.”

On the Web, you can never be sure what fonts your readers have on their computers, so we add some alternatives as well: if Georgia is not available, Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs. If Helvetica is absent, Geneva, Arial and SunSans-Regular are quite similar in shape, and if none of these work, the browser can choose any other font that is serif-less.

In the text editor add the following lines (lines 7-8 and 11-13):

[etc.]

If you save the file again and press “Reload” in the browser, there should now be different fonts for the heading and the other text.

Step 4: adding a navigation bar

The list at the top of the HTML page is meant to become a navigation menu. Many Web sites have some sort of menu along the top or on the side of the page and this page should have one as well. We will put it on the left side, because that is a little more interesting than at the top…

The menu is already in the HTML page. It is the

list at the top. The links in it don't work, since our “Web site” so far consists of only one page, but that doesn't matter now. On a real Web site, there should not be any broken links, of course.

So we need to move the list to the left and move the rest of the text a little to the right, to make room for it. The CSS properties we use for that are 'padding-left' (to move the body text) and 'position', 'left' and 'top' (to move the menu).

There are other ways to do it. If you look for “column” or “layout” on the Learning CSS page, you will find several ready-to-run templates. But this one is OK for our purposes.

In the editor window, add the following lines to the HTML file (lines 7 and 12-16):

[etc.]

If you save the file again and reload it in the browser, you should now have the list of links to the left of the main text. That already looks much more interesting, doesn't it?

The 'position: absolute' says that the ul element is positioned independently of any text that comes before or after it in the document and the 'left' and 'top' indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.

'2em' means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.

Step 5: Styling the links

The navigation menu still looks like a list, instead of a menu. Let's add some style to it. We'll remove the list bullet and move the items to the left, to where the bullet was. We'll also give each item its own white background and a black square. (Why? No particular reason, just because we can.)

We also haven't said what the colors of the links should be, so let's add that as well: blue for links that the user hasn't seen yet and purple for links already visited (lines 13-15 and 23-33):

[etc.]

Traditionally, browsers show hyperlinks with underlines and with colors. Usually, the colors are similar to what we specificed here: blue for links to pages that you haven't visited yet (or visited a long time ago), purple for pages that you have already seen.

In HTML, hyperlinks are created with elements, so to specify the color, we need to add a style rule for “a”. To differentiate between visited and unvisited links, CSS provides two “pseudo-classes” (:link and :visited). They are called “pseudo-classes” to distinguish them from class attributes, that appear in the HTML directly, e.g., the class="navbar" in our example.

Step 6: adding a horizontal line

The final addition to the style sheet is a horizontal rule to separate the text from the signature at the bottom. We will use 'border-top' to add a dotted line above the

element (lines 34-37):
[etc.]
Now our style is complete. Next, let's look at how we can put the style sheet in a separate file, so that other pages can share the same style.
Step 7: putting the style sheet in a separate file
We now have an HTML file with an embedded style sheet. But if our site grows we probably want many pages to share the same style. There is a better method than copying the style sheet into every page: if we put the style sheet in a separate file, all pages can point to it.
To make a style sheet file, we need to create another empty text file. You can choose “New” from the File menu in the editor, to create an empty window. (If you are using TextEdit, don't forget to make it plain text again, using the Format menu.)
Then cut and paste everything that is inside the themselves. They belong to HTML, not to CSS. In the new editor window, you should now have the complete style sheet:
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
Choose “Save As…” from the File menu, make sure that you are in the same directory/folder as the mypage.html file, and save the style sheet as “mystyle.css”.
Now go back to the window with the HTML code. Remove everything from the tag and replace it with a element, as follows (line 5):
[etc.]
This will tell the browser that the style sheet is found in the file called “mystyle.css” and since no directory is mentioned, the browser will look in the same directory where it found the HTML file.
If you save the HTML file and reload it in the browser, you should see no change: the page is still styled the same way, but now the style comes from an external file.
The next step is to put both files, mypage.html and mystyle.css on your Web site. (Well, you might want to change them a bit first…) But how to do that depends on your Internet provider.
http://www.w3.org/Style/Examples/011/firstcss
CSS Syntax
Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Kode CSS berbeda dengan kode HTML. Kode CSS tidaklah sulit.
Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.
selector {
    property : value;
}
Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:
body {
    background-color:#cccccc;
    font-family: "Calibri", Verdana, Tahoma;
}
Kode CSS diatas bisa berarti elemen body (tag ) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.
Inheritance/Pewarisan
Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.
Misalnya saja ada file html seperti berikut :
    
Halo apa kabar
    
paragraf halo apa kabar
Dari contoh kode diatas, kita memberikan style pada elemen body (tag ). Dengan begini, maka tag-tag HTML yang ada diantara dan (tag
dan tag
) akan mengikuti style , yaitu memiliki warna latar abu-abu dan menggunakan font Calibri. Agar heading (tag h1) memiliki style yang berbeda, misalnya saja heading menggunakan font Times New Roman, maka harus dibuatkan style lagi khusus untuk heading. Berikut contoh kodenya:
    
Halo apa kabar
    
paragraf halo apa kabar
Pada contoh diatas, ditambahkan style baru untuk elemen heading 1. Dengan begini, heading akan memiliki font Times New Roman, tidak lagi mengikuti style dari elemen induxnya (body).
Walaupun begitu, ada beberapa property pada CSS yang tidak akan di-warisi oleh elemen didalamnya, misalnya saja property margin seperti pada kode dibawah:
body {margin:20px}
Misalnya kita menambahkan property margin pada style body, maka heading 1 dan paragraf tidak akan memiliki margin sebanyak 20px, hanya elemen body saja.
Kombinasi Selector
Untuk menghindari pengetikan ulang style CSS, elemen HTML yang memiliki style yang sama bisa menggunakan selector yang sama dengan cara menambahkan nama elemen dan dipisahkan dengan tanda koma, contohnya :
h1, h2, h3, h4, h5, h6 {
     color: #009900;
     font-family: Georgia, sans-serif;
}
Pada contoh diatas, heading 1, heading 2, sampai heading 6 diset menggunakan style yang sama.
Memberikan Komentar pada CSS
Untuk memberikan komentar pada kode CSS, dimulai dengan tanda /* dan diakhiri dengan tanda */. Contohnya saja:
/* Ini adalah komentar */
Komentar pada CSS tidak akan diproses oleh browser. Komentar berguna untuk mengetikkan sesuatu pada file CSS tapi Anda tidak ingin teks tersebut diproses.
Seperti halnya mempelajari HTML, mempelajari CSS juga bukan merupakan hal yang sulit. HTML dan CSS bukan bahasa pemrograman karena tidak terdapat percabangan (if … else … then) ataupun perulangan ( for, while, do), jadi CSS bukan sesuatu yang sulit untuk dipelajari, hanya perlu banyak latihan.
http://majalahweb.com/css-syntax/#more-39
Cara Membuat Header Untuk Blog
Beberapa teman sering menanyakan cara membuat gambar header untuk blog mereka. So, kali ini akan kubahas cara membuat sebuah gambar header.
Untuk membuat sebuah header, tentu kita perlu program yang bisa mengolah/membuat gambar dalam format bitmap. Ada banyak program yang bisa digunakan, pilih aja yang familiar dengan kamu, ada Adobe Photosop, Corel Photopaint, Macromedia Firework, dan masih banyak lagi. Tapi yang kubahas sekarang adalah yang pake Photoshop.

Sebelum kita mulai membuat gambarnya, ada beberapa hal yang perlu kita siapkan sebelumnya, yaitu:
• Ukuran header yang sesuai.
  Ini harus dilihat sendiri dari template blog yang dipake. Untuk contoh yang akan kita buat, ukuran header ini adalah 780 kali 180 pixel. Sama dengan ukuran header yang sekarang aku pake di blog ini, aku pakai template yang namanya Nyoba-780 buatan mas Isnaini.
  Kalo pake template dari Blogger, ukurannya bisa disesuaikan sendiri (tapi aku pernah nyoba kukasih gambar, gambarnya nggak muncul sebagai background header, mungkin biar muncul ada CSS yang harus dirubah (aku agak katrok kalo soal css, apalagi php..). Bisa juga diakali dengan membuat page element baru tentang Image sih sebenarnya, tapi nggak bisa diletakkan sebagai background header.). Kalo mau digunakan sebagai page element, ukur dulu berapa ukuran maksimal dari letak page element tadi.
• Bahan gambar atau materi yang akan digunakan.
  Ingat bahwa gambar tersebut bakalan nongol terus di blog kamu.
• Siapkan juga makanan kecil dan minuman di samping komputer, siapa tahu waktu keasyikan mbuat gambar merasa laper...

Terus caranya bikin header dengan Photoshop:
1. Buka dulu program photoshop, kemudian buat file baru dengan memilih menu File > New. Pada kotak dialog New, isikan ukuran header yang akan dibuat. Misalnya pada width=780 dengan satuan ukur pixel, terus pada height=180. Jangan lupa pada resolusi harus 72 pixel/inch. Klik OK jika semua ukuran sudah sesuai.
   
   
   
2. Kemudian buat gambar yang kamu inginkan pada file baru ini.
   Gambar header bisa dengan memasukkan gambar lain, kasih tulisan, atau apa aja terserah dengan ide dan kreativitasmu. Kalo bingung, nggak ada ide? Buka aja website dan blog yang ada di internet, banyak sekali kan, tinggal cari aja ide dari gambar-gambar tersebut. Tapi ingat, JANGAN ngopi paste gambar header orang lain terus dipasang lagi, itu sama kayak mencuri. Cari Ide, bukan Curi Ide.
3. Setelah gambar jadi, jika gambar tersebut menggunakan lebih dari satu layer, pilih dulu menu Layer > Flatten Image agar semua layer menjadi satu di layer background.
4. Kemudian simpan (File > Save) dengan format JPEG/JPG atau GIF. Ini agar ukuran file-nya kecil. Jika pake JPEG/JPG aturlah nilai kompresi yang dilakukan pada kotak dialog JPG option yang muncul setelah kamu klik tombol Save. Seberapa banyak kompresi yang diperlukan, itu tergantung kondisi gambar, misalnya ukuran dan warna yang digunakan. Sesuaikan sendiri antara ukuran file hasil jadi dengan kualitas gambar, karena semakin banyak dikompres maka kualitas gambar akan turun.



5. Setelah gambar udah jadi, tinggal diupload aja pakai software blog kamu.


Misalnya kamu pake Blogger, gunakan page element-nya. Kalo hosting sendiri, upload di cpanel-nya. Atau bisa juga diupload dulu ke web yang melayani image hosting, misalnya Photobucket, ImgPlace, atau yang lain.
http://sadewo-photology.blogspot.com/2007/07/cara-membuat-header-untuk-blog.html
Cara buat blog header halaman blogger (blogspot) dengan file flash “swf”.
Pernahkah berkeinginan membuat header blog anda di blogspot dengan menggunakan file animasi berekstensi swf ? Meskipun ukuran file bisa dibilang lumayan besar sebab menggunakan fileswf, namun seukuran hosting blogger ini tidak begitu masalah, kendala hanya akan muncul bila akses internet kita lambat untuk itu tidak ada salahnya bila ingin mencoba buat header image dengan file flash. Lihat contoh klik disini.
Untuk membuat file swf tersebut bisa menggunakan program adobe flash (macromedia flash), flash web design, swishmax dan program-program flash lainnya.
Setelah file atau image untuk header tersebut selesai dibuat, sekarang giliran menyimpannya disebuah hosting yang mau menyimpan file-file berextensi swf. Gunakan web http://sites.google.com untuk menyimpan file swf tersebut. Disini anda akan diminta untuk membuat sebuah halaman tempat penyimpan file swf tersebut.
Setelah selesai, cari “attachment” kemudian pilih file swf yang ingin anda upload. Setelah berhasil di upload sekarang letakkan kode berikut pada blog anda diantara
headerimg‘> dan
“headerimg” sebenarnya ini tidak mutlak, artinya tergantung parameter-parameter di blog anda, yang jelas ini mengartikan pada bagian header. Tulisan warna biru adalah lokasi file yang anda upload tadi, untuk mengetahuinya anda klik kanan kemudian klik “copy link location” dari file yang telah diupload di http://site.google.com dan paste untuk mengganti tulisan warna biru diatas.
Sedangkan untuk ukuran width dan height tergantung dari blog anda.
Cara Memasang Header ke Blog

1. Login ke acount blog anda
2. kemudian klik Tata Letak
3. klik Edit HTML
4. Cari kode dibawah

/* Header */
#headerimg {
position: relative;
padding: 50px 15px 10px 28px;
margin-bottom: 0px;
background:url(http://4.bp.blogspot.com/
_0FbXVm7r-Wc/R6VREzbxX5I/AAAAAAAAALw/Gp64u9xI_pQ/
s400/header.jpg) fixed ;
height:90px;

ganti code yang berwarna merah dengan code seperti ini:

quality="high" bgcolor="white" width="lebar" height="tinggi"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash">
Ganti code yang berwarna hijau, sesuaikan dengan parameter-parameter blog anda.

5. Simpan
http://www.taktiku.com/2008/08/cara-memasang-header-flash-swf-pada.html