Panduan Lengkap Cara Membuat Theme Blog di Blogspot
Blogger.com-Banyak Blogger lebih memilih Blogger (blogspot) daripada WordPress. Tapi tetap saja, kebenaran adalah sebagian besar blog didasarkan pada WordPress. Ini adalah alasan mengapa ada banyak pengembangan di WordPress Themes, plugin, dll.Tapi hari ini, kita akan melihat bagaimana membuat tema blog Blogger dari awal. Jika Anda juga ingin membuat tema Anda sendiri, untuk penggunaan pribadi atau komersial, Anda memerlukan -
- Pengetahuan tentang HTML atau XML
- Sedikit CSS
- Dan JavaScript (jika Anda ingin menambahkan fungsi lebih lanjut ke tema dan elemen-elemennya)
#1 Membuat Blank Theme Template
Kita mulai terlebih dahulu dengan membuat template kosong. Kemudian kita akan menambahkan elemen.Anda dapat memulai dengan membuat file XML di komputer Anda (penyimpanan lokal) ATAU langsung memulai dengan mengetik di editor HTML Blogger. Saya akan menyarankan untuk langsung menulis di editor HTML Blogger karena Anda dapat menjalankan skrip di sana dan di sisi lain, periksa kesalahan juga.
Sebelum menulis, Cadangkan tema dan konten asli Anda. Untuk itu, ikuti langkah-langkah berikut: -
- Pergi ke Blogger.com.
- Kemudian pilih Theme >> Backup/Restore.
- Klik pada Download theme untuk mengunduh tema.
- Tema akan diunduh dalam file .xml, yang dapat Anda kembalikan jika ada hubungannya dalam tema yang sedang Anda buat.
Sekarang untuk membuat tema pertama, Go in Theme >> Klik pada Edit HTML.
Anda akan melihat ada kode yang sudah ada dari tema yang ada. Pilih dan tekan hapus. Sekarang klik tombol Save theme.
Anda akan mendapatkan kesalahan berikut:
Error parsing XML, line 1, column 1: Premature end of file.
Ini karena tema Blogger harus berupa file XML dengan semua konten yang diperlukan minimal untuk tema untuk render sukses. Mari tambahkan komponen-komponen minimal satu per satu untuk membuat tema kosong pertama kami.
Hal pertama yang Anda butuhkan adalah kode umum xml, html, body dan head tag. Jadi mari kita buat mereka seperti di bawah ini-
Sekarang ketika kami mencoba untuk menyimpan skrip ini, Blogger memberikan kesalahan berikut.<?xml version="1.0" encoding="UTF-8" ?><html 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'><head></head><body></body></html>
There should be one and only one skin in the theme, and we found: 0Itu berarti seharusnya hanya ada satu kulit dalam tema. Ini adalah komponen utama kedua dari tema. Mari kita buat.
<b:skin>Kami akan menempatkan ini di dalam <head>.
</b: skin>
Tag skin harus berisi semua CSS dokumen. Anda juga dapat meletakkannya di mana saja dalam dokumen, tetapi tag ini penting. Hanya boleh ada dan hanya satu <b:skin> dalam dokumen.
Sekarang mari kita simpan ini. Tapi tunggu, Blogger memberi kita error lain.
There can be only and only one <b:skin> in the document.Inilah komponen penting ketiga dari template blogger-tag <b:section> . Tambahkan tag berikut dibawah kode <body>.
<b:section id='section1'></b:section>Harus ada setidaknya satu bagian tag template kami dan setiap bagian harus memiliki id unik.
Klik untuk menyimpan tema. Sekarang Anda dapat melihat blog Anda untuk melihat halaman kosong dari template blogger kami.
Banyak dari Anda mungkin bertanya-tanya tentang penggunaan <b: di tag seperti section dan skin. Biar saya beritahu Anda, mereka adalah ruang nama yang digunakan di blogger. Blogger kemudian mengubahnya menjadi elemen <div>.
#2 Membuat Bagian Tema Blogger
Kami sudah membuat bagian di atas dengan id unik. Ada banyak bagian di setiap halaman seperti post body, header, sidebar, footer, dan sebagainya. Kami dapat menetapkan huruf atau melicinkannya dengan menulis CSS di <b:skin> .Section berisi widget. Kita akan lihat cara membuatnya nanti. Mari kita buat bagian pertama.
Anda dapat memilih desain yang paling umum untuk tema yang memiliki 4 bagian - header, posting blog, sidebar dan footer. Saya ingin membuat tema agak seperti di bawah ini.
Jadi, mari kita membuat 2 bagian dengan id unik mereka. Header dan footer akan berada di tag <header> dan <footer> dan iklan (Ad) akan berada didalam kode <div>.
Setelah berhasil menyimpan template blogger ini, masuk ke tata letak (layout).body><b:section id='body'></b:section><b:section id='sidebar'></b:section></body>
Anda akan melihat 2 bagian sudah dibuat di sana. Sekarang Anda dapat dengan mudah menambahkan widget dari sana. Tapi tunggu! Kita perlu memposisikan section sesuai dengan yang telah kita buat menggunakan CSS dan untuk itu, kita akan memasukkan class ke section kita. Setelah menetapkan class, kode akan terlihat seperti di bawah ini. [Tidak ada kebutuhan sebenarnya untuk menugaskan class ke section-section karena kita dapat memilih elemen dalam CSS menggunakan id mereka juga.]
Oke jadi sekarang kita dapat memposisikan elemen-elemen ini menggunakan CSS. Perhatikan bahwa <b:section> berubah menjadi <div> dengan ID yang ditentukan setelah dirender sehingga Anda dapat memilihnya dalam CSS seperti berikut.<body><b:section id='body' class='body'></b:section><b:section id='sidebar' class='sidebar'></b:section></body>
Tetapi kami telah menetapkan kelas untuk elemen-elemen ini sehingga jauh lebih mudah untuk memilih mereka dengan class.div#body{}div#sidebar{}
Menetapkan Posisi Untuk Section
Untuk menetapkan posisi untuk bagian di template Blogger kami, kami akan menggunakan beberapa properti CSS dasar seperti height, width, left, right, margin, padding, dll.Jadi setelah menambahkan CSS di atas, tema terlihat seperti ini-<![CDATA[.sidebar{height: 100%;width: 250px;position: fixed!important;z-index: 1;overflow: auto;background-color:#b5b5b5;animation:animateleft 0.4s;}.body{margin-left:250px;padding: 20px;}]]>
Tema Magz untuk blogger.
Properti sidebar diatur untuk diperbaiki. Jadi sidebar akan diperbaiki tidak peduli bagaimana Anda menggulir ke bawah. Saya telah menambahkan sedikit teks 'Lorem Ipsum' untuk melihat apakah telah bekerja dengan baik atau tidak.Anda harus memperhatikan bahwa <! [CDATA [and]]> datang sebelum dan sesudah kode CSS di <b:skin>.
Apa artinya <! [CDATA []]> ?
Mari kita ambil definisi langsung dari StackOverflow.CDATA singkatan dari Character Data dan itu berarti bahwa data di antara string ini termasuk data yang dapat ditafsirkan sebagai markup XML, tetapi seharusnya tidak.
Itu berarti CSS tidak akan ditafsirkan sebagai XML. Catat bahwa CDATA juga harus digunakan untuk membungkus JavaScript, atau Blogger mungkin memberi Anda kesalahan.
Atribut Dari Section
Satu hal yang tersisa adalah atribut. Berikut ini adalah tabel atribut yang mungkin dan nilainya yang dapat Anda gunakan dalam tag <b:section>.
Attribute
|
Required/Optional
|
Value
|
Default value
|
id
|
Required
|
A unique Id made up of letters and numbers.
|
(Null)
|
class
|
Optional
|
A class name with letters and numbers.
|
(Null)
|
maxwidgets
|
Optional
|
Maximum number of widgets that can be placed in the session. Value can be any number.
|
(If you don’t specify a limit, you can add unlimited widgets.)
|
showaddelement
|
Optional
|
Determines whether the Page Elements tab will show the 'Add a Page Element' link in the section. The possible values are ‘yes’ or ‘no’.
|
Yes
|
growth
|
Optional
|
Determines the arrangement of the widgets .Possible values are ‘horizontal’ or ‘vertical’.
|
vertical
|
<b:section class='sidebar' id='sidebar' growth='vertical' maxwidgets='10'/>
Menambahkan Widget ke Blogger Template
Sekarang langkah selanjutnya adalah menambahkan widget ke Template Blogger kami. Untuk itu, masuk ke tata letak (layout) > pilih bagian dan klik add gadgets.Anda juga dapat menambahkan widget melalui markup. Widget harus berada di dalam <b:section> dan mereka harus memiliki id unik seperti bagian. Selain itu, jenis widget diperlukan atau Blogger akan menghasilkan error-
The new widget with id "abc" has no type. A widget type is required when adding a new widget.Mari kita lihat atribut dalam widget. Data di bawah ini tersedia di halaman Bantuan Google Blogger.
Attribute
|
Required/Optional
|
Value
|
Default value
|
id
|
Required
|
A unique Id made up of letters and numbers.
|
(Null)
|
type
|
Required
|
Indicates the kind(type) of widget.
|
(Null)
|
locked
|
Optional
|
You can rearrange the widgets in layout when set to be ‘yes’. When widget is locked, we can’t move or delete it. Possible values are ‘yes’ or ‘no’.
You may have noticed movable icon on the left of the widget in layout.
|
no
|
title
|
Optional
|
Title to be displayed.
|
(If no display title is specified, a default title such as “List1” will be used.)
|
pageType
|
Optional
|
Possible values are ‘all’, ‘archive’,’main’,’item’. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)
|
all
|
mobile
|
Optional
|
Possible values are ‘yes’,’no’,’only’ ao ‘default’.Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is 'default.'
|
default
|
Sekarang kembali ke tema yang kami buat, masuk ke tata letak (layout) di menu. Ini akan terlihat seperti di bawah ini.
- Logo
- NewsBar
- Feed
- SingleImage
- BlogArchive
- Blog
- BlogProfile
- Header
- HTML
- LinkList
- List
- Navbar
- VideoBar
Pertama kita akan menambahkan nama blog di bagian atas sidebar. Jadi kita memilih HTML / JavaScript.
Sekarang, ketika kita kembali, kita melihat hasil berikut.
Sekarang selanjutnya, kita akan menambahkan daftar Tautan dengan cara yang sama. Setelah itu, yang utama adalah posting blog. Untuk menampilkan posting blog, kita akan menggunakan widget berikut.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>Lalu masuk posting dan tulis posting baru dan terbitkan. Ketika Anda akan memuat ulang blog Anda, Anda akan melihatnya di sana.
Jika Anda belum menyukai halaman Facebook CSS magz, lakukan seperti itu. Ini akan memberi Anda pemberitahuan setelah posting sudah siap. Jadi begitulah cara Anda membuat tema tampilan yang sangat sederhana di Blogger, Anda dapat membuatnya sedikit profesional seperti dengan css tambahan.
){kind=link}