Cara Membuat Dan Mengubah Halaman Blog Menjadi Seperti Tampilan Website Profesional

Suatu ketika seorang teman pernah bertanya kepada saya lebih kurang begini, “sebenarnya tampilan blog itu bisa diubah menjadi seperti tampilan situs web apa tidak sih?”. Mendapat pertanyaan seperti itu, maka secara spontan saya pun menjawabnya “bisa”. Kemudian dia pun kembali bertanya, “kalau misalnya tampilan blog dapat diubah menjadi seperti situs web (website), lantas caranya bagaimana?”. Mendapat pertanyaan yang kedua, akhirnya saya pun memberikan uraian penjelasan yang cukup panjang dan lebar terkait dengan hal tersebut. Hal ini disebabkan karena untuk mengubah tampilan blog menjadi seperti website, terdapat beberapa hal yang perlu diperhatikan dan dipahami terlebih dulu.

Sebelum kita lanjutkan lebih jauh, ada baiknya jika kita bahas lebih dulu mengenai pengertian dari situs web dan blog. Wikipedia Bahasa Indonesia menyebutkan bahwa, “situs web (web site) atau sering disingkat dengan istilah situs adalah sejumlah halaman web yang memiliki topik saling terkait, dan terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Sedangkan blog merupakan singkatan dari web log, yaitu bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Dimana Tulisan-tulisan ini seringkali dimuat dalam urutan terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Dimana situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.”

Nah, dari pengertian di atas maka dapat disimpulkan bahwa antara web site dan blog sebenarnya merupakan dua hal berbeda yang secara prinsip dapat dikatakan serupa dan atau bahkan dapat pula dikatakan sama. Hal ini disebabkan karena diantara keduanya sama-sama menyajikan konten yang memiliki topik saling terkait, terkadang disertai dengan berkas gambar, video, dan atau jenis berkas yang lainnya.

Kesamaan lain antara situs web dan blog, dapat pula dilihat dari jenis halaman yang dimiliki. Bila dicermati, maka kita akan menemukan 2 (dua) buah jenis halaman yang sama antara situs web dan blog, yaitu halaman dinamis serta halaman statis. Dimana halaman statis merupakan halaman mandiri dengan konten yang tidak dimaksudkan untuk diperbarui secara berkala, sehingga untuk melakukan pembaruan pada konten biasanya dilakukan secara manual (sebagai contoh misalnya adalah halaman daftar isi yang terdapat di blog ini). Sedangkan halaman dinamis merupakan halaman yang secara spesifik didisain agar konten di dalamnya dapat diperbarui secara berkala dengan mudah (sebagai contoh misalnya adalah halaman beranda). Kemudian perbedaan yang paling menonjol diantara keduanya adalah bisa jadi blog lebih kaya akan konten bila dibandingkan dengan situs web, karena pada umumnya blog selalu melakukan pembaruan secara berkala terhadap konten yang disajikan, yaitu dengan cara menerbitkan postingan artikel baru.

Oke, sekarang kita kembali pada topik pembahasan inti, yaitu tentang cara membuat dan mengubah tampilan blog menjadi seperti halaman situs web profesional. Seperti yang telah saya sampaikan di atas bahwasanya apabila kita ingin mengerjakan hal tersebut, maka terdapat beberapa hal yang perlu diperhatikan dan dipahami terlebih dulu. Hal pertama yang perlu diperhatikan dan dipahami adalah penguasaan terhadap template (dalam hal ini minimal adalah penguasaan pada penggunaan HTML dan CSS), karena ketika kita ingin melakukan perubahan pada desain tampilan halaman blog, maka kita tidak bisa lepas dari kustomisasi HTML dan CSS yang terdapat dalam template.

Selanjutnya hal kedua yang perlu diperhatikan adalah pemahaman terhadap beberapa fungsi yang disediakan oleh Blogger, dalam hal ini misalnya adalah fungsi ‘IF’ yang biasa kita temukan terdapat dalam template. Hal ini disebabkan karena untuk melakukan penataan desain terhadap halaman tertentu, maka kita juga tidak dapat lepas dari penggunaan fungsi ‘IF’ tersebut. Sebagai contoh yang paling sederhana misalnya adalah ketika kita ingin melakukan penataan terhadap desain tampilan halaman versi seluler, maka kita tidak terlepas dari penggunaan fungsi <b:if cond='data:blog.isMobile'> guna membedakan prosedur yang dipakai untuk menata desain tampilan halaman versi web dan versi seluler (misalnya adalah seperti yang tampak pada contoh rangkaian kode di bawah ini).

<b:if cond='data:blog.isMobile'>

  <!-- PROSEDUR UNTUK HALAMAN VERSI SELULER -->

<b:else/>

  <!-- PROSEDUR UNTUK HALAMAN VERSI DESKTOP -->

</b:if>

Nah, berdasarkan contoh sederhana di atas maka akhirnya kita dapat dengan mudah menentukan dan membuat prosedur yang digunakan untuk desain tampilan halaman versi seluler dan prosedur yang digunakan untuk desain tampilan halaman versi web (desktop). Akan tetapi perlu diingat bahwasanya fungsi ‘IF’ yang disediakan oleh Blogger, bukan hanya seperti yang terdapat pada contoh di atas. Sehingga karena banyaknya fungsi ‘IF’ yang ada, maka kedepan akan kita bahas masing-masing fungsi yang ada secara terperinci.

Hal ketiga yang diperlukan untuk membuat dan mengubah desain tampilan blog menjadi seperti layaknya sebuah website adalah penguasaan serta pemahaman terhadap logika dan algoritma pemrograman (secukupnya). Kemudian hal keempat yang diperlukan adalah kreatifitas (secukupnya), niat, dan kemauan (sepenuhnya), dimana hal inilah faktor terpenting yang mesti terpenuhi ketika kita ingin mengerjakan hal tersebut.

Jadi, berdasarkan uraian di atas akhirnya dapat disimpulkan bahwa untuk membuat desain tampilan blog menjadi seperti web site, salah satu cara yang dapat ditempuh adalah dengan memanfaatkan berbagai fungsi dalam template yang telah disediakan oleh Blogger. Sementara itu uraian spesifik tentang cara penggunaan dan penerapan berbagai fungsi tersebut, akan kita bahas pada artikel berikutnya.

Semoga berguna dan bermanfaat.

Salam.


UPDATE pada Kamis, 01 Agustus 2013:
Tautan di bawah ini merupakan daftar artikel lanjutan yang berisikan tentang uraian serta ulasan cara membuat dan mengubah halaman blog menjadi seperti tampilan website profesional.

1. Cara Gampang Membuat Menu Tab Horizontal Atas Untuk Tampilan Browser Pada Layar Perangkat Handphone Atau Smartphone
2. Inilah Kode - Script Yang Dipakai Untuk Membuat Tautan Tombol Atau Link Lihat Versi Mobile Dan Desktop Pada Weblog