Mengenal apa itu template Blog ?

Mengelolablog.com - Salah satu unsur pengelolaan blog yang baik adalah baiknya penataan layout (design/tampilan) dan template blog itu sendiri.

Seperti sering kita rasakan ketika kita membaca sebuah artikel, menonton video, melihat hasil foto, atau konten-konten blog lainnya pada sebuah halaman blog.

Desain yang baik dan ringkas akan mempengaruhi keinginan kita sebagai pembaca untuk menjelajah lebih jauh terhadap konten-konten lainnya yang disajikan di halaman tersebut. Kenyamanan dan kemudahan pembaca dalam mengakses konten pada halaman blog juga dapat meningkatkan jumlah pageview/tampilan halaman sebuah blog.

Jumlah pageviews yang meningkat dengan tingkat pentalan pengunjung yang rendah, dapat menjadi indikator bagi si pengelola blog bahwa pengunjung merasa betah dan nyaman untuk lama-lama berada dan mengakses konten di halaman blog tersebut.

Jumlah pageviews dan kunjungan yang tinggi menjadi salah satu harapan dan tujuan yang diinginkan oleh hampir seluruh pengelola blog atau website.


Saya menemukan sebuah fakta menarik terkait desain template dengan peningkatan jumlah halaman unik yang dilihat oleh pengunjung berdasarkan sebuah survey yang dilakukan oleh sebuah media.

Peningkatan jumlah halaman unik sebesar 90% terjadi pada desain template homepage kontemporer dibandingkan dengan desain template homepage klasik

Fakta ini didasari oleh hasil survey yang dilakukan engagingnewsproject.org dalam laporannya terkait masalah peningkatan jumlah halaman antara desain template homepage klasik dengan desain template homepage kontemporer. Berikut adalah data statistik dari hasil tersebut.

Data hasil perbandingan pageviews pada desain template

Didalam hasil survey tersebut, menyatakan bahwa desain template homepage yang unik dan berbasis gambar, memiliki peluang untuk meningkatkan halaman unik yang dilihat pengunjung sekitar 90% .

Fakta tersebut diatas menunjukan bahwa sebuah desain template sangat mempengaruhi aktivitas yang dilakukan oleh pengunjung. Gambar dibawah adalah bentuk layout pada template yang diuji coba , yaitu layout template homepage kontemporer dan layout template homepage klasik

Template uji coba

Dalam laporannya, kita dapat melihat intisari dari hasil survey tersebut bahwa ada keterkaitan antara perubahan desain yang dilakukan pada sebuah template web/blog dengan peningkatan jumlah halaman yang dilihat.

Lantas apa itu template blog? dan bagaimana kita bisa memodifikasi template sebuah blog? Pada artikel kali ini saya akan menginformasikan hal-hal dasar sebagai langkah untuk mengenal struktur desain pada template blog di blogspot.

Apa itu Template blog ?

Template blog menurut pemahaman yang saya ketahui adalah tampilan halaman web/blog dengan susunan dan penataan yang terdiri dari berbagai macam elemen (gambar, stylesheet, script, file statis dan dinamis, dll) yang disusun sedemikian rupa sehingga menjadi sebuah desain dan corak pada halaman template blog tersebut.

Template blog bisa dianalogikan sebagai sebuah themes (tema) dalam aplikasi handphone. Ketika kita merubah themes di handphone maka tampilan layar,teks background dan warna dalam layar handphone akan mengikuti themes yang kita pilih.

Template blog biasanya disusun dengan menggunakan bahasa Hyper Text Markup Language, atau sering dikenal dengan sebutan html.

Sehingga untuk melakukan modifikasi pada template blog seperti merubah warna latar/background, memberikan efek bayangan pada teks, dan hal-hal lainnya yang akan dilakukan saat merubah tampilan/desain pada template blog tersebut, diperlukan pengetahuan yang cukup tentang penggunaan bahasa html.

Seperti apa bentuk Template blog ? berikut adalah beberapa contoh desain standard template blog yang disediakan oleh blogspot.

Contoh template default yang disediakan blogspot

Sedangkan pada gambar dibawah berikut adalah gambar yang saya ambil dari halaman blog ini sebelum saya lakukan penggantian warna ke warna abu-abu (seperti yang Anda lihat sekarang).

Template ini menggunakan template simple pada blogspot yang sudah dilakukan modifikasi pada struktur dan warna melalui modifikasi template html pada menu template didalam dashboard blogspot.

Contoh desain template modifikasi

Apa saja unsur pembentuk template blog ?

#1. Hyper Text Markup Language (HTML)

Sebelum jauh melangkah untuk merubah desain dan tampilan pada sebuah template blog, kita akan mengenal terlebih dahulu sedikit bahasa html sebagai struktur pembentuk template disebuah halaman web/blog.

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
- Wikipedia -

HTML menjadi bahasa yang mengatur bagaimana tampilan serta isi dari sebuah web/blog. Didalam HTML dikenal istilah tag yang berfungsi untuk menyediakan informasi yang berkaitan erat dengan sifat, struktur konten serta referensi lainnya yang berupa gambar,video,link dan lain sebagainya.

Versi terbaru dari bahasa HTML yang beredar saat ini adalah HTML5, pengembangan dari HTML-HTML sebelumnya yang memungkinkan kinerja dan tampilan halaman web/blog saat ini menjadi lebih dinamis dan variatif. Informasi lengkap dapat kamu lihat di wikipedia tentang HTML.

Sebuah halaman dari template blog pada contoh-contoh diatas merupakan hasil output yang bisa dilihat melalui aplikasi web browser seperti Google chrome, internet Explorer ataupun Mozilla Firefox.

Sedangkan untuk melihat kode input (kode sumber/source code) pembentuk tampilan dan desain template blog tersebut, kamu dapat menekan ctrl + U pada keyboard.

Disitu akan terlihat susunan dan kode-kode html sebagai sumber yang jika dibaca oleh Aplikasi Web browser akan menjadi bentuk sebuah halaman web/blog.

Halaman sebuah web / blog di bentuk oleh susunan kode HTML yang teratur dan terstruktur. Jika kode HTML yang sudah terstruktur tersebut dibuka oleh aplikasi web browser (Internet explorer, Mozila firefox, Google chrome), maka kode html tersebut akan di ubah menjadi tampilan sebuah halaman web / blog yang lebih mudah untuk kita persepsikan kedalam sebuah bentuk, apakah itu teks, gambar, warna, dan lain-lain.

Untuk memahami bagaimana sebuah kode sumber html template blog menjadi sebuah halaman blog, gambar di bawah ini adalah gambaran singkat bagaimana bahasa html diubah menjadi sebuah halaman blog.

proses html menjadi halaman web melalui browser

Sebagai informasi, bahasa html selalu ditandai dengan tag pembuka dan tag penutup, contohnya jika kamu menggunakan tag <body> sebagai pembuka, maka kamu harus menutupnya dengan tag </body>, jika tidak maka bahasa html tersebut tidak dapat berfungsi (error).

Umumnya, struktur html standard yang diperlukan untuk sebuah dokumen html adalah sebagai berikut


Dari struktur dan susunan bahasa html diatas, maka kita akan melihat 2 bentuk elemen yang tercipta didalam dokumen html pada sebuah template halaman web/blog (dideklarasikan sebagai bahasa html melalui kode yang dimulai dari <html> dan ditutup oleh tag </html>), yaitu :

1.1. Head, diawali dengan tag <head> diakhiri dengan tag penutup </head>
Head disini akan menjadi identitas kepala sebuah dokumen html pada template halaman web/blog. Data-data yang ada pada <head> biasanya tidak akan ditampilkan pada layar pengguna sebagaimana ketika kita melihat sebuah halaman blog/web pada sebuah browser.

Informasi dan identitas yang ada pada head di sebuah template halaman web/blog ini bisa berupa metadata, biasanya dimuat dengan format teks <meta --- :'-----'/>, kemudian ada pula Stylesheet (sering disebut sebagai CSS; Cascading Style Sheet), lalu Title, script dan lain-lain.

Berikut adalah contoh sebuah <head> pada template blogspot standard yang saya minimize di bagian skin dan template skin.

Contoh susunan head pada struktur html

1.2. Body, diawali dengan tag <body> diakhiri dengan tag penutup </body>
Bagian Body merupakan bagian yang akan menterjemahkan bagaimana template halaman web itu akan tampil (dimuat) dan bekerja pada sebuah browser.

Didalam <body> sendiri, ia berisi elemen-elemen pembentuk tampilan halaman blog/web diantaranya yaitu Header, main-body (isi artikel/konten), sidebar, foooter, dan lain-lain.

Selain itu didalam body juga terdapat pola kerja ketika template sebuah halaman blog/web dimuat pada browser, dimana pola-pola tersebut disusun menjadi satu kesatuan kerja dengan elemen-elemen yang ada (header,main-body,sidebar,dll).

Berikut adalah contoh sebuah <body> pada template blogspot.

Contoh susunan body pada struktur html

#2. Cascading Style Sheets (CSS)

Unsur kedua dalam struktur kode pembentuk template blog adalah Cascading Style Sheets, biasa disebut dengan CSS. CSS ini berfungsi untuk mendefinisikan bagaimana elemen HTML dalam sebuah template akan ditampilkan.

Sebagai contoh, dengan bantuan CSS, gaya (style) teks pada setiap header tag dapat berbeda meskipun ada pada satu halaman web/blog, baik warna, ukuran, maupun size dari teks tersebut.

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah bahasa pemograman. (wikipedia).

Secara umum bentuk penulisan kode CSS pada sebuah template adalah sebagai berikut


Pada kode CSS diatas, kita akan menemukan dua elemen dasar pembentuk CSS, yaitu

2.1. Selector
Selector ini berada diluar tanda {...}, dan pada kode css diatas .header h1 ini memiliki fungsi sebagai selector dan penanda, dimana kode ini akan memilih Header (judul blog) sebagai h1.

2.2. Deklarasi (declaration)
Deklarasi ini adalah nilai yang ada didalam tanda {...}, deklarasi terbagi menjadi dua bagian lagi yaitu

1. 2.2.1. Properti; Contoh properti pada kode css diatas adalah font: , color: , dan font-size:.
2. 2.2.2. Value; Contoh value pada kode css diatas adalah normal 34px Arial; kemudian #FFA500; dan terakhir adalah 150%

Jika kita artikan kode css diatas, maka kita dapat menyimpulkan bahwa:

• Teks yang ada pada Header h1 (judul blog) memiliki warna orange (#FFA500), gaya teks normal (tidak tebal atau bergaris bawah),
• ukuran teks sebesar 34 pixel dengan pembesaran ukuran 150% ,
• memiliki format desain teks mode arial.
• Sedangkan warna Backround teks pada Header h1 tersebut diatas adalah warna putih (#FFFFFF).

#3. Javascript

Unsur pembentuk template blog yang ketiga adalah Javascript. JavaScript adalah bahasa pemrograman berbasis java yang merupakan interface pembantu dalam pemrograman web. (wikipedia)

Penggunaan Javascript dalam HTML dapat membuat halaman sebuah template blog terlihat lebih dinamis dan interaktif.

Seperti contohnya penggunaan tombol back to top pada blog ini (letaknya disudut kanan bawah, berbentuk lingkaran berwarna merah dengan tanda panah menghadap keatas).

Ketika halaman blog posisinya masih ada di halaman atas, tombol back to top tidak akan terlihat, namun ketika kita menggulir halaman kebawah, maka secara otomatis tombol back to top akan muncul.


Bentuk umum dari sebuah kode javacsript adalah sebagai berikut

Bagaimana bentuk dasar layout pada template blog ?

Pada dasarnya, struktur layout sebuah template blog dibentuk dari susunan kode HTML yang terstruktur.

Ketiga unsur diatas, HTML,CSS dan Javascript adalah struktur kode pembentuk sebuah halaman dan template blog yang saling berkaitan satu dengan lainnya sehingga terbentuk sebuah template blog yang khas dan unik dengan corak masing masing template.

Ketika susunan html tersebut dijalankan pada aplikasi web browser maka akan tampil layout sebuah template blog sebagaimana yang sering kita lihat pada halaman blog.

Bahasa HTML tersebut disusun sesuai dengan kebutuhan elemen yang akan ditampilkan, misalnya untuk menampilkan layout header, maka disusunlah html dengan tag header sehingga akan tercipta layout header.

Untuk memodifikasi tampilan warna pada template seperti warna background, font, dan lain-lain, maka digunakan CSS.

Peran CSS disini adalah untuk memberikan format warna, jenis font, tinggi font, dll sehingga layout HTML pada header yang ditampilkan di browser akan menjadi serwarna dengan format warna dan teks yang sesuai dengan deklarasi dalam CSS.

Untuk memudahkan kita dalam memahami layout sebuah template blog, perhatikan gambar dibawah berikut ini.

Contoh bentuk dasar layout template default blogger

Layout diatas hanyalah sebagai contoh, masih banyak bentuk-bentuk layout sebuah tampilan blog yang bisa kita gunakan sebagai layout template. Berikut adalah penjelasan keterangan yang ada didalam gambar

1. Body (warna hitam)
Body, sebagai elemen dasar dan penopang sebuah halaman template blog. Berisi elemen-elemen lainnya yang akan dimuat dan ditampilkan dalam browser.

Body ini akan memenuhi dan menutupi seluruh tampilan layar pada browser.

Body, dapat dimodifikasi untuk menempatkan background/latar dengan menggunakan gambar atau warna.

2. Outer-wrapper (warna putih)
Outer-wrapper berdiri diatas body, sebagai tempat untuk meletakkan elemen-elemen blog lainnya seperti header,sidebar,footer,main-body,dan lain-lain.

Salah satu modifikasi template dibagian Outer-wrapper yang dapat dilakukan adalah mengatur lebar konten halaman pandang serta merubah warna background outer-wrapper.

3. Header (warna orange)
Header, merupakan elemen kepala yang ditampilkan dari sebuah halaman template blog. Header berisi identitas web/blog yang dapat dibaca oleh pengguna. (Head dalam struktur HTML dengan Header pada layout halaman adalah hal yang berbeda meskipun sama-sama memiliki identitas)

Didalam header, biasanya berisi Logo, Judul Blog, dan deskripsi singkat tentang isi konten yang ada dalam blog tersebut. Identitas ini akan muncul pada halaman blog dan dapat dilihat oleh pengunjung.

4. Main (warna hijau)
Main, merupakan elemen body sebuah halaman template blog. Didalam Main terdapat Date Header, blok Post body, blok Comment, dan bagian lain yang dapat dibuat dari opsi Add Page Element pada menu layout di dashboard blogspot.

5.Post Body (warna kuning)
Post Body, merupakan elemen pada halaman template blog yang berisikan konten artikel, gambar, video, dan lain-lain. Disinilah tempat kita menampilkan tulisan artikel dan postingan yang kita sajikan untuk pembaca.

6. Sidebar (warna biru muda)
Sidebar, merupakan elemen pada halaman template blog yang dapat diisi dengan berbagai macam gadget untuk mendukung navigasi pengunjung, seperti popular post, banner iklan, profile pembuat blog, dan lain-lain.

Sidebar ini terletak disisi kanan/kiri dari blok Main, dan bisa ditambah menjadi 2,3,4 sesuai dengan kebutuhan desain blog yang diinginkan.

7. Footer (warna biru tua)
Footer, merupakan elemen yang memiliki fungsi tidak jauh berbeda dengan sidebar, bisa di isi dengan berbagai macam gadget.

Namun yang menjadi pembeda antar Footer dengan sidebar adalah bagian footer ini letaknya selalu berada di bagian bawah halaman template blog serta terdapat elemen attribution berupa copyright, perancang dan desain template yang digunakan.

Dimana tempat mengedit template pada Blogspot ?

Setelah kita mengenal apa unsur pembentuk template blog dan bagaimana layout dasar sebuah template blog, selanjutnya kita akan mempelajari dimana tempat untuk mengedit template di Blogspot .

Untuk mengedit dan memodifikasi template blog di blogspot, kamu harus masuk dan login di blogspot terlebih dahulu. Setelah kamu berada di dashboard Blogspot, pilihlah blog yang akan kamu modifikasi template blognya.

Setelah masuk di beranda blog yang akan di edit, pada menu sisi kiri, terdapat 2 menu yang berfungsi untuk memodifikasi tampilan blog kamu, yaitu Layout dan Template (lihat gambar dibawah)

menu pilihan untuk memodifikasi desain template blog di blogspot

#1. Menu Layout

Didalam menu layout, kamu bisa melakukan beberapa modifikasi bentuk layout pada template, terutama susunan dan posisi widget. Berikut adalah beberapa hal yang bisa dilakukan untuk memodifikasi tampilan blog didalam menu layout, yaitu:

1.1. Merubah posisi gadget blog
Untuk merubah posisi gadget yang sesuai dengan keinginan kamu, maka kamu cukup klik kiri pada mouse dan tahan disalah satu gadget yang akan kamu pindah tempatnya. Kemudian geser gadget tersebut sesuai dengan posisi yang kamu inginkan.

1.2. Menambah Gadget
Untuk menambah gadget baru semisal popular post, profile, dll. Kamu cukup mengklik tulisan berwarna biru "Add a Gadget". Setelah kamu klik maka akan muncul pop up berisikan daftar gadget yang bisa kamu pilih sesuai dengan kebutuhan kamu.

1.3. Konfigurasi Gadget
Untuk mengkonfigurasi sebuah gadget sesuai dengan kebutuhan, klik tulisan edit yang ada di setiap sudut kanan sebuah gadget. Setelah kamu klik tulisan tersebut, maka akan muncul pop up untuk mensetting gadget tersebut.

#2. Menu Template

Menu Template merupakan tempat untuk mengubah, memback-up, mengupload template, sampai memodifikasi template melalui format HTML. Di menu inilah biasanya para blog desainer beraksi.

Didalam menu template ini tersedia dua pilihan dalam melakukan modifikasi tampilan template blog, yaitu :

2.1. Customize
Pilihan customize adalah pilihan untuk memodifikasi desain template yang disediakan oleh Blogspot. Menu ini diperuntukkan bagi pemula yang ingin memodifikasi template blognya tanpa perlu pusing dengan struktur bahasa HTML.

2.2. Edit HTML
Pilihan edit HTML adalah pilihan untuk memodifikasi desain template melalui struktur bahasa HTML. Menu ini lebih disukai oleh template desainer karena fleksibilitasnya yang tinggi terhadap hasil yang bisa didapatkan.

Namun, menu edit template ini membutuhkan pemahaman yang baik terhadap bahasa HTML,CSS, maupun Javascript.

Jika terjadi kesalahan saat melakukan edit template melalui menu ini, dapat mengakibatkan blog kamu menjadi error. Untuk pembahasan cara memodifikasi template, akan saya lanjutkan di artikel yang lainnya.

Kesimpulan

Desain template yang menarik, ringkas dan rapi, sangat memungkinkan terjadinya peningkatan jumlah halaman yang dilihat oleh pengunjung, yang artinya harapan kita untuk memiliki blog dengan traffik tinggi bisa terpenuhi.

Mengenal dan memahami satu persatu fungsi, susunan dan bentuk Template, merupakan langkah awal buat kita untuk dapat mendesain dan memodifikasi tampilan template.

Namun, untuk bisa memodifikasi template dan menghasilkan template blog yang sesuai dengan harapan kita, diperlukan juga latihan dan penguasaan yang cukup terhadap unsur-unsur pembentuk template pada artikel yang sudah kita bahas diatas.

Asalkan kita rajin berlatih dan memahami bagaimana template bisa disusun, maka template ideal yang cocok dari segi fungsi dan bentuk tentu bisa kita ciptakan.

Demikianlah artikel Mengenal apa itu template blog ? kali ini saya informasikan. semoga bisa bermanfaat.