Tempat-tempat untuk membuat template blog - Template Generator Online

Membuat dan men-Design sebuah template Blog memang tidak mudah, dan tidak juga terlalu susah. Jika bosan dengan template-template yang tersedia, solusi yang terbaik adalah membuat sendiri design templatenya. Untuk membuat template kita harus memahami struktur sebuah template tersebut. Misalnya anda menggunakan blogspot, anda cukup mempelajari bahasa html, css dan java script. Tetapi jika anda menggunakan wordpress, kita harus memahami html, css, script php, dan javascript.

Mungkin hal ini juga yang membuat blogger yang menggunakan blogspot sebagai sarana pertama belajar nge-blog. Untuk mempermudah kita tanpa harus mempelajari semua bahasa pemrograman web diatas, kita bisa membuat template blog dengan menggunakan Template Generator. Dibawah ini saya akan sharing beberapa situs penyedia template generator yang dapat dicoba.

1. CSSEZ.
CSSEZ ini adalah generator template online untuk blog Wordpress, movable type, Live Door Blog, dan Amoeba Blog. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.

2. Drupal Theme Generator
Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.

3. Firdamatic
Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.

4. PsycHo
Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.

5. Templatr
Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.

6. Weebly
Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.

7. WordPress Theme Generator
Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.

8. iStylr
Bagi yang senang edit css dan yang lainnya bisa mampir disini.

9. PixoPoint
Pixo point adalah template generator yang didesain bagi anda yang ingin membuat desain untuk website anda tanpa harus menyentuh sedikit pun kode-kode HTML. Tidak seperti Generator lainnya, semua kreasi template yang ada disini hanya bisa digunakan untuk WordPress. Begitu banyak pilihan modifikasi yang tertera di control panel, anda jadi lebih memudah merubah disain anda kapanpun juga.

10. DoTemplate
doTemplate menawarkan berbagai jenis catalog web template gratis. Semua template yang di hadirkan di sini sangat mengundang selera dan cukup bisa memikat anda. Cukup memilih warna, huruf dan beberapa efek-efek grafik untuk membuat kreasi template anda yang baru.

11. Pimp My Profile
Template Generator yang satu ini telah menyediakan fasilitas yang dapat dipilih untuk membuat blog. Kita dapat dengan luluasa men desain template yang kita inginkan

12. Page Colomn Layout Generator
Bahkan Template Generator yang satu ini telah menyediakan pilihan colomn yang dapat di pilih mulai dari 1 colomn sampai 5 colomn

Sebenarnya masih ada banyak lagi tempat-tempat membuat template secara online, anda bisa browsing sendiri di google. 

Semoga Bermanfaat..!!

Cara Mengetahui id dan class dari suatu widget atau kolom

Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten area pasti memiliki id tersendiri. Id ini merupakan nama dari widget tersebut seperti halnya header, sidebar, footer dan lain sebagainya. Untuk si pembuat atau designer template tersebut pasti tidak sulit untuk mengubah suatu area baik itu lebar, tinggi posisi dan lain sebagainya dari template tersebut. Namun berbeda halnya dengan kita yang hanya bisa memakai alias menikmati hasilnya.

Nah, permasalahannya disini adalah ketika ada sesuatu yang terlihat agak janggal, kemudian kita ingin memperbaiki dengan mengedit kode CSS-nya, atau kita ingin menambahkan suatu area disekitarnya, maka kita mau atau tidak mau kita harus tahu terlebih dahulu id dari kolom widget yang kita rubah. Id ini sendiri haruslah bersifat unik alias tidak boleh sama. Jadi tidak semua widget itu memiliki nama yang sama. Sehingga ketika sebuah template ini didesign, terutama template yang memiliki banyak kolom maka akan semakin banyak pula id-id yang akan diberikan oleh si designer.

Sebagai contoh misalnya sebuah template yang mempunyai 2 kolom sidebar, maka si designer ini pasti akan memberikan id tersendiri dari masing area. Pemberian id ini tidak ada ketentuannya. Id Sidebar tersebut bisa saja sidebar pertama diberi nama dengan sidebar-left dan sidebar kedua diberikan id sidebar-right, atau sidebar1 dan sidebar2, atau id-id yang lain misalnya yang satu id-nya sidebar-left, tapi sidebar yang kedua diberikan id kolom-tambahan.

Agar kita bisa mengetahui id dari suatu widget ini caranya sangat gampang. Kita tidak perlu memeriksa dan mengeditnya satu persatu. Caranya adalah kita cukup menggunakan fasilitas inspect element. Jika belum tahu tentang inspect element ini, silakan baca terlebih dahulu postingan tentang inspect element disini.

Disini saya juga akan coba memberikan satu contoh kecil. Saya akan contohkan bagaimana saya melihat id salah satu kolom yang ada di blog ngalor-ngidul ini langsung.

1. Pertama letakkan mouse pada widget yang ingin kita ketahui id-nya, sebagai contoh disini saya akan melihat id-id dari widget slider yang ada di homepage blog ini.
2. Klik kanan pada browser. Saya sendiri disini menggunakan browser google chrome. Jadi Kalau mau hasilnya sama, maka saya sarankan anda juga menggunakan google chrome.
3. Pilih inspect element sehingga kita akan mendapatkan hasil seperti dibawah ini. Jika kurang jelas klik saja gambarnya.

4. Sekarang coba kalian perhatikan bagian yang saya lingkari dengan garis merah tebal. Disitu kita bisa lihat ada banyak sekali kode source dan/atau kode HTML dari blog ini. Dan disetiap tag yang berawalan <div> pasti disertai dengan kata id atau class.

Setelah kita tahu mengetahui id dari widget yang ingin kita rubah tersebut maka kita tidak perlu takut melakukan kesalahan dalam mengedit template tersebut. Karena untuk setiap id tersebut juga mempunyai kode CSS-nya sendiri sesuai dengan id-nya. Kode CSS dari id tersebut terdapat pada kolom inspect element disebelah kanan. Kode CSS tersebut juga akan berubah setiap kali kita melakukan inspect element diarea yang berbeda. Untuk melihat apakah widget yang ingin kita edit tersebut sudah benar atau tidak, maka dilayar monitor kita akan suatu tanda seperti yang terlihat di gambar dibawah ini.

Dengan demikian maka untuk pencarian id ini pun selesai. Heheee.....

Pengenalan JAVASCRIPT Fungsinya

Seperti halnya dalam pelajaran CSS, untuk lebih menguasai pemakaiannya, maka kita harus tahu dulu apa sich javascript itu?? Dan fungsinya untuk apa??

Javascript adalah bahasa skrip yang diletakkankan dalam kode HTML dan diproses disisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Dengan demikian bisa dikatakan bahwa javascript itu berfungsi sebagai pemanggil suatu fungsi dari suatu argumen, baik itu berupa bilangan, parameter, variable, value, properti, metode dan lain sebagainya dengan menggunakan even-even tertentu.

Penggunaan javascript sendiri bisa dilakukan dengan menyisipkannya langsung ke dalam kode html (Internal) atau dengan melakukan pemanggilan dari luar/hosting tertentu (external). Penulisan javascript ini sendiri biasanya diletakkan didalam tag <body> atau pada umumnya (khususnya diblogspot template) diletakkat diatas tag </head>. Cara penulisannya sendiri sebenarnya sangat sederhana yaitu kita hanya perlu menuliskan nama fungsi yang ingin kita panggil beserta parameter yang mengukutinya.

Contoh penulisan Internal:

<script type="text/javascript">
document.write(“Test”);
</script>

Contoh penulisan External:

<script type="text/javascript" scr='http://.../test.js'> 
</script>

Contoh penggunaan dalam Blogspot HTML/XML.

<HTML>
<HEAD>
<title> <h1>Belajar javascript</h1> </title>
<b:skin><![CDATA[
Tempat peletakan Kode CSS
]]</b:skin>
<script type="Javascript">
Kode javascript di sini
</script>
</HEAD>
<BODY>
Kode HTML di sini
</BODY>
</HTML>

Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.

Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.

Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:
Kode HTML

Anggap Disini Adalah Content.

Kode CSS

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}

Hasil:

Anggap Disini Adalah Content.

Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.

border-radius: 15px; /*Kode pembuat lengkungan sudut*/

Sehingga kode CSS-nya menjadi seperti ini.

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}

Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.

Anggap Disini Adalah Content.

Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.

- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/

Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.

1. Border-radius: 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

2. Border-radius: 0px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

3. Border-radius: 15px 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

4. Border-radius: 0 15px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 15px;

5. Border-radius: 15px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

6. Border-radius: 0px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

7. Border-radius: 15px 0 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

8. Border-radius: 0 15px 15px 0;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;

Dan Lain Sebagainya........

Cara Membuat Teks bayangan dan Text 3D

Pada posting sebelumnya, kita sudah membahas tentang Cara membuat efek bayangan atau Box Shadow. Nah, pada postingan kali ini kita akan coba membahas Cara Membuat Teks bayangan dan Text 3D. Untuk Cara membuat teks bayangan ini proses dan cara kerjanya sama persis dengan membuat efek bayangan atau Box Shadow. Jadi kalau belum membaca postingannya silakan baca dulu posting sebelumnya.

Dalam design blog atau website, pemakaian teks dengan bayangan ini sendiri agak jarang dipakai, karena jika terlalu berlebihan maka bukannya website atau blog menjadi semakin bagus, tapi malah menjadi sulit untuk dibaca. Yang paling sering dipakai paling hanya efek bayangan kecil seperti yang dipakai diblog ini.

Untuk sedikit contohnya kalian bisa lihat perbedaannya di bawah ini.

#teks-bayangan{background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
}

Hasil sebelum kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari teks-shadownya.

text-shadow: 2px 2px 0 red;

Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.

#teks-bayangan{
background: #666;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code box bayangan--*/
text-shadow: 2px 2px 0 red; /*--code teks bayangan--*/
}

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.

2. Cara pembuatan efek bayangan ganda atau lebih.

Untuk cara pembuatan bayangan efek ganda atau lebih ini serta efek bayangan 3D, prinsipnya tetap juga sama dengan pembuatan efek bayangan ganda dicara pembuatan box shadow. Jadi saya hanya memberikan contohnya disini. Untuk pembuatan efek 3D ini kita hanya perlu sedikit kreatif karena untuk pembuatannya kita akan membutuhkan sangat banyak kode bayangannya dan pengaturan posisi serta blurnya.

Berikut ini adalah hasil-hasil kode CSS dan contohnya.
1. Letter Press.

#letter-press{
text-shadow: 0px 1px 1px #fff;
}

Letter Press

2. Text shadow Stereoscopic.

#stereoscopic{
text-shadow: 4px 0 0 blue,-4px 0 0 red;
}

Stereoscopic

3. Neon.

#neon{
text-shadow: 0 0 1px #2ec728, 0 0 3px #2ec728,
0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}

Neon Teks

4. Efek teks terbakar.

#teks-terbakar{
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 
2px -10px 6px #fd3, -2px -15px 11px #f80, 
2px -18px 18px #f20;
}

Efek Teks Terbakar

5. Efek Teks 3D

#teks-3D{text-shadow: 
1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 
1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 
4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 
4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 
7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 
7px 8px #bbb, 8px 8px #ddd;
}

Teks Efek 3D dengan CSS

Pastikan perpaduan warna pada background dan teks shadow ini adalah warna yang serasi agar terlihat lebih menarik. Semoga bermanfaat...

Cara membuat efek bayangan atau Box Shadow di blog

Setelah sebelumnya kita membahas jenis-jenis border dan cara membuatnya, maka diposting kali ini kita akan coba membahas cara membuat box-shadow atau efect bayangan. Jika teman-teman sering menggunakan image editor atau text editor seperti photoshop atau microsoft office, maka pasti teman-teman sudah tidak asing dengan istilah ini. Tapi disini kita tidak akan menggunakan image editor atau text editor. Tapi kita akan membahas cara pembuatannya dengan menggunakan CSS.

Untuk pembuatan box-shadow ini sendiri meski hanya memakai sedikit kode perintah, tapi kita bukan hanya bisa membuat satu bayangan saja, tetapi kita juga bisa membuat lebih dari satu bayangan ganda atau yang disebut bayangan ganda, bahkan lebih dari 2 bayangan pun bisa kita lakukan. Kodenya sangat sederhana, jadi sangat mudah untuk kita pahami. Kita hanya perlu mengatur koordinat jarak horizontal dan koordinat jarak vertikal serta menentukan warna yang akan kita pakai.

Jika dibuat rumus maka rumusnya kira-kira adalah seperti ini:

{box-shadow: (koordinat X) (koordinat Y) (radius blur) (warna);}

Keterangan:
Koordinat X =  Berfungsi untuk  menspesifikasikan jarak horizontal bayangan. Jika sebuah nilai berisi angka positif (misal: 10px) akan membuat bayangan di sebelah kanan kotak sebesar 10px, sedangkan bernilai negatif (misal: -10px) maka akan memberikan bayangan disebelah kiri.

Koordinat Y =  Berfungsi untuk menspesifikasikan jarak vertikal bayangan. Jika nilai berisi positif (misal: 10px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (misal:-10px) akan memberikan bayangan disebelah atas.

Radius Blur =  Berfungsi untuk  menspesifikasikan radius dari blur yang dihasilkan. Nilai default adalah 0, yang berarti tidak ada blur. Nilai positif berarti meningkatkan kabur, sedangkan nilai negatif berati menyusutkan bayangannya.

Warna         =  Berfungsi untuk  menspesifikasikan warna bayangan.

1. Efek bayangan Tunggal/Satu bayangan.
Contoh penulisan awal.

{box-shadow: 0 0 10px #red;} 

Cara penggunaan:
Sebagai contoh kita anggap kita sudah memiliki kode HTML seperti ini:

disini adalah konten

Dan kode CSSnya misal seperti ini.

#box-bayangan{
background: #ccc;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
} 

Hasil yang kita dapatkan dari kode CSS dan HTML tersebut hanya akan terlihat seperti dibawah ini.

Hasil sebelum penambahan kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari box-shadownya.

box-shadow: 0 0 10px red;

Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.

#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan--*/
}

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.

2. Cara pembuatan efek bayangan ganda atau lebih.

Untuk cara pembuatan bayangan efek ganda atau lebih ini, prinsipnya tetap sama dengan pembuatan efek satu bayangan. Kita hanya perlu memberikan sedikit tambahan saja. Coba kalian perhatikan perbedaan dua kode dibawah ini.

box-shadow: 0 0 10px red;

box-shadow: 0 0 10px red, 0 0 30px blue;

Pada kode kedua kita hanya menambahkan tanda koma(,) kemudian memberikan tambahan kode bayangan yang baru. Untuk pemberian kode kedua nilai/angka penentu harus lebih besar dari kode yang pertama dan warna yang berbeda pula.

#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code bayangan tunggal--*/
}

#box-bayangan{
background: #ccc;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red, 0 0 30px blue; /*--code bayangan ganda--*/
}

Hasil yang akan kita dapatkan adalah seperti dibawah ini.

Hasil penambahan efek bayangan ganda dengan CSS

Hal ini juga berlaku jika kita ingin menambahkan lagi bayangan yang lebih banyak. Siapa tahu kalian suatu saat bisa membuat box-shadow dengan efek pelangi. Kalau saya cuma bisa membuat yang aneka warna aja seperti dibawah ini. Hehe..

Kotak 3D beraneka warna dengan CSS

Untuk posting berikutnya kita akan sedikit membahas tentang hal yang serupa yaitu cara membuat text-shadow dan text 3D

Teks shadow dan teks 3D dengan CSS

Jenis-jenis border dan cara pembuatannya

Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini juga. Yaitu Jenis-jenis border dan cara pembuatannya. Seperti yang kita ketahui border ini selain sebagai pembatas, juga sekaligus berfungsi untuk mempercantik tampilan blog.

Penulisan border ini sendiri juga bisa dengan memberikannya secara individu atau arahannya: yaitu atas, bawah, kiri, kanan. Untuk pengaturan dan properti CSS border ini kita bisa menggunakan perintah dari keterangan CSS dibawah ini.

Property Border:

1. Border-color : berfungsi untu menentukan warna.
Cara penentuan warna dari border ini bisa langsung dengan menyebutkan nama dari warna tersebut dalam bahasa inggris. Contoh penulisan:

border-color:red;
border-color:blue;
dsb..

Atau juga dengan menggunakan hex-code atau rbg. Contoh :

border-color:#000; = Hitam pekat, 
border-color:#FFF; = Putih,
dan lain sebagainya.

border-color:rgb(255, 255, 0); untuk warna kuning, 
border-color:rgb(0, 0, 255); untuk warna biru.
Dsb..

Contoh: Property Border-color Individu

border-top-color: red;
border-right-color: #FF6600;
border-bottom-color: rgb(128, 0, 128);
dsb

Untuk menentukan warna dalam bentuk kode ini kita bisa menggunakan color picker yang ada pada program-program design atau bisa juga dengan mencarinya di internet langsung. Ada banyak kok situs yang menyediakannya. Bahkan diblogger sendiri, untuk yang type sederhana kita bisa langsung mendapatkannya di bagian setting template melalui dahsboard kita. Atau jika mau anda juga bisa memasangnya di blog sendiri kalian bisa mendapatkan scriptnya diposting Cara membuat Color Picker diblog.
2. Border-style  : berfungsi untuk menentukan style atau pola dari border.
Value Border-Style antara lain:

Contoh penulisan:

border-style:solid, 
border-style:double.
Dsb..

Contoh: Property Border-style Individu

border-top-style:solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;

3. Border-width: berfungsi untuk menentukan ketebalan dari border.
Untuk penentu ketebalan border kita bisa kode initial, medium atau thick. Namun umumnya dalam proses design website atau template blog, yang biasanya digunakan satuan panjang seperti px, em, cm, in, dsb.

border-width:1px; 
border-width: 2em;
Dsb..

border-top-width: 1px
border-right-width: 2px;
border-bottom-width: 1em;
border-left-width: cm;
Dsb..

Namun pada umumnya tidak semua kode-kode tersebut pasti kita pakai. Biasanya kita juga hanya menuliskannya secara singkat. Untuk penulisan singkat ini kita gunakan jika border yang ingin kita buat memilik style, warna, dan ketebalan yang sama. sebagai contoh kita ingin membuat border kolom kontent dengan border property sebagai berikut: Ketebalan border = 5px Style border = ridge dan warna border = merah. Maka untuk penulisan secara individunya kita akan menuliskan seperti ini.

border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;

border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;

Anggap disini adalah content

Namun karena border yang ingin kita buat memilik style, warna, dan ketebalan yang sama, maka penulisannya cukup dengan kode seperti dibawah ini:

border: 5px ridge red;

Dan penulisan kode singkatnya ini memilik sifat otomatis. Jadi meski penulisannya terbalik-balik juga tidak masalah.
border: 5px ridge red; atau,
border: ridge 5px red; atau
border: red 5px  ridge;
dsb,,
hasil yang didapatkan adalah sama.

Pengertian Border, Padding, Dan Margin Pada CSS

Jika kita sering menggunakan atau mengetik sesuatu dengan program-program text atau image editor, maka kita pasti sering menggunakan Border, Padding, Dan Margin untuk merapikan tulisan atau pun posisi gambar yang kita buat. Dalam proses design website ataupun template blog juga kita pasti akan menggunakan istilah tersebut.

Border : Adalah garis tepi atau garis pembatas dari komponen.
Padding : Menentukan jarak komponen body atau Ukuran jarak bagian dalam ke border
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak diluar garis Border

Sebetulnya apa sich border , padding, dan margin itu??

Dan fungsinya apa??

Kapan penggunaanya??

Agar lebih mudah dimengerti maka kita bisa langsung praktek pada gambar dibawah ini. Pada posting kali ini kita akan sedikit menggunakan trik yang saya bahas di posting sebelumnya yaitu tentang Inspect Element. Jika belum baca maka silakan baca dulu postingannya disini.

Kalau sudah membaca dan sedikit mengerti tentang inspect element ini, maka langsung saja kita masuk ke tutorialnya.

1. Letakkan mouse pada gambar -> klik kanan -> Pilih Inspect Element.

Pada bagian yang saya lingkari dengan warna merah kalian sudah bisa melihat kode CSSnya. Namun karena kita hanya ingin melihat fungsi dari Border, Padding, Dan Margin, maka kita tidak langsung mengetikkan kode secara langsung. Oleh sebab itu maka:

2. Klik satu kali pada tulisan Style sehingga bagian tersebut tertutup kemudian klik pada bagian metrics sehingga kita akan mendapatkan seperti dibawah ini.

3. Disitu sudah ada keterangan tentang dimana posisi border, padding dan marginnya sehingga kita tinggal rubah angka-angkanya saja. Sekarang kalian isi/rubah saja angka-angka tersebut sesuai selera kalian. Caranya klik saja pada bagian tanda - atau angka-angka yang ada.

Sebagai contoh:

Pada kolom margin ganti semua tanda - dengan angka 3, 5, 7, atau 30.

Pada kolom border ganti angka 3 juga ganti dengan angka yang sama.

Demikian juga pada kolom padding, ganti semua angka 2 dengan angka sesuai selera kalian.

Waaaaa...

Gambar sama blog ane hancur...

Tenang saja... Kalian ganti seribu kali pun setelah di refresh blognya akan kembali normal kok. Karena fungsi dari inspect element ini kan hanya agar kita lebih mudah melihat hasil preview yang kita inginkan.

Heheee...

Nah..

Gampang bukan??

Kalau kalian suka dengan artikel-artikel blog ini atau mau tahu cara-cara mudah dalam belajar design blog lebih lanjut, kalian tunggu saja postingan berikutnya... Kalian bisa mendapatkan kabar atau posting terbarunya lewat email kalian. Gratis kok. Tinggal masukkan saja email kalian di bagian subcriber di samping.

Cara membuat dan membagi Kolom dengan CSS di blogspot

Setelah tahu sedikit bagian-bagian blog dan cara agar lebih mudah melihat hasil design yang kita lakukan, sekarang kita akan mulai belajar mengotak-atik alias mendesign template blog sendiri. Pada dasarnya semua website ataupun blog adalah sekumpulan table atau kolom. Oleh sebab itu, hal yang paling awal yang akan kita pelajari adalah Cara membuat dan membagi sebuah kolom.

Langsung saja kita coba ke contoh-contohnya.

Cara Pembuatan/Menambah 1 kolom dibawah header.
Untuk pembuatan 1 kolom ini sangatlah mudah. Bahkan kita bisa saja membuatnya tanpa code CSS sama sekali. Misalkan kita ingin membuat 1 kolom dibawah header maka pertama kita tinggal cari kode yang mirip seperti ini:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
<b:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>

Kemudian kita tinggal membuat atau menambahkan sedikit kode HTML seperti dibawah ini.

<div id="kolom-baru">
<b:section class='header' id='kolom-baru' preferred='yes'/>
</div>

Namun tentu saja hasilnya kadang kurang sesuai dengan yang kita inginkan. Misalkan kita ingin kolom tersebut mempunyai border tipis warna hitam. Maka kita yang selanjutnya cari kode ]]></b:skin> dan letakkan kode CSS seperti ini.

#kolom-baru{
border: solid 1px black; /*--Warna Border--*/
width:100%; /*--lebar kolom baru--*/
}

Cara Pembuatan/Menambah/membagi kolom dibawah header.
Berbeda halnya dengan pembuatan 2 kolom atau lebih. Untuk pembuatannya maka kita harus membuat dan menentukan ukuran lebar bahkan terkadang tinggi dari kolom yang ingin kita bagi. Untuk ukuran penentu lebar atau tinggi ini kita bisa menggunakan ukuran %, Pixel, em, atau yang lain.

Pertama kita buat kode HTML nya terlebih dahulu. Tempat peletakannya sama dengan pembuatan 1 kolom.

<div id='kolom-baru'>
<div id='kolom-baru1'>
<b:section class='kolom-baru1' id='kolom-baru1' preferred='yes'/>
</div>
<div id='kolom-baru2'>
<b:section class='kolom-baru2' id='kolom-baru2' preferred='yes'/>
</div>
</div>

Kemudian tambahkan juga kode CSS nya

#kolom-baru{
border: solid 1px black; /*--Warna Border--*/
width:100%; /*--lebar kolom baru--*/

#kolom-baru1{
width: 49%; /*--lebar kolom baru1--*/
float: left; 
}
#kolom-baru2{
width: 49%; /*--lebar kolom baru2--*/
float: right; 
}

Demikian juga dengan pembagian kolom menjadi 3 dan 4 atau bahkan 5 kolom. Yang paling utama adalah menentukan lebar atau tinggi area yang ingin kita bagi. Hal ini juga berlaku sama dengan jika kita ingin membuat/menambah/membagi kolom di yang lain. Entah itu diatas header, dibawah header, di atas footer, atau pun yang lain.

Dan ingat..!!! Setiap browser itu memiliki sifat atau kemampuan yang berbeda dalam pembacaan kode. Perbedaan 1px saja bisa menyebabkan blog yang terlihat rapi di google chrome, tapi bisa saja terlihat hancur di mozilla firefox. Oleh sebab itu, selalu cek hasil akhirnya dan pastikan tidak ada masalah walau diakses lewat browser manapun.

Sekilas Tentang Pengertian dan fungsi CSS

Jika kita sering mencari tutorial-tutorial tentang blog, maka hampir bisa dipastikan kita pasti sering bertemu dengan yang namanya CSS. Sebenarnya apa sich CSS itu?

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web yang digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Penggunaan CSS ini tidak lepas dari kode-kode HTML. Ibarat kata kita adalah Arsitek yang akan membangun sebuah rumah, maka paling tidak kita harus mengetahui secara pasti mulai dari ukuran tanahnya. Kemudian seberapa luas rumah yang ingin kita bangun, berapa buah dan berapa luas kamar, ruang tamu, beranda, serta ruang utamanya.

Untuk bisa melihat perbedaannya maka anda bisa mencoba langsung dengan mengetikkan atau mengcopy kode dibawah ini di notepad.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Percobaan HTML saya yang pertama</title>
</head>

<body>
<!-- Isi utama -->
<h1>Halaman pertama</h1>

<p>Selamat datang ke halaman pertama saya!

<p>Halaman ini tidak ada gambar, hanya berisi berapa kata.</br>
Tidak memiliki link yang bisa merujuk kemana-mana. </br>
Harap maklum karena ini hanyalah halaman percobaan…</br>
<p>Disini seharusnya ada lebih banyak lagi,</br>
tetapi saya belum tahu apa yang ingin saya tulis lagi.
<address>Dibuat 15 Desember 2011</br>
oleh diriku sendiri.</address>

</body>
</html>

Simpan hasilnya dengan format .html (* contoh: percobaan pertama.html) dan jangan lupa untuk mengubah extensi atau type file menjadi all files.

Maka setelah dibuka kira-kira kita hanya akan mendapatkan hasil seperti ini:

Setelah kita lihat hasilnya, pasti kita akan merasa banyak sekali kekurangan. Hal itu di karenakan memang karena disitu kita tidak melihat ada style sama sekali.

Nah, kira-kira disinilah fungsi dari CSS ini. Dalam pembuatan sebuah website atau blog, CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse hover, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, bahkan untuk membuat bayangan dari objek dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Oleh karena itu pula, untuk mengerti CSS ini maka mau tidak mau, paling tidak kita harus sedikit tahu tentang HTML.

Sekarang kita akan berikan tambahan sedikit polesan dengan CSS.
Semisalnya kita ingin Website/Blog kita mempunyai latar warna hitam dan tulisan putih. Maka kita cukup menambahkan kode seperti dibawah ini dan meletakkannya atas kode </head>.

<style type="text/css">
  body {
  color: white;
  background-color: black; }
</style>

Maka kita langung akan mendapatkan hasil seperti yang kita inginkan.

Nah, disini kita telah melihat sedikit fungsi dari CSS ini. Hanya dengan penambahan 2 baris kode saja, tapi sudah bisa membuat pengaturan yang sedemikan rupa. Tentu saja semua tidak berhenti disitu saja. Seperti yang sebelumnya dikatakan, bahwa dengan kode CSS ini kita bisa gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse hover, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, bahkan untuk membuat bayangan dari objek dan parameter lainnya.

Mempermudah Ujicoba design dengan Inspect Element

Dalam posting sebelumnya yaitu tentang persiapan yang sebaiknya kita lakukan agar lebih nyaman dalam belajar design template, saya ada sedikit menyinggung istilah Inspect Element. Buat teman-teman yang udah jago design pasti tahu tentang hal ini. Karena memang dengan adanya fitur Inspect Element ini proses design template ini akan 1000 kali lebih mudah.

Kenapa saya bilang demikian??
Karena dengan menggunakan fasilitas ini kita dapat melihat struktur code sesuai yang ditampilkan pada halaman web secara langsung. Code yang ditampilkan dalam inspect element tentunya merupakan code-code client-side, meliputi HTML, CSS dan JavaScript. Melalui fasilitas ini kita dapat melihat struktur code dan juga hasil tampilan yang kita lihat dalam browser. Kecuali Mozilla Firefox, Browser-browser populer saat ini seperti Opera dan Google Chrome telah menyediakan fasilitas ini. Fasilitas ini sudah terdapat secara langsung saat pertama kali menginstal.

Khusus Mozilla Firefox, untuk dapat menggunakan inspect element kita harus menambahkan sebuah add-on yaitu Firebug. Cara instalnya cukup mudah kok. Kita tinggal kunjungi Firebug untuk mendapatkan add-on inspect elementnya, install dan restart browser firefoxnya.

Cara penggunaannya pun sangat mudah.

1. Kita tinggal letakkan mouse pada bagian yang ingin kita lihat element dan code sourcenya.
2. Lalu klik kanan. 
3. Kemudian klik Inspect Element yang biasanya berada paling bawah dari option yang muncul. 

Untuk system inspect element yang terbaru, akan ada banyak sekali bagian-bagian yang bisa kita gunakan. Namun untuk tahap awal maka kita cukup menggunakan 3 menu element saja.

3 menu utama dalam fitur Inspect Element ini yaitu:

1. Elements :
   Pada menu elements kita dapat melihat struktur disain dari suatu halaman web yang di tampilkan dalam bentuk script atau kode dimana pada menu ini setiap elemen telah disusun berdasarkan posisi script dan setiap elemen halaman telah dikelompokkan masing-masing. Dengan fitur ini kita dapat dengan jelas melihat struktur desain dari halaman tersebut sesuai dengan coding asli yang telah di buat oleh programmer. Baik itu lebar area, tinggi area, background yang digunakan, komposisi warna yang dipakai dan lain sebagainya.
2. Resources :
   Merupakan tampilan detail dari elemen-elemen halaman web seperti gambar dan style CSS yang digunakan (lebih mengarah ke interface web). Pada menu kita dapat melihat source lengkap dari setiap elemen gambar dalam halaman web, mulai dari gambar background, header, widget, icon, banner, dsb. bahkan kita bisa mendownload elemen tersebut dengan langsung menuju ke source yang ditunjukkan oleh gambar. Kelebihannya adalah pada menu ini setiap gambar dapat di preview secara langsung bahkan resolusi sebenarnya dari gambar tersebut juga akan ditampilkan.
3. Scripts :
   Isi menu ini sama saja dengan isi halaman yang muncul pada saat kita melakukan view source pada halaman web.

Nah, Setelah panjang lebar menjelaskan tentang inspect element ini mungkin akan lebih mudah dipahami jika kita bisa melihat sedikit triknya langsung. Tenang saja, saya sudah siapkan satu video kok. Nanti kalian juga bisa cari sendiri di youtube tentang cara penggunaan atau fungsi dari inspect element ini. Atau jika kalian sabar, kalian bisa tunggu posting berikutnya.

Persiapan pertama untuk belajar design template blogger

Saat pertama mulai blogging, terkadang saya sebagai blogger baru merasa malu dengan tampilan blog saya sendiri. Apa lagi jika kebetulan saat blogwalking saya menemukan blog-blog para master dan ditambah lagi dengan ahli design.

Oleh sebab itu pula, akhirnya sedikit-demi sedikit saya juga belajar design blog saya sendiri. Namun karena kurangnya pengetahuan di bidang dasar-dasar design terasa begitu sulit untuk memahami setiap tutorial yang coba saya pelajari. Maka untuk postingan kali ini saya coba untuk menyimpulkan sedikit demi sedikit agar lebih mudah dipahami.

Yang pertama adalah apa saja yang dibutuhkan
1. Komputer
Yang paling penting dari design blog atau website adalah tentu saja sebuah komputer. Tapi sangat disarankan komputer yang digunakan dengan spesifikasi minimum sebagai berikut:

- Operating Sistem: Windows XP/Windows Vista/Windows 2000/Windows 7 atau yang setara atau lebih tinggi.
- Processor: Intel Core Duo 4 2.0 GHz or equivalent AMD Athlon 64 3000 +
- Memory: 1 GB (Windows XP) / 2GB (Windows Vista / 7)
- Hard disk dengan kapasitas minimum 80gb / 160gb / lebih tinggi.
- Graphics Card: 3D-graphics adapter with 256 MB memory, compatible with DirectX ® 9.0 and supports Pixel Shader 3.0 (Nvidia ® GeForce ® 8600 GT / ATI ® Radeon X1950 Pro or better)
- Monitor dengan kemampuan resolusi minimum 1280×768 atau 1360×768 pixel atau lebih tinggi.

Saya bukan bilang jika anda memiliki komputer dengan spesifikasi dibawahnya tidak bisa. Tetapi saya bisa menjamin jika anda ingin belajar dengan nyaman maka setidaknya anda membutuhkan komputer dengan spesifikasi seperti yang saya sebutkan di atas.

2. Jaringan Internet
Selanjutnya yang pasti adalah jaringan internet. Tentu saja hal ini sangat penting karena kita pasti harus melihat hasil dari ujicoba yang telah kita lakukan.

3. Browser-browser internet yang paling baru.
Seperti yang kita ketahui bersama, setiap saat system yang digunakan dalam design sebuah website ataupun blog pasti semakin berkembang dan menggunakan metode-metode yang paling baru. Dalam hal ini, browser-browser type lama  terkadang  tidak bisa menampilkan hasil design secara sempurna karena belum belum dilengkapi dengan fitur-fitur yang mendukung.

Oleh sebab itu pula maka dalam setiap design yang kita lakukan, maka kita juga harus selalu cek hasilnya disetiap type browser. Fitur dari browser selanjutnya yang paling kita butuhkan adalah browser yang memiliki fitur inspect element. Hal ini juga nnt akan kita bahas dalam posting selanjutnya.

4. Software atau aplikasi pendukung.
Yang saya maksud sebagai software pendukung adalah seperti notepad/wordpad, photoshop, dan/atau sofware yang bisa digunakan untuk edit text dan foto lainnya. Cukup pelajari dasar-dasarnya saja karena sebisa mungkin kita akan meminimalkan penggunaan gambar dalam proses designnya nanti.

Mengenal dasar-dasar Template Blogger

Secara mendasar, Blogger menggunakan template berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fitur edit template HTML Blogger dimana kita dapat dengan bebas melakukan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.

Untuk benar-benar menguasai atau memahami setiap pelajaran maka yang perlu kita ketahui pastilah dasar-dasar atau pokok yang paling penting dari hal yang ingin kita pelajari tersebut. Sama halnya dengan template blog. Agar bisa mengedit bahkan membuat sendiri sebuah template, maka sebelum belajar mengedit template dari blogger yang paling penting adalah dengan mengetahui struktur dasarnya terlebih dahulu.

Dari struktur dasar inilah yang kemudian menjelaskan setiap bagian dari template blogger secara lebih rinci dan membantu kita untuk melalui proses pengkodean dan merancang sebuah template langkah demi langkah.

Struktur desain sebuah blog pada dasarnya terdiri atas beberapa bagian utama seperti berikut:

1. Tag HTML :

- Setiap desain blog/web selalu diawali dengan tag pembuka <html> dan ditutup dengan tag </html>

- Di antara tag inilah berbagai kode html yang lain ditambahkan untuk menciptakan sebuah desain blog/web.

2. Tag head :

- Diantara tag pembuka <head> dan penutup </head> terdapat tag title yang di dalamya berisikan blog title atau blog title yang disertai post title (judul posting).

- Diantara tag pembuka <head> dan penutup head </head> juga menjadi tempat kode CSS yang berfungsi sebagai pembangun blog dan beberapa javascript diletakkkan. Untuk tempat peletakan code CSS biasanya tepat diantara kode <b:skin><![CDATA[ sampai dengan kode ]]></b:skin>. 

- Diantara tag <head> dan <b:skin><![CDATA[ juga biasanya menjadi tempat peletakan script, font yang digunakan dan meta content dari blog tersebut.

3. Tag body :

Tag body merupakan tempat utama semua aktifitas blogging. Beberapa desain akan dibangun dalam tag ini untuk divisualisasikan melalui halaman blog. termasuk pula widget-widget yang menjadi bagian dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>. Pada bagian body bisanya terbagi menjadi 3 (tiga) bagian utama.

- Header Blog : Header blog berisi Nama blog beserta link-nya serta sering ditambahkan beberapa link baru seperti misalnya daftar menu (navigasi horizontal).

- Content : pada bagian ini terletak kolom posting.

- Sidebar : Sidebar bisa berjumlah 1 (satu) kolom atau bahkan hingga 3 kolom. Ditempat ini biasanya widget ditambahkan..

-Footer : Footer terletak di blog bagian paling terbawah. Footer juga biasanya dimanfaatkan peletakan widget tambahan dan juga untuk menempatkan identitas pembuat design sekaligus linknya.

Dari keterangan diatas maka setiap template dari blogger pasti memiliki susunan seperti dibawah ini.

<html>
<head>

Tempat peletakan Script, font dan meta content.

<b:skin><![CDATA[

<b:skin><![CDATA[

Tempat peletakan CSS

]]></b:skin>

]]></b:skin>

Tempat peletakan Script dan CSS

</head>

<body>

Tempat peletakan Content dari blog berisi seperti Title, posting, sidebar,
dan footer.

</body>
</html>

Nah..
Setelah kita mengetahui dasar-dasarnya maka nanti semua akan kita bahas satu persatu mulai dari header sampai footer pada posting-posting berikutnya.