Kamis, 30 Mei 2013

 ASAL USUL BLOG

Pengertian Blog

Blog adalah kependekan dari Weblog, istilah ini pertama kali digunakan oleh “Jorn Barger” pada bulan Desember tahun 1997.Jorn Barger menggunakan istilah Weblog untuk menyebut kelompok website pribadi yang selalu diupdate secara continue dan berisi link-link ke website lain yang mereka anggap menarik disertai dengan komentar-komentar mereka sendiri.

Secara garis besar, Weblog dapat dirangkum sebagai kumpulan website pribadi yang memungkinkan para pembuatnya menampilkan berbagai jenis isi pada web dengan mudah, seperti karya tulis, kumpulan link internet, dokumen-dokumen , gambar ataupun multimedia

Para pembuat blog ini sering di sebut dengan nama Blogger. Melalui Blognya kepribadian Blogger menjadi begitu mudah dikenali berdasarkan topik apa yang disukai, apa tanggapan terhadap link-link yang di pilih dan isu-isu didalamnya oleh karena itu Blog bersifat sangat personal.

Perkembangan lain dari Blog yaitu ketika Blogger memuat tulisan tentang apa yang sedang di pikirkan, rasakan, hingga apa yang dia lakukan sehari-hari. Blog personal dapat di sebut juga Diary Online yang berada di Internet. Satu-satunya hal yang membedakan Blog Diary atau Jurnal yang biasa kita miliki adalah bahwa blog dibuat untuk dibaca orang lain.

Seiring perkembangan weblog dari waktu ke waktu, pengertian weblog juga akan berkembang seiring dengan ide - ide dan kemauan para Blogger.



Sejarah Blog

Blog pertama kemungkinan besar adalah halaman "What’s New" pada browser Mosaic yang dibuat oleh Marc Andersen pada tahun 1993. Mosaic adalah browser pertama sebelum adanya Internet Explorer bahkan sebelum Nestcape..Kemudian pada Januari 1994 Justin Hall memulai website pribadinya "Justin’s Home Page" yang kemudian berubah menjadi "Links from the Underground" yang mungkin dapat disebut sebagai Blog pertama seperti yang kita kenal sekarang.

pada tahun 1998, jumlah Blog yang ada masih sangat sedikit. Hal ini disebabkan karena saat itu diperlukan keahlian dan pengetahuan khusus tentang website, HTML, dan web hosting untuk membuat Blog, sehingga hanya mereka yang berkecimpung di bidang Internet, System Administrator atau Web Designer saja yang kemudian menciptakan Blog-Blog mereka sendiri.

Hingga kemudian media blog pertama kali di populerkan oleh Blogger.com yang di miliki oleh PyraLab sebelum akhirnya PyraLab diakuisi ( di beli ) oleh google.com pada akhir 2002 yang lalu, Semenjak saat itu banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada perkembangan para penulis blog tersebut.

Sampai akhirnya saat ini, tidak perlu menjadi seorang programmer untuk menjadi seorang Blogger, karena anda dapat menampilkan seluruh isi dalam web dengan mudah melalui menu editor yang telah banyak disediakan


Dasar Pemikiran Pembuatan Blog

Ada beberapa alasan bagi seseorang dalam membuat blog atau situs .Ada yang bertujuan untuk bisnis, ada pula yang bertujuan untuk non bisnis, berikut adalah maksud dari tujuan bisnis dan tujuan non bisnis :


Ø Tujuan non bisnis

Situs internet dapat dibuat berdasarkan atas tujuan nonbisnis dan dapat pula didasarkan atas kepentingan bisnis. Untuk nonbisnis adalah dimana pembuatan situs blog untuk memberikan ilmu gratis dari internet, berbagi ilmu dengan orang lain , melakukan penelitian bersama, atau sekedar memberi informasi tentang kehidupan pribadi baik di kantor atau di rumah melalui internet. Pembuatan situs untuk nonbisnis ini tidak terlalu mementingkan bisnis artiya sumber pembiayaan situs tidak terlalu dipermasalahkan oleh pembuat blog dikarenakan sudah memiliki sumber pendapatan yang lain.

Ø Tujuan bisnis

Bisnis adalah suatu entitas yang mana memliki tujuan untuk menghasilkan profit (keuntungan) tertentu.Bila kita melakukan suatu aktivitas bisnis di Internet maka tentu saja dalam rangka menghasilkan profit ( untung ) .Istilah dalam bahasa computer berbisnis di Internet disebut electronic commerce atau lebih dikenal dengan e-commerce. Oleh sebab itu sudah jelas bahwa untuk tujuan ini memerlukan usaha untuk mendirikannya, menjalankan serta memelihara usaha agar memperoleh profit minimal untuk operasional situs tersebut.


 Keuntungan penggunaan Blog

Begitu banyak keuntungan dari penggunaan blog, di bawah ini adalah salah satu dari kegunaan penggunaan blog :


  •  Melalui sebuah blog ,anda dapat memperluas hubungan antar teman ataupun kenalan hingga dapat membentuk suatu komunitas yang besar. 
  • Blog melebihi surat elektronik (Email), dikarenakan satu posting blog yang anda bahas, dapat dibaca oleh pengunjung blog yang tak terbatas jumlahnya. Beda dengan email yang hanya bisa dibaca oleh orang khusus yang anda kirimkan. Selain itu, pengunjung blog juga dapat dengan cepat memberikan respon terhadap posting blog anda melalui komentar yang dapat langsung dituliskan di blog tersebut.




CARA MEMBUAT MENU HORISONTAL DI BLOG

Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.


1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
4. Letakkan kode berikut di atasnya.


#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqeijA3Wley38rBp4C0xrW5SttsxAMgRXvRH_31GFF8t88qEpwvW9ux246F0PMSHmGXMUvBL-W9mY6FxKj5OVBthlK4-7KzmrxmE3kcMDXPjbX3_IGYLVT10iDc6yRUkHjOmtbFZveA9c/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqeijA3Wley38rBp4C0xrW5SttsxAMgRXvRH_31GFF8t88qEpwvW9ux246F0PMSHmGXMUvBL-W9mY6FxKj5OVBthlK4-7KzmrxmE3kcMDXPjbX3_IGYLVT10iDc6yRUkHjOmtbFZveA9c/) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYHIVfVfCiN-cpwAijUANg9TfRhgzUJX70t7MfiMe6EEm6gD0wne3uM5QT_sDb-xK-BGbav0rs9zrGYBFb0vAEyGgKrRiBMZxlx-9XKr_J9c-RL9hEBtXtYBYG_5dPKP0Ojc0-ILYzDTZV/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYHIVfVfCiN-cpwAijUANg9TfRhgzUJX70t7MfiMe6EEm6gD0wne3uM5QT_sDb-xK-BGbav0rs9zrGYBFb0vAEyGgKrRiBMZxlx-9XKr_J9c-RL9hEBtXtYBYG_5dPKP0Ojc0-ILYzDTZV/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}

#tejas li:hover, #tejas li.sfhover {
position: static;
}

tambahan :
  • Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat.
  • Hampir semua bagian dari kode di atas bisa di edit,  tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

5. Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://christiantatelu.blogspot.com/'>Home</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=Link sobat di sini!' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

  • Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan link posting.
contoh link kategori atau label, modelnya seperti ini.
http://christiantatelu.blogspot.com/search/label/BLOG

sedangkan link posting seperti ini .
http://christiantatelu.blogspot.com/2012/01/membuat-link-terbuka-di-tab-baru.html
  • Ganti tulisan berwarna ungu dengan url blog sobat.
  • Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

6. Save template..

Semoga cara membuat menu horisontal di atas bisa membantu sobat blogger.

Rabu, 29 Mei 2013


Pengenalan HTML

Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Elemen dasar HTML
 
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari file HTML)
 
Judul
<TITLE></TITLE>
(harus selalu terdapat pada mukadimah)
 
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum, seperti judul dsb.)
 
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)

Contoh
<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>

Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai
Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS.
Untuk mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>
Hasil:
Tulisan dengan font-family Georgia
Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk membuat tulisan miring digunakan properti font-style:
<p style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat tulisan miring
Untuk membuat tulisan tebal digunakan properti font-weight:
<p style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat tulisan tebal
Untuk mengatur ukuran font digunakan properti font-size:
<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan dengan ukuran font 16px
Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.
<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan dengan ukuran 16px
Tulisan dengan ukuran 100%
Tulisan dengan ukuran 1em
Tulisan dengan ukuran 12pt
Untuk membuat warna font digunakan properti color:
<p style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini akan berwarna biru
Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.
<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat warna tulisan dengan Nilai RGB
Membuat warna tulisan dengan Kode Hexadecimal
Membuat warna tulisan dengan Nama Warna
Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.
<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
Contoh tulisan dengan font-family, font-size dan font-weight.
Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.
<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>
Hasil:
Contoh tulisan dengan properti font.

ini yang komplit

<p style="font-style:italic; font-size:30px; verdana; color:red">Contoh tulisan dengan properti font.</p>

Hasilnya
Contoh tulisan dengan properti font.