Cara Mendesain dan Mengedit Templet Blogger untuk Pemula

Dzargon - Templet blogger merupakan sebuah file berektensi XML yang berisi struktur Code HTML yang sesuai dengan Platform dan CMS Blooger. Meskipun tidak bersifat Open Source, Platform Blogger memberikan kesempatan pada pengguna untuk mengedit tampilan pada level Front End.







Templete ini adalah bagian yang bertanggung jawab untuk menunjukkan tampilan pada user saat mengunjungi situs anda, baik itu tampilan PC ataupun Mobile. Templeta yang bagus tentunya memiliki desain yang responsive, yakni berubah sesuai dengan bentuk device usernya.

Salah satu momok bagi para blogger pemula dan blogger kalangan content writer adalah melakukan editing tampilan. Merombak HTML yang yang memiliki banyak code, CSS, element dan struktur menjadi hal yang nyaris tidak pernah disentuh sama sekali, memang hal tersebut bukanlah masalah mendasar karena bagi blogger yang tidak tahu membuat templete cukup membeli templete dari para penyedia Templete blogge rbaik gartis maupun berbayar.

Hanya saja templet yang diberikan tentu saja templete standar yang beberapa elemen tidak sesuai dengan keinginan dan kontent dari blog kita. Sebut saja mungkin kita tidak menyukai jenis hurufnya, ukuran huruf, lebar layar tulisan utama, dan isi Sidebarnya. Satu-satunya cara untuk memperbaiki ini adlaah melakukan editing ke element-elemen dan Divisi-Divisi tersebut.

Hal ini tentu saja tidak serumit membuat templete, namun kita masih perlu mempelajari beberapa hal dasar untuk merubah tampilan teresebut.

A. Struktur HTML Templet Blogger

Struktur HTML adalah susunan elemen dasar yang dimiliki Platform dan CMS Blogger. Pada dasarnya Struktur ini meletakkan elemen-elemen dasar mirip dengan banyak desain UI pada kebanyakan platform.

Langah awal yang bagus dalam mempelejari struktur ini adalah memahami letak dan lokasi dari setiap elemen yang bakalan ditulis dalam bahasa HTML. Struktur akan dimulai dengan tag pembuka <html> dan ditutup dengan </html>.

Adapaun bentuknya seperti pada gambar di bawah ini :

Struktur dasar Code HTML terbaru miliki Blogger
Struktur Dasar HTML Blogger

1. Head 

Head merupakan bagian untuk meletakaan Cashcading Style Sheet atau CSS, meskipun CSS bisa ditempatkan dibagian tubuh HTML atau Inline CSS, namun hal tersebut justru membuat lebih banyak code padahal kita hanya ingin menggunana code seminimum mungkin agar loading blog jauh lebih cepat.

Bagian head ini terdiri dari tiga elemen utama yakni <tittle> sebagai judul dari blog, <b:skin> atau <style> sebagia tempat pendefinisian CSS, dan <b:templete-skin> yang merupakan aturan pada pada tata letak pada dashboard blogger.

Pada head ini ini juga dilettakkan banyak meta tag dan struktur untuk perayapan search enggine yang diizinkan oleh si pemilik blogger, sebagai contoh struktur perayapan model Schema.org, dan Breadcrumbs.

2. Body

Body merupakan badan dari blogger yang akan ditampilkan kepada user. Semua CSS yang didefenisikan di Head tidak akan muncul jika tidak dipanggil pada bagian ini. Dalam body ini lah Layar tampilan di bagi ke dalam beberapa section, divisi atau element dan namun struktur awalnya hanya satu elemen saja.

Bagian Boody terdapat banyak element namun ada tiga jenis yang sangat umum ditemukan di banyak blog, yakni <b:section class="navbar"> berisi Divisi untuk sistem navigasi, <div class= 'content'> berisi divisi utama yang digunakan untuk menayangkan kontetn dalam hal ini adalah Artikel, gambar dan sejenisnya, lalu <script type='text/javascript'> yang berisi jenis-jenis perintah Java untuk membuat tampilan lebih dinamis dan cantik.

3. Gadget

Gadget adalah kolom lain yang dipisahkan dari Boy untuk menampilkan alat bantu yang digunakna untuk memudahkan navigasi blogger selain naviagasi utama. Kolom ini juga banyak digunakan untuk menyimpan info penting dayng disusun dalam bentuk sidebar <b:section-content id='sidebar'>  dan footer <b:section-content id='footer'>.

B. Visualisasi Desain dari Struktur HTML Blogger

Semua code HTML yang sudah dibuat diatas kemudian aplikasikan ke dalam Blog akan menghasilkan tampilan visualisasi User Interface (UI). Tampilan inilah nantinya yang akan menunjang kenyamanan user selama ada di dalam blog kita.

Untuk membhasa aspek kenyamanan user selama berada di situs kita, maka diperlukan kajian diluar teknis Coding tapi kajian Desain Komunikasi Visual yang terkait dengan jenis text, ukuran, warna text, warna latar belakang, ukuran dan sejenisnya yang terkait dengan hal-hal yang berbasu desain.

Hasil Visualisasi dan desain yang dirancang yang paling umum sebagai berikut :

Tampilan Blog dengan Dua Sidebar blogger
Desain Blog dengan Dua Sidebar

tampilan Desain Blog dengan Satu Sidebar
Desain Blog dengan Satu Sidebar

1. Header

Header berbeda dengan Head. Secara Head adalah loaksi penempatan Divisi, elemen, CSS dan Tag yang ada di editor HTML sedangkan Header adalah adalah nama lain dari tittle atau judul blog.

Pada bagian Header ini diisi judul dari sebuah blog, misalnya Matamu.Net. Dalam header ini bisa diletakkan deskripsi umum tentang blog kamu agar pembaca bisa tahu apa saja yang kamu bahas dalam blog tersebut. Selain tulisan Header ini bisa disisipkan gambar sebagai logo atau branding dari situs kamu.

Adapun ukuran Header berbagai macam namun jangan di desain terlalu lebar karena menggangu. Paling tidak saat ini Header dengan tema desain minimalis (300 px x 50 px) sangat banyak digunakan, karena tidak memakan tempat sehingga menyisahkan tempat lebih banyak untuk artikel.

2 Navbar

Navbar atau Navigation Bar adalah Widget atau element yang memberikan kemudahan mencari artikel atau content dalam suatu website berdasarkan kesamaan label. Sebagai contoh label untuk kumpulan artikel kesehatan, wisata dan sejenisnya.

Widget ini pada umumnya diletakkan di bawah header karena posisi tersebut menjadi posisi kepala dimana secara psikologi orang-orang akan selalu berfikir ke arah atas untuk mengetahui garis besar dari suatu blog.

Mungkin hampir sama dengan daftar isi pada bugu yang selalu diletakkan di halaman depan dari sebuah buku.

3. Body Text 

Body merupakan area utama dimana penulis blog akan menyampaikan konten yang mereka ingin sampaikan. Body atau Post ini berisi informasi seperti artikel, gambar, video dan kolom komentar untuk pengunjung yang ingin berkomentar.

Body Text jugga kadang dikenal dengan nama Post, dan Body Post, sehingga untuk mengedit bagian ini biasanya digunakan nama-nama tersebut.

4. Side Bar

Side bar merupakan salah satu widget yang paling banyak fungsinya dari segi experience pengguna. Dinamakan side bar karena letaknnya berada di sisi Body Post. Dulu banyak situs yang menggunakan dua buah side bar disisi kiri dan kana, namun saat ini Rigth Side Bar lebih banyak ditemukan.

Isi dari Side bar ini biasanya Widget yang berkaitan dengan ciri khas situs, seperti popuper post, artikel yang direkomendasikan, iklan, statistik, galery dan banyak lagi. Hal ini karena mata sangat nyaman dengan posisi Side saat membaca tulisan dari kiri ke kanan artikel di blog.

Pada umumnya Side Bar di desain dengan lebar 300 px dengan tinggi yang menyesuaikan atau Responsive, ukuran ini sangat pas ketika sidebar bakalan tergser kebawah ketika tampil pad abentuk mobile.

5. Footer

Gadget paling akhir yang letaknya ada di bawah berada di bawah blog oleh karena itu dinaman Footer. Isi footer pada umumnya berupa informasi mengenai website seperti About Us, Disclaimer, Privacy Police dan Kontak.

C. Editing HTML Blog untuk Pemula

Tidak ada sistem yang paling baik digunakan dalam pengeditan templet blog untuk pemula kecuali sistem tambal Sulam. Tambal sulam yang dimaksud adalah mencari elemen yang ingin di edit kemudian.

Misalnya elemen yang ingin di deit adalah elemen navigasi Bar makan yang silahkan masuk ke HTML Editor untuk mencari element tersebut dalam bentuk code HTML.

Cara standarnya adalah dengan melacak bagian tersebut melalui menu Inpsect Elemen miliki Google Chrome. Menu ini bisa didapatkan dengan cara klik kanan di tampilan Blog kamu, lali silahkan edit di Dashboard blog.

Chrome berikan fasilitas kenyamana Inspect Editing di Blog

Setelah window Inspect halaman muncul silahkan sorot bagian di website kamu untuk mengetahui jenis codenya, atau lakukan sebaliknya silahkan klik blok code HTML di sisi kanan dan lihat bagian yang dicover di sisi kiri.

Memabntu porses editing templete pad ablogger

Namun bagi yang ingin cara lebih ringkas lagi perhatikan saja bagian yang ingin di edit lalu masuk ke HTML editor, lalu temukan bagian yang ingin di edit. Sebagai contoh jika kita ingin mengedit salah satu label di NavBar dibawah ini.

Cara mudah mengubah Navigasi Blog di editor HTML

Adapun langkah-langkah yang dilakukan untuk bisa masuk ke Editor HTML sebagai berikut :

  1. Logging ke Dashboar
  2. Pilih Menu Tema 
  3. Pilih menu Edit HTML di bawah tampilan Blog pada menu tersebut.
Setelah memilih Edit HTML maka akan muncul tampilan Code HTML dari templet yang anda gunakan, sekarang anda bisa mencari dengan cara menggeser kursor sampai baris yang diinginkan, namun jika terlalu panjang silahkan klik perintah Ctrl + F pada windowds, atau Command + F pada MAC.

Setelah itu akan muncul dialog box, ketika tulisan Long Exposure, huruf besar dan kecil tidak perlu diperhatikan karena HTML tidak sensitif case. Setelah diketik dengan lengkap, kemudian tekan enter sampai menemukan code tersebut. 

Menu HTM editing cara mengganti NAvbar

Jika code nav bar sudah ditemukan maka akan tayang code seperti ditas silahkan diganti untuk Nama dari Labelnya diketika pada bagian hitam, sedangkan alamat URL labelnya silahkan dicari di blog anda masing-masing.

Setelah mengganti klik Save lalu lihat perubahan yang terjadi pada situs anda.

40 komentar untuk "Cara Mendesain dan Mengedit Templet Blogger untuk Pemula"

  1. Assalamualaikum pak saya mau bertanya ada template yang saya download tapi tidak bisa digunakan di blog, itu bagaimana solusinya pak

    Terimakasih ๐Ÿ™

    BalasHapus
  2. Terimakasih..artikel ini sangat membantu :)

    BalasHapus
  3. Bagaimana cara membuat navigasi bar di dan memasukkan sejumlah video dan artikel di blog yang kita buat

    BalasHapus
  4. Bismillah , saya ingin bertanya , knp template yang saya download tidak dapat terpasang , dan saya masih belum paham mengenai cara membaca code dan cara pengaplikasiannya , dan fungsi code tersebut , terima kasih pak

    BalasHapus
  5. 'position': 0}}] apa maksudnya ini kode pak?

    BalasHapus
  6. Mutiara Zahirah26 Maret 2020 07.19

    Assalamualaikum pak. Bisakah saya memiliki blog yang menerima posting dari beberapa orang?

    BalasHapus
  7. Terimakasih, Artikel Ini sangat membantu bagi kami yang pemula

    BalasHapus
  8. Artikel ini sangat bagus untuk pemula, ditunggu artikel selanjutnya... terimakasih

    BalasHapus
  9. Artikel ini sangat membantu, semoga bermanfaat. Terimakasih!

    BalasHapus
  10. Artikel ini sangat membantu saya dalam mendesign dan mengedit templete blogger saya ๐Ÿ‘

    BalasHapus
  11. Artikel ini sangat membantu saya dalam mendesign dan mengedit templete blogger saya ๐Ÿ‘

    BalasHapus
  12. terimakasih artikel ini sangatlah membantu

    BalasHapus
  13. Terima kasih untuk infonya, ini membantu saya dalam mendesain dan mengedit template blog saya...

    BalasHapus
  14. Terima kasih pak,artikel ini sangat membantu dalam mengerjakan tugas pak☺

    BalasHapus
  15. Bismillah. Saya ingin bertanya bagaimana cara memasang iklan pada side bar?

    BalasHapus
  16. bismillah, bagaimna cara bikin html full body background?

    BalasHapus
  17. Asalmualaikum pak, bagaimana langkah pertama untuk mempunyai blog yang menghasilkan penghasilan?

    BalasHapus
  18. Terimakasih, artikel ini sangat berguna bagi kami yang pemula

    BalasHapus
  19. Assalamu'alaikum pak, bagaimana caranya untuk menghubungkan navigasi bar dengan blog tertentu pak?

    BalasHapus
  20. Assalamu'alaikum pak, bagaimana caranya untuk menghubungkan navigasi bar dengan blog tertentu pak?

    BalasHapus
  21. Assalamualaikum pak.. saya mau bertanya bagaimana cara mengisi materi di ikon navigasi pak?

    BalasHapus
  22. Terimah kasih �� ini sangat membantu, sukses terus ☺

    BalasHapus
  23. assalamualaikum pak, saya ingin bertanya bagaimana cara mengganti footer/catatan kaki di blog misalnya copyright/powered by? saya sudah berkali kali mengganti dengan mengedit html dan memasukkan beberapa code tapi blog saya malah jadi berantakan

    BalasHapus
  24. Bismillah,pertanyaan saya pak
    Apakah saya dapat memiliki blog yang diposkan oleh lebih dari satu orang? Makasih

    BalasHapus
  25. Setelah membuat kelompok-kelompok pada navigasi bar. Bagaimana cara memasukkan postingan kedalam kelompok tersebut

    BalasHapus
  26. Assalamualaikum , bagaimana cara menghilangkan footer pada template bawaan blog?

    BalasHapus
  27. Terima kasih.. sangat bermanfaat

    BalasHapus
  28. assalamualaikum pak saya ingin bertanya apa perbedaan mengubah navbar dengan menggunakan tata letak dan tema ?

    BalasHapus
  29. assalamualaikum wr.wb, saya mau bertanya apa solusi terhadap kesalahan pada edit html terkait dengan baris dan kolom pada saat mengedit navigasi?

    BalasHapus
  30. Assalamualaikum pak, bagaimna cara mengubah footer/catatan kaki misalnya created by/powered by??

    BalasHapus
  31. Terimakasih atas informasinya, sangat bermanfaat terutama bagi pemula yang ingin menjelajahi dunia blogger :)

    BalasHapus
  32. Assalamualaikum, bagaiamana cara mengatur ukuran body text dan ukuran side bar?

    BalasHapus
  33. Assalamualaikum,
    bagaimana cara untuk menghubungkan navigasi bar dengan postingan yang kita buat?

    BalasHapus
  34. Assalamualaikum pak.
    Mengapa langkah awal struktur html harus dimulai dari memeplajari letak?

    BalasHapus
  35. Bismillah, mengapa pada setiap template, memilki susunan hmtl yang berbeda-beda ?

    BalasHapus
  36. Bismillahirrahmanirrahim
    Saya ingin bertanya, mengapa pada beberapa website, ketika kita mengetuk suatu navigasi, pada ketukan pertama biasanya akan membuka new tab yang mengarahkan kita ke website lain yang tak berhubungan sama sekali dengan web yang kita kita masuki?

    BalasHapus
  37. Bismillah, saya mau bertanya, Bagaimana cara membuat template sendiri, pak?
    Terimakasih pak

    BalasHapus
  38. Terimakasih.. Artikel ini sangat bermanfaat๐Ÿ™

    BalasHapus
  39. Terimakasih atas informasinya, sangat bermanfaat :)

    BalasHapus
  40. Artikel ini sangat bermanfaat bagi saya yang baru pemula

    BalasHapus

Posting Komentar