Cara Membuat Template Blogger Sendiri Dengan EasyHtml

Cemonggaul.Com - Setelah semalam Cemonggaul.Com membagikan software gratis EasyHtml yang berguna dalam membuat template, kali ini Cemonggaul.Com akan memberikan Tutorial dasar dalam membuat tampilan blog khususnya blogger dengan menggunakan software gratis itu. Yang perlu Anda persiapkan selain EasyHtml adalah software aplikasi colorpicker yang nanti berguna dalam menentukan kode warna. Anda bisa mendownload software colorpicker ini dari web developernya disini (GRATIS).

Tutorial Dasar Membuat Template Blogger Hasil Kreasi Sendiri dengan EasyHtml


Setelah terinstal aplikasi EasyHtml dan colorpicker, silahkan buka programnya. Dan klik “create new” letaknya ada disebelah atas kiri kaya lembaran kosong putih polos. Nanti akan terlihat seperti berikut ini

membuat template blogger sendiri dengan easyhtml

Sebelum mulai ada baiknya buat gambar dulu mau seperti apa tampilan blog kita. Untuk tutorial kali ini kita buat yang simple saja ya seperti contoh gambar berikut. 

gambaran template sederhana


Habis itu kita buat dulu pemanggil bagiannya. Penempatan kodenya ada diantara <body>sampai dengan </body>. Kodenya seperti ini
<div id=’……’> isi </div>
Keterangan : setiap pemanggil baik script maupun html harus diawali dengan tanda “<” . “div” adalah pemanggil html. Dan “id” adalah bagian yang dipanggil. Dan bagian </div> adalah penutup pemanggil html. Dan “isi” adalah isi dari yang dipanggil itu sendiri. Jadi misalkan membuat pemanggil kepala, kodenya adalah <div id=’kepala’> isi kepala </div>.
Catatan : “kepala” bisa dirubah sesuai keinginan agan, kalo template normalnya biasanya disebut “header”. yang penting jangan ada spasi, jadi missal mau gunakan dua kata seperti kepala botak maka penulisannya <div id=’kepala-botak’> atau <div id=’kepalabotak’>. Disinilah keunikan kalau kita membuat template sendiri. Kita bisa menggunakan pemanggil semau kita, jadi missal dilihat source kodenya pasti unik.
Tips : agar tidak lupa dalam manutup suatu pemanggil buatlah dulu pemanggil (<div id=…>) sekaligus penutupnya (</div>). Baru diisi tengahnya. Sebab kalau kita lupa memberi penutup, dijamin template-nya akan eror.
Contoh praktek-nya kalau menurut gambar diatas kode selengkapnya nya sebagai berikut;

cara membuat pemanggil html dengan easyhtml

Sudah selesai pada bagian yang dipanggil. Sekarang lanjut ke pengaturan tampilan.
Pengaturan tampilan disebut juga dengan CSS. CSS ini penempatannya ada diantara <head> sampai dengan </head>.
Kode CSS pada dasarnya adalah width, height, margin, padding, background, color, dan border.
Keterangan :
Width : lebar                                      Height : tinggi                                    Margin : jarak luar
Padding : jarak dalam       background : latar (bisa warna dan bisa gambar)                               
Color: warna teks                             border: garis                      sedangkan ukuran yang biasa digunakan adalah px dan em.              Font-family:jenis font                    font-size: ukuran font
Overflow:hidden (maksudnya bila ada kelebihan akan dipotong)   float: posisi penempatan (ini digunakan bila dalam 1 wadah terdapat lebih dari satu bagian yang dipanggil
Contoh pengaplikasiannya adalah sebagai berikut:
Disini saya ambil contoh satu saja yaitu bagian body dan header.
<style type=’text/css’>
Body{margin:0;padding:0;text-align:center;}
#kotak-luar{width:906px;margin-right:auto;margin-left:auto;border:1px solid #000;font-family:Times Arial Helvetica;color:#333;font-size:13px;}
#kepala{width:900px;height:120px;margin:3px;padding:3px;background:#00F;border:1px solid #000;}
</style>
Yang lainnya bisa dilihat di gambar berikut ini.


Sudah selesai dan sudah kelihatan bentuknya sekarang. Anda bisa mendownload untuk mencontoh kode template yang saya buat diatas disini. Setelah diunduh silahkan buka dengan aplikasi EasyHtml Anda.

Cara mengintegrasikan template hasil EasyHtml ke Blogger


Untuk mengintegrasikan template karya Anda dari software EasyHtml saya sarankan Anda membuat dulu blog baru dengan nama terserah, tapi saya sarankan untuk membuat nama "bahanpercobaantemplate". Karena nama "bahanpercobaantemplate" sudah saya ambil, silahkan tambah dengan angka. Contoh "bahanpercobaantemplate1" kalau sudah diambil orang ganti angka "1" dengan angka berikutnya sampai dapat. Setelah blog baru terbuat, langkah selanjutnya;
  • Buka menu "Template"
  • Rubah dulu template default-nya menjadi "template sederhana". Letaknya dibagian bawah, silahkan pilih salah satu.
  • Klik "edit HTML"
  • Bagian berikut biarkan saja
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*

  • Pada bagian berikut silahkan ganti sesuai selera Anda
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */    Seperti contoh berikut


  • Bagian bawah setelah yang saya beri kotak merah seperti pada gambar, silahkan dihapus semua
  • Masukkan kode CSS-nya seperti berikut
memindahkan CSS ke Blogger
  • Dibawah CSS tambahkan kode berikut
]]></b:skin>
  </head>
 <body>

  • Kemudian copy semua pemanggil yang ada di EasyHtml setelah tag <BODY> sampai dengan </BODY> apa adanya, dan paste-kan tepat dibawah kode diatas
  • Bagian bawahnya tutup dengan penutup tag </body> dan tag </html>. seperti contoh berikut
penutup_tag_body
  • Langkah senjutnya memasukkan bagian pemanggil widget blogger. Bagian yang pertama dirubah adalah kata "isi kepala" yang letaknya dibawah <div id='kepala'>. Ganti dengan kode berikut
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Percobaan Template (Header)' type='Header'/>
</b:section>

  • Selanjutnya langsung ke bagian kata "isi postingan", letaknya dibawah kode <div id='kotak-post'>. Ganti dengan kode berikut
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section> 

  • Lanjut ke kata "tempat widget sidebar". Ganti dengan kode berikut
 <b:section class='sidebar' id='sidebar' preferred='yes'/>

  • Kata "isi kaki" yang letaknya dibawah kode <div id='kaki'>. Anda bisa menggantinya dengan  kode blogger berikut
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
Atau bisa langsung menggunakan link blog Anda seperti contoh berikut
Copyright ©<a href=’http://bloganda.blogspot.com’>blog anda</a> 


  • Sudah selesai dan silahkan simpan template Anda.
  • Kalau pada waktu penyimpanan ada yang eror, berarti ada kode yang salah dalam membuatnya. silahkan cek ulang
Setelah semua selesai silahkan cek tampilan baru blog tersebut. lihat hasil karya Anda. Untuk pengaturan yang lain, Insyaallah akan saya lanjutkan pada tutorial selanjutnya.

Demikianlah tutorial cara membuat template blogger sendiri dengan EasyHtml. Selamat belajar dan mencoba. Dan semoga bermanfaat