belajar buat template blog

• On this page →
• what is html (and xhtml) •
• what is css •
• what is webfonts •
• examples •
• more info •
• recent press releases •
• current status of specifications and groups

Setelah mati matian mencari kesana kesini cara membuat template blog sendiri, mendaki gunung arlina dan melewati lembah maskolis hingga sungai mengalir indah layaknya design template kangismet namun saya tak kunjung menemukan tutorial membuat template blog dari awal yang benar benar lengkap. Secara logika, jika seseorang mampu untuk membuat sendiri template maka orang tidak akan membeli template dan memilih untuk membuat sendiri sehingga hal ini akan berdampak berkurangnya pemasukan dari penjualan template. atau bertambahnya penjual template sehingga persaingan semakin tinggi. Tidak sepenuhnya hal ini benar, diluar sana banyak orang yang ingin cepat, efisien, berkualitas dan tak mau buang buang waktu untuk membuat template dan fokus pada konten blog. 

Ketidak puasan akan template gratis alias free yang terkadang memiliki fitur yg tidak kita suka, atau bahkan kurang cocok ini dan itu merupakan hal yang buruk dikarenakan hanya membuang buang waktu sehingga kita tidak terfokus akan konten yang akan kita publish. Namun bagi sebagian orang, khususnya pemula seperti saya, membuat design template sendiri merupakan suatu kepuasan yang tiada tara. Saya sendiri adalah orang yang tidak memahami HTML CSS ataupun Javascript yang sangat dibutuhkan untuk membuat sebuah template. Namun setelah saya pelajari sedikit demi sedikit Akhirnya saya mencoba untuk membuat template sendiri dengan segala keterbatasan akan pengetahuan yang saya miliki. 

Mau template ini tidak Valid HTML5 kek atau struktur data berantakan, apalagi sampai ke pada bootstrap, itemscopenya schema.org untuk microdata yang pusingnya kelewatan. Huufff.. saya tetap berusaha untuk membuat template sendiri walaupun sebagian script saya ambil dari template lain sebagai referensi. Masalah selanjutnya adalah ke SEO an dan Responsive nya. Jangankan paham akan SEO dan Responsive, HTML dan CSS pun hanya mengerti kode kode dasar dan itupun sedikit sekali. Walaupun kita membuat template seadanya, tetaplah optimis akan usaha kita. Jika kita belum mampu menaikkan seo dari template kita dapat menggunakan cara lainnya dengan SEO ONPAGE, Blogwalking, dan pastinya konten berkualitas. Dengan hal ini kita dapat menutupi kekurangan kita sembari belajar membuat template yang berkualitas.

Oleh Sebab itu, artikel ini hanyalah sebagai referensi pembelajaran awal bagi pemula toh saya sendiri juga masih belajar. Bisa jadi apa yang saya maksudkan dalam proses pembuatan template ini adalah hal yang salah, maka saya akan sangat berterimakasih akan kritik yang anda sampaikan melalui komentar, sehingga dapat membantu saya mendapatkan pengetahuan yang lebih dari materi yang sama sekali belum saya kuasai secara matang.

Template ini saya beri nama "BosanGo blogBik inTemplate V.1 ".

Saya beritahukan bahwa tutorial ini akan sangatlah panjang dengan beberapa bagian posting yang terpisah pisah. Dan untuk materi yang pertama saya akan membagikan pengetahuan saya seputar kode html dasar untuk membangun sebuah template baru.

TUTORIAL DASAR MEMBUAT TEMPLATE BLOG

Sebelum saya membahas kerangka dasar template, Tahukah anda, template memiliki beberapa bagian umum yang harus diketahui. Untuk lebih mempermudah perhatikan gambar berikut

Gambar 3

Bagian Bagian Template.

1. Wrapper.
Wrapper adalah pembungkus keselurahan bagian dari blog. Ada juga sebagian yang menyebut wrapper ini sebagai Outerwrapper yakni bagian terluar blog.
2. Header.
Header adalah bagian teratas didalam wrapper ini sendiri. Header ini umumnya digunakan untuk meletakkan judul, Navigasi, serta banner yang biasanya digunakan untuk meletakkan iklan.
3. Posting.
Posting adalah tempat dimana artikel blog akan dipublish. Di dalam blogger posting juga sering disebut sebagai "main".
4. Sidebar.
Sidebar adalah bagian tepi yang letaknya berada disamping posting. Sidebar ini biasanya digunakan untuk meletakkan widget widget untuk mempercantik blog.
5. Footer.
Footer adalah bagian terbawah dari blog yang juga sama seperti lainnya merupakan bagian yang berada didalam pembungkus blog. Letak footer ini adalah paling bawah sebagaimana artinya adalah kaki yang berada dibawah. Footer biasa digunakan untuk mencantukan Profil About me, Link Terkait, dan paling umum digunakan untuk meletakkan credit pembuat template blog.

Untuk memulai tutorial ini saya sarankan anda membuat sebuah blog baru khusus untuk belajar membuat template sendiri. Berikut ini adalah tahapan tahapan yang harus anda lakukan.

1. Membuat blog baru khusus untuk belajar template.
Buatlah sebuah blog baru, dengan judul blog bebas hingga sampai seperti gambar ini.

Gambar 1.

2. Masuk ke edit HTML dan hapus semua script HTML tersebut kemudian ganti dengan kerangka berikut.

<html>
<head>
<b:skin><![CDATA[
/*
Judul Template : BosanGo blogBik inTemplate V.1
Designer : Ibnu Said S.P
*/
]]></b:skin>
<style type='text/css'>
/*Tempat CSS DISINI*/
</style>
</head>
<body>
<b:section class='#' id='#' maxwidgets='1'>
</b:section>
<p>Ini adalah Template Pertama Buatan Saya.<p>
</body>
</html>

Copy dan pastekan kerangka tersebut kedalam editor html seperti gambar di bawah ini lalu simpan.
Lihatlah hasil blog anda tersebut, terlihat bahwa blog anda masih polos tanpa adanya bagian header posting dan lainnya.
Gambar 2

Source Code Template

Seperti yang anda lihat pada editor html, hanya dengan menuliskan kode diatas tersebut, template telah dapat disimpan (disave). Namun yang akan menjadi pembahasan pada artikel ini adalah dampak apa yang diberikan sebuah kode terhadap tampilan sebuah blog. Untuk itu, jika anda berfikir untuk membuat template sendiri (tidak hanya copas lalu save), mau tidak mau setidaknya anda harus memiliki sedikit pengetahuan dasar html.



REFERENSI Tempat belajar html secara online adalah :

•  w3school untuk berbahasa inggris (Terdapat online editor untuk trial dan error uji coba) dan
• Duniailkom.com untuk yang berbahasa indonesia

Jika anda sudah memiliki sedikit pengetahuan tentang html, atau bahkan telah menguasai cukup banyak tentang html. maka tutorial ini akan menjadi sangatlah mudah bagi anda. sekarang kita akan mengupas bagian pertama kode di atas.

1. <html>
Ini adalah deklarasi yang menyatakan bahwa didalamnya adalah dokumen type html.
<!DOCTYPE html>
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

mau tidak mau harus Langkah pertama yang harus anda lihat adalah membuka blog baru anda tersebut
sebenarnya 
<html>

<head>

<b:skin><![CDATA[

/*

Judul Template : BosanGo blogBik inTemplate V.1

Designer : Ibnu Said S.P

*/

]]></b:skin>

<style type='text/css'>

/*Tempat CSS DISINI*/

</style>

</head>

<body>

<b:section class='#' id='#' maxwidgets='1'>

</b:section>

<p>Ini adalah Template Pertama Buatan Saya.<p>

</body>

</html>

Ada Beberapa Hal yang membuat seorang blogger menjadi GILA. Salah satunya adalah 

mengotak atik design TEMPLATE. Dan terbukti kegantengan skin muka saya berubah. 

SKIN muka ane yang ganteng berubah menjadi b:skin CDATA 

karena coba belajar design blog ini. arghh Gak Nyambung Cin..

Sekarang saya akan mencoba membuat template sendiri dan semoga tidak menjadi 

GILA. hahahahaa.. pertama saya mencoba membuat template baru untuk melakukan 

experimen ini dan memasukkan kode berikut pada edit HTML template. Bagi yang tidak sengaja mampir ke blog ini dan mau ikut ikutan  coba coba buat blog monggo diaturi.

Pertama tama buat blog baru khusus untuk belajar buat template, judul dan nama. Blognya terserah. yang mesti anda tahu, anda harus sampai pada edit template dan menghapus semua kodenya, TITIK...

Lanjut saya coba copi ini ke editor html saya.

-----------------------------------------------------------------------

<html>
<head>
<b:skin><![CDATA[
/*
Judul Template : Bosango blogbikintemplate V.1
Designer : Ibnu Said S.P
*/
]]></b:skin>
<style type='text/css'>
/*Tempat CSS Disini*/
</style>
</head>
<body>
<b:section class='#' id='#' maxwidgets='1'>
</b:section>
Ini adalah Template Pertama Buatan Saya.
</body>
</html>

-----------------------------------------------------------------------

Save Template. sampai disini yang ada hanya blog polos dengan tulisan Ini adalah



Template Pertama Buatan Saya. oke kita mulai oprek oprek penambahan pertama.

-----------------------------------------------------------------------

Penambahan ke 1 yaitu menambahkan CSS RESET dan HTML 5 (Sebut saja bahasa ini



bahasa planet namec):



/* CSS Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb



r,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,str



ong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,tab



le,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,



figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,a



udio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-



align:baseline;}

/* HTML5 */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section



{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html



{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}



blockquote:before,blockquote:after,q:before,q:after{background:transparent;}



table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-



box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins



{background:#fff;}



-----------------------------------------------------------------------

Hasilnya template setelah ditambahkan

-----------------------------------------------------------------------

<html>

<head>

<b:skin><![CDATA[

/*

Judul Template : Bosango blogbikintemplate V.1

Designer : Ibnu Said S.P

*/

]]></b:skin>

<style type='text/css'>

/*-------------------Tempat CSS Disini-----------------*/

/* CSS Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb



r,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,str



ong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,tab



le,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,



figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,a



udio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-



align:baseline;}

/* HTML5 */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section



{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html



{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}



blockquote:before,blockquote:after,q:before,q:after{background:transparent;}



table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-



box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins



{background:#fff;}

</style>

</head>

<body>

<b:section class='#' id='#' maxwidgets='1'>

</b:section>

Ini adalah Template Pertama Buatan Saya.

</body>

</html>

-----------------------------------------------------------------------

save template. setelah ditambahkan secara kasat mata tidak terlihat perubahan



berarti pada blog. dan saya juga tidak tahu mengapa ini bisa terjadi hahahaha.



bahasa planet namec yang baru ditambahkan diatas tidak dapat saya terjemahkan



karena saya masih goblog. Oleh karena itu saya belajar membuat sebuah template



berjudul : Bosango blogbik intemplate V.1. dengan kerja keras dan hasil saya



sendiri.



wahahahaha sudah ada V.1 seolah olah akan di update versinya



Jadi kesimpulannya : saat ini saya belum mengetahui secara pasti apa yang



barusan saya tulis diatas. Namun yang saya tahu kode css reset dan Html 5 itu



digunakan untuk membuat tampilan blog menjadi sama pada browser mozilla chrome



dll (biar gak berantakan). CSS RESET tersebut saya copy dari template simplify



Responsive free Template buatan arlina design. Dari Namanya saja terdengar



sangat keren SIMPLIFY RESPONSIVE, beda halnya dengan template yang saya buat ini



yaitu  BosanGo blogBik inTemplate V.1 huahahahaa bacanya pelan pelan..



Note: Arlina Design atau sering dipanggil mbak lina dan mungkin kalau umurnya 35



tahun lebih cocok dipanggil tante lina adalah salah satu blogger asal indonesia



yang terkenal mahir design men design blog. beda halnya dengan saya yang



pengetahuan html saja masih pas pas an di dompet. Ok Lanjut masbrooo mastah...

-----------------------------------------------------------------------

Penambahan bahasa planet namec lanjutan yang ke 2 yaitu mengubah warna background :



/* Warna Background Planet Namec */

body {background-color: #00b300;background-position: center center;}

-----------------------------------------------------------------------

Letakkan di atas </style> atau berada di bawah Hasilnya seperti dibawah ini

-----------------------------------------------------------------------

<html>

<head>

<b:skin><![CDATA[

/*

Judul Template : Bosango blogbikintemplate V.1

Designer : Ibnu Said S.P

*/

]]></b:skin>

<style type='text/css'>

/*-------------------Tempat CSS Disini-------------------*/

/* CSS Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb



r,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,str



ong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,tab



le,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,



figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,a



udio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-



align:baseline;}

/* HTML5 */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section



{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html



{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}



blockquote:before,blockquote:after,q:before,q:after{background:transparent;}



table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-



box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins



{background:#fff;}

/* Warna Background Planet Namec */

body {background-color: #00b300;}

</style>

</head>

<body>

<b:section class='#' id='#' maxwidgets='1'>

</b:section>

Ini adalah Template Pertama Buatan Saya.

</body>

</html>

-----------------------------------------------------------------------

save template. setelah ditambahkan kode ini diatas yaitu kode.

/* Warna Background Planet Namec */

body {background-color: #00b300; background-image: url("http://www.hotel-r.net/im/hotel/ch/piccolo-22.png");}



maka keseluruhan tampilan background berubah menjadi warna #00b300.kode ini



#00b300 adalah kode warna hexa Strong lime green. Anda juga dapat menyebut warna



ini seperi warnanya masyarakat planet namec yaitu Warna Piccolo.

Sekali lagi.. MASYARAKAT PLANET NAMEC??? PICCOLO. Lanjutt...

-----------------------------------------------------------------------

Penambahan ke 3 yaitu pembungkus blog atau lebih keren disebut sebagai Wrapper Atau Outer wrapper, atau terserah anda. yang pasti namanya bukan PICCOLO.



KODE pertama:

<div id='wrapper'>



Kode Kedua :

</div>



Kode Ketiga :

/* Pembungkus Blog */

#wrapper { margin: 0 auto; background: #fff; width: 90%; padding: 20px;margin-top:20px;margin-bottom:20px}

-----------------------------------------------------------------------

kode pertama yaitu pembungkus / wadah. (*bukan wardah kosmetik) :

<div id='wrapper'>



Letakkan kode ini tepat di bawah <body>

-----------------------------------------------------------------------

kode kedua yaitu :

</div>



Letakkan kode </div> tepat diatas </body>

-----------------------------------------------------------------------

Simpan Template dan refresh tampilan blog. Setelah saya lakukan hal ini ternyata tidak ada perubahan apa apa terhadap blog saya akwkawkwwakawk..

jadi buat apa kode itu ?



div berarti division

id='wrapper' berarti pembungkus

dan terakhir </div> kode penutup dari div



Divisi sepakbola dengan kesebelasan pembungkus ini akan tampil pada blog hanya ketika telah dibuatkan CSS nya yaitu dengan memasukkan kode ke 3 pada Tempat CSS

-----------------------------------------------------------------------

Kode Ketiga :



/* Pembungkus Blog */

#wrapper { margin: 0 auto; background: #fff; width: 90%; padding: 20px;margin-top:20px;margin-bottom:20px}



tepat diatas </style> atau dibawah warna planet namec.

------------------------------------------------------------------------

maka hasilnya akan menjadi seperti berikut ini

------------------------------------------------------------------------

<html>

<head>

<b:skin><![CDATA[

/*

Judul Template : Bosango blogbikintemplate V.1

Designer : Ibnu Said S.P

*/

]]></b:skin>

<style type='text/css'>

/*-------------------Tempat CSS Disini-------------------*/

/* CSS Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5 */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins{background:#fff;}

/* Warna Planet Namec */

body {background-color: #00b300; background-image: url("http://www.hotel-r.net/im/hotel/ch/piccolo-22.png");}

/* Pembungkus Blog */

#wrapper { margin: 0 auto; background: #fff; width: 90%; padding: 20px;margin-top:20px;margin-bottom:20px}

</style>

</head>

<body>

<div id='wrapper'>

<b:section class='#' id='#' maxwidgets='1'>

</b:section>

  <center>Ini adalah Template Piccolo Buatan Saya.</center>

</div>

</body>

</html>

------------------------------------------------------------------------

Save template. Setelah di refresh maka tampilan blog akan memiliki sebuah wadah yang dapat digunakan untuk memasukkan widget blogger.

------------------------------------------------------------------------

Penambahan ke 4 yaitu kode html header wrapper.

kode html header wrapper ini adalah :



<header id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'>

<b:widget id='Header1' locked='true' title='header' type='Header'>

</b:widget>

</b:section>

</header>

------------------------------------------------------------------------

Header artinya bagiankepala dan wrapper artinya pembungkus

secara keren kita sebut hal ini sebagai pembungkus bagian atas template.



apa bedanya wrapper dan header wrapper jika sama sama pembungkus ?

Wrapper adalah pembungkus keseluruhan blog yang akan di isi dengan header, posting, sidebar, dan footer.

sedangkan header wrapper hanya untuk membungkus bagian header.







------------------------------------------------------------------------