Do you want to share?
Do you like this story?
Pada kesempatan ini icalcell akan memberikan sedikit pengetahuan tentang dasar pemograman HTML khususnya untuk blogger, sembari menjawab visitor icalcell dengan nick Desa Cilembu yang dilayangkan di Cara Ubah Template 1 Kolom Menjadi 3 Kolom. Kalau teman-teman pernah mempelajari pemograman bahasa HTML maka akan sangat berguna untuk merubah tampilan blog alias membuat tema atau template blog sendiri dengan kreasi teman-teman sendiri dan tentunya akan pas dihati.
Umumnya bahasa HTML itu menggunakan kode umum seperti dibawah ini:
<html> <----- menandakan kalau bahasa yang digunakan adalah bahasa HTML
<title> <------judul dari halaman yang akan dibuat
</title> <-----kode judul ditutup
<head></head> <----- dalam kode head ini berisi meta tag, css, java script.
<body>
disini merupakan isi postingan atau isi dari halaman html
</body>
</html> <--- kode penutup html.
Dalam bahasa html, php, jsp, asp dan pemograman web lainnya kita pasti mengenal istilah buk tutup kode, kalau kode dibuka pasti akan ditutup lagi, kalau lupa ditutup maka akan menyebabkan kesalahan, contoh pada kode-kode dasar diatas, <title>Judul Halaman</title>.
Oke kita kembali ke blogger tentang bagaimana cara menambah kolom, membuat kolom baru pada template, bagaimana mengubah kolom yang sudah ada pada template misalnya 2 kolom ingin diubah menjadi 1 kolom atau 3 kolom atau banyak kolom.
Seperti halnya yang pada awal postingan icalcell sudah memberikan kode-kode penyusun HTML dimana pada kode <head> merupakan tempat penyisipan kode css (cascading style sheets), maka sekarang perhatikan kode pada bagian <head>. Teman-teman akan banyak menjupai kode # (kress), .(titik), : (titik dua), ; (titik koma), { (kurang kurawal buka) , } (kurung kurawal tutup). Dibawah ini penjelasan dari masing-masing tanda.
kodenya seperti dibawah ini.
#header-wrapper {
padding:0;
margin:0;
width:1000px;
}
#header-wrapper .widget{ padding-bottom:10px; }
#headerkiri {
float:left;
width:300px;
padding:5px;
}
#headertengah {
float:left;
width:300px;
padding:5px;
}
#headerkanan {
float:right;
width:300px;
padding:5px;
}
diatas adalah kode css untuk pembagian header menjadi 3 kolom, nah dibawah ini element yang ditambahkan pada bagian <body>.
<div id='header-wrapper'>
<b:section class='header-wrapper' id='headerkiri' preferred='yes' showaddelement='yes'/>
<b:section class='header-wrapper' id='headertengah' preferred='yes' showaddelement='yes'/>
<b:section class='header-wrapper' id='headerkanan' preferred='yes' showaddelement='yes'/>
</div>
coba perhatikan div id='header-wrapper , header-wrapper akan sama persis penulisannya pada kode css, karena kalau beda kode css yang dibuat tidak akan berfungsi. nama #header-wrapper bisa saja diganti dengan yang lain, asalkan disamakan saat penambahan element di <body>. Kode <b:section> berfungsi untuk memberikan instruksi bahwa kita menambahkan element baru, agar element tersebut tampil atau ada dalam rancangan template blog.
Pada contoh diatas lebar template 1000px , dimana dibagi menjadi 3 kolom, masing-masing mempunyai lebar 300px. silahkan sesuaikan sendiri dengan keadaan lebar template teman-teman.
sebenarnya kode html blogger itu bisa pakai nama apasaja, mau up, mau top, mau atas, bisa semua, asalkan disesuaikan kode css dengan element yang ada di body. contoh nih
Jika teman-teman sudah mahir dalam menambah, mengurangi, memodifikasi element tertentu, maka dengan begitu, teman-teman juga bisa membuat template blog sesuai keinginan sendiri. Karena dasar diataslah yang icalcell gunakan sehingga bisa membuat template atau tema blog sendiri, seperti yang teman-teman pengunjung setia blog icalcell ini, setiap saat ada perubahan, dalam kasus ini, padi bagian bawah, yang tadinya cuman ada 2 kolom yaitu Popular Post dan Recent Post saja, kini sudah ada 3 kolom, yaitu untuk Recent Comments.Seperti yang teman-teman bisa lihat sendiri di Adsense Template, dimana disana beberap template yang icalcell telah buat, yang pastinya cepat load dan ramah SEO. Itu semua berawal dari pengetahuan pas-pasan icalcell tentang pemograman HTML seperti yang telah dijelaskan dalam postingan ini.
Umumnya bahasa HTML itu menggunakan kode umum seperti dibawah ini:
<html> <----- menandakan kalau bahasa yang digunakan adalah bahasa HTML
<title> <------judul dari halaman yang akan dibuat
</title> <-----kode judul ditutup
<head></head> <----- dalam kode head ini berisi meta tag, css, java script.
<body>
disini merupakan isi postingan atau isi dari halaman html
</body>
</html> <--- kode penutup html.
Dalam bahasa html, php, jsp, asp dan pemograman web lainnya kita pasti mengenal istilah buk tutup kode, kalau kode dibuka pasti akan ditutup lagi, kalau lupa ditutup maka akan menyebabkan kesalahan, contoh pada kode-kode dasar diatas, <title>Judul Halaman</title>.
Oke kita kembali ke blogger tentang bagaimana cara menambah kolom, membuat kolom baru pada template, bagaimana mengubah kolom yang sudah ada pada template misalnya 2 kolom ingin diubah menjadi 1 kolom atau 3 kolom atau banyak kolom.
Seperti halnya yang pada awal postingan icalcell sudah memberikan kode-kode penyusun HTML dimana pada kode <head> merupakan tempat penyisipan kode css (cascading style sheets), maka sekarang perhatikan kode pada bagian <head>. Teman-teman akan banyak menjupai kode # (kress), .(titik), : (titik dua), ; (titik koma), { (kurang kurawal buka) , } (kurung kurawal tutup). Dibawah ini penjelasan dari masing-masing tanda.
- # menandakan id untuk element tertentu contoh eleman #header , elementnya <div id='header'></div>
- . menandakan class untuk element tertentu conton .headerkanan , elementnya <div id='header'><div class='headerkanan'></div> (penutup div class) </div> (penutup div id).
- { merupakan pembuka untuk settingan id atau pun class seperti width (lebar), height (tinggi) dll.
- } penutup settingan.
- : merupakan penunjuk pengaturan contoh width:500px , artinya lebar adalah 500px.
- ; merupakan pemisah antarkode pengaturan css. contoh width:500px;height:500px.
kodenya seperti dibawah ini.
#header-wrapper {
padding:0;
margin:0;
width:1000px;
}
#header-wrapper .widget{ padding-bottom:10px; }
#headerkiri {
float:left;
width:300px;
padding:5px;
}
#headertengah {
float:left;
width:300px;
padding:5px;
}
#headerkanan {
float:right;
width:300px;
padding:5px;
}
diatas adalah kode css untuk pembagian header menjadi 3 kolom, nah dibawah ini element yang ditambahkan pada bagian <body>.
<div id='header-wrapper'>
<b:section class='header-wrapper' id='headerkiri' preferred='yes' showaddelement='yes'/>
<b:section class='header-wrapper' id='headertengah' preferred='yes' showaddelement='yes'/>
<b:section class='header-wrapper' id='headerkanan' preferred='yes' showaddelement='yes'/>
</div>
coba perhatikan div id='header-wrapper , header-wrapper akan sama persis penulisannya pada kode css, karena kalau beda kode css yang dibuat tidak akan berfungsi. nama #header-wrapper bisa saja diganti dengan yang lain, asalkan disamakan saat penambahan element di <body>. Kode <b:section> berfungsi untuk memberikan instruksi bahwa kita menambahkan element baru, agar element tersebut tampil atau ada dalam rancangan template blog.
Pada contoh diatas lebar template 1000px , dimana dibagi menjadi 3 kolom, masing-masing mempunyai lebar 300px. silahkan sesuaikan sendiri dengan keadaan lebar template teman-teman.
sebenarnya kode html blogger itu bisa pakai nama apasaja, mau up, mau top, mau atas, bisa semua, asalkan disesuaikan kode css dengan element yang ada di body. contoh nih
Jika teman-teman sudah mahir dalam menambah, mengurangi, memodifikasi element tertentu, maka dengan begitu, teman-teman juga bisa membuat template blog sesuai keinginan sendiri. Karena dasar diataslah yang icalcell gunakan sehingga bisa membuat template atau tema blog sendiri, seperti yang teman-teman pengunjung setia blog icalcell ini, setiap saat ada perubahan, dalam kasus ini, padi bagian bawah, yang tadinya cuman ada 2 kolom yaitu Popular Post dan Recent Post saja, kini sudah ada 3 kolom, yaitu untuk Recent Comments.Seperti yang teman-teman bisa lihat sendiri di Adsense Template, dimana disana beberap template yang icalcell telah buat, yang pastinya cepat load dan ramah SEO. Itu semua berawal dari pengetahuan pas-pasan icalcell tentang pemograman HTML seperti yang telah dijelaskan dalam postingan ini.
0 komentar:
Posting Komentar