Daftar Isi

Baca lebih lanjut »

Memasang Template Blogger.com

Sebelum kita memulai untuk membahas bagaimana memasang atau mengganti templet (template: Ingg) di blogger.com, akan menjadi lebih baik jika kita tahu dulu apa itu templet. Templet adalah desain tampilan suatu web atau blog, jadi ketika teman-teman sekarang sedang melihat tampilan blog ini, nah itulah yang namanya template, ya singkatnya adalah desain tampilan.

Desain tampilan atau templet juga termasuk suatu hal yang penting bagi blog kita, karena templet yang kita gunakan tersebut mencerminkan atau mewakili isi dari blog kita. Contohnya saja blognya teman-teman membahas tentang Flora dan Fauna, maka akan terasa lebih hidup apabila desain tampilan/ templet yang digunakan oleh teman-teman berlatarkan tumbuh-tumbuhan dan hewan, nah...seperti itulah templet.

Langkah-langkah untuk memulai memasang/ mengganti templet di blogger.com adalah sebagai berikut:

1. LogIn/ masuk ke akun Blogger milik anda.

2. Apabila sudah sampai di halaman Dasbor, Klik Tata Letak. 


3. Dan sekarang anda telah masuk di halaman Tata Letak, silahkan untuk meng-klik Edit HTML untuk memulai memasang/ mengganti templet.

4. Selanjutnya, klik Download Template Lengkap. hal ini dilakukan untuk menghindari kegagalan dalam memasang templet baru. Jadi kalau hal tersebut terjadi, maka tidak akan menjadi masalah karena anda telah menyimpan Back-Up/ cadangannya.

5. Selanjutnya Klik Kotak        Expand Template Widget, yang bertujuan agar proses peng-upload-an menjadi lebih lancar.

6. Kemudian Klik tombol   Browse, untuk mengambil templet blog baru anda di Komputer anda yang kemudian diikuti dengan mengklik tombol Unggah untuk memulai proses peng-upload-an.

"Tunggu Beberapa saat sampai proses pengunggahan telah selesai..."

7. Apabila proses pengunggahan telah selesai, silahkan untuk meng-klik tombol Simpan Template. 

 8. Selesai.

Nb:

Untuk mencari templet, teman-teman bisa mengunjungi website-website yang menyediakan templet gratis untuk blogger.com berikut ini:

1. www.blogspottemplate.com
Menyediakan lebih dari 80 template gratis buat blogger, dijamin gak nyesel. Dan di sana nantinya anda bisa men-download template tersebut secara cuma2 alias gratis.

2. www.blogtemplate4u.com
Menyediakan template blogger gratis untuk anda, tersedia banyak pilihan seperti template jenis apa yang anda inginkan. Selain itu anda juga bisa memilih jumlah kolom (template berkolom) dan di web ini tersedia 2-4 kolom (template berbasis kolom), dan masih banyak lagi pilihan2 dan kategori2 lainnya. Bikinan org Indo lho...itu lho yang familiar. Kang Rohman, tahu kan?

3. www.btemplates.com
Situs ini menyediakan template dengan kategori komplit. Banyak macamnya juga, yang berkolom, juga ada yang berbasis Magazine, Elegant Style dan juga sekarang sudah banyak template dengan versi Web 2.0. Pokoknya gak nyesal dah.

4. www.themelib.com
Kalau yang ini menyediakan template yang unik lho. Ya...seperti template i-phone, dengan kata lain nanti tampilannya kayak i-phone. Selain itu di themelib juga menyediakan beberapa tutorial mengenai Blog.

5. www.eblog-templates.com
Menyediakan jumlah template yang tidak kalah dengan yang lainnya juga. Selain itu di eblog-templates.com anda bisa mengikuti program afiliasi penjualan template yang ditawarkan oleh pihak eblog-templates.com, ini kesempatan lho...buat nambah2 sangu hehehe

6. www.pyzam.com
Template yang disediakan memiliki warna yang segar/ fresh, pokoknya warnanya bagus2 dah. Yaaa...dengan kata lain ahli dalam memadukan warna.

7. www.blogcatalog.com
Kalau yang ini anda pasti akan tertarik dengan gaya templatenya. Juga sudah tersedia template yang secara otomatis membuat tulisan anda menjadi Read More... lho, tertarikkan? nih contohnya: klik.

8. www.finalsense.com
Situs ini gak kalah pentingnya juga lho, memiliki bentuk2 template yang unik. Mungkin anda ingin memiliki blog yang bentuknya laptop, ya' templatenya ada di situs ini, buruan.
Untuk selebihnya teman-teman bisa mencari templet gratisan lainnya. Untuk mempermudah pencarian, teman-teman bisa menggunakan jasa Om Google. Cukup sekian...


Semoga Bermanfaat

Baca lebih lanjut »

Belajar Membuat Template di Blogger

Kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.


Tahap Desain
 
Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:

Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan  biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :
background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nah modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

Baca lebih lanjut »