Mari kita Belajar membuat template Blogger! Kerangka Template

Mari kita Belajar membuat template Blogger! Kerangka Template

Hallo Teman-Teman.
Pada kesempatan kali ini saya akan memberikan cara untuk membuat template blogger, dikarenakan membutuhkan banyak materi untuk membuat template yang sempurna jadi di artikel ini saya akan memberikan Template basic atau dasarnya aja ya, oke tidak usah berlama-lama mending kita langsung saja ke topik pembahasan.

PENJELASAN
Sebagai seorang Blogger, membuat Template atau tampilan untuk blog sendiri merupakan suatu kepuasan yang tidak ada duanya, karna kalian ketahui bahwa membuat template blog memerlukan kemampuan bahasa programan yang mumpuni, jadi apabila tidak memahaminya kalian akan sulit sekali untuk membuatnya, meskipun artikel ini merupakan cara membuat template basic tapi setidaknya kalian wajib memiliki kemampuan dan pemahaman atas bahasa programan.

Banyak sekali para blogger yang paham akan bahasa programan tetapi selalu gagal dalam membuat template, saya sebagai Blogger Indonesia tentu sangat ingin para blogger Indonesia memiliki kemampuan bahasa programan yang mumpuni agar dapat memamerkan kreasi templatenya masing masing.

Sebelum kalian memulai membuat template dasar sebaiknya kalian setidaknya memiliki kemampuan dalam HTML dan CSS Karna ini sebagai pemeran utama dalam pembuatan template blogger, untuk script dasar membuat template blogger adalah sebagai berikut

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<html> // Pembuka html
<head> // Pembuka Heading
<title>Basic Template</title> // Code Title Blog
<b:skin> // Pembuka CSS skin

</b:skin> // Penutup CSS skin
<style type='text/css'> // Pembuka CSS Style

</style> // Penutup CSS Style
</head> // Penutup Head
<body> // Pembuka Body

</body> // Penutup Body
</html> // Penutup html

script di atas merupakan sebuah script dasar yang didukung platform blogger, tanpa script dasar di atas kalian tidak akan bisa memulai membuat dasar template blogger.
[copyright]janganbingung.com[copyright]
Jika ingin memulai basic Template, kalian bisa lihat gambar di atas merupakan sebuah gambaran kerangka wajib Template kalian, yang terdiri dari Wrapper, Header-Wrapper, Konten-wrapper, Sidebar-wrapper, dan Footer-Wrapper, sejatinya gambaran diatas hanyalah susunan template basic yang mudah dipahami, tetapi jika kalian sudah ahli dalam hal ini kalian bisa merubah susunan itu sesuka hati kalian, untuk contoh susunan script diatas kurang lebih seperti ini.

<body>
<div id='wrapper'> // Pembungkus kedua Template setelah Body
<div id='header-wrapper> // Kepala Template
Logo script
Page Menu
Search code
</div>

<div id='konten-wrapper> // Pembungkus Isi konten
Konten Script
</div>

<div id='sidebar-wrapper'> // Pembungkus Widget blog
Sidebar Script
</div>

<div id='footer-wrapper> // Pembungkus Credits/Copyright

</div>
</body>
</html>

Agar kalian jauh lebih paham lagi maka saya akan menjelaskannya satu per satu, mungkin artikel ini akan sangat panjang ya haha, gpp lah yang penting kalian ga bingung lg, karna baca artikel ini di janganbingung.com.

1. Wrapper
Wrapper merupakan sebuah bungkus kedua setelah Body, Diana Wrapper ini mengatur ukuran dan posisi untuk Header-wrapper, konten-wrapper, Sidebar-wrapper, dan Footer-wrapper. Tidak ada Script Khusus

2. Header-wrapper
Merupakan aset penting dari sebuah template yang dapat kalian isi dengan Logo blog, dan nama beserta deskripsi blog, selain itu header ini juga dapat menampung sebuah Page Navigasi dan Search konten.

Script Khusus Header-wrapper
<b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Jangan Bingung' type='Header'></b:widget> </b:section>

Contoh Pemasangan script Khusus
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Jangan Bingung' type='Header'></b:widget> </b:section>
</div>

3. Konten-wrapper
Merupakan sebuah aset terpenting yang harus kalian buat di template ini, karna konten-wrapper akan menjadi mangkuk untuk menaburi semua artikel yang kalian buat, dengan begitu tanpa konten-wrapper artikel kalian tidak akan bisa muncul di template.

Script Khusus Konten-Wrapper
<b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Konten' type='Blog'></b:widget> </b:section>

Contoh Pemasangan Script
<div id=''konten-wrapper">
<b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Kontem' type='Blog'></b:widget> </b:section>
</div>

4. Sidebar-wrapper
Sidebar ini umumnya digunakan sebagai pembungkus widget, seperti Iklan sidebar, Popular post, atau aksesoris blog lainnya.

Script Khusus Sidebar-Wrapper
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>

Contoh Pemasangan script
<aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside>

5. Footer-Wrapper
Footer Wrapper pun merupakan sebuah pembungkus yang berada di bagian bawah halaman, kebanyakan blogger menggunakan Footer-Wrapper sebagai pembungkus widget juga, tapi jika kalian tidak suka itu, footer Wrapper bisa sebagai Credit blog, dan Laman, sebagai contoh template janganbingung.com yang saya buat ini, menggunakan Footer-Wrapper sebagai pembungkus Credit dan Laman saja. Tidak Ada script Khusus.

Apa Maksud Script khusus?
Script khusus merupakan sebuah script yang berfungsi mencocokan antara pembungkus dengan isi pembungkus, jadi setiap bagian seperti Header-wrapper,konten-wrapper, dan Sidebar-wrapper mempunyai script khusus yang berbeda, agar kinerja dalam pembuatan template pun menjadi maksimal.

Jika sudah seperti itu kurang lebih susunan kerangka Template basic akan seperti ini.

<html>
<body>
<div id='wrapper'> // Wrapper
<div id='header-wrapper'> // Header-Wrapper
<b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Jangan Bingung' type='Header'></b:widget> </b:section>
</div>
<div id='konten-wrapper'> // Konten Wrapper
<b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Kontem' type='Blog'></b:widget> </b:section>
</div>
<aside id='sidebar-wrapper'> // Sidebar-Wrapper <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside>
<div id='footer-wrapper'> // Footer-Wrapper
<p>Copyright©2017</p><a href='http://www.janganbingung.com/'> Jangan Bingung</a>
</body>
</html>

Tetapi meski kerangka susunan Html Template sudah rapih, jangan salah keadaan template kalian masih acar-acakan kenapa? Karna kerangka Template perlu dukungan dari CSS agar susunan dapat terjadi organisir, tapi tenang saya akan memberikan code CSS full untuk merapihkan kerangka Template kalian.

<style type='text/css'>
body
{
margin:0;
padding:0;
background-color:#d1d1d1;
}

/* Jangan bingung wrapper */
#wrapper
{
width:1100px;
margin-right:auto; margin-left:auto;
background-color:#fff;
overflow:hidden
}

/* Jangan Bingung Head */
#header-wrapper
{
width:100%;
height:60px;
margin:0;
background-color:red;
display:block;
}

/* Jangan Bingung Konten */
#konten-wrapper
{
width:60%;
margin:20px;
background-color:blue;
float:left;
display:block;
overflow:hidden;
}

/* Jangan Bingung Sidebar */
#sidebar-wrapper
{
width:30%;
margin:20px;
background-color:green;
float:right;
display:block;
overflow:hidden;
}

/* Jangan Bingung Footer */
#footer-wrapper
{
width:100%;
height:50px;
background-color:#000;
display:block;
overflow:hidden;
}
</style>

Script CSS diatas merupakan sebuah script yang akan menyusun rapih kerangka Template yang akan kalian buat, tidak sampai disitu kalian pun perlu membuat script skin Kontrol default agar semuanya dapat terorganisir.

untuk pembuatan script skin Kontrol default contohnya seperti ini.

*/&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
<b:skin><![CDATA[
#navbar-iframe
{
visibility:hidden;
height:0;
display:none;
}
]]></b:skin>

Semuanya sudah selesai, jadi untuk keseluruhan script kerangka Template blogger adalah sebagai berikut :

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<html>
<head>
<title>Kerangka Template</title>
*/&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
<b:skin><![CDATA[
#navbar-iframe
{
visibility:hidden;
height:0;
display:none;
}
]]></b:skin>
<style type='text/css'>
body
{
margin:0;
padding:0;
background-color:#d1d1d1;
}

/* Jangan bingung wrapper */
#wrapper
{
width:1100px;
margin-right:auto; margin-left:auto;
background-color:#fff;
overflow:hidden
}

/* Jangan Bingung Head */
#header-wrapper
{
width:100%;
height:60px;
margin:0;
background-color:red;
display:block;
}

/* Jangan Bingung Konten */
#konten-wrapper
{
width:60%;
margin:20px;
background-color:blue;
float:left;
display:block;
overflow:hidden;
}

/* Jangan Bingung Sidebar */
#sidebar-wrapper
{
width:30%;
margin:20px;
background-color:green;
float:right;
display:block;
overflow:hidden;
}

/* Jangan Bingung Footer */
#footer-wrapper
{
width:100%;
height:50px;
background-color:#000;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<div id='wrapper'> // Wrapper
<div id='header-wrapper'> // Header-Wrapper
<b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Jangan Bingung' type='Header'></b:widget> </b:section>
</div>
<div id='konten-wrapper'> // Konten Wrapper
<b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Kontem' type='Blog'></b:widget> </b:section>
</div>
<aside id='sidebar-wrapper'> // Sidebar-Wrapper <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside>
<div id='footer-wrapper'> // Footer-Wrapper
<p>Copyright©2017</p><a href='http://www.janganbingung.com/'> Jangan Bingung</a></div>
</div>
</body>
</html>

[copyright]Janganbingung.com[copyright]
Gambar diatas ini merupakan hasil akhir yang terbuat dari script kerangka Template blog lengkap yang saya buat, perlu kalian ketahui gambar diatas bukan merupakan sebuah gambar yang dibuat dengan software editing, melainkan sebuah tampilan yang dihasilkan oleh script. Dan kalian bisa lihat sendiri, script kerangka lengkap diatas sudah membuat tampilan dengan susunan yang tepat.

PENGAKHIRAN
Perlu kalian ketahui disini saya hanya membuat disini saya hanya membuat kerangkanya saja, tapi dengan adanya kerangka Template ini kalian akan dengan mudah menyempurnakannya. Untuk penyempurnaannya kalian bisa ubah sesuai dengan selera kalian masing-masing.

PENUTUP
Oke teman-teman, cukup sekian tips yang saya berikan, semoga bermanfaat dan bisa menambah wawasan kalian dalam membuat template, terus berusaha dan berdo.a agar dimudahkan dalam pembuatan template kalian, jika ada kesalahan mohon dimaafkan, untuk keseluruhan saya ucapkan Terima Kasih.

Jika ada yang kalian tidak paham kalian bisa memberikan komentar dibawah.