Penulis Cara Membuat Template Blog Sendiri - Bagian 2
Assalamu'alaikum wr wb
Kalau pertama kita sudah persiapan untuk membuat blog kita sendiri, sekarang kita lanjut ke langkah selanjutnya, yaitu mulai ngoding, jika yang bagian pertamanya ketinggalan, bisa klik Cara Membuat Template Blog - Bagian 1.
Sebagaimana yang kita tahu bahwa jika kita ingin membuat sebuah template blog sendiri, kita harus tahu bahasa pemograman web, seperti html, css, dll, kita bisa mempelajarinya di internet dan atau membaca buku yang membahas tentang itu, mungkin disini saya akan sharing beberapa saja yang saya tahu mengenai web programming, soalnya saya juga masih belajar, kita sama-sama belajar :D. oke lanjut..
Ngoding template blog sendiri.
Untuk bagian ini kita masuk ke bagian template, lalu pilih Edit HTML, lalu semua kode yang ada disana kita blok lalu kita hapus hingga bersih, lalu copy paste semua kode dibawah ini kedalamnya.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='keyword anda disini' name='keywords'/><!--keyword blog-->
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title><!--judul blog-->
<b:skin><![CDATA[
/*-----------------------------------------------
Pembuat
Name: Test
Designer: Irfan Muhammad Ghani/ nama pacar
URL: http://irfanmghani.blogspot.com/
----------------------------------------------- */
/*tempat meletakan css disini*/
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><!--bagian outer wrapper start-->
<div id='header-wrapper'><!--bagian header start-->
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Irfan Muhammad Ghani (Header)' type='Header'/>
</b:section>
</div><!--akhir bagian header-->
<div id='main-wrapper'><!--main wrapper start-->
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div><!--main wrapper enddd-->
<div class='clear'> </div>
<div class='clear'/>
<div id='sidebar-wrapper'><!--sidebar mulai-->
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
</div><!--sidebarr end-->
<div id='footer-wrapper'><!--bagian footer mulai-->
<b:section class='footer' id='footer-1' showaddelement='yes'/>
</div><!--bagian footer end-->
</div><!--outer wrapper end-->
</body>
</html>
Lalu Simpan template, dan silahkan lihat blognya, kurang lebih seperti ini.
Masih berupa polosan, hanya berupa text dan background putih saja. Sekarang kita coba untuk memaparkan beberapa elemen yang ada pada template tersebut.
<meta content='keyword anda disini' name='keywords'/>
Adalah tag meta untuk keyword, ganti text yang berwarna merah dengan keyword blog kita, sekarang kita perhatikan pada kode sidebar.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
</div>
Atribut yang di tandai dengan warna merah (showaddelement='yes') pada bagian sidebar tersebut menandakan bahwa kita bisa menambahkan lebih dari 1 widget pada bagian tersebut.
Untuk atribut yang warna biru (class='sidebar'), adalah atribut yang berfungsi sebagai selektor yang nantinya pada bagian tersebut kita bisa memanggil style css untuk mempercantik tampilan pada bagian tersebut, untuk isi atributnya terserah, tpi alangkah lebih baik jika isinya tidak jauh dari nama bagian yang ingin kita buat, seperti kita akan membuat sidebar maka isinya juga sidebar, contoh penerapannya :
Untuk yang bagian warna hijau (id='sidebar-1'), sama saja seperti class hanya saja selektor id hanya berlaku satu kali pada bagian halaman web, ketika ada 2 maka yang pertamalah yang akan aktif, contoh: (klik result)
Mungkin sekarang sudah sedikit mengerti kan, kesimpulannya class dan id kegunaannya sama yaitu sebagai selektor dan juga sebagai pemanggil kode css, untuk class di awali dengan titik (.sidebar), dan untuk id diawali dengan pagar (#outer-wrapper), perbedaan antara class dan id adalah dalam penggunaannya, attribut class bisa di pakai banyak dengan isi atribut yang sama, sedangkan attribut id hanya bisa dipakai sekali dengan satu isi attribut.
Sekarang kita lanjut ke bagian dekorasi dengan menggunakan css klik cara membuat template blog sendiri - bagian 3 (coming soon).
Postingan sebelumnya Cara Membuat Template Blog Sendiri - Bagian 1.
makasih kang gani, saya lagi belajar bikin template blog
BalasHapusnanti kalau sempat dichek ya http://lukiluck11.blogspot.com dan http://kukuhniam.blogspot.co.id