Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

56
Tgl. 16 Mei 2013

Cara Membuat Dan Mengubah Halaman Blog Menjadi Seperti Tampilan Website Profesional

Halaman Beranda Blog Eltelu
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



Katagori: ,
Terdapat 56 komentar pada artikel ini ▶
16/05/13, 12.18 O

selamat siang Sob,,,kebetulan saya ingin mengubah tampilan Blog menjadi seperti Web site...saya tunggu yaa Sob Update Tutorialnya...jangan lama lama yaa...

16/05/13, 15.18 O

@Hayardin PutraOke Sobat. Sedapatnya akan saya usahakan untuk segera membuat dan menerbitkan artikel untuk pembahasan berikutnya.

16/05/13, 21.59 O

.menarik bgt kyaknya om, dtunggu :-D

17/05/13, 04.01 O

Terima kasih, sob. Saya juga pengin blog saya jadi lebih profesional. Biar keren. Haha
Ditunggu tutorialnya yah!
www.sinyalpintar.blogspot.com

Anonim
18/05/13, 21.54 O

Saya tunggu mas artikel berikutnya semoga posting terus dan ditunggu template baru..

klo boleh qw mnta dong tutorial buat daftar isi kya gtu..

http://cak-mat.blogspot.com

21/05/13, 16.27 O

@syahrulOke Sobat. :)

21/05/13, 16.30 O

@Ikhwanul MusliminOke, Terimakasih balik Sobat. Sedapatnya akan saya buat dan terbitkan artikel berikutnya.

21/05/13, 16.54 O

@Mas AchmadOke Sobat. Dan terkait dengan tutorial pembuatan daftar isi seperti yang saya gunakan untuk blog ini, sepertinya saya tidak dapat menerbitkannya karena sebenarnya sudah banyak tutorial tentang pembuatan daftar isi seperti itu. :)

21/05/13, 22.40 O

mlm mas trmksih banyak mas infonya sangat bermanfaat sekali mas. salam kenal'y mas dari blog tetangga sebelah. klau berkenan mampir memberi spot di blog kami juga gak pa2 mas hehehe.

Anonim
22/05/13, 00.48 O

ThAnK . Nice iNfO.

Tunggu yah


23/05/13, 10.51 O

@Brebes VS LamonganSama-sama dan salam kenal balik Sobat. Terimakasih pula atas berkenannya mengeposkan komentar dalam artikel ini. :)

23/05/13, 10.52 O

@imam azahOke, terimakasih balik Sobat.

29/05/13, 07.35 O

mang.. kapan template ini dishare ya?? ane terpesona

30/05/13, 08.18 O

@Yoga Purnama Putra PerdanaSobat, jujur saja sementara ini saya belum ada rencana untuk membagikan template yang digunakan blog ini secara publik. Tentu saja hal tersebut disebabkan oleh berbagai faktor, yang salah satu diantaranya adalah masih adanya banyak celah kelemahan (bug) dalam template yang saya gunakan ini.

Jadi ada kemugkinan suatu saat nanti saya akan membagikan template ini secara publik, dan ada kemungkinan pula saya malah tidak membagikannya sama sekali.

08/06/13, 19.00 O

Ane juga baru tahu, ternyata tampilan mobile blogspot bisa di edit (di oprek-oprek layaknya situs mobile dari situs besar)

09/06/13, 07.39 O

Informasi yang mantap, menambah motivasi saya untuk tetap berkreasi sebagai blogger.

Kunjungi blog ane :

http://starblog67.blogspot.com

Salam kenal persahabatan.

09/06/13, 09.51 O

@ANDIK WINSobat, sebenarnya sih sudah lama kok Blogger memberikan fitur (fasilitas) ini. Hanya saja memang baru akhir-akhir ini saja banyak yang telah mencoba untuk memanfaatkan dan menggunakan fitur (fasilitas) tersebut.

09/06/13, 09.57 O

@CHORD DIGITALOke, terimakasih dan salam kenal persahabatan balik untuk Sobat. :)

11/06/13, 13.22 O

@AYAHE MELAemm githu y gan, salam knl aja lau githu from: facewoman.blogspot.com/?m=1

17/06/13, 14.44 O

Saran yg baik gan. Tapi sayang saya belum tau caranya. Dan bagaimana caranya mengecek template kita sudah suport di windows mobile tablet, ipad atau iphone? Coz ane belum pernah sama sekali ceck lewat getget di atas? Harap maklum pegang aja belum pernah hehehe. Lalu bagaimana solusinya gan?

17/06/13, 15.25 O

@ANDIK WINCaranya gampang banget kok. Kalau misalnya kita tidak memiliki gadget seperti itu, maka untuk melakukan pengecekan tentang bagaimana tampilan blog kita apabila dibuka dengan memakai smartphone, tablet pc, atau sejenisnya, maka salah satunya dapat dilakukan dengan memanfaatkan layanan pengecekan secara online.

Sebagai contoh misalnya (yang seringkali saya gunakan) adalah dengan memakai responsinator.com

Coba deh Sobat buka link berikut ini untuk melihat tampilan blog ini jika dibuka dengan memakai smartphone, tablet pc, atau sejenisnya.

Ini untuk melihat tampilan versi web.
-----------------

http://responsinator.com/?url=http://eltelu.blogspot.com

Sedangkan yang ini untuk melihat tampilan versi seluler.
-----------------

http://responsinator.com/?url=http://eltelu.blogspot.com/?m=1

Selamat mencoba, Sob. :)

23/06/13, 09.24 O

waw sangat nice artikel sekali sob
tukar link dong sob
www.cpartikel.com

23/06/13, 13.40 O

@Copy PasteWahhh, terimakasih Sob. Akan tetapi saya mohon maaf bila tidak dapat memenuhi ajakan (permintaan) Sobat untuk tukar link karena sudah terlalu banyak link yang terpasang pada blogroll blog ini.

25/06/13, 17.35 O

ayah caranya bikin kayak kotak iklan dikanan itu gimana.. pengen nih.. hehehe

25/06/13, 19.21 O

Artikel yang bagus..tapi sayang belum tuntas pembahasan nya..semoga cepar di terbit kan artikel cara merubah blog menjadi web site..karena saya pribadi juga teman yang lain pun ada membutuhkan nya...terima kasih..@AYAH MELA

26/06/13, 06.48 O

@Arif Fajar NasuchaCara membuatnya dengan menggunakan teknik sticky, Sob. Dan sebenarnya sudah banyak artikel yang memberikan ulasan tentang cara pembuatan widget seperti itu kok.

Coba deh Sobat lakukan penelusuran internet tentang hal tersebut. Saya yakin Sobat akan dengan mudah menemukannya. :)

26/06/13, 06.56 O

@Saud KarrystaTerkait dengan kelanjutan dari artikel tersebut, salah satunya dapat Sobat temukan dalam artikel ini. :)

Anonim
28/06/13, 08.16 O

@AYAHE MELAPakek ini ajah bang lebih keren. :D
ami.responsivedesign.is

04/07/13, 18.17 O

Saya juga ingin tampilan blog saya seperti website profesional tapi saya belum bisa membuatnya sendiri.

05/07/13, 14.55 O

@Oke-Reload™Asalkan ada niat dan kemauan untuk belajar, pada akhirnya nanti juga bisa sendiri kok Sob. :)

05/07/13, 20.04 O

gan, kalo buat template toko online yg responsif gimana ya?

07/07/13, 00.26 O

@burhan arifinJujur saja kalau untuk template toko online, saya sendiri juga belum pernah mencobanya, Sob.

Akan tetapi dalam hal pembuatan template responsive, saya rasa menggunakan teknik yang serupa yaitu dengan cara melakukan penyesuaian terhadap CSS sesuai dengan media query (resolusi layar) perangkat pada umumnya. Karena desain yang responsive itu berarti kan tampilannya dapat menyesuaikan secara otomatis dengan berapapun resolusi layar perangkat yang digunakan.

10/07/13, 20.25 O

saya pengen sekali punya blog yang tampilannya profesional...blog saya di http://portaldinamis.blogspot.com

11/07/13, 04.04 O

@deharianja robenitoKalau begitu berarti kita dapat belajar bersama untuk mewujudkan hal tersebut, Sob. :)

23/07/13, 01.51 O

kalo tuk mengubah tampilan header(H1) gimana mas?

23/07/13, 21.36 O

@Abdul MuhammadBarangkali bisa dijelaskan secara lebih spesifik dulu Sob. Maksudnya mengubah tampilan header (H1) menjadi seperti apa?

26/07/13, 18.46 O

sob thema online shop nya donk...

Anonim
27/07/13, 12.13 O

Wah bagus Sobat !!! :)

30/07/13, 20.51 O

@cinta berduriHwaduh, kalau untuk theme yang seperti itu terus terang saja saya tidak punya Sob. Sebab jujur saja saya sendiri memang tidak begitu hobby membuat template.

Coba deh Sobat lakukan penelusuran dengan menggunakan search engine untuk menemukan theme sesuai dengan yang Sobat inginkan tersebut. Menurut sepengetahuan saya, banyak kok blogger yang menyediakan template dengan theme seperti itu. :)

30/07/13, 20.54 O

@dika1k3Terimakasih banyak atas apresiasinya untuk artikel ini Sob. :)

04/08/13, 07.02 O

Luar biasaa Sobbb, saya baru memahami artikel ini. Jadi khasiatnya juga baru berasa! hehehe

Tips nya berhasil bos, sekarang menu horizontal pengganti navbar hilang entah kemana di versi mobile, wkwkwk

06/08/13, 01.14 O

@Denz AhmadSyukurlah bila masalah yang kemarin sudah dapat teratasi, Sob. Bila demikian saya turut senang dengan hal tersebut.

06/08/13, 23.57 O

Terima Kasih @AYAHE MELA
yang bai hati murah budi dan segala nya deehh :h :h :h
Artikel ini suatu pembelajaran
buat saya Yang masih newbie banget
di Blogging trima kasih ya @Ayahe Mella..? semoga kebaikan @Ayah atas artikel ini di berikan Barrakah yg setimpal..mampir di blog saya @Ayah.kalu ada waktu di : http://karristaent.blogspot.com/2013/08/apakah-ping-perlu-untuk-artikel-seo.html

07/08/13, 03.59 O

@Saud KarrystaOke, sama-sama Sobat.

Oh ya, btw mohon maaf bila saya tidak dapat menerbitkan salah satu komentar Sobat, dalam hal ini adalah komentar yang sebelumnya telah Sobat poskan dalam artikel dengan judul Cara Gampang Membuat Menu Tab Horizontal Atas Untuk Tampilan Browser Pada Layar Perangkat Handphone Atau Smartphone, karena komentar tersebut secara tak sengaja telah terhapus.

Sekali lagi saya mohon maaf atas ketidaknyamanan ini.

Anonim
23/08/13, 20.53 O

wah rinci dan lengkap artikelnya, thanks ya bos

24/08/13, 15.44 O

@blogSama-sama Sobat. :)

12/09/13, 14.44 O

wah gimana caranya biar saya ikutan dong gan , biar web saya kayak gitu gan , healtygroup.blogspot.com

12/09/13, 22.44 O

@healtygroupSepertinya Sobat belum sepenuhnya membaca ulasan yang terdapat dalam artikel ini sebelum mengeposkan komentar. Karena sesungguhnya jawaban atas pertanyaan tersebut telah saya uraian secara gamblang pada artikel di atas.

Anonim
22/09/13, 22.17 O

Saya baru saja mengetahui Function b:if disini tadi.
Menurut saya sebagai blogger kita sudah harus menyiapkan/Setting template blog kita agar bisa dan enak diakses via mobile. Karena hampir semua orang menggunakan Handphone dijaman ini. Jadi kita bisa lebih banyak mendapatkan audien dengan blog versi Mobile.

Terima kasih ayah Mela.
kunjungan pertamax neh, Salam Kenal.
Mari Ketawa.

25/09/13, 13.23 O

@marikitaketawaSalam kenal Sobat.

Betul sekali. Optimasi blog untuk tampilan seluler sekarang ini memang sangat diperlukan karena di jaman yang serba canggih ini banyak sekali pengguna yang lebih memilih untuk menggunakan perangkat mobile jika dibandingkan dengan perangkat desktop.

Anonim
16/11/13, 13.31 O

iya gan, sebenarnya saya ingin sekali tampilan blog saya di handphone sama seperti di PC, soalnya kalau dilihat dengan handphone tampilan blog saya hanya berupa tulisan saja berwarna biru. say unggu gan, artikel mengenai cara membuat tampilan blog di PC sama dengan di handphone

18/11/13, 10.07 O

@tipspowerfulYang benar saja nih Sob? Karena setelah saya lihat blog yang Sobat kelola sudah menggunakan template buatan Mas Sugeng gitu kok. Padahal setahu saya template buatan Mas Sugeng itu sudah mendukung untuk tampilan desktop dan juga mobile. Dan bahkan terakhir kali setahu saya juga sudah mendukung versi responsive.

Anonim
13/12/13, 11.17 O

tampilannya bagus banget gan,gmn cara buatnya

14/12/13, 09.54 O

@rumput-kebar-papuaTerimakasih Sob. Akan tetapi saya rasa biasa saja kok. Karena menurut sepengetahuan saya cukup banyak blog lain memiliki tampilan yang lebih bagus dan keren.

Sedangkan untuk cara membuatnya tentu saja dilakukan dengan cara edit HTML template, CSS dan juga script-nya. :)

Thanks infonya..

12/10/15, 05.39 O

Posting yg luar biasa, muantap....
Berkunjung juga ke mutcil.blogspot.com ya