Cara Menciptakan Template Blog Sendiri - Bab 2
Cara Membuat Template Blog Sendiri - Bagian 2
Assalamu'alaikum wr wb
Kalau pertama kita sudah persiapan untuk menciptakan blog kita sendiri, kini kita lanjut ke langkah selanjutnya, yaitu mulai ngoding, jikalau yang bab pertamanya ketinggalan, dapat klik Cara Membuat Template Blog - Bagian 1.
Sebagaimana yang kita tahu bahwa jikalau kita ingin menciptakan sebuah template blog sendiri, kita harus tahu bahasa pemograman web, ibarat html, css, dll, kita dapat mempelajarinya di internet dan atau membaca buku yang membahas perihal itu, mungkin disini saya akan sharing beberapa saja yang saya tahu mengenai web programming, soalnya saya juga masih belajar, kita sama-sama mencar ilmu :D. baiklah lanjut..
Ngoding template blog sendiri.
Untuk bab ini kita masuk ke bab template, kemudian pilih Edit HTML, kemudian semua arahan yang ada disana kita blok kemudian kita hapus sampai bersih, kemudian copy paste semua arahan 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 bab 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 ibarat 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, kini kita perhatikan pada arahan 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 bab sidebar tersebut mengambarkan bahwa kita dapat menambahkan lebih dari 1 widget pada bab tersebut.
Untuk atribut yang warna biru (class='sidebar'), yaitu atribut yang berfungsi sebagai selektor yang nantinya pada bab tersebut kita dapat memanggil style css untuk mempercantik tampilan pada bab tersebut, untuk isi atributnya terserah, tpi alangkah lebih baik jikalau isinya tidak jauh dari nama bab yang ingin kita buat, ibarat kita akan menciptakan sidebar maka isinya juga sidebar, pola penerapannya :
Untuk yang bab warna hijau (id='sidebar-1'), sama saja ibarat class hanya saja selektor id hanya berlaku satu kali pada bab halaman web, dikala ada 2 maka yang pertamalah yang akan aktif, contoh: (klik result)
Mungkin kini sudah sedikit mengerti kan, kesimpulannya class dan id kegunaannya sama yaitu sebagai selektor dan juga sebagai pemanggil arahan css, untuk class di awali dengan titik (.sidebar), dan untuk id diawali dengan pagar (#outer-wrapper), perbedaan antara class dan id yaitu dalam penggunaannya, attribut class dapat di pakai banyak dengan isi atribut yang sama, sedangkan attribut id hanya dapat digunakan sekali dengan satu isi attribut.
Sekarang kita lanjut ke bab dekorasi dengan memakai css klik cara menciptakan template blog sendiri - bab 3 (coming soon).
Postingan sebelumnya Cara Membuat Template Blog Sendiri - Bagian 1.
0 Response to "Cara Menciptakan Template Blog Sendiri - Bab 2"
Posting Komentar