Rabu, 28 Oktober 2015

Struktur Dasar Template

Bagi seorang blogger hal ini penting untuk di pelajari, dengan kita mengenal Struktur Dasar Template, kita bisa mengolah dan mengembangkan design layout yang ada sesuai dengan keinginan kita sendiri. Pada dasarnya Struktur template memiliki struktur yang sama, yang membedakannya tentulah sang designer pembuatnya.


Pola Struktur Dasar Template

Keterangan :
  • Body : blok (Gbr. warna hitam) yang paling lebar, tempat seluruh isi dari blog/website
  • Outer-wrapper : bagian (Gbr. warna putih) ini yang melapisi bagian template yang pada umumnya menjadi wadah untuk header, sidebar, main-wrapper/post dan footer
  • Header : dari namanya saja sudah bisa kita tebak apa itu header, biasanya header (Gbr. warna pink) berisi judul-deskripsi blog, logo, dan navigasi menu.
  • Sidebar : bagian (Gbr. warna Kuning) ini digunakan sebagai tempat untuk widget blog dan aksesoris pelengkap blog seperti Entri Popular, Link List, Label dan sebagainya
  • Main : main-wrapper (Gbr. warna hijau) adalah kolom lebar bagian dalam yang  menampung  Judul Post, Isi Post, Komentar dan keterangan lain mengenai artikel blog
  • Footer : kolom (Gbr. warna biru) paling bawah sebuah template.  Mirip dengan fungsi header namun letaknya berada di bagian paling bawah. 


    Setelah kita memahami struktur dasar tersebut, kita juga harus mengerti (setidaknya 10%) bagian-bagian yang tak terlihat di layar monitor, bagian itu adalah HTML, karena bagian ini wajib dimiliki sebuah template blog/website (Blogspot menggunakan platform HTML/XML), jika tidak memiliki bagian ini maka template tidak dapat berjalan sebagaimana mestinya.


    <html> <--- tag pembuka untuk html

           <head> <--- tag pembuka untuk head
       
                 
    ------------------------------------Disini letak dari CSS atau juga Javascript

           </head> <--- tag penutup untuk head

           <body> <--- tag pembuka untuk body
       
                -------------------------------------Disini tempat yang akan ditampilkan yaitu HTML dan juga bisa Javascript

          </body> <--- tag penutup untuk body

    </html> <--- tag penutup untuk html




    Sedikit penjelasan (yang saya tahu) tentang struktur HTML :
    1. HTML :  <html> </html>
    • Templat Blog/Website selalu diawali dengan tag pembuka  <html>  dan harus diakhiri dengan tag penutup </html>    
    • Diantara tag-tag ini struktur lainnya diletakkan guna terciptanya sebuah tampilan blog
    2. Head :  <head></head>
    • Setelah kode  <head>  biasanya diletakkan tag pengenal seperti Judul, deskripsi blog
    • Di antara kode ini harus tersemat kode CSS yang bertugas menampilkan model atau karakter template itu sendiri
    • Sebelum  tag penutup  </head>  biasanya ditambkan kode javascript sekedar untuk menambahkan fitur pengisi header
    3. Body :  <body></body>
    • Tag body adalah yang paling utama dalam sebuah template, karena disinilah kita meletakkan dan menampilkan seluruh konten blog
    • Dalam tag ini terbagi dalam 4 struktur penting seperti Header, Sidebar, konten dan footer yang sudah saya jelaskan di gambar struktur
    "Kadang kita membutuhkan coding untuk mengoptimalkan SEO, maka belajarlah coding sekarang juga, agar hasil anda maksimal pada mesin pencari"
    - Matt Cutts, Developer & Engineer Google


    Untuk memodifikasi template memang perlu ketelitian dan kesabaran yang tinggi agar hasil yang di dapatkan juga sesuai dengan keinginan/selera kita dimana sebuah template adalah tampilan utama sebuah blog/website, kalau tampilannya kurang menarik pasti jarang yang mau mampir khan ???!. Semoga artikel ini dapat sedikit membantu anda yang sedang belajar memodifikasi template blog/website.

    Tidak ada komentar:

    Posting Komentar