Raka Arman Nugroho

Handal membuat dan modifikasi template blog dengan kreasi kita sendiri merupakan cita-cita para blogger, khususnya bagi yang senang memodifikasi template blog nya sendiri.
Namun kadang kita selalu terbentur dengan masalah coding dalam melakukannya. Apakah dengan begini anda akan menyerah untuk mempercantik template blog anda? saya harap tidak, karena kemajuan teknologi sekarang memungkinkan bagi siapa pun untuk melakukan hal-hal instant yang dulunya rumit sekarang menjadi mudah.

Nah, hari ini saya mengajak anda untuk membuat dan modifikasi template anda sendiri dengan mudah. Saya yakin cara ini siapa pun bisa, malah bagi blogger baru (newbie) sekalipun, karena hanya tinggal klak klik saja. hehee..

Pertama silakan masuk ke www.dotemplate.com

Lalu scroll mouse anda kebawah, dan temukan tombol Browse all templates... lalu diklik

Pilih salah satu dari template yang anda sukai

Dan untuk memodifikasi, silahkan anda klik Customize and download






Ketika sudah masuk, klik aja bagian yang ingin anda edit





Setelah selesai editing, lalu klik Download dan pilih platform yang anda ingin pakai.




Muncul jendela pop-up lalu klik Download your template

Selesai deh, mudah bukan

Akhirnya anda mempunyai template hasil modifikasi anda sendiri :) Jika ada yang ingin sharing tentang cara modifikasi template buatan sendiri, silahkan komentar dibawah ini.

Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, 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.

Nha 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.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......

Situs Web Template Photoshop Efek Foto Monitor LCD

Hi Friends! Hari ini saya bercerita tentang Cara Membuat Situs Template Photoshop Efek Foto Monitor LCD
[1]-Pertama-tama Buka Dokumen Baru Bea Ukuran, Tinggi & Lebar 500xx500 pxl, Resolusi 72 & Mode RGB Color

[2]-Sekarang Buka New Layer membuat seleksi berikut dengan bantuan 'Polygonal Lasso Tool'

[3]-Sekarang isi seleksi dengan '3 a3637 'warna & kemudian membuat seleksi berikut dengan bantuan' Rectangular Marquee Tool '

[4]-Sekarang pilih 'Dodge Tool' & Menyoroti beberapa bagian dengan seleksi invers Ctrl + Shift + I & setelah 'Burn Tool' yang memilih & menciptakan naungan beberapa seperti seperti yang ditunjukkan di bawah ini

[5]-Sekarang Buka New Layer & kemudian membuat seleksi berikut dengan bantuan 'Pen Tool'

[6]-Sekarang isi seleksi dengan warna c171b '1 '& kemudian pergi ke Blending Options pilih Inner Shadow & gunakan pengaturan berikut
Photoshop Teknik-Cara menggunakan fitur Inner Shadow

[7]-Sekarang ciptakan bayangan berikut dengan bantuan 'Burn & Dodge Tool "& setelah itu membuat seleksi berikut dengan bantuan' Pen Tool '

[8]-Sekarang Buka New Layer & kemudian isi seleksi dengan '4 e4a4b 'warna & Sorot beberapa bagian dengan bantuan' Dodge Tool '

[9]-Sekarang Buka New Layer & kemudian membuat seleksi berikut dengan bantuan 'Pen Tool'

[10]-Sekarang mengisi seleksi dengan '282527 'warna & kemudian membuat seleksi berikut dengan bantuan' Pen Tool '& setelah itu menciptakan bayangan berikut dengan bantuan' Burn Tool '

[11]-Sekarang Buka New Layer & kemudian membuat seleksi berikut dengan bantuan 'Pen Tool'

[12]-Sekarang mengisi seleksi dengan warna yang sama & membuat seleksi berikut dengan bantuan 'Pen Tool' & setelah itu menciptakan bayangan berikut dengan bantuan 'Burn Tool & Dodge' dengan
invers seleksi Ctrl + Shift + I

[13]-Sekarang Buka New Layer & kemudian membuat seleksi berikut dengan bantuan 'Pen Tool'

[14]-Sekarang mengisi seleksi dengan warna yang sama & membuat bayangan berikut dengan bantuan 'Burn & Dodge Tool "& setelah itu membuat seleksi berikut dengan bantuan' Pen Tool '

[15]-Sekarang Terbuka New Layer [lapisan ini di bawah ini harus semua lapisan berikutnya selain 3 lapis] & kemudian isi seleksi dengan warna '363334 '& kemudian membuat bayangan berikut dengan bantuan
'Burn & Dodge Tool' dengan seleksi invers shift Ctrl + + Saya

[16]-Lihat di bawah untuk Output.I Photoshop Akhir berharap ini adalah tutorial yang baik & Anda dapat menggunakan Photoshop dalam Proyek Teknik Desain Grafis Anda