Cara Membuat Template Blog Sendiri Dari Awal

Pertama kali saya terjun dalam dunia blogging sering kali yang namanya gonta-ganti template, bahkan satu hari bisa ganti template 2 hingga 5 kali dengan modal download template di situs-situs penyedia template gratis. Semua template yang tersedia di situs tersebut semuanya sudah saya coba, hasilnya masih belum sesuai dengan apa yang saya inginkan. Tetapi dengan keseringan gonta-ganti template membuat saya sedikit paham dengan kode CSS, HTML, dan JavaScript, karena template yang sering saya download kebanyakan ada fitur tambahan seperti script ini harus diletakkan diatas head, atau css ini harus diletakkan sebelum skin dan seterusnya, sehingga dengan kurang lebih 1 bulan saya sudah mengenal sedikit bahasa kode yang ada di blogger.

Jadi saya tidak heran untuk temen-temen blogger pemula yang ingin membuat template sendiri demi memenuhi kepuasan dengan desain template yang temen-temen inginkan, karena kita akan menjadi lebih puas jika kita bisa membuat dan memakai template buatan kita sendiri. Untuk membuat template dari awal, sebenernya itu sangat mudah dan itu juga berlaku untuk temen-temen yang masih dikategorikan pemula dalam dunia blogger. Meskipun dikatakan mudah, temen-temen juga harus ketahui bahwa untuk membuat template blog itu perlu waktu yang tidak singkat bahkan bisa membutuhkan beberapa minggu untuk menghasilkan template sesuai dengan keinginan temen-temen.

Lewat postingan ini, saya akan sharing tentang membuat template dari awal dengan cara saya sendiri, jadi mohon dimaklumi jika cara ini tidak beraturan tetapi saya menjamin, temen-temen akan memahami sendiri tentang CSS, HTML, JavaScript tanpa saya jelaskan di postingan ini. Karena postingan ini adalah cara otodidak yang pernah saya coba untuk membuat template seperti yang sudah saya gunakan dan teman-teman bisa lihat template pada blog ini.

LANGKAH PERTAMA

Sekarang temen-temen buatlah blog baru yang nantinya akan digunakan sebagai media latihan membuat template dari awal selanjutnya perhatikan kode dasar template blogger dibawah ini.


  <?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 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>  
  <title><data:blog.pageTitle/></title>  
  </head>  
  <body>  
   <!-- BODY CONTENTS -->  
  </body>  
  </html>  

Diatas adalah kode dasar dalam pembuatan template, tetapi dengan kode dasar seperti itu, template masih belum bisa digunakan karena masih belum dilengkapi dengan kode skin dan widget utama blog yaitu halaman postingan. Agar lebih meyakinkan, pada step ini diharapkan untuk mencopy-pastekan kode diatas ke dashboard template temen-temen, nanti pada dashboard tema, kita tidak akan bisa menyimpan tema sementara karena masih belum dilengkapi dengan kode skin dan widget utama blog.

Agar kode dasar template bisa digunakan, maka kita perlu menambahkan kode sebelum </head> yaitu kode skin dan menambahkan kode sebelum </body> yaitu kode utama blog. Agar lebih jelasnya teman-teman bisa melihat dan perhatikan kode dibawah ini kode apa yang sudah ditambahkan.


  <?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 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>  
  <title><data:blog.pageTitle/></title>  
  <b:skin><![CDATA[  
  ]]></b:skin>  
  </head>  
  <body>  
  <b:section class='main' id='main'>  
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>  
  </b:section>  
  </body>  
  </html>  

Setelah itu langsung copy-pastekan kode diatas ke dashboard template temen-temen, sebelum copy-paste kode diatas, diharapkan temen-temen sudah menghapus kode sebelumnya terlebih dahulu. Jika sudah di copy-pastekan dan disimpan sementara, maka tampilan pertama blog temen-temen akan seperti pada gambar dibawah ini.

Sebelum melanjutkan ke tahap berikutnya, diharapkan temen-temen agar membuat sketsa tata letak tentang tampilan blog terlebih dahulu. Bisa dimulai dari selembar kertas kemudian gambar tata letak yang ingin digunakan. Ada beberapa tata letak yang biasa digunakan oleh template blogger pada umumnya. Contohnya seperti gambar dibawah ini.

Gambar diatas, menunjukkan beberapa komponen, seperti header, main post, sidebar, dan footer.

Header
Komponen ini terletak pada bagian paling atas atau bisa dikatakan sebagai kepalanya template blog. Dalam komponen inilah biasanya terletak Judul dan deskripsi blog termasuk logo dan bannernya.

Main post
ini adalah komponen utama pada sebuah blog. Tanpa adanya komponen ini maka tampilan blog tidak akan berfungsi karena pada bagian ini terletak postingan blog yang biasanya para blogger mengisi aktivitas bloggingnya lewat komponen ini.

Sidebar
komponen ini biasanya ada pada sisi main post, baik itu sisi kanan maupun sisi kiri main post. Biasanya komponen ini digunakan untuk menu-menu atau widget pendukung pada sebuah blog, seperti popular post, gambar, atau video.

Footer
komponen ini biasanya terletak pada bagian bawah blog. Banyak para blogger memanfaatkan komponen ini untuk menampilkan iklan atau profil blog mereka dan biasanya komponen ini untuk menampilkan credit link hak cipta template.

LANGKAH KEDUA

Setelah temen-temen sudah memiliki kerangka templatenya, sekarang saatnya kita menambahkan header, sidebar dan footer agar layout templatenya terlihat indah karena dilengkapi dan didukung oleh komponen-komponen tersebut.

MENAMBAHKAN HEADER

Seperti namanya, header ini selalu terletak pada bagian paling atas sebuah blog yang biasanya dibuat untuk Judul dan Deskripsi Blog. Untuk menambahkan header, temen-temen cukup menambahkan kode HTML dibawah ini setelah kode <body>.



 <header id='header-wrapper'>

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

<b:widget id='Header1' locked='true' title='Ican Al Ihsan (Header)' type='Header'>

</b:widget> </b:section> </header>

Setelah temen-temen mengcopy-pastekan kode diatas, maka tampilannya akan seperti dibawah ini, dan hasil tampilannya masih belum maksimal karena belum ditambahkan dengan CSS yang fungsinya untuk mengatur tampilan komponen-komponen tertentu sesuai kode panggilannya. Jika blognya tidak ada Deskripsi Blog maka temen-temen bisa ditambahkan lewat menu Tata Letak yang ada di Dashboard Blogger.

Agar bisa mengatur tampilan header sesuai keinginan temen-temen, maka temen-temen diharuskan untuk menambahkan kode CSS yang bisa diletakkan diantara kode skin, lebih jelasnya temen-temen bisa langsung lihat kode dibawah ini.


<b:skin><![CDATA[  
 #header-wrapper{background:#f00;width:100%;overflow:hidden;}  
 #header{width:100%;text-align:center;overflow:hidden;float:left;}  
 .header .widget{padding:10px;}  
 ]]></b:skin>  

Setelah temen-temen mengcopy-pastekan kode tersebut, maka hasilnya akan seperti dibawah ini, dan temen-temen bisa mengotak-atik kode css tersebut agar bisa dipahami sendiri secara otodidak.

MENAMBAHKAN SIDEBAR

Seperti yang sudah dijelaskan bahwa sidebar memiliki fungsi untuk melengkapi menu-menu blogger seperti menambahkan Popular Post, Iklan, profil dll. Dan untuk menambahkan sidebar, temen-temen hanya perlu mengcopy-pastekan kode dibawah ini sebelum kode </body>


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

Setelah mengcopy-pastekan diharapkan temen-temen agar menambahkan widget arsip agar posisi sidebar terlihat. Posisi awal sidebar akan berada dibawah postingan blog karena kita belum menambahkan CSS untuk mengatur panjang lebarnya komponen postingan dan sidebar. Untuk mengatur tampilan postingan dan sidebar, temen-temen perlu menambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> agar lebih jelasnya temen-temen bisa lihat kode dibawah ini


 #main{float:left;width:70%;overflow:hidden}  
 #sidebar-wrapper{float:right;width:30%;overflow:hidden}  
 #sidebar{padding:5px}  
 .sidebar h2,.sidebar h3{background:#f00}  

Setelah menambahkan kode css diatas, maka tampilannya akan seperti dibawah ini. Disini saya menganjurkan temen-temen agar membuat templatenya dengan satu sidebar terlebih dahulu agar tidak terlalu bingung untuk kedepannya.

MENAMBAHKAN FOOTER

Setelah temen-temen menambahkan komponen header dan sidebar, sekarang saatnya menambahkan komponen footer yang biasanya terletak widget-widget tertentu dan link hak cipta. Disini saya akan menambahkan footer tiga kolom dan link Hak Cipta. Langsung saja temen-temen tambahkan kode dibawah ini sebelum kode </body> atau sesudah kode </div>


 <div class='clear'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer-1' showaddelement='yes'/> <b:section class='footer' id='footer-2' showaddelement='yes'/> <b:section class='footer' id='footer-3' showaddelement='yes'/> <div class='clear'/>  
 <div class="credit-link">Copyright © 2019. <a href="https://www.icanalihsan.com/" title="Ican Al Ihsan">Ican Al Ihsan</a> All Right Reserved <br/>Designed By <a href="https://plus.google.com/u/0/102845971303174068669" target="_blank">Ican Al Ihsan</a>  
 </div></footer>  

Setelah itu langsung saja tambahkan kode CSS dibawah ini, sebelum kode ]]></b:skin>


 #footer-wrapper{width:100%;clear:both}  
 .footer h3,.footer h2{background:#f00}  
 .footer{width:30%;float:left;margin:1%}  
 .credit-link{width:100%;background:#f00;text-align:center}  

Jika temen-temen sudah menambahkan kode tersebut, maka hasilnya akan seperti gambar dibawah ini. Dan silahkan credit linknya diganti dengan nama blog temen-temen.

Jika ada kesalahan selama mengikuti tutorial diatas, maka temen-temen harap cocokkan kodenya dengan dibawah ini yang versi lengkapnya.


 <?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 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>  
  <title><data:blog.pageTitle/></title>  
  <b:skin><![CDATA[  
 body{margin:0;padding:0}  
 #header-wrapper{background:#f00;width:100%;overflow:hidden;}  
 #header{width:100%;text-align:center;overflow:hidden;float:left;}  
 .header .widget{padding:10px;}  
 #main{float:left;width:70%;overflow:hidden}  
 #sidebar-wrapper{float:right;width:30%;overflow:hidden}  
 #sidebar{padding:5px}  
 .sidebar h2,.sidebar h3{background:#f00}  
 #footer-wrapper{width:100%;clear:both}  
 .footer h3,.footer h2{background:#f00}  
 .footer{width:30%;float:left;margin:1%}  
 .credit-link{width:100%;background:#f00;text-align:center}  
  ]]></b:skin>  
  </head>  
  <body>  
 <header id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Ican Al Ihsan (Header)' type='Header'></b:widget> </b:section> </header>  
   <b:section class='main' id='main'>  
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>  
 </b:section>  
 <aside id='sidebar-wrapper'>  
 <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>  
 </aside>  
  <div class='clear'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer-1' showaddelement='yes'/> <b:section class='footer' id='footer-2' showaddelement='yes'/> <b:section class='footer' id='footer-3' showaddelement='yes'/> <div class='clear'/>  
 <div class="credit-link">Copyright © 2019. <a href="https://www.icanalihsan.com/" title="Ican Al Ihsan">Ican Al Ihsan</a> All Right Reserved <br/>Designed By <a href="https://plus.google.com/u/0/102845971303174068669" target="_blank">Ican Al Ihsan</a>  
 </div></footer>  
 </body>  
  </html>  

Setelah temen-temen mengikuti tutorial ini saya meyakini bahwa hasil tampilannya masih belum sesuai dengan keinginan temen-temen. Oleh karena itu diharapkan agar temen-temen mengatur warna background dan font sesuai yang temen-temen harapkan. Dan jika temen-temen ingin bertanya atau meminta tutorial yang berkaitan dengan postingan ini seperti ingin menambahkan menu label atau lainnya, silahkan meminta atau bertanya lewat kolom komentar agar saya bisa membuat tutorialnya lebih lengkap. Dan saya akan membantunya dengan tutorial secara otodidak.

Comments