Cara Membuat Template Blogger Dari Awal - Tutorial Langkah demi Langkah

Cara Membuat Template Blog - Membuat blog sangat mudah dengan blogger. Blogger adalah layanan penerbitan blog terkenal yang memungkinkan pengguna untuk membuat blog luar biasa secara gratis. Setelah Anda membuat Akun dan blog Anda tahap awal yang pasti kalian lakukan adalah mendisain tampilan blog Anda dengan menggunakan sebuah template, sebenarnya di blogger sendiri sudah disediakan template defaul yang siap untuk di gunakan.
Memiliki template blogger unik Anda sendiri adalah sesuatu yang luar biasa. Namun, masalahnya adalah sedikit pengetahuan tentang pengkodean HTML, CSS, dan Javascript yang Anda kuasai. Sebenarnya Ini tidak terlalu sulit. Setelah Anda memutuskan untuk belajar "Cara membuat template Blogger dari awal", dengan beberapa konsep dasar, Anda siap untuk mulai.

Bagaimana Cara Membuat Template Blogger untuk pemula?
Memiliki template blogger unik Anda sendiri adalah sesuatu yang mewah. Tetapi muncul pertanyaan - dari mana untuk memulai? Jangan khawatir, Pembahasan kita kali ini akan melihat bagaimana membuat tema blog Blogger dari awal. Jika Anda juga ingin membuat tema sendiri, untuk penggunaan pribadi atau komersial, Anda mungkin memerlukan ini.

Bagian Dasar :

HTML or XML
CSS
JavaScript (jika Anda ingin menambahkan fungsionalitas lebih lanjut ke tema dan elemen-elemennya)

Ayo Mulai

Buat Template Tema Kosong

Kami mulai pertama dengan membuat templat kosong. Selanjutnya kita akan terus menambahkan elemen.

Anda dapat mulai dengan membuat file XML di komputer Anda (penyimpanan lokal) ATAU mulai segera dengan mengetikkan editor HTML Blogger. Saya sarankan menulis langsung di editor HTML Blogger karena Anda dapat menjalankan skrip di sana dan di sisi lain, periksa kesalahan juga.

Sebelum menulis, buat cadangan tema dan konten asli Anda. Untuk itu, ikuti langkah-langkah berikut: -

Go to Blogger.com.
Then select Theme >> Backup/Restore.
Click on Download theme to download the theme.

Tema akan diunduh dalam file .xml, yang dapat Anda kembalikan jika ada hubungannya dalam tema yang sedang Anda buat.

Sekarang untuk menulis tema pertama, Masuk Tema >> Klik Edit HTML.

Anda akan melihat ada kode yang sudah ada dari tema yang ada. Pilih dan tekan delete. Sekarang klik tombol Simpan tema.

Anda akan mendapatkan kesalahan berikut-

Kesalahan saat mem-parsing XML, baris 1, kolom 1: Akhir prematur file.

Itu karena tema Blogger harus berupa file XML dengan semua konten minimal yang diperlukan agar tema berhasil di-render. Mari kita tambahkan komponen minimal ini satu per satu untuk membuat tema kosong pertama kita.

Hal pertama yang Anda butuhkan adalah tag XML, HTML, body, dan head yang umum. Jadi mari kita buat seperti di bawah ini-

<?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>

Sekarang ketika kami mencoba untuk menyimpan skrip ini, Blogger memberikan kesalahan berikut. Seharusnya ada satu dan hanya satu skin dalam tema, dan kami menemukan: 0
Itu berarti harus ada hanya satu skin di tema. Ini adalah komponen utama kedua dari tema. Mari kita membuatnya.

<b:skin>

  </b:skin>

Kami akan menempatkan ini di dalam <head>.
Tag kulit harus berisi semua CSS dokumen. Anda juga dapat meletakkannya di mana saja dalam dokumen, tetapi tag ini penting. Hanya ada dan hanya satu <b: skin> dalam dokumen.

Sekarang mari kita simpan ini. Tapi tunggu, Blogger memberi kita kesalahan lain.
Kami tidak menemukan bagian apa pun dalam tema Anda. Tema harus memiliki setidaknya satu b: tag bagian.

Inilah komponen penting ketiga dari template blogger- <b: section> tag. Tambahkan tag berikut di <body>.

<b:section id='section1'></b:section>

Setidaknya harus ada satu bagian yang menandai templat kami dan setiap bagian harus memiliki id unik.

Klik untuk menyimpan tema. Sekarang Anda dapat melihat blog Anda untuk melihat halaman yang sangat kosong dari template blogger kami.

Banyak dari Anda mungkin bertanya-tanya tentang penggunaan <b: pada tag seperti bagian dan kulit. Izinkan saya memberi tahu Anda, mereka adalah ruang nama yang digunakan di seluruh blogger. Blogger kemudian mengubahnya menjadi elemen <div>.

Membuat Bagian Tema Blogger

Kami telah membuat bagian di atas dengan id yang unik. Mungkin ada banyak bagian di setiap halaman seperti post body, header, sidebar, footer, dan sebagainya. Kami dapat menulis huruf atau menghiasnya dengan menulis CSS di <b: skin> .

Bagian berisi widget. Kita akan melihat bagaimana membuatnya nanti. Mari kita pertama-tama membuat bagian.

Anda dapat memilih desain yang paling umum untuk tema yang memiliki 4 bagian - header, posting blog, sidebar dan footer. Saya ingin membuat tema 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 akan berada di <div>.

<body>

   <b:section id='body'></b:section>
<b:section id='sidebar'></b:section>

Setelah berhasil menyimpan template blogger ini, pergi ke tata letak.

Anda akan melihat 2 bagian sudah dibuat di sana. Sekarang Anda dapat dengan mudah menambahkan widget dari sana. Tapi tunggu! Kita perlu memposisikan bagian sesuai dengan awal kita menggunakan CSS dan untuk itu, kita akan menetapkan kelas untuk bagian kita. Setelah menetapkan kelas, kode akan terlihat seperti di bawah ini. [Tidak ada kebutuhan sebenarnya untuk menetapkan kelas ke bagian karena kita dapat memilih elemen dalam CSS menggunakan id mereka juga.]

<body>

   <b:section id='body' class='body'></b:section>
   <b:section id='sidebar' class='sidebar'></b:section>
 </body>

Oke jadi sekarang kita dapat memposisikan elemen-elemen ini menggunakan CSS. Perhatikan bahwa <b:section> berubah menjadi <div> dengan ID yang ditentukan setelah rendering sehingga Anda dapat memilihnya dalam CSS seperti berikut ini.

div#body{}
div#sidebar{}

Tetapi kami telah menetapkan kelas untuk elemen-elemen ini sehingga lebih mudah untuk memilihnya dengan kelas-kelas.

Menetapkan Posisi Untuk Bagian

Untuk menetapkan posisi untuk bagian-bagian dalam template Blogger kami, kami akan menggunakan beberapa properti CSS dasar seperti tinggi, lebar, kiri, kanan, margin, padding, dll.

<![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;
}

Jadi setelah menambahkan CSS di atas, tema terlihat seperti ini-

Properti bilah samping diatur untuk diperbaiki. Sehingga bilah samping akan diperbaiki tidak peduli bagaimana Anda menggulir ke bawah. Saya telah menambahkan sedikit teks tiruan 'Lorem Ipsum' untuk menggulir dan melihat apakah semuanya berfungsi dengan baik atau tidak.

Anda harus memperhatikan bahwa <![CDATA [dan]]> datang sebelum dan sesudah kode CSS di <b: skin>.
Apa Artinya <! [CDATA []]> Berarti?

Itu berarti CSS tidak akan ditafsirkan sebagai XML. Perhatikan bahwa CDATA juga harus digunakan untuk membungkus JavaScript, atau Blogger mungkin memberi Anda kesalahan.

Atribut Bagian

Satu hal yang tersisa adalah atribut. Di bawah ini adalah tabel atribut yang mungkin dan nilainya yang dapat Anda gunakan dalam tag <b:section>.

Attribute	Required/Optional	Value	Default value
id	Required	Id unik yang terdiri dari huruf dan angka.	(Null)
class	Optional	Nama class dengan huruf dan angka.	(Null)
maxwidgets	Optional	Jumlah maksimum widget yang dapat ditempatkan di sesi. Nilai bisa angka berapa saja.	(Jika Anda tidak menentukan batas, Anda dapat menambahkan widget tanpa batas.)
showaddelement	Optional	Menentukan apakah tab Elemen Halaman akan menampilkan tautan 'Tambahkan Elemen Halaman' di bagian. Nilai yang mungkin adalah ‘yes’ atau ‘no’.	Yes
growth	Optional	Menentukan pengaturan widget. Nilai yang mungkin adalah ‘horizontal’ atau ‘vertikal’.	vertical

Jadi, jika Anda ingin mengubah pengaturan di atas, Anda dapat mengubahnya dengan atribut. Di bawah ini adalah sesi sidebar setelah menambahkan beberapa atribut.

<b:section class='sidebar' id='sidebar' growth='vertical' maxwidgets='10'/>

Menambahkan Widget ke Template Blogger

Sekarang langkah selanjutnya adalah menambahkan widget ke Template Blogger kami. Untuk itu, buka tata letak> pilih bagian dan klik tambahkan gadget. Anda juga dapat menambahkan widget melalui markup.Widgets harus berada di dalam <b:section> dan mereka harus memiliki id unik seperti bagian. Selanjutnya, jenis widget diperlukan atau Blogger akan membuat kesalahan-

Widget baru dengan id "ABC" tidak memiliki tipe. Jenis widget diperlukan saat menambahkan widget baru.

Mari kita lihat atribut di widget. Data di bawah ini tersedia di halaman Bantuan Google Blogger.

Attribute	Required/Optional	Value	Default value
id	Required	Id unik yang terdiri dari huruf dan angka.	(Null)
type	Required	Menunjukkan jenis (type) widget.	(Null)
locked	Optional	Anda dapat mengatur ulang widget di tata letak bila disetel menjadi 'ya'. Saat widget terkunci, kami tidak bisa memindahkan atau menghapusnya. Nilai yang mungkin adalah ‘ya’ atau ‘tidak’. Anda mungkin telah memperhatikan ikon bergerak di sebelah kiri widget dalam tata letak.	no
title	Optional	Judul yang akan ditampilkan.	(If no display title is specified, a default title such as “List1” will be used.)
pageType	Optional	Nilai yang mungkin adalah ‘semua’, ‘arsip’, ’utama’, ’item’. Widget hanya akan ditampilkan di halaman yang ditentukan di blog Anda. (Semua widget ditampilkan pada tab Elemen Halaman, terlepas dari Jenis halamannya.)	all
mobile	Optional	Nilai yang mungkin adalah ‘ya’, ’tidak’, ’hanya’ ao ‘default’. Hanya Header, Blog, Profil, PageList, AdSense, Atribusi akan ditampilkan di seluler ketika atribut seluler adalah 'default.'	default

Jenis yang berbeda akan ditambahkan secara otomatis setelah Anda memilih widget di tata letak > Tambah Gadget. Namun, saya telah memberikan daftar jenis umum (peka huruf besar kecil) di bawah ini, yang dapat Anda gunakan untuk membuat widget.

Logo
NewsBar
Feed
SingleImage
BlogArchive
Blog
BlogProfile
Header
HTML
LinkList
List
Navbar
VideoBar

Sekarang kembali ke tema yang kami buat, pergi ke tata letak di menu. Ini akan terlihat seperti di bawah ini.

Kemudian klik add a gadget untuk menambahkan widget.

Pertama, kita akan menambahkan nama blog di bagian atas sidebar. Jadi kami memilih HTML / JavaScript.

yeee! Sekarang jika Anda ingin semua tag h1-h6 di font Anda sendiri, <input>, <p> dalam desain Anda sendiri, Anda dapat menentukan CSS mereka di <b: skin>.

Sekarang selanjutnya, kita akan menambahkan daftar Tautan dengan cara yang sama. Setelah itu, yang utama adalah posting blog. Untuk menunjukkan posting blog, kita akan menggunakan widget berikut.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Lalu tulis posting baru dan publikasikan. Saat Anda memuat ulang blog Anda, Anda akan melihat hasilnya.

Ini maih tahap paling dasar untuk membuat sebuah template blog! Masih banyak yang harus dilakukan. Jika Anda kembali dan melihat seluruh kode, Anda akan melihat markup yang dibuat secara otomatis di bawah <b: widget>. Mereka termasuk dan termasuk. Jika Anda pernah melihat tema profesional, ada banyak item lainnya.

Jadi begitulah cara membuat template blog yang tampak sangat sederhana di Blogger Anda dapat membuatnya sedikit profesional seperti dengan css tambahan.