Memasukkan Gambar atau Image sebagai background

Halo…sobat semua salam sejahtera. Mohon maaf karena tutorial cara membuat template nya sangat lama kelanjutannya. Ini karena saya agak sibuk di pekerjaan kusen aluminium saya. Jadi mohon dimaaafkan dan dimaklumi ya…
Kali ini tahapan dalam membuat tempate akan memasuki pada bagian Memasukkan Gambar atau Image sebagai background
Menjadikan gambar atau image sebagai background akan membuat tampilan blog semakin attraktif dan apik. Namun yang perlu diketahui , terlalu banyak image, maka konsekuensinya loading blog akan melambat. Oleh sebab itu di blog bahrul-ulum dot com ini saya berusaha meminimalkan pemakaian image untuk mempercepat loading blog. Hal ini penting mengingat adanya panduan dari googlewebmastercentral seputar peningkatan kecepatan loading blog agar kesempatan tampil di halaman pertama search engine semakin besar. Lihat disini artikel tentang : Pentingnya meningkatkan kecepatan blog dari google
Lanjut kemateri cara menjadikan Gambar atau Image sebagai background .
Menjadikan image atau gambar sebagai background , bisa dilakukan dengan beberapa cara, yaitu :
1. Full image
2. Image garis yang disebar dengan koordinat – Repeat (Saya belum tau istilahnya )

Background dengan Full Image

Untuk membuat background dari image kita akan mengedit kode pada bagian kode CSS sebagai berikut :
Sebelumnya kita mesti mengetahui dimana kita akan menjadikan image sebagai background. Contohnya kita akan meng- image kan bagian header.
Mari kita lihat kode css yang ada di bagian header. ( buka kembali templatepertamastep17.html) . Ini dia kode css header :

#header {
width:920px;
height:100px;
border:1px solid #000;
background:#fff;
padding:3px;
margin:2px;
}

Kita perhatikan pada bagian background:#fff; disana background nya masih berupa warna putih (#fff) dengan cara pewarnaaan memakai kode css .
Kita ubah menjadi begini :

background: #fff url("URL alamat image") no-repeat; 

Itu adalah kode yang dimengerti oleh browser, kalau manusia kira-kira membacanya seperti ini :
background nya warna putih(#fff) dengan image yang ada di alamat ini : url(“URL alamat image”)., dan tidak diulang (no-repeat) .
Kita bisa saja tidak menuliskan kode #fff nya ( Kode Warna HTML) seperti ini :

background: url("htpp:alamatimage.com") no-repeat;

Dan ini akan tetap menampilkan image yang kita maksud. Tapi disini tetap kita tuliskan dengan tujuan ketika si image tidak dapat ditampilkan oleh browser (misalnya karena tempat hosting image lagi down), maka warna putih yang akan muncul.
Sebab kalau misalnya judul blog kita berwarna hitam, dan background body nya juga hitam , maka judul blog kita tidak akan terlihat, Ini sering saya temui di beberapa website yang semua backgroundnya memakai image , yang ketika saya mematikan fungsi menampilkan image pada browser ,  saya tidak dapat melihat tulisan yang ada di web tersebut .
Untuk alamat image nya , pertama kita harus membuat image dulu, kemudian image yang kita buat harus diupload ke server hosting image gratis. Anda bisa membuat akun gratis di photobucket.com atau di tinypic.com untuk menyimpan gambar anda. Kalau saya biasa di phtobucket.
Untuk cara memasukkan image dan mendapatkan URL alamat image di photobucket silahkan lihat di postingan ini : Langkah mendaftar-mengupload-mendapatkan URL image di Photobucket
Untuk Membuat atau mengedit Image, bisa dengan menggunakan photoshop,
atau kalau tidak punya bisa menggunakan inrvanfiew (gratis) ,
download disini software edit image gratis Irfanview
atau gimp software ( Gratis ) yang katanya mirip dengan photoshop,
donwload disini donwload software edit image gratis Gimp
Anda bisa pula mendapatkan image dengan cara meng capture image dengan cara “print screen shoot” dari gambar image yang ada di web atau yang ada di computer anda. Silahkan lihat panduannya disini : mengambil-gambar-screenshot.
Kemudian agar image tersebut optimal ketika ditampilkan di browser, sebaiknya di reducer disini :  http://www.jpegreducer.com
Haa.. udah lengkap kannnn ? kalau belum jangan sungkan untuk menambahkannya di kolom komentar yah… (thanks utk yg mau nambahin)
Untuk contoh yang sudah saya berikan image silahkan lihat di
template-pertamaSTEP18.html
Catatan1 :
Untuk bahan belajar, anda tidak perlu mengupload gambar nya ke situs hosting image gratis, tapi cukup di tempatkan di hardisk komputer saja. Berikut langkahnya:
Bikin image atau capture, atau ambil gambar dari sumber manapun. Lalu tempatkan di dekstop atau di folder khusus. Kemudian gambar itu yang sudah di simpan anda buka dengan cara klik kanan pada gambar , lalu pilih “open with Firefox” , nanti di adress bar akan terlihat alamat gambar nya. Alamat gambar yang offline ini yang kita jadikan URL alamat image background template latihan tadi .

Alamat-URL-Image_Offline

Catatan 2 :
Buatlah gambar dengan ukuran yang sama atau lebih dari ukuran yang mau ditempatkan, contohnya pada header , kan ukurannya disetting : width:920px; height:100px; ( Lihat kode CSS di bag.header). Maka bikinlah image dengan ukuran segitu atau lebih . Dalam contoh template18 saya memakai image dengan ukuran : 927 px X 107px

Background dengan Image Garis diulang (Repeat)

Image garis disini maksud nya adalah image yang besaran tebalnya cuma 1px , dan diulang dengan perintah repeat sesuai koordinat X atau Y.
Koordinate X akan mengulang image agar menyebar kearah horisontal (kekanan).
Sedangkan Koordinate Y akan mengulang image agar menyebar kearah Vertikal (kebawah). (lihat gambar )

Koordinate_image_RepeatX_DanY

Untuk contoh template dengan image garis diulang (repeat) silahkan lihat di template-pertamaSTEP19.html.
Untuk latihan offline silahkan lihat contoh kodenya lalu ubah alamat imagenya. Buka ini:
http://i420.photobucket.com/albums/pp281/goldenphoto_2009/menuglossy117.jpg lalu save image as, dan simpan di dekstop, kemudian ikuti langkah seperti diatas: membuka image lewat firefox. , Untuk perubahan kodenya saya berikan di template-pertamaSTEP19.html

Menyimpan_Image_SavepageAs

Selanjutnya ini adalah beberapa variasi penggunaan image :
Menampilkan Judul Blog Dengan Image :
Lihat disini : template-pertamaSTEP20.html
Menampilkan Image disebelah tulisan:
Lihat disini : template-pertamaSTEP21.html
Oke sobat, sampai disini dulu sub bab Tutorial membuat template blog Tahap 3 : Memasukkan Gambar atau Image sebagai background ini saya sampaikan. Jika ada yang terlupa akan saya smpaikan di updatenya atau di komom komentar. Jangan sungkan untuk bertanya , dan terimakasih atas apresiasi anda yang telah membuat saya bersemangat untuk menuliskan tutorial ini.

Tutorial Cara Membuat Template Tahap Tiga

Setelah sekian lama tertunda, Alhamdulillah akhirnya panduan cara membuat template bagian tiga ini saya publish dengan susah payah . Sekali lagi saya katakan , bahwa panduan ini hanyalah pengalaman saya saja. Masih banyak tips cara membuat tempate di blog lain yang lebih komplit, lebih jelas, dan lebih segalanya dibanding artikel yang ada di blog sederhana ini. Jadi saya mohon maaf jika masih banyak kekurangan dan kelemahan dalam cara saya menuliskan nya ya.
Seperti janji saya Pada sesi Belajar membuat template tahap dua yaitu :

Pada sesi membuat template tahap tiga kita akan coba memasukkan konten atau isi dari setiap bagian, agar template kita terlihat mendekati nyata.

Yang artinya kita akan mencoba memodifikasi ,memasukkan , menambah, dan memperindah tampilan layout template blog kita dengan aneka konten yang biasanya menyertai di blog-blog yang sudah online.
Konten atau isi yang saya maksud , misalnya :
Memasukkan Gambar atau Image sebagai background Template
Mengatur ukuran huruf
Memodifikasi Judul atau Title Blog
Memodifikasi tab navigasi
Menambah dan Mengatur Meta title,tanggal,author dan label dll
Menambah dan Mengatur Judul Sidebar
Menambah dan Mengatur Judul Posting
Memasukkan Kode HTML Gadget atau Widget pada sidebar
Menambah Kolom Komentar
Dan lain-lain (akan saya tambahkan kemudian)
Baiklah, untuk hal pertama yang akan kita kerjakan adalah memasukkan semua tulisan ke masing-masing bagian. O ya, untuk memudahkan dan menyegarkan kembali, saya sengaja membuat layout template-pertamaSTEP9 yang gunanya memperjelas tata letak masing-masing bagian. Silahkan dilihat ya. Nanti disana(template-pertamaSTEP9) hanya sebagai acuan saja, supaya kita lebih memahami isi setiap bagian,seperti letak header,navigasi,sidebar,posting,footer,dan lain-lain.
Apa yang kita isi ? dan dimana ngisinya ?
Di template contoh ini, kita isikan saja dulu terserah apa saja, dan letak pengisiannya sebagai berikut : :

1. Mengisi Template bagian Top Bar

Untuk Top Bar pengisian nya ada di bagian tulisan
<div id="topbar">Isi topbar</div>

Ganti itu tulisan Isi topbar dengan tulisan terserah anda. Kalau saya , mengganti tulisan Isi topbar dengan :
Isi topbar | RSS | Hal-Penting | Toko-saya
Sehingga menjadi seperti ini :

<div id="topbar">
Isi topbar |
RSS |
Hal-Penting |
Toko-saya
</div>
 

Tulisan2 itu nantinya akan kita jadikan link sebuah halaman web yang isinya menurut kita penting untuk ditampilkan. Untuk tahap awal, kita berikan saja dulu tulisan apapun. Contoh hasilnya bisa dilihat di template-pertamaSTEP10

2. Mengisi Template bagian Header

Untuk Header, pengisiannya dibagian :
<div id="header">Isi header </div>
Ganti itu tulisan Isi header dengan tulisan terserah anda. Kalau saya , mengganti tulisan Isi header dengan :
Panduan Belajar Membuat Template Blog
Setelah kita ganti nantinya akan seperti ini :

 <div id="header"> Panduan Belajar Membuat Template Blog </div> 

Isi Header tersebut rencananya akan kita gunakan sebagai JUDUL blog. Contoh hasilnya bisa dilihat di template-pertamaSTEP10

3. Mengisi Template bagian Navigasi

Navigasi,pada dasarnya sama dengan isi Top Bar, yaitu berisi Link sebuah halaman web, namun biasanya Navigasi lebih mengarah kepada halaman web yang ada di dalam website kita sendiri. Sedangkan TOP bar, biasanya digunakan orang untuk membuat link ke halaman tertentu yang dianggap penting, misalnya halaman affiliate, halaman penjualan dan sebagainya. Namun ini tidak menjadi aturan yang baku. Terserah kita saja.
Untuk Navigasi , pengisiannya dibagian :
<div id="navigasi">Isi navigasi</div>
Ganti itu tulisan Isi navigasi dengan tulisan terserah anda. Kalau saya , mengganti tulisan Isi navigasi dengan :
Home | About-Me | Contact-Me | My-Friend | Agama | Sosial-Budaya
Setelah kita ganti nantinya akan seperti ini :

<div id="navigasi">
Home |
About-Me |
Contact-Me |
My-Friend |
Agama |
Sosial-Budaya |
</div>

Contoh hasilnya bisa dilihat di template-pertamaSTEP10

4. Mengisi Template bagian Kolom Posting

Kolom posting, adalah kolom yang berisi konten artikel , link, kode-kode iklan, atau image ,dan lain-lain yang gunanya untuk memberikan suatu informasi kepada pengunjung ( Udah tau pak )
Untuk Kolom Posting, pengisiannya dibagian :
<div id="isi-Posting">Isi Posting</div>

Ganti itu tulisan isi-Posting dengan tulisan terserah anda. Kalau saya , mengganti tulisan isi-Posting dengan : misalnya seperti ini :
Artikel postingan Artikel postingan Artikel postingan Artikel postingan Artikel
postingan Artikel postingan Artikel postingan Artikel postingan Artikel postingan
Artikel postingan Artikel postingan Artikel postingan Artikel postingan Artikel postingan
Setelah kita ganti nantinya akan seperti ini : ( Pastinya udah bisa dong yah ?)
Contoh hasilnya bisa dilihat di template-pertamaSTEP10
Sebelum kita lanjutkan ke bagian sidebar dan footer, kita akan menambahkan pada bagian isi-Posting dengan kolom Meta dan kolom komentar. Kolom meta adalah kolom yang biasanya digunakan untuk menempatkan title atau judul postingan ,tanggal postingan , author dan label postingan . Penempatan nya kadang disatukan dibagian atas kolom posting, dan ada juga yang menempatkan terpisah Judul artikel diatas dan Tanggal,author serta label dibagian bawah artikel. Contoh penempatan terpisah bisa anda lihat di blog sederhana saya disini : Blog panduan bisnis di internet
Catatan : beberapa orang ada yang lengkap menampilkan meta, dan ada juga yang tidak lengkap, bahkan ada pula yang sama sekali tidak menampilkan meta . Tentu mereka punya alasan tersendiri
Kita akan menampilkan versi lengkapnya, agar kita mengerti caranya. Nantinya sih terserah masing-masing . Dan juga akan kita pisahkan, yakni judul artikel dibagian atas, dan yang lainnya di bagian bawah artikel.
Untuk hal ini, kita mesti menambahkan beberapa kode identitas (div id ) sebagai berikut  :
Mari kita buka pada bagian kode menampilkan seluruh kolom posting: silahkan lihat kembali di template-pertamaSTEP4

<div id="kotak-posting">
<div id="isi-Posting">isi postingan</div>
</div>

Kita rubah dengan menambahkan
<div id=”Judul-Artikel”>Judul Artikel</div> (tambahkan setelah id kotak-posting )
dan juga menambahkan <div id=”rencana-meta”> rencana-meta Artikel</div> (tambahkan setelah id isi-Posting)
Kemudian kita juga akan menambahkan kolom komentar , yaitu dengan memasukkan identitas :
<div id=”komentar”>rencana kolom komentar</div>
dan juga kotak form komentar dengan identitas :
<div id=”form-komentar”>rencana form komentar</div> (tambahkan setelah id rencana-meta)
Setelah ditambahkan akan terlihat seperti ini :

<div id="kotak-posting">
<div id="Judul-Artikel">Judul Artikel</div>
<div id="isi-Posting">isi postingan</div>
<div id="rencana-meta"> rencana-meta Artikel</div>
<div id="komentar">rencana kolom komentar</div>
<div id="form-komentar">rencana form komentar</div>
</div>

Contoh hasil nya bisa dilihat di template-pertamaSTEP11
Karena kita telah menambahkan meta,dan kolom komentar, maka kita perlu memberikan style atau pengaturan atas ID tsb.Dan kita menambahkan kode2 sbb :

Ingat : Penambahan kode-kode css , adanya diantara kode <style type=”text/css”> tambah kode2 CSS  disini </style>

Tapi agar serasi sebaiknya masukkan kode css nya didekat kode css posting, biar nantinya tidak menyulitkan waktu mengedit.
Karena identitas dari yg akan kita atur berada dalam keluarga kotak-posting, maka saya kira cukuplah mengcopy code css milik isi-posting yg tertulis seperti ini ;

#isi-Posting {
width:485px;
border:1px solid #000;
background:#ff0;
padding:3px;
margin:2px;
}

tinggal kita ganti saja pada : #isi-Posting nya dengan masing2 identitas . Jadi kita copy dan paste sebanyak 4 kali dan hanya mengganti tulisan #isi-Posting dengan :
#Judul-Artikel
#rencana-meta
#komentar
#form-komentar
Contoh penulisan kode dan hasil nya bisa dilihat di template-pertamaSTEP12
Untuk sidebar dan footer, saya kira ndak perlu dikasih contohnya ya, Insya Allah mah sudah pada lancarrr.
Dan yang akan kita atur kemudian adalah Pengaturan ukuran huruf, dan penambahan image sebagai background template. Tapi akan saya tuliskan di lain artikel .
Semoga bermanfaat

Belajar Membuat Template Bagian Dua

Belajar membuat template akan kita lanjutkan setelah saya istirahat beberapa lamanya hehe… , maklum…masih ada yang diurus agar “Dapur” ngebullll . .
Baiklah sekarang mari kita lanjutkan dengan terlebih dulu baca doa agar diberi kemudahan dalam memahami ilmu . Untuk sekedar mengingat , di pelajaran membuat template bagian pertama , terakhir kita sudah sampai pada pembuatan template ke empat yang kita kasih nama : template-pertamaSTEP4.html
Di situ kita sudah mulai menambahkan pengaturan posisi dengan tag kode float:left
Sebagai pembanding , anda bisa membuka kode-kode template hasil praktek anda , dengan yang saya buat disini sebagai berikut :
template-pertamaSTEP1
template-pertamaSTEP2
template-pertamaSTEP3
template-pertamaSTEP4
template-pertamaSTEP5
Catatan : Saya sengaja membuat template-pertamaSTEP5 , setelah ada perubahan pada panambahan kode float:left yang ada di template-pertamaSTEP4 . Ini sengaja saya buat satu file baru untuk memudahkan saya dalam memahami pembuatan template.
Catatan 2 : Sebaiknya buka masing-masing file di tab jendela baru , agar kita bisa melihat perbedaan dari setiap tahapan pembuatan template.
Catatan 3 : Anda bisa menyimpan kode yang ada dihalaman yang anda buka , dengan cara : klik File pada tab mozila, lalu klik save page as,simpan di komputer anda. Nanti hasil download file tersebut buka dengan cara klik kanan pada file hasil download, lalu klik open with mozilla .
Oke ya kita Lanjuuuttttt…..
Di file template-pertamaSTEP5 , jika anda buka di browser , posisi sidebar sudah bergeser kekanan , sesuai dengan yang kita inginkan. (dari rencana layout blog )
Tapi Sidebar-kanan dan sidebar kiri masih numpuk atas bawah. Nah …, mari buka lagi notepad baru , dan copas semua kode yang ada di template-pertamaSTEP5 , dan coba tambahkan lagi kode float:left di bagian CSS pengaturan sidebar , tepatnya di #ruang-Sidebar-kanan dan #ruang-Sidebar-kiri
Sehingga setelah ditambahkan akan menjadi seperti ini :

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;
background:#bbc;
padding:3px;
float:left
 }

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;
background:#ccd;
padding:3px;
float:left
}

Save as lagi dengan nama template-pertamaSTEP6.html
Kemudian buka template-pertamaSTEP6 di browser , bagaimana hasilnya ???
Sudah pindah mas..tapi kok ya Sidebar-kanan adanya di kiri dan Sidebar kiri adanya di kanan?
Nahhh…. Mari kita bahas masalah ini …
Sebenarnya kita bisa saja merubah #ruang-Sidebar-kanan dengan memberikan kode float nya :   float:right
Tapi karena saya ingin supaya kita lebih memahami struktur template , maka sengaja saya kasih kode dengan float:left
Ketika kita mengatur semua posisi dengan float left , maka secara otomatis layout yang ada di bagian teratas akan lebih dulu menempati posisi di sebelah kiri . Mari kita melihat lagi struktur pada bagian ISI ( kalau saya bilang isi, berarti itu adalah yang ada di bagian setelah tag <body”> dengan </body”> ) khususnya sidebar sebagai berikut : :

<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>

Disitu kita lihat bahwa saya menempatkan sidebar kanan berada diatas sidebar kiri . Jadi jelas si CSS akan mengutamakan sidebar kanan agar menempati posisi kiri . Begitu juga sebaliknya Jikalau kita mengatur kedua nya dengan float:right , maka sidebar kanan pun akan langsung menempati posisi ke kanan. Untuk saya, saya lebih suka merubah posisi ISI sidebar kiri diatas sidebar kanan .
Anda bisa melihat contoh nya disini : template-pertamaSTEP6.html
Sampai disini mudah-mudah anda kita bisa memahami soal floating ini ya …? . Jika sudah paham ,nantinya anda bisa saja misalnya menempatkan Kotak posting disebelah kanan, dan Kotak sidebar disebelah kiri halaman….. di coba2 aja dahhhhh
Catatan : di template-pertamaSTEP6 ini saya sudah menambahkan pengaturan margin:2px; , agar masing-masing bagian sedikit agak terpisah.
Di templatetahap6 ini, kalau kita perhatikan , bagian footernya ,seperti menghilang dilindas oleh sidebar, untuk itu saya menambahkan kode : Overflow:hidden; pada css :
#tembok-utama ,
#kotak-posting dan dibagian
#ruang-Sidebar
Contoh realnya bisa anda lihat disini : template-pertamaSTEP7.html . Silahkan dibandingkan perbedaanya dengan template6.
Sedangkan di template-pertamaSTEP8.html , saya mengatur lebar Kotak posting dan kotak sidebar agar terlihat rapih, yaitu :
memperkecil lebar #kotakblog menjadi: 930px
memperbesar #ruang-Sidebar menjadi 395px
Memperlebar #ruang-Sidebar-top-besar menjadi 385px
Memperlebar #ruang-Sidebar-kanan menjadi 185px
Memperlebar #ruang-Sidebar-kiri menjadi 186px
Memperlebar #isi-Posting menjadi 485px
Di template tahap8 ini saya juga membuat posisi body template menjadi center dengan merubah pengaturan margin dibagian CSS    #kotakblog menjadi     margin:0 auto;
Contoh realnya bisa anda lihat disini : template-pertamaSTEP8.html
Nahhhh…kini template kita sudah mulai terbentuk dengan teratur dan sudah enak dilihat.
Catatan : Perubahan(Penambahan ) kode di bagian CSS letaknya ada didalam kurung besar {  } , contoh :
#ruang-Sidebar { disini tempat penambahan kode }
Setiap kode yang ada di dalam kurung CSS mempunyai ciri sbb :
Keterangan benda – titik dua – nilai - titik koma ,      contoh :
width:485px;
width –> keterangan yang menerangkan benda/objek yang akan diatur besaran atau nilainya
titik dua –> pengganti samadengan (=)
485px –> nilai dari si benda(objek)
titik koma –> akhir dari nilai objek
Baiklah teman saya kira saya cukupkan dulu uraian pengalaman saya dalam membuat template ,karena sudah terlalu panjang halaman nya , silahkan dibandingkan setiap  perubahan yang telah kita lakukan mulai dari template-pertamaSTEP1 sampai dengan template-pertamaSTEP8
Pada sesi membuat template tahap tiga kita akan coba memasukkan konten atau isi dari setiap bagian, agar template kita terlihat mendekati nyata. Dan pada sesi membuat template tahap empat , Inysa Allah kita baru akan memasukkan kode-kode blogspot yang merupakan kode-kode database tempat penyimpanan konten blog kita .
Semoga bermanfaat

Bagaimana Cara Membuat Template Blog

Kali ini saya akan menulis “Bagaimana Cara membikin Template Blog” ala Bahrul…!
Kenapa saya katakan ala Bahrul ? ya.. karena masih banyak cara lain dalam mebuat template atau layout blog. Mungkin cara saya ini akan terlihat kuno dan sulit bagi sebagian orang , tapi mungkin juga akan terlihat mudah bagi yang lainnya.
Dalam hal membuat template layout blog ini, saya sudah sempat menuliskan artikel tentang “cara mengedit halaman blog Yang mudah “ , Mengedit template blog adalah mengedit layout blog yang dibuat orang lain untuk disesuaikan dengan keinginan kita. Jadi bukan asli milik kita sendiri. Maka untuk itu sekaranglah saatnya untuk mencoba belajar membuat sendiri template untuk blog kita.
Template blog yang akan kita bikin , nantinya akan diarahkan untuk template blogspot . Namun tidak menutup kemungkinan jika sudah familiar dengan beberapa kode-kode HTML , kita akan mudah mengaplikasikannya ke CMS blog lain semisal wordpress.org
Tool atau software yang dipakai dalam membuat template blog ini , adalah yang ada di windows ,
yakni : notepad , MS Paint, Microsoft Office Picture Manager,dan MS Excel . Ini adalah tool standar yang biasanya default ada di sistem operasi Windows . Akan lebih baik jika ada MS Frontpage atau Dreamweaver. Tapi karena sebagian besar orang tidak semuanya memiliki dua tool terakhir , maka saya kira tool default tadi sudah cukup buat kita. O ya..software lain yang penting , adalah browser Mozilla Firefox. Kenapa saya memilih mozilla ? karena browser ini lah yang paling banyak dipakai oleh pengguna internet saat ini. Jika di komputer anda belum ada browser mozilla firefox , silahkan download dulu disini , dan lalu instal.
Rincian Penggunaan masing-masing Tool :
- Notepad : Kita gunakan sebagai editor teks dan HTML
- MS Paint : Digunakan untuk mengedit gambar
- Microsoft Office Picture Manager : Fungsinya sama dengan MS paint, dan keduanya saling mendukung
- MS Excel : Digunakan sebagai denah rencana tampilan Layout blog .
- browser Mozilla Firefox : Untuk melihat hasil pembuatan Template blog.
Baiklah sekarang kita mulai langkah-langkah dalam membuat template blogspot ya .

Langkah 1 : Mulai Membikin Template

Buka Notepad , lalu ketikkan kode-kode sebagai berikut  :

<html>
<head>

<title>Template Pertamaku</title>
</head>
<body>
Belajar Membuat  Template Pertamaku

</body>
</html>

Penjelasan Tag2 html yang ada
Di awal dan di akhir ada tag pembuka <html> dan penutup </html>: (ditambahi garis miring) ini adalah tanda halaman HTML , semua template , akan terlihat seperti ini dengan beberapa perubahan sedikit.
Dan di bagian antara <head> dan </head> : ini adalah tempat menaruh titel blog ( <title>Template Pertamaku</title> ) , juga tempat untuk kode-kode pengaturan tampilan blog (yang dikenal dengan Style.css ) dan dibagian ini juga tempat utk menaruh beberapa script javascript pengatur tampilan layout.
Kemudian diantara Tag <body> ISI </body> itulah nantinya akan kita tempatkan kontent atau isi dari blog kita. DI bagian ini nantinya kita akan mengisikan Header(kepala) Postingan(konten) , sidebar dan footer.
Oke ..dilanjuuutttt…..
Setelah selesai anda ketik di notepad , lalu klik File dan kemudian klik “Save as” .
Beri nama di kotak “file name” dengan misalnya :  template-pertamaku-step1.html
Jangan ada spasi dan harus diakhiri dengan .html (titik html).
Dikotak “Save as type” pilih “All files” Lalu klik tombol Save.
O ya..kalau bisa simpan di folder khusus agar mudah mencari nantinya. (kalau saya khusus membuat folder “Belajar Template” )
Jika sudah anda simpan, buka file tersebut dengan mozilla firefox (klik kanan file, lalu Open with Mozilla” ). Jika tidak salah ketik , maka anda akan melihat sebuah halaman berwarna biru dengan tulisan di atas kiri :
Belajar Membuat Template Pertamaku.
Dan di ujung atas kiri browser akan nampak : Template Pertamaku-Mozilla Firefox
Nah…itu adalah halaman HTML pertama yang anda buat yang merupakan cikal bakal template blogspot anda…… horeeee…!
Hhhhh…istirahat dulu sejenak… kendurkan urat syaraf…. lihat seputar halaman ini..siapa tau ada link yang berguna buat anda dan blog ini ..

---

Bagaimana ? sudah rilex ? Sudah siap melanjutkan belajar bikin templatenya ?? oke deh.. mari kita teruskan…!

---

Langkah 2 : Mengembangkan Template Dengan Style.css

Buka notepad baru , file yang pertama tadi biarkan saja, untuk anda simpan sebagai bahan perbandingan dan pembelajaran.
POST Bagian 2 : Publish : 10 April malam
Ketik atau copy lagi kode-kode diatas. Lalu tambahkan tag2 ini sebelum </head>.  (boleh sebelum atau sesudah <title>namablog</title>  , tapi sebaiknya persis sebelum </head> aja , biar mudah nantinya.
Ini kodenya :

<style type="text/css">
Isi kode style
</style>

Kemudian diantara tag :
<body> isikan kode dibawah disini </body>
Ini kode-kode nya :

<div id="kotakblog">
<div id="topbar">Isi topbar</div>
<div id="header">Isi header </div>
<div id="navigasi">Isi navigasi</div>
<div id="tembok-utama">

<div id="kotak-posting">
<div id="isi-Posting">isi postingan</div>
</div>
<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>
</div>
<div id="footer-kaki">Isi footer-kaki</div>
</div>

Kemudian klik save as lagi seperti diatas, dan beri nama :  template-pertamaSTEP2.html
Penjelasan atas kode-kode :
<div id="kotakblog">
<div adalah permulaan dalam mengawali kode , dan ID adalah identitas dari isi (dalam hal ini nama nya = kotakblog dan isinya adalah seluruh yang ada diantara tag ini sampai dengan dengan akhir <div>.
Agak sulit juga nih saya neranginnya, Hmm
Jadi begini contoh diatas :  <div id="kotakblog"> harus diakhiri dengan </div> , ditengah2 nya itu adalah ISI dari ID yang diberi nama kotakblog , id atau nama ini nanti fungsinya sebagai identitas dalam pengaturan layout nya (CSS nya).
Lebih Mudahnya lagi akan saya ilustrasikan dengan rumah.
Anggap saja Style.CSS = Insiyur atau arsitek rumah
1. Kemudian <div id="kotakblog"> = rumah itu sendiri , dan di kode ini lah nantinya semua akan kita tempatkan :
Atap(header) + Kuda2 (Navigasi) + Tembok (Badan artikel) + Jendela(Sidebar) dan Pondasi (footer) dalam hal ini pagar pembatasnya adalah </div>
2. Pada Rumah , kan ada atap . kodenya <div id="header">Isi atap/kepala yang juga dibatasi dengan </div> untuk memisahkan antara atap dengan kuda2 beton penopang atap,
3. Masuk kebawah ada kuda2 beton penopang atap = <div id="navigasi">Isi navigasi yang dibatasi juga dengan </div> untuk membedakan nya dengan tembok utama
4. Tembok utama : <div id="tembok-utama"> , isinya untuk jendela,pintu ,gambar lukisan dan lain-lain.
5. Kemudian kusen pintu = posting , kodenya : <div id="kotak-posting"> = tempat akan taruh pintu , diakhiri dengan </div>
Nah Pintu nya sendiri = <div id="isi-Posting">isi postingan </div>
6. Jendela = sidebar , kodenya :
<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">Isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">Isi ruang-Sidebar-kiri</div>
</div>
7. Pondasi rumah = Footer , ini kodenya : <div id="footer-kaki">Isi footer-kaki</div>
Gimana masih bingung ?
Kalau iya..coba lagi deh lihat dengan gambar sebagai berikut : (lihat gambar)

Layout_Bikin_Template

Mudah-mudahan sudah jelas ya ?
Ya … kalau gitu tahap dua sudah kita selesaikan , dan jika kode-kode yang anda tulis benar, maka di broser anda akan muncul beberapa tulisan seperti yang ada pada kode diatas.

Langkah 3 : Mengatur Bentuk atau Layout tampilan Template (Style.css)

A.Membuat Layout Template dengan denah rencana

Nah disini kita bisa menggunakan MS Excel sebagai denah rencana awal pepmbuatan Template , bagaimana nantinya tampilan blog kita, baik itu warna, border dan gambar2 yang diperlukan. Ibaratnya ini previewnya . Contoh nya bisa anda lihat gambar di Denah Layout Pembuatan Template

B. Membuat layout dengan Kode

Buka lagi notepad baru,
Copy kode-kode yang ada di file kedua tadi (file template-pertamaSTEP2.html)
Tambahkan kode-kode ini dibawah jni pada bagian tag :
<style type="text/css">masukkan kode disini </style>
Dan ini kode2 nya :

/*------------------------------------------------
Theme Name: Template pertamaku
Theme URI: http://blogaku.com
Description: Ini Template pertama aku
created by <a href="http://blogaku.com/">blogaku</a> .
Author: Aku
Author URI: http://blogaku.com/
Date: 08 April 2010
----------------------------------------------- */

/*----Pengaturan layout blog mulai dari sini----*/

body {
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;

}

#kotakblog {
width:1000px;
border:1px solid #000;
background:#0ff;
}
#topbar {
width:920px;
height:30px;
border:1px solid #000;
background:#aaa;
}
#header {
width:920px;
height:100px;
border:1px solid #000;
background:#0f0;
}

#navigasi {
width:920px;
height:30px;
border:1px solid #000;background:#ccc;
}

#tembok-utama {
width:920px;
border:1px solid #000;background:#ddd;
}

#kotak-posting {
width:500px;
border:1px solid #000;background:#eee;
}

#isi-Posting {
width:470px;
border:1px solid #000;background:#ff0;
}

#ruang-Sidebar {
width:350px;
border:1px solid #000;background:#abc;
}

#ruang-Sidebar-top-besar {
width:330px;
border:1px solid #000;background:#ff0fff;
}

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;background:#bbc;
}

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;background:#ccd;
}

#footer-kaki {
width:920px;
height:50px;
border:1px solid #000;background:#00ffff;
}
/*---akhir CSS sampai disini yaaaa---*/

Bagaimana ? Sudah ditambahkan ? ?
Kalau sudah , ayo dah di  Save as lagi , dan beri nama :
template-pertamaSTEP3.html
Lihat hasilnya dengan membuka di browser .
Jreengggg…
Sudah mulai berbentuk kan ya ??
Tapi masih nempel dan belum kelihatan mana sidebar dan kotak postingannya …
Baiklah sekarang kita atur lebih dalam lagi.

C. Mengatur Posisi layout Template

Kita sekarang akan menambahkan dengan posisi (float) , margin dan Padding.
Kalau posisi pasti sudah tau ya, nah lalu margin dan padding itu apa sih ?
margin dan padding adalah pengatur jarak . Keduanya hampir sama , dan lebih jelasnya mari kita narasikan lagi dengan rumah.
Pagar Rumah -- Rumah -- meja
Kita fokuskan pada pengaturan jarak Rumah. Antara rumah dengan pagar (jarak keluar) diatur dengan margin , dan antara rumah dengan meja (jarak kedalam) diatur dengan padding.
Untuk lebih jelas soal padding dan margin bisa lihat gambar : perbedaan padding dan margin
Sebaiknya bikin lagi aja di notepad baru ya… copy code yang ada di template-pertamaSTEP3 , lalu save as dengan template-pertamaSTEP4.html
Mari kita tambahkan padding:3px;
Di bagian css nya , misal nya :

body {
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
}

tambahkan padding:3px; menjadi sebagai berikut :

body {
padding:3px;
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
}

Nah…lihat hasilnya dengan membuka file template-pertamaSTEP4.html dibrowser . Sudah berubah kan ?
Seterusnya tambahkan ya di di kode-kode css yang lain. Nambahinnya diantara tanda { dan }
Sudah ditambahkan ? jika sudah.. coba di refresh browser nya dan lihat hasilnya.
Anda bisa memperkecil angka 3 menjadi 2 misalnya, atau memperbesar nya. Terserah saja. Nantinya kita bisa mengatur si padding agar bisa mengatur jarak atas-kanan-bawah-kiri.
Pada contoh kode padding diatas : padding:3px;
Dia mengatur sekaligus jarak atas-kanan-bawah-kiri , masing-masing sebesar 3px
Kita bisa menggunakan kode sebagai berikut :
padding:10px 5px ;
ini artinya jarak atas-dan -bawah = 10px . sedangkan jarak kanan-dan-kiri = 5px
padding:10px 3px 7px;
ini artinya jarak atas = 10px . jarak kanan-dan-kiri = 3px , jarak bawah = 3px
padding:10px 6px 4px 2px;
ini artinya jarak atas = 10px -kanan = 6px -bawah = 4px -kiri= 2px
Aturan ini juga berlaku untuk pengaturan margin
Oke lanjut….
Setelah di refresh, kita melihat bagian sidebar masih berada dibawah kotak posting.
Nah mari kita pergi ke tag CSS pengaturan #Sidebar dan pengaturan #kotak-posting . Tambahin kode ini :   float:left;
Sehingga hasilnya menjadi seperti ini :

#ruang-Sidebar {
float:left;
width:350px;
border:1px solid #000;
background:#abc;
padding:3px;
}

Yang di #kotak-posting juga ditambahin float:left; ya...
... ( Brrrr....istirahat dulu lagi ahh.... lanjut besok ya..)

Cara upload file ke website dengan filezilla ftp

Setelah anda mendapatkan username dan password cpanel anda, mungkin ada yang masih bingung dengan bagaimana cara untuk meng-upload file ke hosting anda.. berikut saya berikan sedikit tutorial mulai dari download file ftp sampai ke upload file.


Buka website Filezilla
Setelah itu download file yang sesuai dengan operasi sistem anda,



Setelah Download selesai silahkan melakukan installasi..










Setelah instalasi selesai, jalakan program filezilla



Isi Host dengan nama domain anda “domainmu.com”
Isi Username dengan username cpanel anda
Isi Password dengan password cpanel anda
Isi Port dengan “21″
Lalu Klik Quickconnect


Contohnya seperti ini :


Setelah klik Quickconnect maka akan muncul



Sisi kiri adalah local komputer anda.. dan sisi kanan adalah hosting anda



Hosting anda saat ini berada di dalam folder “public_html” maka pada saat akan upload file, anda harus masuk ke folder “public_html” dengan cara double klik..




Setelah masuk ke public_html anda cari file di local komputer anda yang akan anda upload lalu klik kanan pilih menu upload pada folder di local komputer anda..



Lalu tunggu sampai proses upload selesai..