Fasilitas yang ada diinternet

Banyak sekali fasilitas yang bisa dimanfaatkan dari internet ,dari mulai yang gratis sampai kepada yang berbayar.Untuk mendapatkan layanan di internet kita harus jeli dalam memilih penyedia.Ingat lho,tidak semua penyedia layanan online itu baik baik.Berikut ini adalah beberapa fasilitas fasilitas dari internet yang paling umum dimanfaatkan pengguna :



1. Web Mail Service
Layanan yang paling banyak digunakan orang di internet adalah email,dalam bahasa indonesia disebut SUREL(Surat Elektronik).Kita harus mendaftarkan akun email terlebih dahulu kepada penyedia untuk memanfaatkan fasilitas surat elektronik.Layaknya jenis surat yang lain,kita bisa berkirim email antar pemilik dari pengguna sebuah alamat email.
Saat ini sudah cukup banyak situs web yang memberikan fasilitas email  secara gratis. Kita bisa langsung memesan sebuah email account dengan nama tertentu sesuai dengan keinginan kita. Contoh : nama.saya@email.com,nama.perusahaan@mail.com, dll.

2. Search Engine
Search engine adalah sebuah fasilitas yang paling akrab dikenal oleh pengguna internet.Kita tidak akan tahu jutaan alamat situs yang ada di internet.Dengan bantuan search engine,kita bisa menemukan alamat situs yang kita inginkan dengan mudah hanya dengan mengetikkan sebuah kata kunci.Search engine adalah mesin dengan algoritma yang sangat canggih,dia akan mencari (crawl) semua situs,menyimpan (chacing) dan akan menampilkannya kepada  pengguna.
Carilah layanan yang anda inginkan dengan cara mengetikkan beberapak kata kunci,mesin pencari akan menampilkannya untuk anda.

3. Web Hosting
Webhosting adalah fasilitas dari provider internet yang mengelola webserver bagi seorang webmaster untuk meletakkan situs yang dibangunnya agar situsnya bisa diakses diseluruh dunia melalui internet.
Layanan webhosting diinternet saat ini bisa kita dapatkan dengan membayar kepada provider atau ada juga yang gratis.
Tentu saja yang gratis hanya mendukung  fitur dan fasilitas yang sangat terbatas daripada yang berbayar(premium).Bisanya layanan webhosting gratis juga menyediakan upgrade premium untuk bisa mendapatkan fasilitas yang lebih lengkap

4. Portal.
Portalweb atau situs portal adalah situs yang menyajikan bermacam macam pelayanan sekaligus.Jadi sebuah situs portal bisa menyediakan layanan seperti berita,blog,hiburan,layanan email bahkan toko online sekaligus.
Kira kira sama dengan mall atau plaza jika kita berada didunia nyata,dan situs portal adalah plazanya dunia maya.

Apa itu WWW

WWW adalah kependekan dari World Wide WEB merupakan nama yang diberikan untuk bagian dari internet yang bisa diakses dengan perangkat lunak yang bernama web browser.

Perangkat lunak yang disebut dengan nama  Web Browser itu contohnya adalah Internet Explorer, Netscape ,Safari,Chrome, firefox dan Opera.Beberapa pencipta web browser sudah menyediakan aplikasi untuk mobile (browser untuk smartphone).

WWW biasa disebut secara singkat hanya web saja, sekarang sudah terdiri dari jutaan situs web (web site) dan dari setiap web site sendiri terdiri dari banyak halaman web (web page). Halaman-halaman web ini tersebar di seluruh webserver di seluruh dunia dan bisa terhubung dengan  komputer-komputer yang terhubung dengan Internet.

Halaman Web itu adalah dokumen yang ditampilkan oleh sebuah software bernama web browser. Halaman ini seperti file, dokumen HTML dan didalamnya bisa terkandung text, gambar,animasi bahkan video.

Untuk dapat membuat sebuah halaman web ,anda haruslah memiliki pengetahuan paling dasar dalam pemrograman web yaitu HTML (hyper-text markup language). Baca: Apa itu HTML

Situs Web bisa terdiri dari beberapa halaman web yang bisa saling dikaitkan antara halaman yang satu dengan yang lain dengan teknik tertentu. Teknik untuk saling menautkan halaman yang satu dengan yang lain adalah teknik membuat hyperlink.Hal ini berguna sebagai navigasi situs,dimana agar pengunjung bisa melihat dan mengaksesnya melalui sebuah hyperlink (tautan).
Disinilah keunggulan dari WWW,yaitu dengan adanya hyperlink. Selengkapnya Baca Cara arti dan cara membuat Hyperlink .

Jika anda menemui sebuah situs web,dan menemukan perintah untuk memasukinya dengan perintah klik pada mouse itulah hyperlink.
Dengan hyperlink anda dapat secara langsung meng-click sebuah file yang ditautkan, komputer melalui web broser akan mengambil (mendownload) file atau mengakses situs/halaman situs yang di link (ditautkan).

Perancang situs web biasanya akan meletakkan banyak hyperlink di dalam situs yang mereka buat sebagai sarana navigasi agar pengunjung terbantu dalam menemukan halaman lain yang terkait.Selain itu penggunaan hyperlink yang lain seperti,mendownload file,membuat tombol mengirim komentar dll.

Hyperlink juga dapat menghubungkan satu situs dengan situs lainnya yang berada pada server lain dari seluruh dunia.

HTML tag Alignment

Tag Alignment adalah tag HTML untuk mengatur posisi horizontal text.Pengaturan posisi text ini menggunakan tag alignment "div" dengan syntax sebagai berikut;

<div align="left,right atau center">Text yang diatur posisinya</div>
Contoh penggunaan;

<div align=left>Teks rata kiri</div>
<div align=right>Teks rata kanan</div>
<div align=center>Teks rata tengah</div>

Tampilan di browser :

Teks rata kiri

Teks rata kanan

Teks rata tengah

HTML Tag META

Tag META adalah tag HTML yang berfungsi untuk memberikan informasi isi dari dokumen HTML kepada crawl search engine.

Tag META berada diantara tag <head> dan </head>  sehingga tag META tidak akan tampil di halaman situs alias tidak ditampilkan oleh web browser.


Ada macam macam tag META,namun disini yang penting kita ketahui cukup 3 saja.

Tag Meta Auhtor
Tag ini berfungsi untuk menjelaskan perancang halaman web.
Contoh :
<meta name="Author"  content="Tulis nama pembuat web">


Meta Description
Berfungsi  mendeskripsikan tentang apa saja kontent dari website  website untuk dicatat oleh mesin pencarian.

<meta name="description" content="Tulis deskripsi website">

Meta keyword
Meta keyword berisi kata kunci/tag yang bertujuan agar dicatat mesin pencari di disimpan di databasenya,dan ika seseorang mengetikkan kata kunci tersebut maka akan di tampilkan dihasil pencarian.
Tips: Tuliskan beberapa keyword yang dipisahkan dengan koma "," jangan lebih dari 30 keyword.Jangan pula mengulang kata lebih dari  tiga kata yang sama,misal komputer lokal,komputer murah,komputer bagus,komputer.karena web anda bisa dideteksi sebagai spamm.

Contoh syntax;

<meta name="keywords" content="Tulis keyword">


Contoh pemakaian Meta Tag keseluruhan;

<html>
<head>
<title>Title Halaman</title>
<meta name="Author" content="Hendro">
<meta name="Description" content="Pusat informasi komputer software dan hardware">
<meta name="Keywords" content="hardware,software,komputer,hardisk terbaik,pc murah">
</head>
<body>
<h1>Contoh Meta Tags</h1>
</body>
</html>


HTML Tag List

Tag List adalah membuat format list atau daftar.Tag list dibagi menjadi dua kategori yaitu Numbered dan Unumbered.

1.Numbered List adalah tag HTML yang menggunakan angka urutan sebagai tanda point.
Contoh;

<OL>
<LI> Apel
<LI> Jeruk
<LI> Manggis
</OL>

 Hasilnya;

1. Apel
2. Jeruk
3. Manggis

2.Unumbered List adalah tag HTML yang menggunakan bullet sebagai tanda point.
Contoh;

 <UL>
<LI> Apel
<LI> Jeruk
<LI> Manggis
</UL>

 Hasilnya;

• Apel
• Jeruk
• Manggis

Perhatikan bedanya,menggunakan tag<UL> </UL> jika untuk unumbered list dan <OL></OL> jika menggunakan numbered list.

HTML tag tunggal

Tag tunggal pada HTML penting juga untuk diketahui,apa dan bagaimana itu tag tunggal HTML?...Tag tunggal adalah tag yang tidak berpasangan antara pembuka dan penutup. Tag tunggal adalah;
<br>--> Untuk Membuat garis baru.
<hr>--> Untuk membuat garis baru dan sekaligus menampilkan sebuah garis.

Contoh dan penggunaan  tag <hr>;

<hr>
 

---

Tag <hr> bisa juga diberikan atribut dan value,misalnya;
<hr color="#FF0000" /> Artinya membuat garis dengan tag <hr> yang diberi warna merah.
Hasilnya;

---

Atau ingin menggunakan ukuran lebar tertentu,misalnya;

<hr width="200" />


Hasilnya lebar garis <hr> adalah 200 piksel;

---

HTML Tag Body

Diantara tag body pembuka dan penutup merupakan daerah penempatan konten yang akan tampil di sisi klien dan terlihat pada suatu halaman situs.Jadi semua elemen dan fungsi interaktive (interface) yang biasa kamu lihat dan pergunakan itu tempatnya berada diantara tag body ini.

Pada intinya tag body ditulis seperti ini,<body> berpasangan dengan tag penutupnya </body> Dan semua konten berada diantaranya.Namun sebenarnya tag <body> bisa lebih kompleks lagi karena beberapa setting dokumen ada di tag body ini.

Contoh;
<BODY BGCOLOR=white TEXT=black LINK=blue ALINK=green VLINK=red>
Isi elemen dab dokumen  konten
</BODY>
Seperti contoh diatas bahwa tag body memiliki setting tambahan yaitu atribut dan value dengan format sbb;

 <ELEMENT ATTRIBUTE=value>

Jika kita kembali melihat contoh diatas maka, tag Body adalah elemen, sementara BGCOLOR, TEXT, LINK, ALINK dan VLINK adalah atribut. white, black, blue, green dan red adalah value.

Kesimpulannya, tag menjelaskan arti elemen secara umum sedangkan atribut menjelaskan lebih detailnya.

Supaya lebih jelas, mari kita pelajari arti masing-masing atribut tersebut.

BGCOLOR=white

Atribut ini menjelaskan warna background untuk seluruh dokumen. Warna putih (white) dapat diganti dengan red, blue, green, black atau warna yang lain. Bisa juga menggunakan color code yang akan dibahas kemudian.

TEXT=black
Atribut ini mengatur warna teks di halaman web dan warna hitam (black) juga bisa digantikan dengan warna lain.

LINK=blue
 Ini adalah warna hyperlink sebelum di-click. Sebaiknya memang warna hyperlink berbeda dengan warna teks untuk memudahkan pengguna.

ALINK=purple
Atribut ini mengeset warna link saat akan di-click (didekati dengan mouse).

VLINK=red
Atribut ini mengeset warna link setelah sebuah link dikunjungi.

Background pada tag Body
Salah satu atribut penting di tag Body adalah BACKGROUND. Atribut ini berfungsi untuk memberikan tampilan latar belakang sebuah gambar dan atribut ini akan menimpa atribut BGCOLOR. Untuk dapat menggunakannya kita harus tahu dimanakah letak file gambar yang akan kita gunakan. Untuk lebih jelasnya amati contoh berikut :

<BODY BGCOLOR=white TEXT=black LINK=blue ALINK=green VLINK=red BACKGROUND="/images/bg.jpg"> </BODY>

Jangan lupa untuk menambahkan tanda kutip diantara alamat file gambar yang akan digunakan.

Pendekatan CSS bisa dilakukan untuk mengatur  elemen body dengan cara menggunakan body sebagai selector.

Contoh jika menggunakan CSS untuk mengatur dokumen elemen dibawah tag body:

<style>
body{background;white url(/images/bg.jpg) no-repeat;
         color: black;
         }

body a{blue;
         }


body a:visited{red;
         }

body a:hover{purple;
         }
</style>

Memilih warna yang cocok untuk web/blog

Kadangkala dalam mendesain sebuah template blog/situs,seseorang termasuk saya tidak terlalu memperhatikan tentang warna yang digunakan.Asal menurut kita sendiri bagus,yaudah itulah yang kita pakai.
Eit,,jangan egois begitu jika weblog kita ditujukan untuk dikunjungi  dibaca orang banyak.Pikirkanlah bagaimana agar pengunjung bisa kerasan dan nyaman saat menjelajahi weblog kita demi pageviews untuk SEO.Maka pilihlah takaran yang cocok baik untuk blog atau web.

Pemilihan Warna desain situs merupakan hal yang tidak kalah pentingnya karena akan menentukan respon dari pengunjung situs. Karena Warna adalah yang pertama kali dilihat oleh pengunjung terutama warna background, sementara content yang lain seperti text dan image masih dalam proses loading.Hal ini bukan hal yang sepele, karena akan menimbulkan kesan atau sebuah mood dari situs tersebut.

Untuk mendapatkan warna design yang efektif, mulailah dengan memilih warna yang bisa merepresentasikan sebuah tujuan dan gagasan dari situs Anda. Susunan warna yang anda buat sebaiknya bisa cocok atau sesuai dengan tujuan dari situs Anda.

Jika misalnya situs yang Anda buat adalah situs komunitas, maka lebih kuat moodnya dengan warna warna yang hangat.Hal ini untuk membuat suasana bisa terlihat lebih santai.

Jika situs Anda adalah  sebuah situs Informasi,lebih tepat disebut blog, dimana artikel/tulisan anda yang akan mendominasi, maka sebaiknya warna yang disusun simple dan tidak mengganggu konten.
Misalnya tidak menggunakan background gambar secara penuh dengan warna yang mencolok,hal ini akan membuat tulisan menjadi kurang nyaman jika dibaca.Selain itu,backgound gambar yang besar bisa membuat muat halaman menjadi berat,sehingga pengunjung akan malas menemukan artikel kita yang lain.

Sebaiknya warna tulisan dan warna background dibuat dengan paduan yang serasi sehingga akan menampilkan typografi yang baik dan menjadi enak untuk dibaca.

Untuk situs informasi (blog) sepertinya lebih enak dengan background kontent warna putih dan garis tepi yang agak memudar dan tulisan berwarna hitam.Sementara background body bisa menggunakan warna yang lembut seperti abu abu.Satu lagi agar muat halaman lebih ringan,kurangi penggunaan background image.

Bagaimanakah dengan blog ini?....apakah sudah serasi penggunaan warnanya?....apakah anda merasa nyaman membacanya?,,,,,Terakhir ,apakah muat halaman blog ini berat?.....Yaaa,,,harapan saya semoga sesuai dengan yang diharapkan pembaca dan anda.

Eitth,,,,anda belum nemu desain template blog yang cocok?........dan apakah anda malas untuk edit theme sendiri?,,,,,
Khusus untuk pengguna blogger nih,ada thema bagus lho?,,,,serasiiii banget,,eye cathcing geto lhooo,,,,,dan SEO friendly!...mau mau mau... -> http://artikel-luarbiasa.blogspot.com/2012/01/template-blogger-seo-friendly-serta.html

Edd

Contoh membuat table bag. 2

Berikut adalah macam macam model dari tabel,sekaligus contoh dan demonstrasi hasilnya.Silahkan bereksplorasi sendiri dengan membuat model model yang anda kehendaki dengam mengembangkan dari contoh model tabel  yang ada disini.

Dasar 3 kolom x 2 baris table

A	B	C
D	E	F

<table border>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

---

rowspan

Item 1	Item 2	Item 3
Item 4		Item 5

<table border>
<tr>
<td>Item 1</td>
<td rowspan=2>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td> <td>Item 5</td>
</tr>
</table>

Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7

<table border>
<tr>
<td rowspan=2>Item 1</td>
<td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
</tr>
<tr>
<td>Item 5</td> <td>Item 6</td> <td>Item 7</td>
</tr>
</table>

---

colspan

Item 1	Item 2
Item 3	Item 4	Item 5

<table border>
<tr>
<td>Item 1</td>
<td colspan=2>Item 2</td>
</tr>
<tr>
<td>Item 3</td> <td>Item 4</td> <td>Item 5</td>
</tr>
</table>

---

 <th>

Header1	Header2	Header3
A	B	C
D	E	F

<table border>
<tr>
<th>Header1</th> <th>Header2</th> <th>Header3</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

---

Tabel Header

Header1		Header2
A	B	C	D
E	F	G	H

<table border>
<tr>
<th colspan=2>Header1</th>
<th colspan=2>Header2</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr>
</table>

---

Multiple, header dan colspan

Header1		Header2
Header 3	Header 4	Header 5	Header 6
A	B	C	D
E	F	G	H

<table border>
<tr>
<th colspan=2>Header1</th>
<th colspan=2>Header2</th>
</tr>
<tr>
<th>Header 3</th> <th>Header 4</th>
<th>Header 5</th> <th>Header 6</th>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td>
</tr>
<tr>
<td>E</td> <td>F</td> <td>G</td> <td>H</td>
</tr>
</table>

---

Tabel header samping

Header1	Item 1	Item 2	Item 3
Header2	Item 4	Item 5	Item 6
Header3	Item 7	Item 8	Item 9

<table border>
<tr><th>Header1</th>
<td>Item 1</td> <td>Item 2</td> <td>Item 3</td></tr>
<tr><th>Header2</th>
<td>Item 4</td> <td>Item 5</td> <td>Item 6</td></tr>
<tr><th>Header3</th>
<td>Item 7</td> <td>Item 8</td> <td>Item 9</td></tr>
</table>

---

Header samping, rowspan

Header1	Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7	Item 8
Header2	Item 9	Item 10	Item 3	Item 11

<table border>
<tr><th rowspan=2>Head1</th>
<td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
</tr>
<tr><td>Item 5</td> <td>Item 6</td> <td>Item 7</td> <td>Item 8</td>
</tr>
<tr><th>Head2</th>
<td>Item 9</td> <td>Item 10</td> <td>Item 3</td> <td>Item 11</td>
</tr>
</table>

---

Contoh pemakaian semua model table

		Average
		Height	Weight
Gender	Laki	1.9	0.003
	Perempuan	1.7	0.002

<table border>
<tr> <td><th rowspan=2></th>
<th colspan=2>Average</th></td>
</tr>
<tr> <td><th>Height</th><th>Weight</th></td>
</tr>
<tr> <th rowspan=2>Gender</th>
<th>Laki</th><td>1.9</td><td>0.003</td>
</tr>
<tr> <th>Perempuan</th><td>1.7</td><td>0.002</td>
</tr>
</table>

---

Rowspan dan colspan

A		1	2
		3	4
C		D

<table border>
<tr>
<td align=center rowspan=2 colspan=2>A</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td align=center rowspan=2 colspan=2>C</td>
<td align=center rowspan=2 colspan=2>D</td>
</tr>
<tr>
</tr>
</table>

---

Margin dan border

Table tanpa border

Item 1	Item 2	Item 3
Item 4		Item 5

<table>
<tr> <td>Item 1</td> <td rowspan=2>Item 2</td> <td>Item 3</td>
</tr>
<tr> <td>Item 4</td> <td>Item 5</td>
</tr>
</table>

---

Tabel dengan border

Item 1	Item 2
Item 3	Item 4

<table border=10>
<tr> <td>Item 1</td> <td> Item 2</td>
</tr>
<tr> <td>Item 3</td> <td>Item 4</td>
</tr>
</table>

---

cellpadding dan cellspacing

A	B	C
D	E	F

<table border cellpadding=10 cellspacing=0>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

A	B	C
D	E	F

<table border cellpadding=0 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

A	B	C
D	E	F

<table border cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

A	B	C
D	E	F

<table border=5 cellpadding=10 cellspacing=10>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>

HTML Tag Table

Terkadang kita perlu menyampaikan informasi yang disusun dengan berdasarkan tabel.Dan hal ini perlu kita sampaikan dalam bentuk dokumen HTML.Untuk membuat format seperti ini maka akan kita wujudkan dengan menggunakan HTML tag table <table>.Tag table ini juga memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi.
Berikut uraiannya:

Tag	Parent	Fungsi
<table> </table>	---	tag utama
<caption> </caption>	<table>	Menampilkan judul tabel
<tr></tr>	<table>	Tag baris
<th></th>	<tr>	Header table
<td></td>	<tr>	Tag sel-sel tabel

Berikut ini beberapa atribut tag tabel

Atribut	Fungsi
bgcolor	warna background
width, height	lebar / tinggi tabel (dalam % atau pixel)
cellspacing	jarak antar cell
cellpadding	jarak teks ke cell
border	lebar garis batas, 0=tanpa garis batas

Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan
di tag <tr> maka atribut di tag <th> dan <td> diabaikan

Atribut	Fungsi
bgcolor	warna background
width, height	lebar/tinggi tabel (dalam % atau pixel)
align (left, right, center)	pengaturan posisi rata kanan/kiri/tengah
valign (top, bottom, middle)	pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah
colspan=n	ekstensi (span) n jumlah kolom ke kanan
rowspan=n	ekstensi (span) n jumlah kolom baris ke bawah
nowrap	mematikan word wrapping

Contoh pembuatan table 1;

<table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="yellow">
<tr>
<th>sel 1</th>
<th>sel 2</th>
<th>sel 3</th>
</tr>
<tr>
<td align=left> sel 4</td>
<td align=center>sel 5</td>
<td align=right>sel 6</td>
</tr>
<tr bgcolor="orange">
<td width="100" height="75" valign=top>sel 7</td>
<td width="35%" height="75" valign=middle>sel 8</td>
<td height="75" valign=bottom>sel 9</td>
</tr>
</table>

Hasilnya:

sel 1	sel 2	sel 3
sel 4	sel 5	sel 6
sel 7	sel 8	sel 9

Contoh pembuatan table 2:

<table width="100%" border="2" cellspacing="5" cellpadding="5" bgcolor="#9999CC">
<tr>
<td width="30%">&nbsp;</td>
<td colspan="3">colspan=3</td>
</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
</tr>
<tr>
<td width="31%">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
</tr>
</table>

Hasilnya;

	colspan=3
rowspan=4

Membuat tabel bagian 2

HTML cara menyisipkan gambar

Menyisipkan gambar didalam  postingan platform blog blog modern sebenarnya tidak perlu pusing lagi menuliskan codenya secara manual,karena otomatis meregenerated sendiri codenya.Fitur seperti itu disebut dengan WYSIWYG,atau kependekan dari what you see is what you get.Sama halnya Jika kita membangun sebuah website dengan bantuan software,(misalnya Adobe Dreamweaver dan microsoft frontpage).

Namun pada kondisi tertentu kita terpaksa juga untuk menuliskan syntax HTML untuk menyisipkan gambar ini dengan manual/ mengetik sendiri.Caranya dengan menggunakan tag <IMG>.Paling tidak kita akan mengetahui mana script memanggil gambar dan yang bukan.Jika anda memutuskan untuk ngeblog,pengetahuan  ini pasti berguna nantinya.

Sebelum kita mengenal HTML cara menyisipkan gambar ini,sebelumnya kita wajib mengetahui dulu apa itu url gambar dan format gambar.
URL gambar adalah alamat dimana sebuah file gambar berada,format gambar yang bisa digunakan adalah .jpg, .png, .gif, .psd.

Contoh URL gambar/image;

http://situs.com/image/imageku.jpg


Penulisan Syntax pemanggilan gambar adalah;

Jika gambar dalam satu direktori dari satu domain;

<img src="image/imageku.jpg"></img>


Jika gambar berada di situs lain;

<img src="http://situs.com/image/imageku.jpg"></img>

Bagaimana cara membuat hyperlink

Hyperlink atau lebih umum disebut link dan sering juga disebut sebagai ANCHOR TEXT namun sebenarnya ada sedikit perbedaan maksud.
Hyperlink dalam bahasa indonesianya tautan adalah merupakan sebuah pintu bagi user untuk masuk ke dokumen HTML lain atau bagian tertentu dari sebuah dokumen HTML.
Hyperlink bisa diletakkan pada TEXT ataupun sebuah gambar atau image.

Secara default,maksudnya tag "a" belum dipakai sebagai selector untuk dimanipulasi dalam suatu deklarasi CSS  (Baca pseudo CLASS CSS) maka text yang di pakai sebagai hypelink kan memiliki style yang berbeda yaitu warna yang berbeda dengan text lain dan memiliki garis bawah.

Sekarang anda sudah bisa menyimpulkan apa itu ANCHOR TEXT setelah membaca penjelasan diatas.
Benar,ANCHOR TEXT secara umum adalah TEXT yang di buat sebagai  hyperlink,bukan IMAGE atau jenis pemakaian hyperlink lainnya.Caranya dengan menyisipkan tag "a" atau anchor tag dengan atribut name dari dokumen yang dituju.

Contoh penulisan syntax HTML hyperlink pada TEXT;

Jika link merujuk kepada dokumen HTML dalam satu domain name

<a href="dokumen.html">TEXT </a>


Akan terlihat seperti ini,TEXT

Jika ANCHOR TEXT mengarah ke website lain maka akan dibuat seperti ini;

<a href="http://alamat situs.com">text anchor</a>

Demo silahkan diklik, text anchor

Jika menginginkan browser membuka sebuah dokumen HTML pada tab/jendela  baru.

<a href="http://alamat situs.com" target="_blank">text anchor</a>

 Demo silahkan diklik text anchor

Contoh  menyisipkan hyperlink pada gambar/image;


<a href="dokumen.html"><img src="image/gambar.jpg" /></a>


Contoh jika link mengarah  ke situs lain;


<a href="http://google.com"><img src="image/gambar.jpg" /></a>


Demonya silahkan diklik gambar berikut;

Penggunaan hyperlink untuk tujuan yang lain,

Path relatif dan absolut
Yaitu jika tujuan dokumen HTML berada dalam satu domain web,akan tetapi berada di direktori yang lain maka digunakan path name relatif berdasarkan posisi file.Misalnya file HTML tujuan berada 2 tingkat diatasnya maka penulisannya akan seperti ini;

<a href="../../dokumen-tujuan.html">Dokumen tujuan name</a>



Mailto
Jika kita menginginkan user agar bisa mengirimkan email tertentu,kita bisa melakukannya dengan membuat sebuah hyperlink,contoh syntaxnya;

<a href="mailto:saya@spiderbeat.com">Kirim email </a>

Demo silahkan diklik: Kirim email 

Section
Link yang merujuk kepada bagian tertentu dari sebuah halaman web,agar user tidak lelah jika artikel sangat panjang kebawah.

Syntax section;

<a name="nama_section"></a>

Contoh penuliannya nya;

<a href="sebuaht_dokumen_html#nama_section">nama _section</a>


Contoh livenya 

[<a href="http://www.spiderbeat.com/2012/04/bagaimana-cara-membuat-hyperlink.html#top">TOP</a>]

Silahkan diklik demonya [TOP]


Edd

Pengertian dari HTML adalah

Baik,sebelum anda mempelajari syntax-syntax dari HTML, alangkah baiknya jika mengenal apa artinya terlebih dulu.Karena kata orang, tak kenal maka tak sayang.. :D
HTML adalah kependekan dari Hypertext Markup Language dan pengertiannya adalah sekumpulan text atau file ASCII yang berisi intruksi atau perintah  program untuk web browser  untuk menampilkan  tampilan grafis sebuah halaman website.
File HTML dapat dibuat menggunakan aplikasi text editor pada semua system operasi,contohnya adalah Notepad di windows atau simple text di Macintosh.
HTML merupakan cross platform karena walau pembuatannya menggunakan operating system tertentu,namun akan memiliki tampilan yang sama disemua operating system.

Sekrang kesimpulannya adalah HTML itu bekerja pada sisi klien/browser sehingga hanya browser yang mendukung  HTML yang bisa menampilkannya dengan baik.

Nah itu adalah HTML,lalu apakah yang disebut dengan Tag HTML?....

Tag HTML itu umumnya dibuat secara berpasangan yaitu tag pembuka dan tag penutup.
Web browser akan mecari tag-tag HTML dalam file text , membaca dan kemudian menampilkannya sesuai dengan yang diperintahkan.Tag HTML ditandai dengan karakter "<" ">" .
Format tag HTML adalah <nama tag>Yang ditampilkan</nama tag>

Contoh penggunaan tag HTML
<h1> Judul postingan</h1>

Tag tersebut akan memberikan instruksi kepada web browser bahwa Judul postingan tersebut menggunakan style heading level 1.
Ini berkaitan dengan pelajaran CSS kemarin yaitu ID dan CLASS dalam CSS bahwa tag H1 itu bisa bertindak sebagai selector dalam CSS untuk web browser agar menampilkan judul postingan tersebut sesuai dengan manipulasi dalam deklarasi CSSnya.

Banyak tag HTML yang selalu berpasangan seperti ini,sebuah tag penutup selalu di beri tanda "/" untuk menghentikan proses tagging kepada web browser.Jadi,jika kita lupa tidak memberikan karakter "/" maka browser akan menganggap tag tersebut sama seperti text biasa lainnya.
tag HTML tidak case sensitif,maksudnya karakter huruf besar maupun huruf kecil sama saja,contoh;
<body> ____</body> sama saja dengan <BODY>____</BODY> .Namun antara tag pembuka dan penutup sebaiknya tidak berbeda jenis karakternya, misal <body>...</BODY>.

Kesalahan dalam menulis tag HTML tidak berakibat buruk pada system komputer,tetapi browser hanya mengabaikan perintah tersebut dan menganggapnya sebagai text biasa.
Browser web dirancang memiliki kemampuan hanya untuk mengenali dan mengeksekusi beberapa Tag HTML dari keseluruhan  tag HTML standard dari W3C.
Jika web browser tidak mengenali tag HTML tertentu maka browser akan melewatinya saja seakan hanya text biasa lainnya.

Descendant selector CSS

Descendant selector didalam pemrograman CSS Adalah selector yang bisa diatur secara khusus untuk sebuah ID atau CLASS (parent class atau parent ID) yang dibuat webmaster dalam pendefinisian suatu elemen.
Beberapa contoh selector yang bisa diatur sebagai Descendant selector;

• p (paragraf)
• h1,h2,h3,h4,h5,h6 (headjng)
• ul li (list)
• img (gambar)
• .widget (hanya pada widget,biasanya untuk template blogspot)
• a (link)

Contoh pencodean HTML nya;

<div id="contoh">
<H1>Contoh heading H1</H1>
<p> Contoh paragraf</p>
<img src="http://contoh-url-gambar/image.jpg" />
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div> <!-- End contoh -->

Bagaimana mengatur CSS untuk setiap selector diatas yaitu sebagai descendant dari ID contoh?..

Hanya cukup menambahkan didepannya ID yang bertindak sebagai parent.
Misalnya;

#contoh p{font-family: verdana
}

#contoh H1{font-family: verdana
}

#contoh H2{font-family: arial;
font-size: 17px
}

#contoh img{padding: 3px;
margin: 5px;
}

#contoh ul li{list-style: squre;

}
#contoh a{font-family: georgia;
text-decoration: underline;
color: red;
}


Oya,,,,bagaimana kalau CSS untuk manipulasi widget blogspot?..
Ilustrasinya kita memberikan border pada widget,jadi tiap widget akan memiliki garis tepi sendiri sendiri.

Misalnya CLASS nya adalah "sidebar",contoh code CSSnya;

.sidebar li{list-style: disc;
}
.sidebar a{color: red;
}
.sidebar a:hover, #sidebar a:visited{color: green;
}

.sidebar .widget{border: 1px solid #ccc;
background: #F1F1F1;
padding: 5px;
margin: 10px;
}

Nah begitulah cara memberikan manipulasi pada tiap descendant selector yang ada.

Untuk memudahkan pemahaman,baca dulu mulai dari Apa itu CSS

CSS Margin dan padding

Mengenai apa bagaimana CSS Margin dan padding ini akan saya bahas secara singkat saja,asalkan gampang dimengerti.Saya akan coba terangkan dengan gaya bahasa embongan saya semoga lebih mudah dimengerti.Wakaka...


Margin
Dalam CSS istilah margin adalah memberi jarak atau spasi ke arah luar sebuah  elemen/komponen.

Padding
Padding adalah memberi jarak atau spasi ke arah dalam  sebuah elemen/komponen.

Masih bingung maksudnya?.....coba lihat gambar berikut saja,barangkali lebih mudah untuk dipahami.

Perhatikan ,disana ada warna kuning,merah,silver,biru dan hijau.
Yang warna biru dan merah kita ibaratkan sebagai border,Baca: Border atau garis pembatas.
Yang warna kuning adalah sebuah ID atau elemen yang ada ditengah halaman blog/web.

Yang warna hijau itu merupakan margin dari ID yang berwarna silver dengan border warna biru.
Selanjutnya Jarak antara border warna biru kepada  border warna merah milik dari elemen kuning itu adalah padding.

Tapi Jarak antara  border warna merah dan border warna biru bagi elemen yang berwarna kuning adalah margin.

Masih bingung?....saya juga bingung,bagaimana mesti menerangkan ini,,, :D :D
Semoga saja paham ya?...

Apa gunanya margin dan padding?...
Agar tata letak antar elemen kelihatan lebih seragam dan rapi sehingga lebih enak untuk dipandang mata.

Sekarang saya terangkan mengenai penulisan syntax atau code CSS nya yang mengatur padding dan margin ini.

Penulisan syntaxnya,
Seperti pada CSS border,CSS margin dan padding  ini juga termasuk properti CSS shorthan atau penulisan kode yang singkat/pendek.
Misalnya kita menuliskan syntaxnya;

#elemen1{padding: 5px;margin: 5px}

Maksudnya kita menginginkan disemua sisi dari ID elemen1 memiliki margin dan padding sebesar 5 pixel(px).Disini yang kita atur lebarnya sesuai selera dengan memasukkan satuan lebar yaitu pixel,semakin tinggi nilainya tentu semakin lebar.

Bagaimana jika kita menginginkan padding atau margin disetiap sisi dari suatu ID elemen berbeda?...
Lain katanya  bagaimana kita memberi spasi luar atau dalam yang berbeda ukuran lebarnya dari sebuah elemen ?...

Kita beri saja nilai yang berbeda beda margin atau padding baik disebelah kanan,kiri,atas ataupun bawahnya.

Contoh syntax

#elemen1{padding-left:5px;
padding-right:5px;
padding-top: 10px;
padding-bottom10px
margin-left:5px;
margin-right:5px;
margin-top:10px;
margin-bottom:10px
}

Sehingga hasilnya nanti adalah bagian kiri dan kanan elemen memiliki padding dan margin selebar 5 pixel.
Akan tetapi  bagian sisi atas dan bawah elemen memiliki padding dan margin selebar 10 pixel.

Bisa juga kita singkat penulisan syntaxnya menjadi;

#elemen{padding: 10px  5px  10px 5px;
margin:10px  5px  10px 5px;
}


Contoh pemakaian margin atau padding pada suatu elemen/komponen.

Penulisan code CSSnya;


/*Dengan padding dan margin*/
.elemen{
border: 2px solid red;
}
.elemen2{
border: 2px solid darkblue;
padding: 10px;
margin: 20px
background: #ccc;
color: blue;
text-align:justify
}
/*Tanpa padding dan margin*/
.elemenb{
border: 2px solid red;
}
.elemen2b{
border: 2px solid darkblue;
background: #ccc;
color: blue;
text-align:justify
}


Penampakan jika pakai margin dan padding;

Ini adalah demo komponen dengan menggunakan margin dan padding.Coba bereksplorasi lebih jauh dengan menambahkan properti lain yang sudah dibahas di sesi CSS sebelumnya.

Penampakan jika tidak pakai margin dan padding;

Ini adalah demo komponen yang tidak menggunakan margin dan padding.Coba bereksplorasi lebih jauh dengan menambahkan properti lain yang sudah dibahas di sesi CSS sebelumnya.

Ternyata yang menggunakan padding dan margin tampak lebih bagus dan rapi.Nah sekarang sudah tahu kan apa itu margin dan padding sekaligus kegunaannya. :D

Sekian saja penjelasan dasar yang singkat ini,semoga gampang dipahami.Bagian terpenting dari sebuah belajar adalah praktek.Silahkan dipraktekkan sehingga nanti akan cepat bisa mengembangkan sendiri.Dan guru yang paling baik adalah pengalaman.
Selamat mencoba!!...

CSS border - membuat garis pembatas

Border adalah properti dari CSS untuk menciptakan garis tepi /garis pembatas pada suatu elemen blog.

Border termasuk properti CSS shorthan seperti margin dan padding.Shorthan adalah perintah yang ditulis lebih pendek/singkat.
Perintah panjang penulisan CSS border adalah seperti contoh;

.div{
border-right:1 px solid red;
border-left:1 px solid red;
border-bottom:1 px solid red;
border-top:1 px solid red;
}

Perintah CSS border Shorthan dipakai,jika border pada seluruh sisi elemen dibikin sama.Agar tidak terlalu panjang menuliskannya,Like this;

.div{
border:2 px solid red;
}



Contoh jika border hanya disebelah kanan saja;

.div{border-right: 1px solid blue}


Atau kiri saja;

.div{border-left: 1px solid blue}


Atau hanya kanan dan kiri saja;

.div{border-right: 1px solid blue;
border-left: 1px solid blue
}



Macam macam type border / value

1.Border style types

• solid
• double
• groove
• dotted
• dashed
• inset
• outset
• ridge

Ketebalan border

Umumnya dipakai dalam px (pixel)

Warna border

Berdasarkan tabel warna dalam HEX,RGB atau HURUF

Contoh penulisan perintah CSS untuk border secara keseluruhan;

CSS border Shorthan

#div{border: 1px solid red; }


CSS border Panjang

#div{border-top: 1px solid red;
border-bottom: 1px solid red;
}


Atau

#div{border: 1px dashed red; }

Dst...dst

Untuk lebih jelasnya,berikut contoh penulisan perintah CSS macam macam style dari   border;

.ex1{border:3px double red; padding: 10px }
.ex2{border:3px groove blue; padding: 10px }
.ex3{border:3px dotted yellow; padding: 10px }
.ex4{border:3px inset darkred; padding: 10px }
.ex5{border:3px dashed orange; padding: 10px}
.ex6{border:3px outset purple; padding: 10px }
.ex7{border:3px ridge black; padding: 10px }
.ex8{border:3px solid aqua; padding: 10px }


Catatan: Jika menggunakan Value double,outset,inset ,groove dan ridge minimal nilainya adalah 3px supaya kelihatan efeknya.

Dan ini Demo penampakannya;

Ini adalah style double border

Ini adalah style groove border

Ini adalah style dotted border

This is a inset border

Ini adalah style dashed border

Ini adalah style outset border

Ini adalah style ridge border

Ini adalah style solid border

Segini saja tutorial dasar penggunaan CSS border,silahkan berimporvisasi sendiri.

Penggunaan Pseudo class pada CSS

Kenapa dinamakan pseudo?....... Maaf ya saya tidak tahu kenapa disebut dengan pseudo,mungkin beberapa contoh dan penggunaan pseudo pada CSS ini bisa dipahami maksudnya.
Pada umumya yang disebut dengan pseudo ini adalah pemberian khusus pada tag "a".
Apa itu tag "a" .
Tidak hanya untuk tag "a" saja,masih banyak contoh yang bisa disebut dengan pseudo class ini.Namun ini hanya yang paling umum dipakai saja,yaitu untuk membuat style pada achor text.

"a"  adalah selector yang diambil dari HTML untuk membuat yang namanya ANCHOR TEXT.
Tag "a" dari syntax HTML untuk membuat anchor text itu adalah;
<a href="http://home.com" >ANCHOR TEXT</a>

ANCHOR TEXT sendiri adalah text yang mengandung tautan atau link,hasil dari syntax diatas adalah ;
 ANCHOR TEX

Contoh Pseudo class pada link

:link , untuk sebuah tautan  yang belum (belum dimasuki/diklik)

:visited ,untuk tautan yang sudah di klik

:hover ,style   jika pointer diarahkan

:active , style jika link diklik oleh user


Untuk mendeklarasikannya kedalam syntax css,contohnya;

p a:link{color: red}

Maka semua link yang berada pada suatu elemen HTML (<p> ...text link...</p>) akan memiliki warna merah.

link contoh

p a:visited{color: blue}

Maka semua link yang berada pada suatu elemen HTML (<p> ...text link...</p>) yang sudah di klik oleh browser user akan berwarna biru.


p a:hover{color:orange}

Maka semua link yang berada pada suatu elemen HTML (<p> ...text link...</p>) ,jika pointer user mengarah pada link maka link akan berubah warna menjadi merah.

p a:active {color: yellow}

Maka semua link yang berada pada suatu elemen HTML (<p> ...text link...</p>) jika mouse / lingk di tekan,maka sesaat akan memberi jeda warna kunng.

Mengenai deklarasi dari  a: kita bisa memberi sentuhan efek macam macam dengan bereksplorasi dengan deklarasi dari pseudo class ini.Silahkan dicoba...

For example:

Penulisan syntax CSS pseudo


a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}

Jika tag "a" dipakai sebagai descendent selector,misalnya disini selector diatasnya adalah ".post-body" (hanya ngasih efek untuk "anchor text" yang berada di bawah CLASS .post-body),gampang saja hanya tinggal menambahkan.

For example

.post-body a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;

}
.post-body a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
.post-body a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}
.s2 a{color: red;font-size: 30px;}
.s2 a:hover{color: green;}


Hasil dibawah ini,silahkan arahkan pointer anda untuk melihat hasilnya :D

Arahkan pointer anda kesini dan klik

Arahkan pointer anda kesini dan klik

Contoh lain penggunaan :hover pada suatu elemen;

.contoh{background: red;
width: 500px;
height: 40px;
border: 2px solid blue;
}
.contoh:hover{background: yellow;
width: 500px;
height: 40px;
border: 2px solid darkred;
}


Penampakan;

Arahkan pointer anda ke kolom ini

ID dan CLASS dalam CSS

ID dan CLASS dalam pemrograman CSS Adalah selector yang dibuat oleh seorang webmaster dalam memanipulasi pada satu elemen pada halaman HTML / web.
ID didefinisikan dengan menggunakan tanda " # " dan CLASS didefinisikan dengan menggunakan tanda titik " . " .
Kalau CLASS digunakan untuk memanipulasi banyak elemen dengan satu selector.

Contoh Penulisan ID pada elemen HTML

<div id="selector">
ISI Elemen dengan ID selector</div>


Syntak CSS nya menjadi

#selector{properti: value;}



Contoh Penulisan CLASS pada elemen HTML

<div class="selector">
ISI elemen pada class selector</div>


Syntak CSS nya menjadi

.selector{properti: value;}


Nah,bedanya hanya pada pemberian tanda psgsr  "#" dan titik "." diawal penulisan.


Contoh penerapan ID dan CLASS pada suatu template HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ID dan Class</title>

        <style type="text/css">
           body{background: #f1f1f1;
                     text-align: center
                     font family: arial;
                     font-size: 12px
                      }
            #slelect-wrapper {width: 500px;
                           font-size: 93%;border: 1px solid #000;  
                            }
            .select-1a{background: #ccc;
                          border: 1px solid red;
                          font-style: italic;
                           width: 300px;
                           }
            .select-1b{width: 300px;
                          background: #ccc;
                          border: 1px solid red;
                          font-style: italic;
                          }                  </style>
</head>
<body>
<div id="select-wrapper">
 <div class="select-1a">
 Isi dari CLASS select-1a
<div>
<div class="select-1b">
Isi dari CLASS select-1b
</div>
<div><!-- End select-wrapper -->
    </body>
</html>

---------------------------------Tambahan----------------------------------------------
Descendant Selector
Apa lagi itu Descendant Selector?...
Descendant Selector adalah selector yang memanfaatkan elemen diatasnya , untuk dimanipulasi kemudian.

Lihat contoh saja,biar mudah :D

Misalnya kode HTMLnya begini;

<div class="post-body">
<h1>Contoh judul postingan</h1>
<p>Contoh paragraf contoh paragraf disini paragraf<p>
</div>


p dan h1 adalah selector turunan dari selector ".post-body"
Jadi,isi "<p>" dan "<h1>"adalah memiliki style huruf yang sama,baik font-family,font weight,text decoration dll dengan manipulasi CSS CLASS dari post-body.

<h1> dan <p> adalah descendant selector yang bisa kita atur / manipulasi dengan memanfaatkan elemen diatasnya yaitu CLASS post-body

Jika post-body mendeklarasikan text warna merah,maka text pada h1 dan <p> juga memiliki warna merah , termasuk jika mendeklarasikan  style font yang lain.
Lalu bagaimana cara agar kita memberi satu perbedaan pada style font pada masing ,masing  h1 dan p dimana itu merupakan descendant delector dari ".post-body" ....

Begini cara dan contoh penulisannya;


.post-body h1{ font-size: 25 px}
.post-body p{font-color: blue}


Properti CSS (Font)

CSS font adalah  properti dari CSS untuk mengatur huruf yang akan ditampilkan dihalaman blog kita.Ada bermacam macam value yang bisa kita berikan.Kita contohkan dasar-dasar CSS font yang paling banyak dipakai yaitu;

font-color
Untuk mengatur warna  huruf yang kita inginkan.
Untuk menentukan value atau warna sebaiknya kita berpedoman kepada tabel warna HTML,jika menginginkan warna yang lengkap.
Kode warna bisa ditulis dengan model hexadecimal,RGB ataupun kata.

Contoh  penulisan warna(value);

RGB :rgb(20,43,234)
HEX : #FF000
KATA : RED

Contoh penulisan;

p{font-color: #FF0000}

Contoh penampakan;

Ini adalah contoh warna #FF0000


font-family
untuk menampilkan jenis-jenis font yang ingin kita pakai,valuenya adalah dari macam macam jenis huruf,ini beberapa contohnya;

Value
verdana
arial
sans-serif
georgia
dll

Contoh penulisan;

p{font-family: verdana}
p{font-family: arial}


Contoh penampakan;

Ini adalah font family verdana

Ini adalah font family arial

font-size
Untuk mengatur ukuran dari huruf
Value yang bisa kita masukkan disebut satuan,kita bisa menggunakan satuan ukuran;
Value
pixel (px)
point (pt)
Em (em)
inch (in)
persen (%)
Satuan px,pt dan in adalah satuan absolut artinya memiliki ukuran yang bersifat tetap.
Satuan em dan % (persen) bersifat relatif,atau dinamis yang artinya menyesuaikan dengan konfigurasi user.Em adalah satuan yang menyesuaikan dengan ukuran default font browser,sedangkan % itu menyesuaikan dengan resolusi dari monitor atau layar.
Bisa juga dengan perintah kata,misalnya large,small ataupun x-large.Ini bersifat relatif ,menyesuaikan dengan monitor perangkat yang dipakai.
Contoh penulisan;
p{font-size: 12px}
p{font-size: 1.2em}
p{font-size: 12pt}
p{font-size: 0.1in}
p{font-size: 95%}
p{font-size: small}
p{font-size: large}
p{font-size: x-large}


Contoh penampakan;

ini adalah contoh ukuran
ini adalah contoh ukuran
ini adalah contoh ukuran
ini adalah contoh ukuran

font-weight
Untuk menentukan apakah huruf dibikin tebal atau normal
value
bold ,,jika menginginkan huruf menjadi tebal
normal ,jika menginginkan huruf normal.Hanya perlu ditulis jika ini adalah elemen turunan dan induknya menggunakan font-weight :bold,tetapi kita menginginkan huruf normal pada elemen ini)
Contoh penulisan;

p{font-weight: bold}

Contoh penampakan;

Ini adalah contoh font-weight: bold


font-style
Sesuai dengan namanya,yaitu style alias gaya dari huruf
Value yang umum dipakai adalah italic atau oblique,kayaknya hanya persamaan kata saja.
Contoh penulisan:

p{font-style: italic}
p{font-style: oblique}

Contoh penampakan
Ini adalah font italic
Ini adalah font oblique

text-decoration
Text-decoration hampir sama dengan font style,yaitu hanya untuk menambahkan  semacam efek pada kata.
Value
underline,jika menginginkan sebuah kata / huruf  memakai garis bawah.
blink,jika menginginkan kata atau huruf berkedip kedip.
strike,jika ingin memberi garis coret pada text
noneJika tidak menginginkan sebuah decoration pada sebuah elemen,dengan asumsi selector yan berada diatas elemen ini menggunakan properti text-decoration .

Contoh penulisan;

p{text-decoration: none}
p{text-decoration: underline}
p{text-decoration: blink}
p{text-decoration: strike}


Contoh penampakan

Ini adalah text-decoration underline


text-align
Berfungsi untuk mengatur posisi kata/huruf
Value
left ,adalah rata kiri
right,adalah rata kanan
center,adalah berada ditengah
justify ,rata kiri dan kanan

Contoh penulisan;

p{text-align: left}
p{text-align: right}
p{text-align: center}
p{text-align: justify}



Contoh penampakan

Ini adalah rata kiri(text-align: left)

Ini adalah rata kanan(text-align:right)

Ini adalah tengah(text-align : center)

Ini adalah tengah(text-align : justify)Ini adalah tengah(text-align : justify)Ini adalah tengah(text-align : justify)Ini adalah tengah(text-align : justify)

Text-transform
Ini berfungsi untuk merubah model huruf
Value
uppercase,jika menginginkan huruf balok/besar semua,walau tulisan diketik dengan huruf biasa.
none,jika tidak menginginkan fungsi ini.

Contoh penulisan;

p{text-transform: uppercase}
p{text-transform: none}

Contoh penampakan;

INI ADALAH CONTOH DARI TEXT-UPPERCASE

Segitu dulu untuk dasar CSS font dan penjelasan secara singkat.

Pengenalan properti CSS (background)

Properti CSS adalah syntax yang diperlukan untuk memanipulasi selector yang kita inginkan.Untuk mengetahui apa itu selector,properti dan value baca dulu: Apa itu CSS .

Nah berikut  properti CSS yang umum dipakai (dasar) dalam penggunaan properti "background"

background

background-color
background-image
background-repeat
background-position
background-attachment

Contoh penerapan

body{
background-color: white;
background-image: url(http://gambarku.com/image.jpg);
background-position: center;
background-repeat: repeat-x;
background-attachment: fixed;
}

Maksudnya  kita memakai warna latar belakang seluruh bagian blog kita (body) dengan warna putih dan menggunakan latar berupa gambar juga .Gambar tersebut  diulang menyamping (horisontal) dan berada ditengah,sekaligus  bersifat tetap (fixed) ketika halaman blog di scrool keatas atau bawah.

Karena penulisan syntax diatas terlalu banyak dan menyita waktu,maka bisa juga dipersingkat menjadi seperti berikut.

body{
background: white url(http://gambarku.com/image.jpg) repeat-x  center 30%;
background-attachment: fixed;
}

Kita bisa mengatur value dari properti background-repeat dan background-position untuk menentukan posisi background image sesuai yang kita inginkan.

background-repeat:
repeat : mengulang background gambar  kekanan sekaligus bawah
no-repeat: tidak mengulang background gambar
repeat-x: mengulang background gambar secara horizontal
repeat-y: mengulang background gambar secara vertical

background-position:
center : background gambar ditengah
top      : background gambar berada diatas
bottom:background gambar  berada dibawah
%(persen):background gambar berada berapa persen dari lebar selector

Contoh lain dengan background position
body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center top;
}
Maksudnya,backgaround image tersebut  tidak diulang dan akan berada di paling atas dan  posisinya berada ditengah.

body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center;
}
Maksudnya,backgaround image tersebut tidak diulang dan berada ditengah tengah.

Itulah dasar dari penggunaan syntax CSS untuk properti background,silahkan bereksplorasi untuk mengembangkannya.

Apa itu CSS

CSS adalah kependekan dari Cascading Style Sheet ,pengertiannya adalah sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.CSS inilah yang bertanggung jawab atas penampilan web anda  dimata pengunjung melalui browser internet.
CSS yang buruk bisa membuat visitor Anda tidak kerasan lagi menjelajahi blog anda,apalagi untuk kembali lagi.
Memaksimalkan CSS adalah penting (khususnya) blog agar lebih nyaman untuk dibaca dilihat oleh visitor anda dan kalau bisa bikin lah CSS yang meringankan loading.

Jika anda tertarik untuk mengedit tampilan template blog sendiri,maka mengerti CSS adalah wajib.Namun ingat,untuk menjadi seorang blogger tidak wajib untuk mengerti CSS karena banyak template yang bisa didapat dari desainer blog.Tapi tak ada salahnya kan mengerti sedikit saja?.....karena menggunakan tampilan blog hasil desain sendiri itu dapat memberikan kepuasan tersendiri.

Pengenalan Dasar penulisan CSS

Untuk pengenalan dasar CSS,kita wajib mengetahui apa itu yang namanya ;

• Selector
• Properti
• Deklarasi
• Nilai/Values

Contoh penulisan code  CSS

body {background-color: white;}

body adalah sebagai Selector
background-color adalah Properti
white adalah Nilai/values

Deklarasi adalah bagian yang berada didalam "{  }" yaitu properti dan nilai


Selector adalah bagian atau elemen yang ingin kita atur stylenya.
Properti adalah komponen yang kita butuhkan
Nilai/value adalah nilai dari deklarasi yang kita inginkan

Segitu saja dasar CSS,untuk lebih lanjut,nanti kita akan mengenal apa saja code yang bisa dimasukkan kedalam golongan properti,selector ataupun Nilai untuk postingan berikutnya.

Metode yang dipakai dalam penggunaan CSS

Inline style sheet metode
Penulisan atribut css langsung kedalam code HTML yang dimaksud

Contoh:

<div align="center" style="background="white;"> Ini adalah bagian yang diatur stylenya</div>


Embeded style sheet
Penulisan CSS dengan mendefinisikan dulu didalam sebuah tag
<style type="text/css">code CSS</style> yang dipasang sebelum tag </head>
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh:

<html>
<head>
<title>Title halaman</title>
<style>
body {background:#0000FF; color:#FFFF00;}
h1 {font-size:18px; color:#FF0000}
p {font-size:12px; font-family:arial; text-indent:0.5in}
.header-wrapper{margin:0 auto;border 1px solid #cccccc;}
</style>
</head>
<body>
<div class="header-wrapper">komponen header</div>
<h1>Judul psotingan ini berukuran 18 dengan warna merah!</h1>
<p>Artikel /paragraf ada disini berukuran 12</p>
</body>
</html>

Menurut sifatnya CSS itu memiliki 2 sifat yaitu CSS external dan CSS internal adalah CSS yang ditulis secara langsung didalam halaman web yang disesain.Jika anda membuat dua halaman web yang berstyle sama ,maka dihalaman yang kedua kita juga memasukkan code css yang sama

CSS external adalah CSS yang ditulis didalam berkas style.css dan diletakkan ditempat khusus atau bahkan diluar dari situs tersebut.
Berkas CSS itu bersxtensi css,bisa di beri nama yang memudahkan untuk diingat,misalnya cssku-page1.css.
Rumor mengatakan bahwa css external itu lebih meringankan loading blog?...saya kurang tahu pasti.Tergantung pilihan anda,lebih suka cara yang mana..

Cara penulisan code pemanggilan css  adalah
<link href="http://situsku.com/style/cssku.css" rel="stylesheet" type="text/css" media="screen"></link>

Segitu saja pengenalan pokok pokok CSS untuk posting kali ini,Nanti akan kita ulas lebih lanjut lagi.

Menghasilkan uang dari blog

Mendapat uang dari blog atau istilah kerennya Monetize blog adalah idaman banyak orang baik bloger ataupun lainnya.Memiliki blog yang bisa menghasilkan uang?.....pasive income,,kedengarannya merdu sekali.Itu memang tidak berlebihan karena sudah buanyak blogger yang sudah berhasil mengenyam manisnya pasive income.Walaupun kita Tidur,bermain atau melakukan pekerjaan yang lain,tetapi uang terus mengalir kedalam rekening setap waktu.
Sebuah mimipi yang indah dan bisa menjadi kenyataan untuk siapapun termasuk Kamu,dan tidak mengenal batasan usia maupun gender.
Kerja santai sekaligus minimalis resiko namun berpotensi mendapat penghasilan tak terbatas.Tidak diperintah perintah,tidak ada deadline,tidak ada ancaman,tidak ada jam kerja dan lain sebagainya....
Wah,ngomongnya nglantur nih..........tapi begitulah kenyataanya.....
Lalu bagaimana caranya agar blog bisa menghasilkan uang?....
Untuk memonitize sebuah blog ada banyak caranya,Cara yang paling simpel dan banyak diminati bloger adalah mengikuti program PPC.
PPC adalah pay perclick,dibayar untuk tiap klik iklan diblog Kamu.
Contohnya: Kamu bisa mengikuti program dari  adsense google, penyelenggara lokal Indonesia pun juga banyak.

PTR atau Pay To Review,Kamu mereview sebuah produk dan kamu dibayar untuk review yang dilakukan.
Untuk porgram program seperti itu,maka blog kamu akan masuk kategori sebagai PUBLISHER BLOG.
Itul adalah beberapa cara umum bagaimana menghasilkan uang dari blog dan masih banyak cara yang lain.

Apakah semudah itu lalu kita mendapat uang?..


Untuk bisa menghasilkan uang dari blog,Tentu saja kita harus memiliki beberapa blog yang sudah memiliki nilai jual.
Blog yang gimana sih yang memiliki nilai jual?...
Membuat blog yang memuat kontent original dan sangat bermanfaat adalah kunci utama agar blog memiliki nilai jual.Dengan membangun blog yang memuat kontent original dan bermanfaat ,yang lainnya pasti akan mengikuti dengan sendirinya.Seperti: Trafik,Page rank dll.

Untuk memiliki blog yang memiliki nilai jual ini sebenarnya cukup sederhana,hanya dibutuhkan passion sebagai bloger yang kuat.
Tidak sedikit blogger yang bertujuan monetize blog,namun pada akhirnya mereka menyerah.Diperlukan kesabaran tingkat tinggi,karena menurut saya membuat banyak postingan orisinil itu cukup menguras pemikiran.Perbanyaklah wawasan dan pengetahuan dengan cara banyak membaca.Ketahui passion kamu,disuitulah nanti kamu akan bisa dengan mudah dalam membuat artikel.

Bagaimana cara awal untuk membangun blog yang memiliki nilai jual?.....
Jika dari awal blog memang ditujukan untuk monetisasi,alangkah baiknya dari awal sudah dipersiapkan.Persiapkan sebuah domain tingkat atas atau disebut dengan domain name TLD.Domain TLD adalah domain yang kamu daftarkan atas nama kamu sendiri.Ada banyak ekstensi domain TLD,misalnya net,org,com,biz dll.Sebagai contoh domain dot com adalah seperti yang saya pergunakan untuk blog ini yaitu www.spiderbeat.com.
Baca:Apa yang dimaksud dengan Domain dan Hosting

Banyak pilihan dari extensi bisa kamu pergunakan,seperti misalnya menggunakan ekstensi dot com (.com=commercial).kamu juga bisa menggunakan ekstensi nama domain TLD lainnya,misalnya dot org (org=organization).
Extensi Ini tidak terlalu harus yang ini ataupun yang itu,namun alangkah baiknya jika Kamu menggunakan dot com,karena blog adalah blog komersial yang kamu kelola sendiri.Tidak ada aturan khusus sih sebenarnya,dot com sepertinya memang lebih pas untuk blog bisnis pribadi.

Apakah saya pasti berhasil untuk memonetize blog saya?..

Tips: Jika Kamu baru saja melangkah,jangan memikirkan Monetizenya lebih dulu,kebanyakan bloger gagal karena terlalu memikirkan hasilnya saat blog belum setengah jalan.

Fokus lah pada blog kamu,fokus lah pada artikel dan yang lain pasti akan mengikuti dengan sendirinya.

Sediakan modal awal hanya beberapa ribu rupiah untuk membeli domain .com ,pergunakan  platform blog/penyedia layanan blog dari blogger.
Dengan menggunakan fasilitas dari blogger,kamu tidak perlu untuk memikirkan hosting dan beragam permasalahannya.Sehingga kamu nantinya bisa terfokus hanya kepada konten artikel blog kamu.Baca: Cara membuat blog dibogspot

Blogspot sangat cocok untuk pemula (seperti saya) karena tak perlu pusing lagi untuk memikirkan biaya/modal tambahan.

Yang paling penting dilakukan pada masa awal menerjuni bisnis ini adalah,pikirkanlah untuk membuat konten/artikel blog yang UNIK.Selalu mendapat ide untuk mengupdate artikel secara teratur dan berlanjut.Cukup 1 artikel perhari sudah bagus,daripada 5 artikel sehari tapi liburnya satu minggu.

Selalu belajar dan berusaha untuk meningkatkan performa blog Kamu,istilahnya SEO atau search Engine Optimization.Ingat,pergunakanlah selalu teknik SEO yang tidak melanggar aturan.Selalu akrab dengan webmaster tools agar blog kamu berkembang setiap hari di SERP.

Gampangnya kata,jangan memikirkan uang duluan,tetapi pikirkanlah dulu bagaimana caranya blog kamu untuk bisa populer dengan kontent terbaik karya sendiri.Jika kamu hanya berfikiran uang melulu sementara blog baru jalan,dijamin deh kamu bakalan cepat bosan dan akan segera menyerah.
baru kemudian jika tiba saatnya blog kamu sudah populer,banyak pengunjung,percayalah secara uang laksana akan datang sendiri,,,,

Bagaimana cara membikin blog yang UNIK?..
Cari saja kemampuan yang ada pada diri Kamu,misalnya Kamu seorang ahli desain bangunan bisa menulis blog niche yang membahas Tutorial desain bangunan.
Apa yang kamu mampu,itulah yang Kamu tulis maka blog Kamu disebut sebagai blog yang UNIK.
Atau apapun yang mampu kamu tulis dan mampu mendorong orang untuk mencari dan membacanya,maka tulislah...

Saya tidak bisa menulis...
Tidak bisa menulis adalah hal yang wajar jika belum terbiasa,nanti akan terbiasa juga jika kamu setiap hari selalu menuangkan ide diatas screen blog kamu.
Seorang presiden belum terbayang akan mampu memimpin negara selagi dia masih duduk di SMA.Kamupun mungkin berfikiran seperti itu,tidak pernah bermimpi jika suatu saat nanti memiliki blog berpenghasilan ratusan dollar/hari.Hal itu mungkin saja bisa terjadi, asal tekad dan komitmen yang tak kenal menyerah demi 1 tujuan.Dan semuanya diawali dengan kemauan belajar dan bekerja keras.
Jangan takut tulisan jelek dan diejek orang,karena itu hanya perasaan kamu saja dan justru akan melemahkan semangat Kamu.Yang penting keep Posting dan promosi,dan tunggu pasive income suatu saat nanti.......

Kesimpulannya,hanya hasil dari kerja keras yang dibayar...seperti halnya menghasilkan uang dari blog,sama kayak pekerjaan offline yang lainnya.

Jika ada yang menawarkan bisnis online cepat,modal 100 ribu hasil ratusan juta perhari tanpa ada pangkal yang bisa dinalar,maka berhati hati saja...

Begitulah ulasan kali ini dan....
Tetap semangat.....

Persiapan sebelum menginstall ulang komputer

Menginstal ulang komputer diperlukan jika registry komputer anda sudah rusak parah baik akibat virus atau sebab lain.Dalam keadaan ini jika komputer masih saja sering hang,sangat lambat operasinya walau sudah discan menggunakan antivirus atau direparasi softwarenya seperti defragment,tune up registry.Untuk mengetahui performance Komputer yang normal dan sesuai,lebih baik anda membaca artikel berikut ini: Cara mengatasi CPU Usage 100%
Namun sebelum anda melakukan install ulang PC anda,berikut persiapan yang perlu di lakukan agar semuanya berjalan lancar.

Mempersiapkan Program atau Software
Sebelum kita menginstal ulang komputer, pastikan semua program komputer sudah tersedia. Misalnya yang paling penting yaitu driver komputer, Microsoft Office, Anti Virus dan program lainnya.

Operating System
Persiapkan Operating System (OS) yang mau digunakan. Biasanya saat kita membeli komputer atau laptop baru, sudah tersedia CD OS Restoration (kalau tidak ada yah pake CD/DVD lain yang sudah disiapkan).

Backup Folder yang penting
Sebelum kita menginstal ulang komputer, pastikan semua data telah dibackup terlebih dahulu. Seperti folder My Document, karena data-data tersimpan seperti di folder My Document.
Pokoknya jika kamu tidak ingin kehilangan data di driver c:\ ,sempatkanlah untuk melakukan backup.

Backup Bookmarks browser
Bookmarks yaitu catatan atau data dari alamat situs yang kita sukai lalu kita simpan,jika suatu saat kita membutuhkan situs tersebut tinggal membuka bookmark ini.
Pastikan juga bookmarks browser kita dibackup.
Bookmarks untuk browser IE terletak di bawah C:\Users\Favorites\.
Kalau browser Mozilla Firefox dan Chrome, dapat diexport bookmarks ke HTML atau backup dalam file JSON (Firefox).

IMG Source: www.flickr.com

Cara Membackup data
Ada beberapa cara untuk membackup data-data kita, data ditaruh di drive D atau E(file di folder D,E tidak akan terhapus setelah install ulang).
Data bisa kamu simpan ke tempat lainnya misalnya dihardisk external atau di flashdisk atau bisa juga di bakar ke DVD.Suka suka anda lah...

Kenapa komputer sering restart sendiri

Sebagai seorang yang selalu akrab dengan komputer,paling tidak mengetahui sedikit permasalahan pada komputer.Penting sekali agar jika ada permasalahan sedikit pada komputer anda tidak akan kebingungan dan tetap tenang.
Salah satu permasalah yang sering timbul adalah  komputer tiba tiba restart sendiri . Hal ini memang sepele, karena tidak jarang pekerjaan yang belum disave menjadi berantakan gara gara masalah ini.Maka kenalilah penyebab komputer sering restart sendiri,agar hal seperti ini tidak akan menimpa anda lagi.

Ada beberapa penyebab masalah komputer sering restart sendiri yang sudah lumrah terjadi, yaitu:

1. Power Supply (PSU)

Power supply merupakan alat pada komputer yang berfungsi untuk mendidtribusikan tegangan  listrik yang sudah disesuaikan untuk kebutuhan yang bisa mencukupi daya untuk rangkaian elektronik pada komputer.
Power suply yang bermutu rendah sangat rentan sekali untuk rusak karena tegangan listrik rumah yang tidak stabil.Walaupun sudah diberi stabilizer,PSU yang bermutu rendah tidak akan bisa menjamin akan bisa awet.


Pilihlah PSU yang berkualitas baik,tanyakan kepada toko atau teknisi yang menangani.Dilihat dari harga tentu saja sudah berbeda,ada harga ada barang.

Jika PC sudah menggunakan stabilizer namun masih saja sering restart,silahkan cek kondisi PSUnya (ada alatnya).Walaupun anda baru membelinya,itu bukan jaminan.

2. Fan / Kipas processor
jangan menganggap remeh fungsi Kipas pendingin komputer, Walaupu sekilas tampak paling sederhana,namun fungsi kipas heatsink ini amat penting.Dengan adanya kipas yang kondisinya masih baik,maka suhu dari prosesor akan tetap terjaga kestabilannya.

Kipas ini lambat laun  akan menurun RPMnya,wajar karena umur pemakaian.
.Jika putarannya sudah menurun maka tidak akan mampu membuang kelebihan suhu yang dihasilkan prosesor dengan sempurna.Sehingga suhu prosesor processor akan meningkat diluar batasan normal yaitu 50 derajat C.Jika demikian maka komputer anda akan beroperasi lambat,hang bahkan bisa matot .

Sebelum mengecek secara fisik keadaan fan prosesor,bisa di cek kinerjanya (putarannya) apakah masih kencang dan normal apa tidak.Software ini sekaligus dapat memeriksa suhu prosesor,apakah masih normal 50 derajat atau lebih.
Jika ketahuan putaran fan mulai menurun dan suhu prosesor diluar batas wajar,bisa dipastikan fan tersebut sudah mengalami keausan.Bisa anda ganti sendiri,murah untuk harga sebuah fan.Kalau mobil van itu yang mahal :)

IMG Source:flickr.com

3. Virus
Virus ,malmware dan sejenisnya bisa bekerja sendiri dibelakang layar.Karena sifat nya yang merusak,bisa jadi program program negatif tersebut melakukan flood kepada prosesor sehingga menyebabkan proses menjadi lambat.
Hal in jika fan prosesor masih bagus tapi suhu prosesor tetap melebihi batas,bisa jadi akibat virus dan lain lain.
Virus bisa merupakan salah satu penyebab kenapa  komputer anda bisa restart sendiri.

Scan PC kamu menggunakan Anti virus terbaik dan software cleaner untuk membersihkan virus atau membersihkan registry error .





----------------


Masalah diatas merupakan masalah masalah utama yang sering menjadi penyebab kenapa sebuah komputer menjadi sering restart sendiri.Langkah pertama ini penting,cek kondisi Power suply.Power suplay yang sudah tidak normal maka arus yang dihasilkan tidak stabil sesuai kebutuhan masing masing komponen/unit.
Baca Juga :Cara Mengatasi CPU Usage 100%

Cara membuat blog di blogspot

Blogger.com atau juga dikenal dengan blogspot merupakan layanan pembuatan blog gratis milik Google.Sampai saat ini, blogger telah banyak diperbumnakan oleh  para bloger diseluruh dunia.

Selain memiliki fitur yang paling  lengkap dan user interface yang bersahabat sehingga banyak yang menyukai blogger .Semua pengguna akun google  memiliki kesempatan sekaligus untuk memanfaatkan blog gratis ini.

Memonetize blog tetap diijinkan dengan dukungan fasilitas gratis mereka,dengan catatan tidak melanggar Terms Of Service yang ada.

Karena postingan ini membahas Cara membuat blog di blogspot,review untuk blogspot segitu saja ya?... :D

Saya tidak menjelaskan secara mendetail,karena blogspot sangat mudah,bahkan bagi pemula sekalipun.
Hanya saya jelaskan langkah-langkah paling mendasar saja,dan untuk selanjutnya silahkan untuk bereksplorasi dan berimprovisasi sendiri.


Langkah pertama

Buka dulu www.google.co.id,lihatlah di navigasi atas google.co.id dan kliklah gmail dan bikin akun email disana.Lewati langkah ini jika sudah punya akun Gmail.(Persiapkan nomor handphone anda ,karena pembuatan account google/gmail yang baru harus konfirmasi via handphone)

Langkah kedua

Masuk kedalam situs google.co.id dan pastikan anda sudah login Email Gmail yang baru anda bikin atau sudah bikin sebelumnya.Lihat navigasi bar atas,cari tulisan "Lainnya" sorot dengan pointer dan klik saja "Blogger"

Langkah ke tiga

Sekarang Anda sudah berada didalam situs www.blogger.com dan telah siap untuk mendaftarkan blog Anda.Daftarkan nama blog anda dan usahakan memakai nama yang unik sekaligus mudah anda hafalkan atau dihafalkan oleh orang lain.Jika nama blog anda sudah ada yang punya,nanti akan ada pesan untuk mencari nama yang lainnya.

Langkah ke empat

Jika pendaftaran blog anda sudah sukses,Pilih template/tema blog pertama anda disana dan setelah itu terbitkan.

Langkah kelima

Mulailah bikin posting untuk blog blogspot anda minimal 10 postingan terlebih dahulu,sebelum kemudian mengatur tata letak dan navigasi blog anda dengan cara masuk ke "Rancangan".Pilih dan add widget anda disana dengan cara klik"Add New Widget" ,banyak pilihan yang bisa anda ambil untuk blog anda disana.Misalnya anda akan memilih widget arsip,popular post,profil,search,label dsb.Catatan:Jangan klik "Coba antarmuka blogger yang baru" untuk sementara,karena akan membingungkan anda saja nantinya.Anda boleh menggunakan tampilan baru ini jika sudah paham betul dengan tampilanlama ini.

Langkah keenam(optional)

Dan jika anda tertarik menggunakan template dari para perancang template,download template.xml terlebih dahulu.Pastikan template yang anda download sudah diextract(Jika file dikompres dengan zip,rar dll),jika sudah diextract cari format template anda yaitu .xml.Contohnya template-SEO.xml,kemudian klik "Edit HTML" kemudian upload disana "Upload sebuah template dari sebuah file pada hard drive Anda"

Sekarang anda sudah memiliki 1 buah blog di blogger.com atau blogspot.Anda masih bisa membikin lebih banyak blog lagi disana dengan 1 account gmail/account google.
Selamat bekerja!!!...