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
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.
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;
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><
- Bagian bawah setelah yang saya beri kotak merah seperti pada gambar, silahkan dihapus semua
- Masukkan kode CSS-nya seperti berikut
- 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
- 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
dari dulu sebenarnya pengen sekali punya template sendiri ehh gak pernah kesampaian :(
ReplyDeletewahhh bolehh nichh
ReplyDeletethank's dachhh
wisss boleh juga nichhh
ReplyDeleteDulu belajar pake dreamweafer. Sekarng ada ilmu baru nih.. Makasih gan, mampir kesebelah yah
ReplyDeletekalo gua bilang sih ini agak ribet bagi pemula seperti saya,lebih baik beli buku nya saja. di situ ada penjelasan dan css nya,thanks
ReplyDeletehttp://wisnurizki.blogspot.com
@WisnuRizkii
http://facebook.com/wisnu.rizkii
ane bookmark gan buat nyoba2
ReplyDeleteaku mulai dari langkah sederhana ini..makasih info nya
ReplyDeleteboleh jadi panduan ni gan...
ReplyDeletesekarang lebih mudah lagi pakai bootstrap
ReplyDeletenamah ilmu
ReplyDeletebagus banget mas, kunjungan perdana nih..
ReplyDeleteArtikelnya bagus gan, ane mau try ya...semoga bisa.
ReplyDelete