Jumat, 18 September 2009

Sejarah Komputer
Generasi Pertama


Dengan terjadinya Perang Dunia Kedua, negara-negara yang terlibat dalam perang tersebut berusaha mengembangkan komputer untuk mengeksploit potensi strategis yang dimiliki komputer. Hal ini meningkatkan pendanaan pengembangan komputer serta mempercepat kemajuan teknik komputer. Pada tahun 1941, Konrad Zuse, seorang insinyur Jerman membangun sebuah komputer, Z3, untuk mendesain pesawat terbang dan peluru kendali.

Pihak sekutu juga membuat kemajuan lain dalam pengembangan kekuatan komputer. Tahun 1943, pihak Inggris menyelesaikan komputer pemecah kode rahasia yang dinamakan Colossus untuk memecahkan kode-rahasia yang digunakan Jerman. Dampak pembuatan Colossus tidak terlalu mempengaruhi perkembangan industri komputer dikarenakan dua alasan. Pertama, colossus bukan merupakan komputer serbaguna (general-purpose computer), ia hanya didesain untuk memecahkan kode rahasia. Kedua, keberadaan mesin ini dijaga kerahasiaannya hingga satu dekade setelah perang berakhir.

Usaha yang dilakukan oleh pihak Amerika pada saat itu menghasilkan suatu kemajuan lain. Howard H. Aiken (1900-1973), seorang insinyur Harvard yang bekerja dengan IBM, berhasil memproduksi kalkulator elektronik untuk US Navy. Kalkulator tersebut berukuran panjang setengah lapangan bola kaki dan memiliki rentang kabel sepanjang 500 mil. The Harvd-IBM Automatic Sequence Controlled Calculator, atau Mark I, merupakan komputer relai elektronik. Ia menggunakan sinyal elektromagnetik untuk menggerakkan komponen mekanik. Mesin tersebut beropreasi dengan lambat (ia membutuhkan 3-5 detik untuk setiap perhitungan) dan tidak fleksibel (urutan kalkulasi tidak dapat diubah). Kalkulator tersebut dapat melakukan perhitungan aritmatik dasar dan persamaan yang lebih kompleks.

Perkembangan komputer lain pada masa kini adalah Electronic Numerical Integrator and Computer (ENIAC), yang dibuat oleh kerjasama antara pemerintah Amerika Serikat dan University of Pennsylvania . Terdiri dari 18.000 tabung vakum, 70.000 resistor, dan 5 juta titik solder, komputer tersebut merupakan mesin yang sangat besar yang mengkonsumsi daya sebesar 160kW.

Komputer ini dirancang oleh John Presper Eckert (1919-1995) dn John W. Mauchly (1907-1980), ENIAC merupakan komputer serbaguna (general purpose computer) yang bekerja 1000 kali lebih cepat dibandingkan Mark I.

Pada pertengahan 1940-an, John von Neumann (1903-1957) bergabung dengan tim University of Pennsylvania dalam usha membangun konsep desin komputer yang hingga 40 tahun mendatang masih dipakai dalam teknik komputer. Von Neumann mendesain Electronic Discrete Variable Automatic Computer(EDVAC) pada tahun 1945 dengan sebuh memori untuk menampung baik program ataupun data. Teknik ini memungkinkan komputer untuk berhenti pada suatu saat dan kemudian melanjutkan pekerjaannya kembali. Kunci utama arsitektur von Neumann adalah unit pemrosesan sentral (CPU), yang memungkinkan seluruh fungsi komputer untuk dikoordinasikan melalui satu sumber tunggal. Tahun 1951, UNIVAC I (Universal Automatic Computer I) yang dibuat oleh Remington Rand, menjadi komputer komersial pertama yang memanfaatkan model arsitektur von Neumann tersebut.

Baik Badan Sensus Amerika Serikat dan General Electric memiliki UNIVAC. Salah satu hasil mengesankan yang dicapai oleh UNIVAC dalah keberhasilannya dalam memprediksi kemenangan Dwilight D. Eisenhower dalam pemilihan presiden tahun 1952.

Komputer Generasi pertama dikarakteristik dengan fakta bahwa instruksi operasi dibuat secara spesifik untuk suatu tugas tertentu. Setiap komputer memiliki program kode-biner yang berbeda yang disebut “bahasa mesin” (machine language). Hal ini menyebabkan komputer sulit untuk diprogram dan membatasi kecepatannya. Ciri lain komputer generasi pertama adalah penggunaan tube vakum (yang membuat komputer pada masa tersebut berukuran sangat besar) dn silinder magnetik untuk penyimpanan data.

Selengkapnya...

Kamis, 10 September 2009

Cara menambah kolom header

Ada cara mudah untuk menambah satu kolom header yang bisa dipasang dengan berbagai macam widget semisal text, video, iklan, link dan sebagainya.
Dengan cara ini tidak dibutuhkan penambahan kode apapun selain merubah status baris kode html tertentu pada blogspot dan selanjutnyq tinggal drag dan drop atau menambah widget seperti biasanya..


Cari kode dibawah ini dan kemudian ganti angka 1 pada maxwidget dengan angka diatas 1 misalnya 2 atau 3 (tergantung berapa banyak widget yang ingin anda tambahkan) dan kemudian ganti status “no” pada showaddelement menjadi “yes” dan kemudian simpan.Lihat kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Tulisan yang di blok (maxwidgets) adalah jumlah widgets yang di tampilkan, biasanya template yang belum di modifikasi jumlahnya hanya satu (1) nah anda hanya perlu menggantinya nominal angkanya saja.


Selamat mencoba...

Selengkapnya...

Cara membuat Artikel yang berhubungan pada blog

Keuntungan menampilkan "Artikel yang berhubungan" atau "Related Post" , "Related Article" adalah para pembaca blog bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yang sedang mereka baca. Contohnya seperti yang ada dibagian akhir dari artikel ini, disitu ada link-link dari artikel yang berhubungan yang berdasarkan pada kategori atau label yang sama. Nah mau tahu cara membuatnya?




Caranya cukup mudah, ikuti langkah2 berikut ini:

1. Login dulu ke blog kamu

2. Pilih menu "Layout-->Edit HTML"

3. Beri tanda centang pada kotak "Expand Widgets Template" .

4. Setelah itu cari kode ini <data:post.body/> dan letakkan script dibawah ini setelah kode tersebut.



5. Kalau sudah tinggal di simpan (simpan template/save template) dan lihat hasilnya.
Selamat mencoba...

Tambahan:

Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.

Selengkapnya...

Selasa, 08 September 2009

Cara membuat tabel

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya. Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:



  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
  • cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .
  • border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel" .
  • cellspacing
  • : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .
  • height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .
  • height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%" .


Sintaks atau kode yang terbentuk yaitu seperti ini :

<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">

.....................

</table>



Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).
Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).
Sintaks atau kode yang terbentuk yaitu seperti ini :

<caption align="top"|"bottom">

............................

</caption>



elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :
  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
Sintaks atau kode yang terbentuk yaitu seperti ini :

<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">

.....................

</tr>



elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:
  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
  • colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
  • rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"
Sintaks atau kode yang terbentuk yaitu seperti ini :

<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</th>



Elemen TR(Table Row) adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :
  • align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .
  • valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"
  • bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
  • colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .
  • rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"
Sintaks atau kode yang terbentuk yaitu seperti ini :

<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</td>



Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :

Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :

<table width="200" border="1">
<tr>
<td>

  Tutorial Blog


</td>
</tr>
<table>



Hasilnya akan seperti ini :



Tutorial Blog



Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

<table width="200" border="9">
<tr>
<td align="center">

 Tutorial Blog
</td>
</tr>
</table>


Hasilnya akan seperti ini :



Tutorial Blog

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">
<tr>
<td align="center">

  Tutorial Blog
</td>

<td align="center">


  Ini Juga
</td>

</tr>
</table>


Hasilnya akan seperti ini :



Tutorial Blog


Ini Juga

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">

 Tutorial Blog
</td>
<td align="center">

  tutorial juga 

</td>
</tr>
<tr>
<td align="center">

 Tutorial Blog
</td>
<td align="center">

  tutorial juga

</td>
</tr>
</table>



hasilnya seperti ini :




Tutorial Blog


tutorial juga


Tutorial Blog


tutorial juga

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">

  Tutorial Blog
</td>

<td align="center">

  Tutorial juga

</td>

<tr bgcolor="yellow">
<tr>
<td align="center">

  Tutorial Blog
</td>

<td align="center">

  Tutorial juga

</td>

</tr>
</table>


hasilnya seperti ini :



Tutorial Blog


Tutorial juga


Tutorial Blog


Tutorial juga


Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :


Tabel 1.0
Anggota Blog Ini
No. Nama
1. Paimo
2. Paijo
3. Paidi










Kode yang di pakai bisa seperti ini :

<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.0</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Anggota Blog Ini</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Paimo</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Paijo</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Paidi</td>
</tr>
</table>


Hasilnya kira-kira seperti ini :


Tabel 1.0
Anggota Blog Ini
No. Nama
1. Paimo
2. Paijo
3. Paidi











Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan untuk menempatkan gambar agar terlihat lebih rapih. Contoh :
Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan untuk menempatkan gambar agar terlihat lebih rapih. Contoh :


<table width="300" border="1" cellpadding="20">
<tr>
<td align="center">
<a href="http://tutorialbloggerotodidak.blogspot.com" target="new"><img height="58" src="http://t1.gstatic.com/images?q=tbn:3RQ95eCvszeyaM:http://hendroatmoko.bravehost.com/myPictures/angksa_net_dan_fatal_muntadzor.jpg" alt="mau mahir membuat blog ?klik saja di sini"/></a>
</td>
<td align="center">
<a href="http://fatal-muntadzor.blogspot.com"><img src="http://t0.gstatic.com/images?q=tbn:XGhYyHpjYPkfOM:http://2.bp.blogspot.com/_RuAk6FdPyJw/SgkgIi8IaaI/AAAAAAAAAIg/4qofGi_-Xxs/s320/Screenshoot%2Bfat.web.jpg" alt="Blog centre"/></a>
</td>
</tr>
<tr>
<td align="center">
<a href="http://fatal-muntadzor.blogspot.com"><img src="hhttp://t0.gstatic.com/images?q=tbn:XGhYyHpjYPkfOM:http://2.bp.blogspot.com/_RuAk6FdPyJw/SgkgIi8IaaI/AAAAAAAAAIg/4qofGi_-Xxs/s320/Screenshoot%2Bfat.web.jpg" alt="Blog centre"></a>
</td>
<td align="center">
<a href="http://tutorialbloggerotodidak.blogspot.com" target="new"><img height="58" src="http://t1.gstatic.com/images?q=tbn:3RQ95eCvszeyaM:http://hendroatmoko.bravehost.com/myPictures/angksa_net_dan_fatal_muntadzor.jpg" alt="mau mahir membuat blog ?klik saja di sini"/></a>
</td>
</tr>
</table>



Hasilnya akan seperti ini :




mau pinter membuat blog atau website? klik saja di sini


mau software murah tapi sangat berguna? klik saja di sini


mau software murah tapi sangat berguna? klik saja di sini


mau pinter membuat blog atau website? klik saja di sini


jika sobat beranggapan bahwa garis tabel menggangu pemandangan, maka kita bisa mensiasatinya dengan cara menghilangkan garisnya yaitu nilai borde rnya kita buat 0 (nol).
contoh :


<table width="300" border="0" cellpadding="20">
<tr>
<td align="center">
<a href="http://tutorialbloggerotodidak.blogspot.com" target="new"><img height="58" src="http://t1.gstatic.com/images?q=tbn:3RQ95eCvszeyaM:http://hendroatmoko.bravehost.com/myPictures/angksa_net_dan_fatal_muntadzor.jpg" alt="mau mahir membuat blog ?klik saja di sini"/></a>
</td>
<td align="center">
<a href="http://fatal-muntadzor.blogspot.com"><img src="http://t0.gstatic.com/images?q=tbn:XGhYyHpjYPkfOM:http://2.bp.blogspot.com/_RuAk6FdPyJw/SgkgIi8IaaI/AAAAAAAAAIg/4qofGi_-Xxs/s320/Screenshoot%2Bfat.web.jpg" alt="Blog centre"/></a>
</td>
</tr>
<tr>
<td align="center">
<a href="http://fatal-muntadzor.blogspot.com"><img src="hhttp://t0.gstatic.com/images?q=tbn:XGhYyHpjYPkfOM:http://2.bp.blogspot.com/_RuAk6FdPyJw/SgkgIi8IaaI/AAAAAAAAAIg/4qofGi_-Xxs/s320/Screenshoot%2Bfat.web.jpg" alt="Blog centre"></a>
</td>
<td align="center">
<a href="http://tutorialbloggerotodidak.blogspot.com" target="new"><img height="58" src="http://t1.gstatic.com/images?q=tbn:3RQ95eCvszeyaM:http://hendroatmoko.bravehost.com/myPictures/angksa_net_dan_fatal_muntadzor.jpg" alt="mau mahir membuat blog ?klik saja di sini"/></a>
</td>
</tr>
</table>

Hasilnya akan seperti ini :




mau pinter membuat blog atau website? klik saja di sini


mau software murah tapi sangat berguna? klik saja di sini


mau software murah tapi sangat berguna? klik saja di sini


mau pinter membuat blog atau website? klik saja di sini


Catatan kecil saja. Karena kode diatas merupakan kode HTML, maka pada saat posting harus pada posisi Edit HTML jangan pada posisi Compose. Apabila ingin di simpan di sidebar, pilih yang untuk HTML/javaScript.
Rasanya cukup deh untuk kali ini, silahkan sobat buat variasi-variasi lainnya dari fungsi tabel ini.

Selengkapnya...

Kode-kode Warna HTML

Pada dasarnya untuk memilih sebuah warna sudah tersedia pada postingan blog itu sendiri, disitu anda tinggal memilih warna sesuai dengan keinginan anda.Tapi bagaimana apabila anda sedang mengedit template blog ? Apakah kita akan melihat pada postingan blog tersebut ? tentunya sangat repot apabila kita harus bolak-balik kesana-kemari.Satu contoh seumpama anda sedang menginginkan background untuk header warnanya merah, tentu anda di haruskan untuk menuliskan kode warna merah itu sendiri, terus bagaimana cara untuk menulis kode warna merah ? Ya kita tinggal menulis kode red; atau #FF0000; maka warna merah yang kita inginkan tercipta, enak to !? Betul, itu kalau anda hafal dengan kode warna yang harus anda tulis.Kalau tidak ! ya...terpaksa anda harus browsing mencari kode warna itu sendiri.Nah di sinilah tujuan saya menulis tentang kode warna HTML, langsung saja anda perhatikan tulisan di bawah :


Putih
kode penulisannya = <div style="color: #FFFFFF;">tulis yang anda inginkan disini</div>

Hitam
kode penulisannya = <div style="color: #000000;">tulis yang anda inginkan disini</div>

Ungu
kode penulisannya = <div style="color: #9933cc;">tulis yang anda inginkan disini</div>

Biru
kode penulisannya = <div style="color: #0000CC;">tulis yang anda inginkan disini</div>


Hijau
kode penulisannya = <div style="color: #009900;">tulis yang anda inginkan disini</div>

Merah
kode penulisannya = <div style="color: #FF0000;">tulis yang anda inginkan disini</div>

Kuning
kode penulisannya = <div style="color:#FFFF00;">tulis yang anda inginkan disini</div>

Untuk mempersingkat waktu dan tempat coba anda perhatikan tabel di bawah, anda tinggal menggunakan kode-kode nya sesuai dengan warna yang anda pilih.


#333333

#666666

#999999
#CCCCCC#000066#003399#006699

#996600
#999900
#ff00ff
#77E2FF#77E2FF#77E2FF#00CCCC

#00CC99
#999900
#00CC33
#00FF99#990000#990066#996666

#99CC00
#99CC99
#99CCCC
#99CCFF#99FFFF#99FFCC#9999FF

#9966FF
#9900CC
#FF6600
#FF9900#FFCC00#FFCC99#FFCCCC

Hmmm...banyak juga warna-warnanya...ehmm...saya kira itu sudah cukup untuk menciptakan warna dasar dan sudah cukup untuk membuat blog anda berwarna-warni, sebenarnya masih banyak kode-kode warna yang akan saya posting tapi berhubung sudah pagi (jam 03.25) saya harus santap sahur (maklum bulan ramadhan) sekian lain waktu saya sambung dengan tutorial blog lainnya.Semoga bermanfaat...

Selengkapnya...

Cara menambah kolom pada blogspot

Mengedit template blogspot pada dasarnya tidaklah sulit, apalagi template blogspot tersebut didesain dalam satu buah dokumen XML. Berbeda halnya dengan template Wordpress CMS yang terdiri dari banyak dokumen (file) yang terintegrasi. Selain itu, struktur kode pada template blogspot juga lebih sederhana jika dibandingkan dengan Wordpress CMS yang dibangun menggunakan PHP-MySQL. Sebenarnya keduanya juga mempunyai teknik sendiri-sendiri dan bergantung kapabilitas kita pada pemrograman yang mana, XML atau PHP. Namun, saya tidak akan membawa Anda berselancar sampai kesasar dalam menyelami struktur bahasa pemrograman tersebut. Saya hanya akan memberikan tips dan trik yang biasa saya gunakan dalam mengedit template blogspot. Saya sudah pernah menjelaskan bahwa blogspot menyediakan 2 cara yang bisa kita gunakan dalam mengedit template blogpsot.



1. Yang Pertama adalah dengan mengedit melalui bagian Elemen Halaman. Pada dasbor klik link menu Tata Letak dan pilih submenu Elemen Halaman. Cara ini hanya untuk menambah maupun menghapus widget yang Anda masukkan pada blog.
2. Yang Kedua adalah dengan mengedit melalui bagian Edit HTML. Pada dasbor klik link menu Tata Letak dan pilih submenu Edit HTML.


Cara yang kedua juga terbagi 2 lagi, yaitu: mengedit dengan mengaktifkan pilihan Expand Template Widget dan tanpa mengaktifkannya. Jika kita mengaktifkan (mencentang) pilihan Expand Template Widget, maka kita akan ditunjukkan kode template yang lebih kompleks.
Berikut beberapa tips dan trik yang saya maksud dimana saya asumsikan kita tidak terlalu paham dengan pemrograman XML:


1. Jika kita ingin menambah kolom di bagian tertentu, bekerjalah pada bagian Edit HTML dengan tidak mencentang pilihan Expand Template Widget agar kode untuk menambah kolom lebih mudah dikenali. Kolom yang saya maksud adalah bagian-bagian yang menyusun layout blogspot, seperti kolom header, kolom mainbar, sidebar, dan footer, yang semuanya sudah saya bahas di sini dan di sini, dan kita akan mencoba untuk menambah kolom seperti bagian-bagian tersebut sehingga kita bisa menambah konten seperti widget pada kolom yang akan kita tambahkan.




2. Sebagai contoh kita akan menambah kolom baru di bawah header. Pada bagian Edit HTML, backup terlebih dahulu template Anda dengan mengklik link Download Template Lengkap pada bagian Backup/Restore Template agar jika terjadi kesalahan, bisa mengembalikan ke template semula.
3. Jangan memberi centang pada bagian Expand Template Widget.4. Selanjutnya adalah kita akan mencari struktur HTML yang digunakan untuk menambah sebuah kolom. Asumsinya adalah kita ingin mencontoh struktur kode yang digunakan oleh si pembuat template untuk membuat sebuah kolom. Dengan demikian, kita tinggal meng-copy paste struktur tersebut dan merubah beberapa bagian untuk membuat kolom baru. Inti yang saya maksud adalah MENGENALI POLA. Ibaratnya seperti ini, kita ingin membuat sebuah persegi, namun tidak tahu cara membuatnya. Maka kitapun melihat sebuah persegi yang dibuat orang lain dan menyimpulkan bahwa untuk membuat sebuah persegi dibutuhkan 2 buah garis vertikal dan 2 buah garis horizontal dimana setiap ujung dari garis tersebut bertemu. Permasalahan yang muncul adalah bagaimana caranya kita mengetahui pola (struktur dasar) yang digunakan untuk membuat sebuah kolom pada template blogspot yang mana kita tahu sendiri ada puluhan baris kode yang harus kita kenali. Caranya ada pada langkah selanjutnya.
5. Pada kotak kode template yang ada pada bagian Edit HTML tersebut, periksalah secara perlahan kode-kodenya sampai Anda menemukan kode yang merupakan kode untuk Header (sebab kita ingin menambah kolom di bawah header). Tipsnya adalah temukan kode yang paling tidak ada tulisan "header" nya. Perhatikan kode berikut:

<div id="header-wrapper"> <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> <b:widget id="Header1" locked="true" title="Header" type="Header"> </b:widget> </b:section> <div id="content-wrapper">
<div id="crosscol-wrapper" style="text-align: center;">
</div>
</div>


6. Anda tentu bingung kode yang digunakan untuk menambah kolom header dimulai dari mana dan berakhir sampai dimana. Untuk itu silahkan turun lebih ke bawah sampai Anda melihat kode seperti berikut:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>


7. Coba Anda perhatikan bahwa kode pada langkah 6 mempunyai kemiripan dengan bagian kode yang ada pada langkah 5. Terdapat struktur yang dibungkus oleh tag
<div>
</div>


, kemudian di dalamnya terdapat struktur yang dibungkus oleh tag <b:section></b:section>, baru kemudian di dalamnya terdapat stuktur

<b:widget>. Tag </b:widget>
<div> </div>


digunakan untuk membuat "kotak" yang membungkus struktur di dalamnya, sedangkan <b:section></b:section> merupakan kode untuk membuat kolom baru. Adapun kode <b:widget> merupakan kode untuk menambah widget yang bisa juga ditambahkan melalui bagian Elemen Halaman pada menu Tata Letak. Dari sini bisa dianalogikan bahwa struktur kode yang digunakan untuk membuat kolom header pada langkah 5 adalah seperti yang di tulis merah di bawah ini:

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='Header' type='Header'/> 
</b:section> 
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>



8. Jika Anda belum yakin, silahkan periksa kode-kode yang lain. Anda akan menemukan kode-kode yang mempunyai kemiripan pola seperti yang ada pada langkah 6 dan 7. Pola struktur kode tersebutlah yang akan kita contoh untuk menambah kolom baru.
9. Sekarang copy-lah struktur kode yang ditulis merah pada langkah 7 kemudian paste-kan tepat di bawah struktur kode merah tersebut.
10. Selanjutnya, kita akan mengedit beberapa bagian agar tidak terjadi duplikasi. Pada bagian tag <div> biarkan tetap agar pengaturan CSS yang digunakan sama dengan pada header. Jika Anda ingin membuat atribut CSS baru untuk mengatur kolom yang akan Anda tambahkan, silahkan ganti ID div tersebut.
11. Untuk section class penjelasannya sama dengan langkah 10.
12. Yang perlu Anda ganti adalah section id agar tidak sama dengan header. Misalkan Anda ganti menjadi "iklan".
13. Maxwidgets merupakan parameter untuk mengatur jumlah widget yang boleh Anda tambahkan pada kolom baru tersebut. Jika Anda tidak ingin membatasinya, maka hapus saja kode tersebut.
14. Showaddelement merupakan parameter untuk mengatur apakah akan ditampilkan link "Add Gadget" pada bagian layout blogspot (di bagian Elemen Halaman pada menu Tata Letak). Gantilah menjadi "yes" agar boleh menambah gadget (widget) baru.
15. b:widget merupakan struktur sebuah widget (gadget) yang telah ditambahkan pada kolom tersebut. Jika adan ingin langsung menambahkan, maka gantilah id dari widget tersebut. Hapuslah kode <b:widget id='Header1' locked='true' title='Header' type='Header'/> ntuk membuang widget tersebut dari kolom yang Anda buat. Maka struktur kode keselurahan untuk menambah kolom baru pada header adalah sebagai berikut:

<div id='header-wrapper'>
<b:section class='header' id='iklan' showaddelement='yes'>
</b:section>
</div>


16. Klik tombol SIMPAN TEMPLATE.
17. Sekarang klik submenu Elemen Halaman pada bagian Tata Letak. Anda akan melihat kolom baru telah bertambah di bawah header.





18. Sekarang Anda tinggal menambah gadget (widget) baru dan bisa mengedit tampilan melalui CSS. Misalnya Anda ingin membuat CSS untuk mengatur section id="iklan" yang Anda defenisikan pada langkah 12, maka tambahkan struktur CSS pada template Anda untuk atribut "iklan" dari section tersebut.
19. Selamat mencoba.

Selengkapnya...

  © Fatal Muntadzor Desain Grafis and Desain Solo 2009

Back to TOP