Cara Membuat Template Blogspot Dengan Photoshop

Sabtu, Desember 28, 2013

Kali ini saya yang masih tahap belajar untuk membuat template blogspot akan sedikit menyinggung bagaimana membuat template blogspot dengan photoshop. Sepertinya kalau di fikirkan cara ini pasti sangat memusingkan apalagi kalau memang jarang memegang mouse dan membuka photoshop.

Sebaiknya sebelum menginjak ke hal yang lebih detail anda kumpulkan saja semua tutorial template blogspot photoshop menjadi satu bagian. Hal ini di harapkan jika ada kebingungan bisa langsung mencari solusinya. Membuat template blogspot dengan photoshop bukanlah perkara yang mudah jika di bandingkan dengan kita mengolah template yang sudah ada.

Disini kita di tekankan sudah harus sangat mengerti mengenai HTML, CSS, Javascript dan yang paling penting adalah tag tag blogger. Sebelumnya pernah saya ulas juga tag umum template blogger. Silahkan di pelajari dulu kalau memang anda belum paham. Tapi kalau anda memaksakan diri untuk melewati pemahaman tag umum template blogspot itu maka tanggung sendiri nanti kebingungan yang akan anda dapatkan.

Tag umum template blogger bukanlah satu satunya hal yang harus anda pelajari, masih banyak tag lain seperti conditional, section, widget dan lain lain yang memang sangat penting dan harus di mengerti ketika ingin membuat template blogspot sendiri bukan mengedit karya orang lain. Bisa di katakan membuat template blogspot dari nol (0). Sebelumnya juga saya sudah pernah menyinggung mengenai template dasar blogger. Kalau anda sering mampir ke blog saya pasti sudah pernah membacanya.

Di sini saya tidak ingin memberikan cara membuat template blogspot dengan photoshop secara detail dari desain yang ada di blogspot dan yang pasti bukan sebuah design blogspot template yang rumit. Kita disini belajar, kalau rumit langsung pasti kabur. Untuk contoh saja saya memilih sebuah template Page One, pasti tahu dong siapa yang buat. Alamat demonya disini pageonetemplate.blogspot.com . Kenapa saya memilih template ini alasannya karena templatenya GRATIS dan simple. Jadi lebih enak saja dlam mengopreknya.

Langsung saja kita praktek untuk membuat template blogspot dengan photoshop. Kita bekerja dulu di bagian homepage agar lebih mudah.

  1. Siapkan photoshop masing masing dan agar lebih mudah anda juga mengoprek template tersebut. Namun kalau pingin template lain juga silahkan.
  2. Setelah terbuka capture utuh tampilan template tersebut.
  3. Untuk di photoshop harus di tampilkan rulers dalam pixel gar lebih mudah. (CTRL +R ) trus klik kanan bagian rulers pilih pixels. ( Poin 1 )
  4. Perhatikan image yang kita dapatkan. Yang sama atau perulangan di hapus saja. ( Poin 2 )
  5. Setelah jadi, perhatikan kembali, pada rulers. tentukan poin x= 0 , y = 0 nya dengan menarik bagian pojok rulers. ( Poin 3 ) Hal ini di gunakan untuk area kerja kita.
  6. Setelah benar menentukan x=0, y=0 berlanjut menentukan section yang akan kita kerjakan. Saya perhatikan disini nanti ada 4 section, saya menentukan section nanti terdiri dari
    1. header ( Poin 4 )
    2. content ( Poin 5 )
    3. sidebar ( Poin 6 )
    4. footer ( Poin 7 )

Kita bisa bekerja langsung ke codingnya. Tapi untuk mempermudahnya kita buat dulu containernya bisa seluruh atau sebagian saja. Dalam hal ini saya berfikir untuk membuat seperti struktur manusia. Jadi nanti content akan di gabung dengan sidebar. Strukturnya menjadi

  1. <div id='body-wrapper'>
  2. <header>
  3. <!-- section header -- >
  4. </heade>
  5. <div id='content-wrapper'>
  6. <article>
  7. <!-- section content -- >
  8. </article>
  9. <aside>
  10. <!-- section sidebar-- >
  11. </aside>
  12. <div class='clear'/>
  13. </div>
  14. <footer>
  15. <!-- section footer -- >
  16. </footer>
  17. <div class='clear'/>
  18. </div>

Coba kita lihat di code yang akan kita buat. Struktur ini dalam body html karena memang kita bekerjanya disini dahalu. Terlihat ada beberapa tag yang mungkin sebelumnya belum di singgung yaitu tag div dengan class clear. Disini nanti tag tersebut buat di gunakan untuk menyeimbangkan apabila terdapat float yang tidak terkendli. Daripada pusing kita pasang saja tag itu.

Sudah bisa membayangkan bagaimana kita akan bermain nanti. Yang pasti siapkan mental untuk belajar, karena ini baru sebatas pendahuluan saja :D untuk melanjutkan artikel terdahulu saya dalam membuat template blogger

Komentar Cara Membuat Template Blogspot Dengan Photoshop

Jangan menaruh live link dikomentar dan sampai saat ini baru 8 komentar untuk update Cara Membuat Template Blogspot Dengan Photoshop dengan id 1634405799262650790.

Rizal Aditiyo Supendi

oalah.. Bisa to, buat template dgn photoshop..
Kayaknya rumit.. >.<

28/12/13 23:12
Bowo Ekowidodo Sragen

wkwkwk.. aku yo mung ngawur kok.. ndak mudeng... pokoke nulis copas :v

28/12/13 23:53
Rizal Aditiyo Supendi
29/12/13 21:48
John

Kok sulit sekali gan ya bikin template pakai photoshop?

24/5/14 22:18
Metland Rumah Idaman Investasi Masa Depan
25/12/14 19:27
putraadam

keren mas..sayangnya saya hanya bisa pake aja xixixi,,

11/2/15 05:07
Tutorial Blog

Wah bagus nih buat ane yg nubi ini, makasih om mimin infonya bermanfaat banget

15/2/15 06:45
Pandu Abd

g lengkap nih :/ hmmm

23/12/15 20:30