Assalamualaikum wr.wb.
Permisi Momod, mimin, om satgas, para mastah dan semua warga Ads-id
semuanya. Ane cuma ingin share cara nubitol dalam mendesain template
sendiri khususnya blogger dengan menggunakan aplikasi EasyHtml sekaligus
cara mengaplikasikannya ke dalam blogger. Maaf kalo mungkin salah kamar
atau nggak berguna, silahkan di hapus saja
Langsung saja alat yang dibutuhkan disini adalah color picker dan easy html. Link download bisa lihat di trit iniCode:
http://www.ads-id.com/forums/showthr...template-dasar
(http://www.ads-id.com/forums/showthread.php/145593-share-Tool-newbie-untuk-membuat-template-dasar)
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
http://www.ads-id.com/forums/images/imported/2013/01/Membuat_template_blogger_dengan_easyhtml-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkF5-QrwWmy_F8oJbDG__0WmB-Zqf-P4uwgdHH1jUx0Za0aPEvsmgrlF5bpyZ_W6nf8QxecEO8kjNRciPicJl1eYoki-9KTKPlB2nJGXQQPOzCikQq_djzAf6tK1KGCKxIb32LTrJ6bDtv/s1600/Membuat_template_blogger_dengan_easyhtml.jpg)
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.
http://www.ads-id.com/forums/images/imported/2013/01/0gif-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOzqEpxcDkzJG4Gfx11MglrBc4u2wnK48GmebQ0GQFjU5oOj9zIQTIsa3VxQwjgTguZOptyuDO5yLXvGkDBsetfEK2aY8lPhfdEKsewbXZmMk3PGXyE0pvNNXoypQ5vGMxIePqivP3Py9Z/s1600/0.gif)
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;
http://www.ads-id.com/forums/images/imported/2013/01/cara_membuat_pemanggil_htmlGIF-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_M8DyIaThD7yADTkn1oIR4mgiiyUJ8PlNDAEKXIRM6v3BTLfSUtQLckydGqII2sCuW8Mujw8KrTsEBudIjHSBqSOAdv_oWspI5a5N_sitCZpnDX8lv7RNRSzDMxlGvZB9dIXK1yDsudnc/s1600/cara_membuat_pemanggil_html.GIF)
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;paddin g:3px;background:#00F;border:1px solid #000;}
</style>
Yang lainnya bisa dilihat di gambar berikut ini.
http://www.ads-id.com/forums/images/imported/2013/01/Contoh_membuat_cssGIF-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdgaCO7x8J6yz9LfQy1ekJpfNabfRXnlA_UZfw-Q6nRvZtexWlBnspagGAi0sB6ZqsX-dC-URYn7aBHIpdVRT5ch-YjxoQSBX2kTqiGTAo_BYTbMKjdYrx68c4PlDpsaOqgiZBXRVMIfH/s1600/Contoh_membuat_css.GIF)
Sudah selesai dan sudah kelihatan bentuknya sekarang. Anda bisa
mendownload untuk mencontoh kode template yang saya buat diatas disini
(https://sites.google.com/site/cemonggauls/home/empty.htm). 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. noastetic . com
----------------------------------------------- */ Seperti contoh berikut
http://www.ads-id.com/forums/images/imported/2013/01/cara_memasukkan_template_easyhtml_ke_blo-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQf6I60D6CyoYH3vCDPdm_j2qqyc_oCAOc0k1TGtmY1wejtYq_j-YiDxLSQ6EtGpxoO9CHJZH64cRtmr5AncpvffjZf0SPvubX5Zslaj2kTkK1DlrhePSreD6vXQtGI7xpSiE-5T8tzVu/s1600/cara_memasukkan_template_easyhtml_ke_blogger.jpg)
Bagian bawah setelah yang saya beri kotak merah seperti pada gambar, silahkan dihapus semua
Masukkan kode CSS-nya seperti berikut
http://www.ads-id.com/forums/images/imported/2013/01/memindahkan_CSS_ke_blogger-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkjjypPCy8pN0-64Ns8v_oxaTBSNy3wesD2NRIS2XWCXCz7o3nB6vfNZpm1YXhFJONlsbk4X2u9pqrvysViQusmpzOhPOnwXkfU4jaVwM_lQzYzLmNBaMDiwDJoxuZuzPILKLFDieMse9I/s1600/memindahkan_CSS_ke_blogger.jpg)
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
http://www.ads-id.com/forums/images/imported/2013/01/penutup_tag_body-1.jpg
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimc52vCxqDi0WwVC8QU9TUvoS5-afFAyt_qNYcTzcm1W80ITmVZP-XZOnhf6PYCOUVqb7IgoEZoGDH_k5C8GCRQ1P8BBYFON7R1l78uwSeMx46Q-l5yt_miAH0Wt6kZnrk50gy5nyY3cCy/s1600/penutup_tag_body.jpg)
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 ©<script type='text/javascript'>var creditsyear = new
Date();document.write(creditsyear.getFullYear());</script><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.
Tidak ada komentar:
Posting Komentar