Seperti yang kita telah selalu berbicara tentang Blogger dan blogging, hari ini kita akan membuat diskusi panjang pada salah satu pertanyaan yang paling populer ditanyakan blogger.com pengguna bahwa cara membuat template blogger. Banyak blogger yang bertanya kepada saya pertanyaan ini di Facebook dan melalui layanan kontak lainnya jadi saya pikir kenapa tidak saya harus membuat posting yang panjang khusus untuk mereka. Pada dasarnya, hal ini datang dalam Web Desain dan Pengembangan sehingga seseorang harus memiliki keterampilan ini dalam rangka menciptakan template blogger lain membaca dan memahami artikel panjang ini akan sia-sia. Hari ini, saya tidak akan mengambil terlalu banyak waktu Anda dalam diskusi semacam ini jadi mari kita mulai membahas tentang topik utama.
Persyaratan Untuk Membuat Template Blogger
Pertama-tama, saya ingin menyebutkan persyaratan yang setiap orang harus memiliki fordesigning atau membuat template blogger karena setiap orang biasa tidak dapat dengan mudah membuat template blogger dibutuhkan beberapa keterampilan. Hal pertama adalah bahwa, Anda harus tahu Blogger.com sempurna. Cara membuat blog, membuat posting dan halaman, melakukan sedikit penyesuaian, bermain dengan gadget dan juga bagaimana platform ini benar-benar bekerja. Setelah ini, Pengetahuan dasar desain web yang diperlukan di mana HTML dan CSS yang paling penting. Dalam blogger, Kita dapat menggunakan HTML, CSS, XML dan JavaScript. Jika Anda tahu semua bahasa ini maka Anda tidak akan menghadapi masalah dalam merancang template blogger profesional.
Langkah 1. Mempersiapkan Pengujian / Demo Blog Untuk Membuat Template
Ini adalah hal yang umum bahwa sebelum membuat setiap template blogger Anda akan membuat blog demo untuk template itu. Jadi, membuat blog dan mempublikasikan lebih dari 10 + posting di atasnya. Harus ada satu gambar, semua pos, 4-5 paragraf teks, daftar bernomor, daftar peluru dan kutipan di setiap pos. Kami akan merancang ini setiap hal sehingga membuat 10 + posting dengan ini segala sesuatu dan juga mengintegrasikan beberapa widget penting dalam footer atau sidebar. Setelah itu, Anda dapat menggunakan template default di atasnya tapi segera kami akan menghapusnya dan desain template lain di atasnya.
Langkah 2. Memahami Struktur Dasar Template Blogger
Sebelum memulai template kita harus memahami struktur dasar dari template blogger. Kita juga dapat mengatakan bahwa kita akan membuat halaman kosong sederhana blogger template. Jadi, saya sudah mempersiapkan coding dasar yang akan membantu Anda untuk memahami struktur dasar.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
</body>
</html>
Di atas kode dasar, Anda akan melihat bahwa ada XML dan HTML Tag dalam memulai yang berarti bahwa ini dibangun dengan XML dan HTML. Ekstensi utama untuk pengkodean ini akan.XML. jika Anda menyalin kode di atas dan paste dengan seluruh pengkodean dari template itu itu akan disimpan dan akan menunjukkan apa-apa di blog karena ini adalah sederhana halaman HTML kosong. Mari kita memahami struktur dasar.
1. XML dan HTML Tag: seperti yang saya sudah bilang bahwa XML dan HTML tags adalah tag utama di mana seluruh template akan disimpan. Jika kita ingin menyelamatkan template ini di komputer maka kita akan memilih.XML ekstensi sementara menghemat karena blogger hanya mendukung.XML file template.
2. panjang <title>Coding: jika Anda melihat judul kode di bawah ini <head>Anda akan melihat lama pengkodean antara <title>tag. Pada dasarnya, ini adalah judul disesuaikan pengkodean yang memiliki banyak manfaat. Kami telah menggunakan tag bersyarat untuk menyesuaikan judul ini coding. Kondisi pertama memberitahu bahwa jika seseorang membuka homepage atau halaman indeks utama maka akan menulis judul blog sebagai judul halaman web. Kondisi kedua adalah untuk menunjukkan judul posting atau halaman pertama dan menunjukkan judul blog setelah judul posting atau halaman. Terakhir, ada 404 kesalahan halaman judul pengkodean.
3. <b:skin> tag untuk menyimpan Stylesheet: ada tambahan dibangun di tag untuk blogger template menggunakan <b:skin> tag dengan CDATA untuk menyimpan seluruh CSS atau stylesheet blog. Dalam tag, Anda hanya akan melihat CSS yang sedang digunakan di seluruh blog. Jadi, setiap CSS yang kau akan menulis harus ditempatkan dalam tag.
4. <b:section> tag untuk widget: di blogger, kita menggunakan tag untuk membuat widget. Hal-hal yang paling penting seperti judul Blog dan isi dilakukan dengan menerapkan widget dalam template. Singkatnya, ada widget default yang untuk Header dan konten Blog yang kita gunakan ketika membuat template. Untuk membuat widget, kami harus menutupi mereka dengan tag <b:section> yang akan membantu kita untuk mempersiapkan tata letak halaman.
Langkah 3. Membuat Header
Setelah mempelajari struktur dasar, mari kita mulai dengan membuat header dari blog. Pada dasarnya, ada dua hal yang penting untuk menciptakan blogger template. Pertama adalah Header dan kedua adalah konten Blog. Hal-hal lain juga penting, tetapi ini adalah orang-orang kebanyakan. Kami akan menggunakan widget Header kustom dan akan menyesuaikannya sesuai dengan kebutuhan kita. Pada dasarnya, Header adalah widget dan Anda tahu untuk membuat widget, kami harus membuat bagian untuk satu atau beberapa widget. Salin kode di bawah ini dan paste di mana saja di <body>template yang mana Anda ingin menampilkan Header widget.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
Coding di atas bukanlah lengkap coding Header tetapi ketika Anda akan mengintegrasikan kode di atas dalam template maka secara otomatis akan menjadi lebih lama. Simpan template ini, reload halaman Edit HTML dan Anda akan melihat memperluas panah di sebelah kiri dari <b:widget> tag. Blogger akan secara otomatis menulis standar pengkodean di atasnya. Jadi, mari kita memahami ini header coding.
1. <b:section> memiliki kelas = 'header' dan id = 'header': pertama-tama di bagian tag, Anda akan melihat kelas = 'header' dan id = 'header' yang umum CSS kelas dan id tag. Jadi, dengan bantuan Tag ini, Anda dapat melakukan penyesuaian header seperti memberikan lebar tertentu, ketinggian, margin, padding, ukuran font, warna dll ke bagian header hanya.
2. <b:section> memiliki maxwidgets = '1': saya tidak perlu menjelaskan hal-hal sederhana, tetapi untuk benar-benar pemula saya akan menjelaskan itu. Ada tag XML lain blogger yang ismaxwidgets = '1' dengan ini, kita hanya dapat menetapkan jumlah maksimum widget di bagian tersebut hanya mengganti nomor 1.
3. <b:section> memiliki showaddelement = 'tidak': ini adalah tag sederhana lain yang kita dapat menonaktifkan atau mengaktifkan Tambahkan opsi Gadget.
4. <b:widget> memiliki id = 'Header1': dalam header widget, ada CSS id tag yang kita menyesuaikan header widget dengan CSS.
5. <b:widget> memiliki terkunci = 'benar': tag ini memungkinkan Anda untuk mengunci dan membuka widget dengan mudah dengan memilih true atau false. Ketika widget terkunci, salah satu tidak dapat dengan mudah mengedit yang melalui tata letak halaman.
Pengaturan saat ini untuk header widget dan bagian halus sehingga kita tidak akan mengedit mereka. Di bawah ini, aku akan memberimu kelas dan ID CSS tag yang akan membantu Anda untuk menyesuaikan header widget. Sederhana, tambahkan ini di bawah CSS antara <b:skin> tag dan mengisinya dengan properti Anda sendiri.
