Mengganti Template Blogspot

Beberapa rekan saya sering bertanya ketika saya menjelaskan bagaimana langkah-langkah membuat blog di blogspot baik melalui e-book panduan menciptakan blog di blogspot atau belajar membuat blog secara langsung (lisan). Pertanyaan yang secara spontan muncul adalah apakah template blogspot yang kita pakai sekarang bisa diganti dengan yang template blogspot baru?
Ada 2 pilihan yang yang bisa kita lakukan, yang pertama adalah mengganti template blog yang lama dengan template yang telah disediakan oleh blogspot. Sedangkan pilihan kedua adalah mengganti dengan template yang berasal dari luar, baik itu kita desain sendiri atau kita download dari situs-situs penyedia template blogspot gratis atau bayar.
Pilihan pertama bisa dilakukan dengan langhak-langkah berikut:

1. Silahkan Login terlebih dahulu untuk masuk ke akun blog pembaca.
   
2. Pada halaman dasbor, pilih link menu Tata Letak. Dibawah menu tersebut terlihat sub menu Pilih Template Baru yang harus kita klik untuk melihat template apa saja yang tersedia yang bisa kita gunakan.

Secara umum, template-template tersebut sama dengan template yang kita lihat ketika pertama kali menciptakan blog di blogspot. Namun ada beberapa pilihan yang terdapat pada template yang kita pilih, misalnya warna dari desain template blog tersebut.

Pilihan kedua dalam mengganti template tersebut bisa dilakukan dengan langkah sebagai berikut:

1. Karena kita ingin mengganti dengan template yang kita dapat dari luar, maka kita harus mempersiapkan template yang akan kita gunakan. Template tersebut bisa dari hasil desain kita sendiri atau kita download dari situs lain. Namun blog ini sudah menyediakan sebuah free blogspot template yang boleh pembaca gunakan. Silahkan klik disini untuk mendownloadnya.
   
2. Setelah selesai mendownload template tersebut, silahkan masuk ke akun blogspot pembaca, kemudian pilih link menu Tata Letak, lalu klik pada sub menu Edit HTML.
   
3. Sebelum melakukan perubahan pada template blog Anda, ada baiknya pembaca mem-backup terlebih dahulu template yang sedang pembaca gunakan agar jika terjadi kerusakan saat mengganti atau pembaca ingin kembali menggunakan template yang lama, bisa langsung meng-upload-nya kembali.
4. Klik tombol Browse pada kotak "Upload sebuah template dari sebuah file pada hard drive Anda" untuk mencari template yang telah pembaca download pada langkah 1. Setelah itu klik tombol Unggah (upload).

Silahkan lihat perubahannya.
Untuk download template blogspot gratis lainnya atau mendapatkan layout friendster yang cantik dan keren, silahkan buka www.sumbergratis.co.cc

»»  read more

Lebih Jauh Mengenal Layout Blogpot (2)

Postingan ini merupakan bagian ke-2 dari posting yang membahas layout blogpot. Jika dibagian pertama kita membahas sampai pada pembagian layout blog berupa head dan body, maka pada postingan ini kita melanjutkan mempelajari lebih dalam lagi bagaimana isi dari head dan body tersebut dibentuk.
Pertama-tama, silahkan login terlebih dahulu untuk masuk ke akun blogpot pembaca. Pada bagian dasbor, klik menu Tata Letak, kemudian pilih tab submenu Edit HTML. Pembaca akan melihat sebuah kotak yang berisi struktur bahasa pemrograman blog. Pada kotak tersebut kita bisa melihat bagian mana saja yang berada dibagian head dan bagian body. Sebagai contoh saya akan menunjukkan salah satu bagian yang terdapat dibagian body:

<b:section class='sidebar' id='sidebar2' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>

Untuk membuat sebuah elemen pada body dari layout blogspot, baik itu pada header, mainbar, sidebar , maupun footer, terlebih dahulu kita membuat sebuah section sebagai tempat elemen tersebut didesain.
Struktur diatas merupakan struktur bahasa untuk membuat sebuah elemen berupa label yang berfungsi untuk menampilkan label (kategori) dari posting pada blog kita.

• Baris pertama menunjukkan bahwa elemen kategori tersebut ditempatkan pada sebuah section (bagian) dengan id=sidebar2 dan class=sidebar. Sedangkan showaddelement='yes' menunjukkan bahwa pada section tersebut akan terdapat fungsi Tambah Gadget, sehingga kita bisa menambahkan gadget (elemen) baru pada section tersebut.

• Baris kedua menunjukkan gadget yang dibuat pada section tersebut, yaitu berupa widget dengan tipe label dan diberi judul Categories. Tipe menunjukkan jenis widget, sedangkan title menunjukan judul yang kita beri pada widget tersebut.

• Baris ketiga merupakan tag penutup untuk membuat section.

Seperti itulah pembentukan sebuah elemen pada layout blogspot. Lantas, apakah sesederhana itu? Ho..ho..tentu tidak. Sebenarnya masih ada pengaturan-pengaturan yang diberikan pada elemen-elemen tersebut. Coba perhatikan kolom centang yang bertulisakan "Expand Template Widget" yang ada disebelah kanan atas kotak kode-kode tersebut. Silahkan pembaca beri centang pada kolom tersebut. Pembaca akan melihat struktur kode yang berbeda dengan yang sebelum dicentang. Sebenarnya fungsi kode tersebut sama, baik sebelum dicentang maupun sesudah dicentang. Kita hanya memperluas tampilan struktur pembentukan elemen-elemen blog kita. Dengan memperluasnya, kita bisa melihat secara lengkap struktur bahasa dalam memdesain elemen-elemen blog kita. Kita juga bisa melakukan pengaturan-pengaturan lebih detail pada elemen-elemen tersebut.
Mungkin pembaca yang masih baru akan merasa sedikit pusing berhadapan dengan kode-kode tersebut. Itulah salah satu kenikmatan menggunakan blogspot, dimana jika kita tidak mau bersentuhan dengan kode-kode tersebut, maka kita bisa mengatur layout blog kita cukup lewat tab submenu Elemen Halaman. Namun, jika pembaca ingin mempelajari dan mengatur layout dari template yang pembaca gunakan secara lebih detail lagi, maka kita bisa melakukannya melalui tab submenu Edit HTML ini.

»»  read more

Lebih Jauh Mengenal Layout Blogpot (1)

Hampir 3 minggu blog ini tidak ter-update sama sekali. Ujian akhir semester memaksa untuk "nyuekin" halaman-halaman seluas layar komputer ini. Minta maaf ya buat pada pembaca tercinta. Semakin cepat tamat kuliahkan semakin punya banyak waktu untuk membagikan ilmu kepada pembaca sekalian, ya gak? :).
Pada postingan ini kita akan mencoba berkenalan dengan layout blogpot, mempelajari bentuk dan bagian-bagian dalam maupun luarnya. Eiittss..apaan tuh? :).
Bagi pembaca yang sudah mendownload panduan menggunakan blog di blogspot dari blog ini, tentu sudah pernah mengetahui bahwa layout dari template blogspot terbagi atas 4 bagian, yaitu header, sidebar, mainbar, dan footer. Silahkan pembaca buka halaman layout blog pembaca dengan memilih tabmenu Tata Letak pada dasbor akun blogspot pembaca. Seperti pada postingan yang membahas tentang hosting dan domain, dimana kita menganalogikan sebuah website seperti sebuah rumah, maka pada postingan ini layout-layout pada website seperti blog secara umum akan kita ibaratkan seperti denah pada rumah tersebut. Denah sebuah rumah biasanya terdiri dari teras depan, dapur di belakang, ruang tamu, bagian samping kiri atau kanan, dan lain-lain. Denah sebuah website misalnya sebuah blog juga terbagi-bagi seperti denah pada rumah tersebut dan digunakan sebagai tempat menampilkan konten blog kita. Karena layout atau denah sebuah website biasanya berbeda-beda antara yang satu yang lain dan tergantung pada keinginan pemilik website, maka saya akan menjelaskan secara general saja layout atau denah sebuah website. Seperti denah rumah pada umumnya, bagian-bagian website seperti blogspot juga mempunyai fungsi masing-masing. Coba pembaca perhatikan kembali halaman Tata Letak yang telah pembaca buka tadi. Berikut screenshoot halaman Tata Letak :
Beberapa fungsi dari bagian-bagian tersebut diantaranya adalah sebagai berikut:

• Header biasanya berfungsi untuk menampilkan nama, logo, maupun deskripsi dari blog. Informasi tersebut biasanya ditampilkan pada header dengan maksud agar terlihat pada setiap halaman blog. Header diharapkan bisa memberikan gambaran singkat mengenai sebuah blog ketika pengunjung pertama kali membukanya sebelum membaca isi dari blog tersebut.
• Bagian mainbar merupakan bagian utama dari sebuah blog dimana pada bagian inilah postingan kita akan ditampilkan secara berurutan.Pada blogspot baru, mainbar juga bisa berfungsi sebagai tempat menulis komentar dan menampilkan komentar-komentar tersebut.
• Sidebar merupakan bagian blog yang berada di sisi blog sebelah kanan ataupun kiri, bahkan ada juga di sisi atas atau bawah (tergantung template blog yang dipakai). Biasanya sidebar berfungsi sebagai tempat menampilkan elemen-elemen tambahan, misalnya kalender, foto profil, dan lain-lain. Pada blogspot, elemen-elemen tambahan ini disebut sebagai gadget. Kita bisa menambahkan pada blog kita gadget baru yang telah disediakan oleh blogspot. Dibagian side mana sajakah kita bisa menambahkan gadget baru? Gadget bisa ditambahkan jika pada side tersebut terdapat fungsi "Tambah Gadget".
  Link yang ditunjukkan oleh tanda panah merah diatas merupakan link yang berfungsi untuk menambah gadget baru. Karena pada sidebar tersebut terdapat fungsi Tambah Gadget, berarti kita bisa menambahkan gadget pada sidebar tersebut.
  Untuk melakukan penambahan sebuah gadget baru, silahkan klik link tersebut. Maka akan muncul halaman yang berisi list gadget yang telah disediakan oleh blogspot.
  
• Footer merupakan bagian yang terletak dibagian bawah halaman blog. Biasanya elemen ini berfungsi untuk menampilkan lisensi dari blog kita, misalnya copyright, link sumber template, designer template, dan lain-lain.

Penjelasan diatas merupakan gambaran bentuk dan tata letak dari template blog yang kita gunakan jika dilihat dari luar. Bagaimana sebenarnya layout-layout tersebut disusun? Pembaca tentu ingat bahwa sebuah website didesain dengan menggunakan bahasa pemrograman web, dimana digunakan tag-tag yang memberikan instruksi bagaimana sebuah website akan ditampilkan. Pada blogspot, layout yang kita gunakan sebenarnya terdiri dari 2 bagian besar, berupa kepala dan badan. Hal ini bisa pula kita ibaratkan seperti tubuh manusia. Tubuh manusia bisa dibagi menjadi 2 bagian besar, yaitu kepala dan badan (dari leher sampai ujung kaki), dimana kepala merupakan bagian yang berisi informasi yang disimpan di otak dan berfungsi untuk mengatur gerakan badan kita. Sedangkan badan merupakan bagian yang berfungsi sebagai alat untuk melakukan aktivitas. Pada sebuah website seperti halnya sebuah blog, kepala ini disebut sebagai head dan badan disebut sebagai body. Bagian head dibatasi oleh tag <head> dan tag </head>. Sedangkan bagian body dibatasi oleh tag <body> dan tag </body>. Dibagian head inilah kita akan menyisipkan informasi yang akan digunakan untuk mengatur body dari blog tersebut. Salah satunya adalah struktur CSS yang digunakan untuk mengatur tampilan blog kita. Bagi pembaca yang mungkin masih bingung dengan yang namanya CSS, bisa membaca pada postingan yang ini dan yang ini. Nah, body itu sendiri merupakan bagian blog kita yang akan terlihat pada browser. Dibagian inilah kita kita menampilkan header, sidebar, mainbar, dan footer sebagai tempat kita menampilkan konten blog kita.

»»  read more

Cara Membuat Cascading Stylesheet (CSS)

Setelah berhadapan dengan soal-soal ujian dari Bapak Dosen, sepertinya akan lebih asyik kalau sekarang melanjutkan postingan yang sempat tertunda kemarin tentang CSS. Rasanya kurang enak kalau terlalu lama memendam informasi yang ada ingin disampaikan kepada para pembaca sekalian. Kali ini kita akan mempelajari bagaimana implementasi atau penerapan dari CSS yang pada halaman website. Ada baiknya pembaca yang masih belum membaca postingan yang saya beri judul "CSS At a Glance" tersebut agar membacanya terlebih dahulu disini.
Sudah dibacakan? Baiklah, sekarang kita lanjutkan lagi ya. Dalam penulisan CSS, atribut yang akan kita deklarasikan biasanya disebut sebagai id dan juga class. id dan class tersebutlah yang akan dipakaikan pada data atau elemen seperti text, tabel, dan sebagainya untuk mengatur tampilannya pada halaman website.

Bentuk penulisan CSS adalah seperti ini:

#atribut{
jenis:ukuran ;
}

Contoh:

#kotakku{
width:200px
}

Maksudnya adalah bahwa kita mendeklarasikan sebuah atribut yang bernama "kotakku" yang akan mempunyai lebar (width) sebesar 100px.
Pada halaman website, kita harus menambahkan atribut CSS "kotakku" pada suatu data atau elemen jika ingin elemen tersebut tampil seperti "kotakku". Misalnya kita akan membuat sebuah text area, maka pada halaman website tersebut kita tuliskan:

<textarea id="kotakku">Isi Area</textarea>

Perhatikan bentuk penulisannya.Dengan menambahkan id="kotakku" berarti div tersebut menyandang atribut (id) yang bernama "kotakku". Dengan demikian, div tersebut akan mempunyai lebar (width)=200px. Hasilnya akan tempil seperti berikut:

Jika kita ingin membuat text area tersebut mempunyai tinggi=200px, maka cukup menambahkan deklarasi baru untuk tingginya.
Sehingga CSS-nya menjadi:

#kotakku{
width:200px;
height:200px;
}

Maka tempilan text area tersebut menjadi:

Jika kita ingin membuat 2 buah text area yang tampilannya sama seperti atribut "kotakku", maka kita tinggal menulis keduanya seperti:

<textarea id="kotakku">Ini Text Area 1</textarea>
<textarea id="kotakku">Ini Text Area 2</textarea>

Maka hasilnya adalah:

Ini Text Area 1
Ini Text Area 2

Gimana, mudah bukan? Kemudahan tersebut semakin terlihat jika kita ingin menambah deklarasi baru untuk mengatur tampilan dari elemen-elemen yang telah kita buat tadi. Misalnya, kita ingin agar background dari text area tersebut berwarna biru, maka kita cukup mengedit CSS kita sehingga tidak perlu lagi mengedit satu persatu seperti ketika menggunakan tag-tag HTML untuk mengatur tampilan website.

Kita tambahkan deklarasi baru pada CSS kita seperti berikut:

#kotakku{
width:200px;
height:200px;
color:#0226fe;
}

Maka hasilnya akan menjadi:

Ini Text Area 1
Ini Text Area 2

Coba kita perhatikan penulisan nilai warna pada CSS tersebut. Untuk warna, biasanya ditulis dengan menambah tanda # didepannya. Setiap warna mempunyai kode masing-masing. Pengkodean ini bermaksud agar warna yang didapat juga lebih spesifik. Untuk mengetahui kode-kode warna ini, pembaca bisa melihatnya ketika menggunakan software-sorftware grafis seperti photoshop dan coreldraw, atau dreamweaver, flash, dan lain-lain.

Jika diatas kita sudah mempelajari bagaimana penulisan CSS untuk mendeklarasikan id, bagaimana pula dengan class? Class maupun id pada prinsipnya adalah sama. Yang berbeda hanyalah tingkatannya. Class bisa digunakan untuk mengatur tampilan dari suatu data atau elemen yang memiliki id tertentu. Hal ini sangat mudah dipahami mengingat setiap data tidak mungkin memiliki banyak id. Namun, untuk lebih membedakannya dengan data-data yang mempunyai id yang sama dengan data tersebut, maka bisa digunakan class. Coba kita kembali pada postingan yang lalu mengenai CSS. Misalkan terdapat beberapa mahasiswa ITS dan kita ingin salah satu dari mereka tampil dengan rambut gondrong. Maka kita letakkan padanya sebuah atribut baru misalnya berupa class "Rambut Gondrong".

Bentuk penulisan kode CSS-nya hampir sama dengan id. Perbedaannya dapat dilihat pada seperti berikut:

.atribut{
jenis:nilai;
}

Contohnya adalah seperti berikut:

.letak-teks{
text-align:right;
}

Kode diatas fungsinya untuk mengatur letak teks dari sebuag data atau elemen yang menyandang class "letak-teks".

Misalkan pada text area 1 yang kita buat diatas kita atur letak teksnya adalah kekanan. Maka kita tambahkan atrubut class dengan nama "letak-teks" pada text area tersebut.

<textarea id="kotakku" class="letak-teks">Ini Text Area 1</textarea>
<textarea id="kotakku">Ini Text Area 2</textarea>

Maka hasilnya akan menjadi:

Ini Text Area 1
Ini Text Area 2

Penggunaan class sendiri tidak serta merta harus bersanding dengan penggunaan id. Artinya bahwa untuk mengatur tampilan suatu data atau elemen, kita bisa menggunakan id saja, class saja, atau kedua-duanya. Toh tujuannya adalah untuk mengspesifikkan tampilan data tersebut. Misalnya seseorang yang hanya memiliki class "rambut gondrong", jika iya tidak menyandang id "Mahasiswa ITS" tentu dia tidak akan tampil seperti mahasiswa ITS, dia hanya tampil sebagai orang yang berambut gondrong saja.

Dengan contoh tersebut pasti pembaca sudah mengerti bukan? I hope so. Satu hal yang perlu pembaca ketahui, bahwa didalam CSS kita boleh membuat atribut-atribut sendiri yang kemudian kita deklarasikan (defenisikan). Tentu ini mempermudah kita karena menggunakan atribut-atribut yang kita kenal sendiri untuk mengatur tampilan halaman website yang kita buat.

Meletakkan CSS
Kode-kode CSS yang kita buat tadi dapat diletakkan pada halaman website dengan 2 cara:

1. Dengan menuliskannya langsung pada halaman website yang kita buat. Untuk penulisanya, kode-kode CSS tersebut dibungkus oleh tag HTML yaitu: <style>
   Penulisannya:
   
   <style>
   #kotakku{
   width:200px;
   height:200px;
   color:#0226fe;
   }
   .letak-teks{
   text-align:right;
   }
   </style>
   
   Kode tersebut biasanya diletakkan dibawah tag <head> didalam halaman website kita.
   
   
2. Dengan membuat halaman CSS khusus. Maksudnya adalah kita membuat sebuah halaman website yang hanya berisi kode-kode CSS. Kode-kode ini tidak perlu lagi dibungkus oleh tag HTML yaitu <style>. Agar dapat digunakan untuk mengatur tampilan halaman website, maka kita perlu meng-inject atau menghubungkan ke halaman website kita. Caranya adalah dengan menggunakan tag:
   
   <link rel= "stylesheet" type= "text/css" href= "URL FILE CSS"/>
   
   Ganti "URL FILE CSS" dengan URL dari file CSS yang kita buat dan simpan di internet. Bai pembaca yang mungkin masih bingung dengan yang namanya URL dan simpan menyimpan di internet, bisa membacanya disini.

Dengan melihat prinsip kerja dari CSS tersebuti, tentu bisa kita simpulkan bahwa CSS sangat berguna sekali. CSS bisa mempermudah kita dalam mengatur tampilan halaman website kita. Bayangkan saja jika terdapat sekian banyak data atau elemen didalam halaman website maka kita harus menulis begitu banyak pula tag-tag HTML untuk mengatur tampilannya dan kita menulisnya harus berulang-ulang untuk mengatur tiap elemen. Hal ini bisa pula menyebabkan size dari halaman kita semakin berat sehingga loading-nya menjadi lama ketika dibuka di internet. Namun, dengan adanya CSS, hal tersebut dapat dihindarkan. Selamat mencoba...

»»  read more

CSS At a Glance

Masih ingatkah pembaca tentang fungsi instruksi dari tag-tag pada HTML dimana salah satunya adalah sebagai Presentation, yang berfungsi untuk mengatur tampilan dari suatu dokumen atau halaman website? Misalnya tag <i> yang memberikan instruksi untuk membuat text menjadi cetak miring. Untuk lebih jelasnya bisa Anda buka kembali postingan yang lalu disini. Lantas apa hubungannya dengan CSS yang sekarang kita bahas? Nah, fungsi instruksi dari HTML itu sekarang sudah dapat digantikan oleh yang namanya CSS. Berikut pengertian CSS yang saya coba untuk mendefenisikannya sendiri:

"CSS yang kepanjangannya adalah Cascading Style Sheets merupakan sebuah bahasa yang digunakan untuk mengatur tampilan dari suatu dokumen atau halaman website, atau dengan kata lainnya mengatur penampilan atau penampakan dari sebuah halaman website"

Fungsi ini sama dengan fungsi tag HTML sebagai presentation. Tampilan yang diatur antara lain warna, bentuk, ukuran, letak dan sebagainya dari halaman atau dokumen website tersebut. Seperti yang pernah kita bahas sebelumnya, jika di dalam bahasa HTML kita ingin menginstruksikan sebuah teks menjadi cetak tebal, maka kita gunakan tag <strong>

Penulisannya: <strong>HALLO</strong>
Tampilannya: HALLO

Jika kita ingin membuat teks tersebut juga cetak miring, maka kita tambahkan tag <i>

Penulisannya: <i><strong>HALLO</strong><i/>
Tampilannya: HALLO

Dari sana bisa kita lihat bahwa jika ingin mengatur tampilan dari sebuah data misalnya sebuah teks, maka kita perlu menambahkan tag-tag yang menginstruksikan tampilan tersebut secara langsung pada teks tersebut. Jika ternyata ada teks lain yang ingin kita tampilkan sama seperti teks "HALLO" tersebut, maka kita harus memberikan tag-tag yang sama seperti tag-tag pada teks "HALLO" pada teks yang baru tersebut. Gimana, kebayangkan prinsip kerja tag HTML tersebut?
Sedangkan pada CSS, kita tidak perlu melakukan deklarasi satu persatu seperti dalam penggunan tag-tag HTML. CSS dapat menggantikan peran tag-tag tersebut dengan mendeklarasikan terlebih dahulu sebuah atribut, dan atribut tersebutlah yang akan digunakan oleh data-data seperti teks dan yang lainnya sebagai tampilannya.
Analoginya seperti ini:

Diawal kita defenisikan (deklarasikan):

• Mahasiswa ITS adalah orang yang beralmamater biru, memakai dasi, dan bercelana hitam
• Mahasiswa UI adalah orang yang beralmamater kuning, tidak berdasi, dan bercelana putih.
  

Maka, jika kita ingin seseorang penampilannya seperti mahasiswa ITS, maka kita cukup memberikan atribut kepadanya, yaitu "Mahasiswa ITS".
Dengan dia menyandang atribut "mahasiswa ITS", dia akan beralmamater biru, berdasi, dan bercelana hitam. Begitu pula jika seseorang ingin kita tampilkan beralmamater kuning, tidak berdasi, dan bercelana putih, maka kita berikan dia atribut "Mahasiswa UI".

Analogi tersebut berbeda jika didalam HTML. Jika kita ingin menampilkan seseorang beralmamater biru, memakai dasi, dan bercelana hitam, maka diawal kita harus memakaikan almamater, dasi, dan celana tersebut kepadanya. Jika kita ingin menambahkan tampilan baru misalnya memakai topi merah, maka kita harus memakaikan topi merah pada orang tersebut. Bayangkan jika orang yang ingin ditampilkan berjumlah 10, 20, atau 100? Tentu sangat repot. Berbeda dengan CSS, kita cukup menambahkan deklarasi baru bahwa seorang mahasiswa ITS juga bertopi merah, maka secara otomatis orang-orang yang telah menyandang atribut "Mahasiswa ITS" akan tampil bertopi merah pula.
Dengan kata lain, jika dengan tag HTML kita memakaikan almamater, dasi, celana, dan topi secara langsung pada seseorang agar dia tampil seperti yang kita inginkan, maka pada CSS kita cukup mencantumkan kepadanya sebuah atribut yang sudah kita defenisikan, misalnya "Mahasiswa ITS" atau "Mahasiswa UI", maka dia akan memakai sendiri almamater, dasi, celana, dan topi agar tampil seperti mahasiswa ITS atau UI.
Gimana? uda kebayangkan prinsip kerja dan bedanya? Mau makein celana ke orang lain atau nyuruh dia sendiri yang make? (NB: kalau makein pakaian buat cewek cakep sih gpp).He3x. Bercanda bro n sist ^^.
Bagaimana implementasinya? Tunggu postingan selanjutnya yach..saya mau belajar MSDM dulu, besok mau ujian soalnya. Sabar ya kawan-kawan. Doain biar sukses ujiannya :)

»»  read more

Bahasa Pemrograman Blogspot

Dari yang pernah disinggung pada postingan sebelumnya mengenai sedikit pengantar tentang website, mungkin sudah bisa memberikan gambaran buat pembaca tentang dasar pembuatan sebuah website itu sendiri yaitu menggunakan sebuah bahasa pemrograman website. Lalu bagaimana dengan blogspot? Blogspot sendiri menggunakan sebuah bahasa pemrograman XML (Extensible Markup Language), yaitu sebuah bahasa markup yang digunakan untuk mendefenisikan dan mendeskripsikan sebuah data. XML bisa dikatakan memiliki persamaan dengan HTML, namun ada perbedaan mendasar dalam penggunaannya. Seperti halnya HTML, XML juga menggunakan tag-tag markup untuk mendeskripsikan (sebagai informasi) sebuah data. Namun, perbedaannya terletak pada tag-tag markup itu sendiri. Jika dalam HTML kita dikenalkan oleh tag-tag yang sudah didefenisikan dan dibakukan terlebih dahulu dan kita hanya boleh menggunakan tag-tag tersebut, maka di dalam XML tidak ada tag-tag baku atau standar dan kita bebas membuat tag-tag sendiri untuk mendefenisikan data-data kita. Contoh bentuk XML bisa dilihat sebagai berikut:

<?xml version="1.0" encoding="UTF-8"?>
<pesan>
<dari>Penulis>/dari>
<untuk>Pembaca</untuk>
<subjek>Datang Lagi</subjek>
<isi>Sering-sering datang lagi ya</isi>
>pesan>

Tag-tag seperti <pesan>, <dari>, dan lain-lain merupakan tag-tag markup yang kita buat sendiri untuk mendefeniskan data-data kita, seperti Penulis, Pembaca, dan seterusnya.
Coba pembaca bandingkan dengan contoh-contoh tag HTML yang diberikan pada pengantar tentang HTML di postingan sebelumnya. Tag-tag markup seperti <table>, <marquee>, dan lain-lain merupakan tag-tag markup yang sudah dibakukan terlebih dahulu dan kita tinggal menggunakannya.
Perbedaan ini sebenarnya juga didasari dari penggunaan bahasa pemrograman itu sendiri. HTML digunakan untuk menampilkan data-data dan membuat bagaimana data itu ditampilkan, sedangkan XML hanya sebatas mendefenisikan dan menggambarkan sebuah data. Jadi, dalam implementasinya, perlu aplikasi untuk mengirim dan menerima, atau menampilkan data-data dalam tag-tag XML itu untuk memberikan informasi dari data-data tersebut.
Saya rasa segitu dulu sedikit pengantar tentang bahasa pemrograman blogspot. Diharapkan bisa memberikan gambaran awal mengenai website dan mengerti tentang blog sebagai sebuah website. Tapi perlu ditegaskan di awal bahwa kita tidak murni menggunakan XML tersebut untuk membangun sebuah blog kita. Tapi HTML yang dikenal sebagai bahasa markup yang sederhana tetap bisa diimplementasikan dalam sebuah blog yang akan kita desain dan gunakan.

»»  read more

HTML At a Glance

HTML yang merupakan singkatan dari HyperText Markup Language, seperti yang sudah penulis sebutkan di postingan yang lalu, merupakan salah bahasa pemrograman yang digunakan untuk membuat halaman website untuk ditampilkan pada browsers internet. HTML sendiri merupakan pengembangan dari bahasa pemrograman SGML (Standard Generalized Markup Language) yang digunakan dalam dunia penerbitan dan percetakan. HTML bisa dikatakan sebagai bahasa yang distandarkan atau dibakukan untuk membuat halaman web dan merupakan kode-kode yang digunakan untuk memberikan instruksi pada sebuah data didalam dokumen atau halaman website. Kode-kode ini biasanya disebut sebagai tag. Itulah sebabnya disebut sebagai Markup Language, karena merupakan kombinasi antara data dan informasi mengenai data tersebut. Nah, instruksi seperti apa yang ada dalam HTML? Menurut tante Wiki (baca wikipedia), ada 4 jenis instruksinya, yaitu:

1. Structural, merupakan tanda yang menentukan level atau tingkatan dari sebuah teks. Contoh:
   <h1>Hallo</h1>
   Tag <h1> tersebut akan menginstruksikan text "Hallo" tampil menjadi sebuah Heading 1.
   <h2>Hallo Semua</h2>
   Tag <h2> tersebut akan menginstruksikan teks "Hallo Semua" tempil menjadi sebuah Heading 2.
   Mungkin bisa dianalogikan seperti pada sebuah makalah, "Hallo" akan menjadi sebuah judul, sedangkan "Hallo Semua" akan menjadi subjudul.
   
2. Presentational, tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut.
   Contoh:
   <marquee>Selamat</marquee>,
   akan menginstruksikan teks "Selamat" tampil sebagai teks yang bergerak/berjalan. Penggunaan tag HTML untuk presentational saat ini sudah dapat digantikan oleh CSS (Cascading Style Sheets). Kita akan belajar lebih lanjut tentang CSS pada postingan selanjutnya.
3. Hipertext, tanda yang digunakan untuk menampilkan sebuah text sebagai hiperlink yang akan mengarah pada suatu URL dokumen atau halaman tertentu.
   Contoh:
   <a href="http://anakranto.co.cc">Anakranto</a>,
   akan menampilkan teks "Anakranto" sebagai sebiah hiperlink yang mengarah ke URL "http://anakranto.co.cc".
4. Elemen widget, dimana tag HTML digunakan untuk membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).

Nah, bahasa pemrograman seperti HTML inilah yang bisa kita gunakan sebagai salah satu bahasa untuk membuat atau mendesain halaman web. Bahasa ini yang akan menginstruksikan untuk menampilkan data (seperti teks, gambar, dll), serta mengatur bagaimana tampilan dari data tersebut pada browser. Lantas, bagaimana pula dengan tag-tag HTML itu sendiri? Dari mana asalnya dan bagaimana kita mengetahuinya? Seperti yang saya sebutkan di atas, HTML ini merupakan kode-kode (tag-tag markup) yang sudah dibakukan, dan kita tinggal menggunakannya. Adapun pembakuan (standardisasi) dari tag-tag ini dilakukan oleh sebuah lembaga yang fokus pada pengembangan standar-standar pada Word Wide Web (WWW), yaitu World Wide Web Consortium (W3C).

Cara Menulis Tag HTML
Tag HTML biasanya ditulis pada awal dan akhir dari text atau data yang ingin diinstruksikan oleh tag tersebut. Dengan kata lain, tag HTML akan membungkus data yang akan dipengaruhinya. Namun, tag awal dan akhir ini tidaklah sama, ada perbedaan penulisannya. Perbedaan penulisan tag HTML tersebut dapat dilihat dibawah ini:

<jenistag> CONTOH TEKS</jenistag>

<jenistag> merupakan tag pembuka, sedangkan </jenistag> merupakan tag penutup. Adapun bedanya adalah pada tag penutup ditambahkan tanda "/".
Misalnya untuk membuat sebuah tabel pada halaman web, maka tag yang akan digunakan adalah <table>Isi Tabel</table>. Browser bisa mengenal tag tersebut sebagai instruksi untuk menampilkan sebuah table (Elemen widget) pada halaman website kita karena sudah distandarkan. Masih banyak lagi contoh-contoh tag HTML yang bisa kita gunakan. Namun belum akan saya tulis pada postingan ini. Kita akan mengenal tag-tag lain pada postingan selanjutnya. Yang penting pembaca yang budiman sudah sedikit paham mengenai arti HTML itu sendiri. Jika masih ada yang bingung, jangan sungkan-sungkan untuk bertanya yach.. ^^

»»  read more