Cara Menciptakan Template Blog Sendiri - Bab 2
Teknik Membuat Template Blog Sendiri - Bagian 2
Assalamu'alaikum wr wb
Kalau pertama kita sudah persiapan untuk membuat blog kita sendiri, kini kita lanjut ke langkah selanjutnya, yaitu mulai ngoding, jikalau yang bab pertamanya ketinggalan, dapat klik Teknik Membuat Template Blog - Bagian 1.
sepertiyang yang kita tahu bahwa jikalau kita ingin membuat sebuah template blog sendiri, kita harus tahu bahasa pemograman web, ibarat html, css, dll, kita dapat mempelajarinya di internet dan atau membaca buku yang mengulas ihwal itu, mungkin disini saya akan sharing beberapa saja yang saya tahu terkena web programming, soalnya saya juga masih belajar, kita sama-sama berguru :D. baiklah lanjut..
Ngoding template blog sendiri.
Untuk bab ini kita masuk ke bab template, kemudian pilih Edit HTML, kemudian tiruana aba-aba yang ada disana kita blok kemudian kita hapus sampai membersihkan, kemudian copy paste tiruana aba-aba 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, spesialuntuk 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 aba-aba 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 menerangkan bahwa kita dapat menambahkan lebih dari 1 widget pada bab tersebut.
Untuk atribut yang warna biru (class='sidebar'), ialah 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 membuat sidebar maka isinya juga sidebar, pola penerapannya :
Untuk yang bab warna hijau (id='sidebar-1'), sama saja ibarat class spesialuntuk saja selektor id spesialuntuk 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 aba-aba css, untuk class di awali dengan titik (.sidebar), dan untuk id diawali dengan pagar (#outer-wrapper), perbedaan antara class dan id ialah dalam penerapannya, attribut class dapat di pakai banyak dengan isi atribut yang sama, sedangkan attribut id spesialuntuk dapat digunakan sekali dengan satu isi attribut.
Sekarang kita lanjut ke bab dujungasi dengan memakai css klik cara membuat template blog sendiri - bab 3 (coming soon).
Postingan sebelumnya Teknik Membuat Template Blog Sendiri - Bagian 1.
Post a Comment for "Cara Menciptakan Template Blog Sendiri - Bab 2"