Cara Cerdik Pemula Mengedit Template Blog

Template adalah sebuah dokumen yang memiliki format khususnya pada platform blogger yang Anda gunakan untuk membentuk tampilan situs web atau web berformat html. Secara kompleks dan terstruktural sebuah bentuk tampilan tersebut dapat dimunculkan di layar komputer maupun ponsel. Dan memerlukan keahlian ata skill khusus untuk mendesain atau mengeditnya.

Editing template blog menjadi momok yang paling dihindari bagi sebagian kalangan penulis blog karena berbagai alasan tertentu.Salah satunya merombak susunan html yang didalamnya terdapat CSS, Javascript, dan elemen penting lainnya. Saat desain dari tampilan template kurang sesuai dengan harapan maka salah satu caranya dengan mendesain ulang beberapa elemen yang dianggap mengganjal dengan mencoba merombaknya sendiri. Alasan ini sangat baik bagi seorang pemula karena dengan demikian kita sedang bergerak untuk belajar desain walaupun kecil-kecilan untuk mengubah tampilan template tersebut meskipun cuma mengubah warna.

Namun bagi seorang pemalas akan memilih jalan pintas untuk mendownload template gratisan tanpa memikirkan desain dan dampaknya terhadap blog tapi ini juga bukan alasan alternatif yang buruk untuk mencoba. Berbagai macam cara akan dilalui seorang pemula untuk mendapatkan desain yang terbaik namun ini sangat berat dan menyita waktu, tenaga dan pikiran. Bagi Anda yang kurang berpengalaman mengenai desain template jangan sungkan untuk mencoba dan belajar mulai dari hal yang kecil. Saat ini kita berbicara langkah non-profesional karena sudah berbeda cara dan para pemula perlu mengasah kemampuan dari hal yang mendasar tanpa ketergantungan atau kemudahan dari membeli jasa.

Persiapan alat dan bahan

Semua yang dikerjakan dari awal mula akan membutuhkan banyak sekali percobaan menggunakan ini dan itu. Ini wajar karena mencoba suatu hal yang baru secara mandiri akan menentukan langkah awal yang tepat dan pemilihan sarana (alat dan bahan) yang cocok untuk digunakan belajar dari hal yang sangat mendasar. Perlu adanya langkah minimalis yang memudahkan pemahaman praktik bukan secara teori saja.

1. Menggunakan template dasar Blogger

Seorang pengguna template blogger pernah mengawali langkah mereka dengan mengobrak-abrik struktur template standart yang tersedia dari platform ini. Dengan membuka setelan edit HTML pada dashboard maka semua detil rincian strukturnya sudah kelihatan dan dengan pengetahuan yang masih terbatas saat itu juga akan mencari jawaban alternatif dengan mencari tutorial sana-sini.

Namun karena masih belum ada pemahaman yang mendalam maka mereka akan menuruti langkah sesuai dari tutorial yang dipelajari dan baru sadar telah merusak tampilan situs web atau blog milik mereka. Ini batu loncatan yang bisa dianggap benar karena untuk membangun sesuatu kita perlu menghancurkan sesuatu yang lain dengan demikian Anda akan tahu apa yang salah.

2. Inspect Elemen dari browser Chrome

Seorang pemula pernah juga biasa menggunakan inspeksi elemen untuk mengintip bagian-bagian penting dari susunan tampilan situs web atau blog sendiri atau orang lain. Dengan mengetik ctrl+shift+i maka segala elemen situs akan terbuka secara realtime.

Inilah yang dibutuhkan seorang pemula saat melakukan perombakan elemen javascript, css, hingga direktori situs perlu adanya simulasi langsung realtime (waktu nyata) cuma hanya dari seperangkat google chrome browser. Mengarahkan crusor pada elemen yang ingin diedit dengan mengetik ctrl+shift+c maka area yang tersorot dengan mudah diketahui letak keberadaannya pada struktur template.

3. Menyimpan kode di Notepad 

Aplikasi satu ini sepertinya wajib digunakan saat mengcopy sebuah script atau css yang diambil dari tutorial untuk nantinya diterapkan pada situs web atau blog. Karena aplikasi bawaan windows ini sangat penting dan cocok untuk menyimpan file-file yang ringan dan tanpa merusak format tulisan programnya.

Namun bagi yang ingin mengedit langsung format tersebut bisa Anda gunakan notepad++ versi terbaru dan diinstal tanpa membebani kinerja komputer. Selain file program untuk template, Anda juga bisa menggunakannya untuk menyimpan bahan postingan artikel tanpa mengandalkan Microsoft Office yang jelas berbeda format filenya.

4. Paint untuk editing gambar dari Google 

Keterbatasan bahan-bahan postingan gambar ternyata bukanlah penghalang lagi bagi pemula, dengan mendownload dari google maka selesai masalah. Tahukah Anda bahwa ada aturan copyrights yang tak bisa disangkal untuk masalah ini? Namun keterbatasan karya akan membuat ide-ide yang lain akan makin terhambat, tinggal bagaimana Anda meraciknya tanpa ketergantungan dengan aplikasi canggih atau mutakhir seperti Photoshop dan sejenisnya.

Maka dari itu gunakanlah kemampuan minimalis seorang pemula untuk belajar editing gambar walaupun sedikit melalui aplikasi Paint yang tersedia di komputer windows ini sangat simple. Dengan Paint maka dengan mudah capture (print screen) dari layar monitor komputer yang kemudian diedit untuk bahan, caranya tinggal pencet tombol print screen (prt sc sysrq) pada keyboard kemudian tekan ctrl+v pada layar paint. Dengan demikian Anda tak perlu lagi melakukan download gambar dari google.

Memahami struktur template dasar

Jika Anda yang sama sekali belum paham dengan struktur template, inilah langkah yang paling dasar untuk seorang pemula membuat perubahan pada template meskipun cuma sedikit. Langkah awal sembari memahami bahasa program adalah mengingat letak atau lokasi dimana sebuah tulisan program diterapkan untuk membentuk tampilan situs. Bahasa markah (html) yang sering disebutkan untuk menampilkan dokumen halaman situs web juga terdapat perintah-perintah program.

Program tersebut diletakkan berdasarkan fungsinya masing-masing dari urutan teratas dibuka menggunakan tag <html> dan ditutup pada bagian paling akhir dengan atribut garis miring </html> dan ini menandakan jenis versi html yang digunakan, untuk yang versi html 1.0 hingga html 4.0. Untuk lebih jelasnya lihat gambar berikut:

1. Bagian <head>
  • <title> sebagai judul web atau blog
  • <b:skin> atau <style> berisi program sebagai tampilan CSS 
  • <b:template-skin> sebagai pengatur tampilan tata letak di dashboard blog
2. Bagian <body>
  • <b:section class= 'navbar'> berisi perintah program menu navigasi
  • <div class= 'content'> berisi program konten web atau blog dalam bentuk artikel atau lainnya.
  • <script type='text/javascript'> berisi perintah program javascript 

3. Bagian <b:section-content id='sidebar'> berisi perintah program untuk style sidebar

4. Bagian <b:section-content id="footer'>  berisi perintah program untuk style footer

Dengan mengingat urutan tersebut maka Anda akan lelulasa menjelajahi setiah detil elemen yang ingin diutak-atik menggunakan cara inspect element pada google chrome browser. Namun perlu digarisbawahi bahwa html memiliki versi yang berbeda-beda, mulai dari cara penulisan tag hingga atribut yang dimilikinya, bisa Anda simak pada postingan berikut

Tambal sulam bahan CSS atau Javascript

Hal standart mindset seorang editor template dibangun dari yang terlihat secara utuh kemudian mencermati bahan dasar mentahnya. Analoginya, pendesain bisa dilihat dari bahan dasar pembuatan produk tertentu, misal seorang desainer baju akan memilah bahan dasar kain yang cocok untuk dibuat kebaya. Sama halnya desainer template pemilihan bahan dasar elemen yang cocok untuk sebuah platform tertentu akan memiliki andil terbesar dalam membentuk satu tampilan utuh.

Kaitannya dengan penggunaan javascript atau CSS yang digunakan pada elemen template kita jangan terlalu dipusingkan dengan cara membuatnya dari nol. Toh banyak yang dishare di berbagai tutorial dan tinggal mencoba memasangnya pada struktur template blog milik Anda. Apabila mengalami kendala, maka kembali pada pokok pemahaman struktur template dasar Anda. Apakah sudah paham betul mengenai versi dan fungsinya?

Meningkatkan performa

Dalam hal meningkatkan performa khususnya kecepatan akses dan kontestasi peringkat Google juga sering menjadi ajang pemicu bahwa mengedit atau mendesain template pastinya memikirkan bagaimana cara agar situs web atau blog menjadi ringan dan memiliki kecepatan akses (responsive)  tanpa lola (loading lama). Mengelola situs agar menjadi SEO friendly (Search Engine Optimization) agar tercapai SERP (Search Engine Result Page) yang diinginkan.

Bagian ini adalah hal yang wajib dikerjakan baik sebagai penulis maupun desainer template situs. Jika keisengan yang Anda jalankan sekarang hanyalah sekedar sebagai penulis pun suatu saat nanti akan berfikir keras mengenai performa yang terjadi pada tampilan web atau blog. Jadi jangan sungkan untuk belajar mulai dari sedikit dan sekarang saatnya.

Penutup

Saya juga pemula yang sedang belajar, jika ingin menanyakan cara profesional maka bukanlah saat yang tepat, mungkin minggu depan atau lusa saat Anda mengenal situs ini lebih dalam. Selamat berkarya dan semoga bermanfaat.

ARTIKEL TERKAIT

Beragam informasi seputar teknologi dan gadget dikemas dari berbagai sumber dan pengalaman dalam bentuk tutorial

Comment Policy: Silahkan isi komentar Anda sesuai dengan bahasan topik pada postingan. Komentar yang berisi link atau tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar Disqus

This website uses cookies to ensure you get the best experience on our website. Info