live life like a journey...: Nyok Belajar Merancang Tampilan Blog Sendiri

awal gue ngeblog, gue buat design blog dari blog template yang banyak tersedia di google, tinggal cari model yang pas copy-paste HTML nya jadi deh.

Lama banget gue vakum. Nah, setelah gue mulai kembali mengelola blog ini, gue rasa template dari google ternyata aneh2, lebih kepada rame kali ya... akhirnya gue coba-coba deh sendiri ngotak-ngatik satu persatu direct link dan tab yang ada di dashboard, dan akhirnya setelah gue otak-atik ternyata emang lebih enak design sendiri dengan yang memang sudah disediakan oleh blogger. Dan taraaaa…. This is it… gue pikir lebih simpel dan lebih sesuatu tampilan blog ramfazz yang sekarang. ya paling nggak menurut gue… Sensasinya itu man, selama otak-atik seru juga ternyata...

learning by doing itu kuncinya, so bagi yang ingin coba-coba juga nih gue kasih gambaran apa aja yang bisa diotak-atik perihal template dan tampilan blog secara simpel dan bener-bener untuk pemula atau newbie tentunya… berhubung gue juga masih newbie yang juga belajar…

NB: Gambar-gambar contoh tampilan yang gue urai itu yang gue aplikasikan sehingga menjadi tampilan blog ramfazz sekarang ini:

Tentunya log-in terlebih dahulu di blogger.

Masuk ke tab Design di navbar bagian kanan ketika di halaman home page blog, atau di link sejajar dengan tab new post pada halaman dashboard.

link design pada navbar di home page

link design di dashboard

Pilih link "Template Designer". Nah, di sinilah Blogger Template Designer tempat lo bisa mulai untuk otak-atik design template.

template designer
Langkah pertama pilih 'template' yang diinginkan. Ada 7 (tujuh) jenis template yang tersedia yang dapat dipilih: Dynamic Views; Simple; Picture Window; Awesome Inc.; Watermark; Ethereal; Travel. Coba satu persatu dan livat tampilan preview dibawah editor.

Templates:
pilih jenis template yang diinginkan
Selanjutnya pengaturan 'Background' bisa dilakukan untuk memilih gambar atau pola atau warna sebagai latarbelakang tampilan blog.

Background:
pilih gambar atau pattern dan warna background tampilan blog
Untuk mengatur lebar keseluruhan tampilan blog dan juga lebar tampilan sidebar pada 'adjust widths'.

Adjust Widths:
atur lebar tampilan kesulurahan blog, dan lebar pada masing-masing side bar
Kemudian pilih tata letak (layout) yang diinginkan pada 'layout'. Pada body layout, pilih berapa kolom yang diinginkan pada badan blog, dan juga footer layout untuk memilih berapa kolom pada footer yang diinginkan.

Layout:
pilih jenis tampilan layout
Pada bagian 'Advanced', untuk mengatur ditail dari tampilan blog, dari jenis dan warna huruf, serta latarbelakang tampilannya.

1. Page;

1. Page
Mengatur tampilan huruf dan warnanya pada badan blog,
atau menjadi default font untuk postingan badan blog.
2. Links;

2. Links
Mengatur tampilan warna huruf
yang berfungsi sebagai link secara umum keseluruhan blog,
khususnya untuk setiap tulisan berperintah link pada badan blog.
3. Blog Title;

3. Blog Title
Mengatur tampilan huruf untuk Judul Blog,
pada contoh di atas "Live Life Like A Journey"
4. Blog Description;

4. Blog Description
Mengatur tampilan huruf untuk deskripsi judul di bawah Judul Blog
5. Tabs Text;

5. Tabs Text
Mengatur tampilan huruf pada tabs seperti tombol 'HOME'
6. Tabs Background;

6. Tabs Background
Mengatur tampilan warna pada tabs
7. Date Header;

7. Date Header
Mengatur tampilan huruf pada format tanggal postingan,
seperti pada border merah di atas.
8. Post Title;

8. Post Title
Mengatur tampilan huruf pada judul setiap postingan blog
9. Post Background;

9. Post Background
Mengatur tampilan warna latarbelakang 'post box'
10. Gadget Title;

10. Gadget Title
Mengatur tampilan huruf pada judul gadget
11. Gadget Text;

11. Gadget Text
Mengatur tampilan huruf pada isi gadget box
12. Gadget Links;

12. Gadget Links
Mengatur tampilan dengan perintah link pada gadget box
13. Gadget Background;

13. Gadget Background
Mengatur tampilan warna latarbelakang gadget box
14. Sidebar Background;

14. Sidebar Background
Mengatur tampilan warna latar belakang sidebar,
pada blog ramfazz sidebar kanan-kiri.
15. Images;

15. Images
Mengatur tampilan foto pada postingan,
seperti contoh di atas background color putih tepat antara bingkai merah dalam dan luar,
border color yang terletak di bingkai merah terluar.
16. Feed;

16. Feed
Mengatur tampilan huruf pada text feed section pada contoh di atas
17. Feed Links;

17. Feed Links
Mengatur tampilan warna huruf dengan perintah link,
seperti pada tampilan contoh no 16. Feed
18. Pager;

18. Pager
Mengatur tampilan huruf pada pager seperti pada gambar di atas
19. Footer;

19. Footer
Mengatur tampilan huruf dan latarbelakang footer box,
seperti pada gambar di atas
20. Mobile Button Color dan 21. Add CSS, sorry untuk dua section ini gue belum bisa menjelaskan, gue rasa gue belum perlu, padahal gue sendiri juga masih belum ngerti sih (hehe), mungkin next time gue update yo man kalo udah dapet ilmu barunya.

Semoga apa yang gue urai, bisa sedikit membantu mengarahkan temen-temen yang baru mau mulai mengelola dan mendandani blognya. Dan bagi temen-temen yang mungkin tahu lebih dalam dan ada kesalahan dalam uraian gue, silahkan memberikan komen dan jangan sungkan untuk kritik, dengan catatan yang membangun ye... Sampai jumpa di nyok nge-blog (tips) selanjutnya...