Hai, selamat datang kembali...
Pada pembahasa kali ini kita akan sama sama belajar untuk membuat tampilan Blog pada blogger menjadi lebih menarik dan indah.
Sebelumnya kamu telah selesai membuat akun blog pada platform blogger dengan mengikuti langkah-langkah yang telah kita ikuti bersama.
jika kamu belum membuat nya, ada baiknya untuk membuat akun blog kamu dengan mengikuti langkah-langkah pada artikel ini
baca juga : Membuat Blog Artikel Pertama bagi Pemula! Di Jamin bisa 100%
Untuk mengubah tampilan tema blog itu ada dua cara,
1. dengan menggunakan tema default yang telah disediakan blogger
2. mengcustom tema dengan menggunakan kode html
Sebenarnya blogger sendiri sudah menyediakan beberapa tema blogger yang cukup menarik untuk digunakan, namun template yang disajikan blogger sendiri rasanya masih kurang menarik jika kamu ingin membuat blog yang lebih kreatif.
Oleh karena itu, pada pembahasan artikel ini, kita akan bersama sama untuk membuat template blog kita sendiri dari awal, dengan begitu kamu juga dapat sekalian mengasah kemampuan kamu untuk membuat template blog.
sebelum kita memulai, ada baiknya untuk paham dahulu mengenai dasar dasar istilah yang akan kita gunakan kedepannya.
APA ITU TEMPLATE BLOGGER?
Template blogger adalah sebuah format file XML yang diciptakan oleh pengembang web untuk keperluan membuat blog. inilah kenapa kita akan mendengar istilah tema dan template. Templat XML terdiri dari Bahasa HTML dan tag blogger khusus. Biasanya, dalam file XML ini akan terdapat kode-kode pemrograman seperti HTML, CSS, dan JavaScript. Dengan memahami dasar-dasar HTML, CSS, dan JavaScript, kamu bisa membuat template blogger dengan lebih mudah. Bahasa-bahasa pemrograman itu akan sangat penting dalam mendesain template blogger agar tampilan halaman blog menjadi lebih responsif terhadap pengguna/ user. Selain itu, kamu juga bisa memanfaatkan bahasa-bahasa pemrograman tersebut untuk membuat berbagai aplikasi seperti Game yang menggunakan HTML, CSS dan JS, serta melakukan berbagai modifikasi pada template blog untuk menciptakan tampilan seperti website profesional, dan masih banyak lagi kegunaan lainnya.
Oke, jadi sebagai analogi kita bisa membandingkan template blog dengan casing ponsel yang digunakan, di mana masing-masing vendor menyediakan beragam pilihan untuk mempersonalisasi tampilan. Sebagai analogi, ketika Anda mengganti casing ponsel, tema pada layar ponsel akan berubah sesuai dengan pilihan dan kemauan kita, termasuk latar belakang, teks, dan warna. Demikian pula, template blog yang digunakan oleh pengguna memiliki berbagai gaya yang berbeda, disesuaikan dengan preferensi dan kebutuhan masing-masing pemilik situs web.
Jadi sudah siap untuk memulainya?
APA YANG KAMU BUTUHKAN UNTUK MEMULAI?
BUAT KERANGKA AWAL TEMPLATE
Penjelasan :
<?xml version="1.0" encoding="UTF-8" ?>Kode diatas digunakan untuk menjelaskan bahwa kita sedang menggunakan format XML, hal ini penting agar browser dapat memproses kode tersebut dengan baik
<html lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>tag ini menjelaskan elemen utama pada dokumen. "lang", menjelaskan format bahasa yang digunakan dalam artikel/ web. serta "xmlns" digunakan untuk memberikan name space. Name space itu berisi pengaturan default yang digunakan untuk elemen-elemen XML dalam dokumen HTML. Serta menggunakan xmlns lain yang berfungsi sebagai menambahkan elemen-elemen khusus.
MENAMBAHKAN METADATA DASAR
Meta data dasar pada sebuah blog umumnya mencakup informasi-informasi penting yang berkaitan dengan blog tersebut, seperti judul blog, deskripsi singkat tentang blog, kata kunci (keywords) yang relevan dengan konten blog, serta pengaturan yang berkaitan dengan tampilan dan pengindeksan blog oleh mesin pencari.
Baca halaman ini sebagai referensi untuk tag data pada blog
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS rules goes here... */
]]>
</b:skin>
</head>Pertama, tag <b:include> digunakan untuk menambahkan beberapa tag SEO penting, termasuk deskripsi halaman. Ini sangat penting karena membantu meningkatkan visibilitas blog Anda di mesin pencari. Anda dapat belajar lebih lanjut tentang SEO untuk pemula di posting sebelumnya.
Selanjutnya, tag <title> digunakan untuk menambahkan judul halaman ke bagian header. Ini adalah informasi penting bagi mesin pencari dan crawler.
Tag <meta> memiliki atribut name='viewport' yang digunakan untuk mengaktifkan mode desain responsif. Hal ini memastikan tata letak blog Anda tetap terlihat baik di perangkat yang lebih kecil.
Terakhir, tag <b:skin> digunakan untuk menyertakan semua kode CSS yang diperlukan untuk membuat tata letak dan desain blog. Saat ini, tag ini kosong dan akan diisi dengan aturan CSS yang relevan di tahap selanjutnya.
MEMBUAT BAGIAN HEADER
Header berbeda dengan head. <head> merupakan Tag HTML yang berisi kumpulan meta data dan elemen elemen lain yang berfungsi sebagai pengaturan dan konfigurasi web. Dan <header> merupakan bagian untuk menandakan bagian atas pada halaman web kita nantinya.
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header><header>: Ini adalah elemen HTML yang menandai bagian atas atau awal dari suatu elemen dalam dokumen HTML.<b:section>: Ini adalah elemen yang dimulai dengan "b:" yang merupakan bagian dari format XML yang digunakan oleh Blogger atau Blogspot. Elemen ini mendefinisikan suatu bagian atau seksi di dalam template Blogger. Dalam kode kita ini, bagian ini memiliki kelas CSS 'header', ID 'header', maksimum widget yang diizinkan sebanyak satu ('maxwidgets=1'), dan elemen tambahan 'showaddelement=no' yang mengatur apakah tombol "Tambah" akan ditampilkan di bagian ini.<b:widget>: Elemen ini memiliki ID 'Header1', status terkunci ('locked=true'), judul kosong ('title='''), dan tipe widget 'Header', yang mengindikasikan bahwa ini adalah widget header untuk blog.
Baca Juga Tag Elemen halaman untuk tata letak
MEMBUAT BAGIAN POSTINGAN BLOG
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section><b:section>: Elemen ini digunakan untuk mendefinisikan suatu bagian atau seksi di dalam template Blogger. Dalam konteks ini, bagian ini memiliki kelas CSS 'main', ID 'main', dan elemen tambahan 'showaddelement=yes' yang mengindikasikan bahwa tombol "Tambah" akan ditampilkan di bagian ini.<b:widget>: Elemen ini memiliki ID 'Blog1', status terkunci ('locked=true'), judul 'Blog Posts Section', dan tipe widget 'Blog', yang mengindikasikan bahwa ini adalah widget yang menampilkan daftar posting blog.Dengan kode Ini secara otomatis kita akan menghasilkan konten yang diperlukan untuk halaman utama, halaman arsip, halaman pencarian, dan juga untuk halaman posting tunggal.
MEMBUAT SIDEBAR PADA SISI KANAN
Sidebar bertujuan untuk meningkatkan pengalaman pengguna dengan memberikan informasi tambahan, navigasi yang mudah dipahami, dan opsi interaksi yang relevan. Dengan menyusun isi sidebar secara efisien, pengunjung dapat dengan lancar menemukan konten yang mereka cari dan meningkatkan keterlibatan mereka dengan situs web.
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<aside>: Elemen HTML ini menandai bagian tambahan atau sampingan dari halaman web yang biasanya tidak langsung terkait dengan konten utama.
<b:section>: Ini adalah elemen dalam format XML yang digunakan oleh platform Blogger atau Blogspot untuk mendefinisikan bagian atau seksi di dalam template. Dalam pengembangan web dengan platform ini, elemen ini digunakan untuk menentukan area sidebar di blog, dengan mengatur kelas CSS, ID, dan elemen tambahan yang diperlukan.
MEMBUAT FOOTER
Footer dalam situs web itu merupakan bagian terakhir yang biasanya ada di bawah sebuah halaman web. Pada bagian ini, biasanya akan terdapat info tambahan yang mungkin berguna buat kita sebagai pengunjung web. Misalnya, kontak kayak email atau nomor telepon, tautan ke halaman tentang situs, atau kebijakan privasi, serta link ke sosial media macam Facebook atau Instagram. Ada juga yang kasih peta situs, yang kayak daftar lengkap halaman-halaman yang ada di situsnya. Terus ada juga yang nunjukin info hak cipta seperti pada bagian paling bawah pada pojok kiri web ini, kamu akan melihat informasi berupa hak cipta dan juga informasi penting lain seperti tentang kami, kontak, privacy policy, dan disclaimer.
<footer>
<div>
Copyright © 2024 <strong><data:blog.title/></strong>
</div>
</footer>Pada kode diatas, kita membuat footer yang berisi informasi tentang copyright dari website yang sedang dibuat. Karena informasi itu sudah penting, namun jika masih belum kamu bias membuat tambahan lain sesuai dengan informasi yang ingin kamu tampilkan.
<b:skin>
Pada Bagian itu silahkan masukkan Kode berikut ini "
/* Template's Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#main {
padding: 25px 25px 25px 20px;
width: auto;
height: 100%;
display: table-cell;
}
aside {
width: 32%;
height: 100%;
border-left: 1px solid #ddd;
padding: 25px;
display: table-cell;
}
footer {
width: 100%;
clear: both;
border-top: 1px solid #ddd;
padding: 20px;
}Baca Juga artikel berikut ini Memahami Dasar-Dasar Membangun Website Dengan HTML, CSS dan JS
Jadi itu dia, langkah langkah membuat Tema Website sendiri dengan menggunakan bahasa HTML dan CSS. Tampilan blog itu masih akan sangat sederhana, maka kamu bisa mengembangkan kreativitas kamu untuk membuat tampilan Blog kamu menjadi lebih menarik.
Source Code lengkapnya kamu bisa download disini
Demikian postingan kali ini mengenai Tutorial Mudah: Cara Mengubah Tampilan Blog dengan Membuat Template Sendiri di Blogger 2024. Semoga artikel ini bermanfaat dan dapat membantu kamu. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih