Cara Membuat Template Blogger
Seperti
yang telah kita selalu berbicara tentang Blogger dan blogging, hari ini
kita akan membuat diskusi panjang di salah satu pertanyaan paling
populer bertanya blogger.com pengguna yang cara membuat template
blogger. Banyak
blogger telah meminta 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
jenis diskusi jadi mari kita mulai membahas tentang topik utama.Persyaratan Untuk Membuat Template BloggerPertama-tama,
saya ingin menyebutkan persyaratan yang setiap orang harus memiliki
untuk merancang atau membuat template blogger karena setiap orang biasa
tidak dapat dengan mudah membuat blogger template perlu beberapa
keterampilan. Hal pertama adalah bahwa, Anda harus tahu Blogger.com sempurna. Cara
membuat blog, membuat tulisan dan halaman, melakukan kustomisasi
sedikit, bermain dengan gadget dan juga bagaimana platform ini
benar-benar bekerja. Setelah ini, Pengetahuan dasar desain web diperlukan di mana HTML dan CSS yang paling penting. Di 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 TemplateIni adalah hal yang umum bahwa sebelum membuat 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 masing-masing dan setiap hal sehingga membuat 10 +
posting dengan ini semua hal 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 Dasar Struktur Template BloggerSebelum memulai template kita harus memahami struktur dasar dari template blogger. Kami juga bisa 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 =: xmlns 'http //www.google.com/2005/gml/b': data = 'http: // www .google.com / 2005 / GML / 'xmlns: expr =' Data http: //www.google.com/2005/gml/expr '>
<Head>
<B: include data = 'blog' name = 'all-head-content' />
<Title>
<B: if 'data: blog.pageType == & quot; index & quot;' = cond>
<Data: blog.pageTitle />
<B: else />
<B: if 'Data: blog.pageType = & quot; error_page & quot;' = cond>
<Data: blog.pageName /> | <data: blog.title />
<B: else />
Halaman Tidak Ditemukan | <data: blog.title />
</ B: if>
</ B: if>
</ Title>
<B: skin> <! [CDATA [
body {
background: white;
warna: hitam;
}
# Navbar1 {dispaly: none penting;!}
]]> </ B: skin>
</ Head>
<Body>
<B: section class = 'navbar' id = 'navbar' maxwidgets = '1' showaddelement = 'no'>
<B: widget id = 'Navbar1' terkunci = judul 'benar' = 'Navbar' type = 'Navbar' />
</ B: section>
</ Body>
</ Html>
Dalam
coding dasar di atas, Anda akan melihat bahwa ada XML dan HTML tag di
awal yang berarti bahwa ini dibangun dengan XML dan HTML. Perpanjangan utama untuk coding ini akan .XML. Jika
Anda menyalin coding di atas dan paste dengan seluruh coding dari
template maka akan disimpan dan akan menampilkan apa-apa di blog karena
ini adalah sederhana halaman HTML kosong. Mari kita memahami struktur dasar.
1.
XML dan HTML tags: Seperti yang saya sudah katakan bahwa XML dan HTML
tag adalah tag utama di mana seluruh template akan disimpan. Jika kita ingin menyimpan template ini di komputer maka kita akan
memilih ekstensi .XML sambil menyimpan karena blogger hanya mendukung
.XML berkas template.
2.
Panjang <title> Coding: Jika Anda melihat dalam kode judul di
bawah <head> Anda akan melihat coding panjang antara <title>
tag. Pada dasarnya, itu disesuaikan judul coding yang memiliki banyak manfaat. Kami telah menggunakan tag kondisional untuk menyesuaikan judul coding ini. Kondisi
pertama mengatakan bahwa jika seseorang membuka homepage atau indeks
halaman utama maka akan menulis judul blog sebagai judul halaman web. Kondisi
kedua adalah untuk menunjukkan pos atau judul halaman pertama dan
menunjukkan judul blog setelah posting atau judul halaman. Pada yang terakhir, ada 404 judul halaman error coding.
3.
<b: skin> Tag Untuk Menyimpan Stylesheet: Ada tambahan dibangun
di tag untuk blogger template untuk menggunakan <b: skin> tag
dengan CDATA untuk menyimpan seluruh CSS atau stylesheet dari blog. Dalam tag ini, Anda hanya akan melihat CSS yang digunakan dalam seluruh blog. Jadi, setiap CSS yang akan Anda tulis harus ditempatkan dalam tag ini.
4. <b: section> Tag Untuk Widget: Di blogger, kita menggunakan tag untuk membuat widget. Hal yang paling penting seperti Judul Blog dan Konten dilakukan dengan menerapkan widget di template. Singkatnya, ada widget default yang untuk Header dan Blog Content yang kita gunakan saat membuat template. Untuk membuat widget, kita harus menutupi mereka dengan <b:
section> tag yang akan membantu kita untuk mempersiapkan tata letak
halaman.Langkah 3. Membuat headerSetelah mengetahui struktur dasar, mari kita mulai dengan membuat header blog. Pada dasarnya, ada dua hal penting untuk membuat template blogger. Pertama adalah Header dan yang kedua adalah Blog Content. Hal-hal lain yang juga penting tetapi ini paling yang. Kami akan menggunakan widget kustom Header dan akan menyesuaikan sesuai dengan kebutuhan kita. Pada
dasarnya, Header adalah widget dan Anda tahu untuk membuat widget, kita
harus membuat bagian untuk widget satu atau beberapa. Salin kode di bawah dan paste di mana saja di <body> template di mana Anda ingin menampilkan widget Header.
<B: section class = 'header' id = 'header' maxwidgets = '1' showaddelement = 'no'>
<B: widget id = 'Header1' terkunci = 'true' title = '' type = 'header'> </ b: widget>
</ B: section>
Coding
di atas tidak coding lengkap header tetapi ketika Anda akan
mengintegrasikan coding di atas dalam template maka otomatis akan
menjadi lebih lama. Simpan template ini, reload halaman Edit HTML dan Anda akan melihat memperluas panah di sisi kiri <b: widget> tag. Blogger secara otomatis akan menulis coding default pada itu. Jadi, mari kita memahami header ini coding.
1.
<b: section> memiliki class = 'header' dan id = 'header':
Pertama-tama, di tag bagian, Anda akan melihat class = 'header' dan id =
'header' yang kelas CSS umum dan tag id. Jadi, dengan bantuan tag ini, Anda dapat melakukan kustomisasi header
seperti memberikan lebar tertentu, tinggi, margin, padding, ukuran font,
warna dll untuk bagian header saja.
2.
<b: section> memiliki maxwidgets = '1': Saya tidak perlu
menjelaskan hal-hal sederhana, tetapi untuk benar-benar pemula saya akan
menjelaskannya. Ada tag XML lain blogger yang maxwidgets = '1' dengan ini, kita hanya
bisa mengatur jumlah widget maksimum di bagian yang hanya mengganti
nomor 1.
3. <b: section> memiliki showaddelement = 'no': Ini hanyalah tag
sederhana yang kita dapat menonaktifkan atau mengaktifkan Tambahkan
pilihan Gadget.
4. <b: widget> memiliki id = 'Header1': Dalam widget header, ada
tag CSS id yang kita menyesuaikan widget header dengan CSS.
5.
<b: widget> setelah terkunci = 'benar': Tag ini memungkinkan Anda
untuk mengunci dan membuka widget mudah dengan memilih benar atau
salah. Ketika widget terkunci, seseorang tidak dapat dengan mudah mengedit bahwa melalui tata letak halaman.
Pengaturan saat ini widget header dan bagian-baik saja sehingga kita tidak akan mengeditnya. Di bawah, saya akan memberikan kelas dan ID CSS tag yang akan membantu Anda untuk menyesuaikan widget sundulan. Cukup, menambahkan ini di bawah CSS antara <b: skin> tag dan mengisinya dengan sifat Anda sendiri.
#header {}
#header h1 {}
#header h1 a {}
#header .description {}
Langkah 4. Membuat Halaman menu WidgetAku lupa menyebutkan widget menu halaman yang juga penting untuk membuat menu. Semacam itu menu hanya menampilkan link tersebut yang sebenarnya halaman yang dibuat di blog blogger. Default
blogger template, itu sebagian besar digunakan jadi di sini saya akan
mengajarkan Anda bagaimana kita bisa menerapkannya dalam blog kita. Saya hanya akan memberikan Anda default XML dan HTML coding dan akan menunjukkan jalan Anda untuk merancang itu dengan CSS. Jika Anda dikenal dengan HTML dan CSS maka Anda dapat dengan mudah membuat menu kustom ada di mana saja di template. Tapi untuk menu halaman ini, Anda mungkin menghadapi masalah. Mari kita mulai.
Widget menu halaman ini juga dilakukan dengan membuat widget bagian dan widget. Jadi,
di bawah ini saya akan memberikan kode lain yang akan memiliki bagian
tag dan akan ada halaman daftar widget yang merupakan hal utama. Hanya menempatkan di bawah coding mana saja di mana Anda ingin muncul bahwa widget menu halaman.
<B: section class = 'tab' id = 'crosscol' maxwidgets = '1' showaddelement = 'yes'>
<B: widget id = 'PageList1' = terkunci 'palsu' title = tipe 'Pages' = 'PageList'>
</ B: widget>
</ B: section>
Seperti
yang kita lakukan di widget Header, ini juga hanya sepotong kecil dari
tag yang secara otomatis akan melengkapi diri dengan coding default. Untuk
kustomisasi, itu sederhana Anda hanya dapat mengambil ID dan tag Kelas
dari kode di atas dan mulai menulis CSS Anda sendiri untuk mereka. Tapi, kali ini saya juga akan memberikan CSS tag kosong di mana
Anda sudah mengisi properti sesuai dengan kebutuhan Anda dan desain yang
lebih baik.
.tabs {}
#corsscol {}
# PageList1 {}
# PageList1 ul {}
# PageList1 ul li {}
# PageList1 ul li a {}
Langkah 5. Menciptakan Blog atau Konten WidgetIni adalah hal utama yang harus penting sebagian besar dari semua. Di blogger, kita membuat widget standar yang posting sebenarnya widget. Di halaman tata letak, Anda mungkin telah melihat widget bernama besar Posting Blog. Kita
bisa dengan mudah membuat standar posting blog widget dengan sedikit
coding tapi menyesuaikan yang sesuai dengan kebutuhan kita dapat sedikit
sulit. Pertama-tama, membuka editor html di blogger dan paste berikut posting blog kode widget di sana.
<B: section class = 'main' id = 'main' = disukai 'ya' showaddelement = 'no'>
<B: widget id = 'Blog1' locked = judul 'benar' = 'Blog Posts' type = 'Blog'>
</ B: widget>
</ B: section>
Sama seperti widget lainnya, kami juga menciptakan bagian untuk itu widget posting blog. Setelah
menyimpan widget ini dalam template, reload editor html akan
mendapatkan coding default posting blog widget secara otomatis. Di sini, memulai dalam menyesuaikan tulisan bagian sesuai dengan kebutuhan Anda. Lihatlah kelas dan id tag dan menulis CSS untuk tag tersebut untuk mempercantik tulisan daerah. Ketika
Anda akan memperluas posting blog widget, Anda akan mendapatkan banyak
<b: includable> tag yang sebenarnya dalam posting daerah. Akan ada spesifik tag memiliki includable id = 'post' dan var = 'post'. Jika Anda memperluas bahwa tag includable maka akan muncul pengkodean
posting daerah hanya di mana Anda bisa melakukan menyesuaikan dengan
mudah.Langkah 6. Membuat Gadget Kustom Area Anda suka Sidebar dan FooterDi
atas lima langkah akan mendapatkan template sederhana namun menciptakan
wilayah gadget kustom dapat berguna seperti membuat sidebar, footer dan
daerah gadget diperlukan gadget lainnya. Jadi,
pada langkah ini kita akan belajar bahwa bagaimana kita bisa dengan
mudah membuat bagian gadget kustom dalam tata letak blogger. Kami hanya akan menulis <b: section> tag di mana kita dapat menambahkan widget sebagai lebih seperti yang kita inginkan. Pergi ke Editor html dan paste kode berikut di mana saja Anda ingin membuat area gadget atau bagian.
<B: section class = '' id = '' maxwidgets = '' showaddelement = 'yes'>
</ B: section>
Tidak ada yang khusus maka <b: section> tag di coding di atas. Kelas dan ID tag yang kosong di mana Anda dapat menambahkan nama kustom Anda sendiri untuk memanggil CSS untuk bagian itu. Anda
dapat menggunakan kelas dan ID untuk memanggil CSS dan keindahan yang
gadget bagian dengan menambahkan setiap lebar, tinggi, padding, margin
yang dll tag lain, maxwidgets = '' juga di mana Anda menulis jumlah
maksimum seperti 10 sehingga bagian tersebut tidak akan berisi lebih dari 10 widget. Jika Anda ingin menunjukkan Tambahkan pilihan Gadget di tata letak
kemudian tetap ya di tag showaddelement jika menimpanya tanpa.Langkah 7. Menyiapkan Page LayoutSementara membuat template, juga mengurus tata letak halaman di blog blogger karena halaman yang tergantung pada template blog. Jika
Anda melakukan hal-hal dengan benar maka tidak akan kacau tapi jika
Anda menghadapi masalah maka kita sudah solusi untuk ini. Kita bisa mengatur ulang widget dan bagian gadget ada melalui menggunakan CSS sederhana. Dan untuk apa, saya sudah menulis pos besar pada memperbaiki tata letak halaman blogger kacau. Untuk menata ulang widget di halaman tata letak, kami akan menggunakan CSS dan itu akan menjadi seperti ini.
tubuh # tata letak #widgetID {Properties Untuk Widget Pada Page Layout Goes Here}
tubuh # tata letak # widgetID2 {Properties Untuk Widget Pada Page Layout Goes Here}
tubuh # tata letak # widgetID3 {Properties Untuk Widget Pada Page Layout Goes Here}
tubuh # tata letak # widgetID3 {Properties Untuk Widget Pada Page Layout Goes Here}
Petunjuk LanjutSiapapun
yang memiliki pengetahuan dasar tentang mendesain web dapat
mengembangkan blogger template hanya dengan menggunakan HTML sederhana
dan CSS. Pemula
mungkin menghadapi masalah dalam memahami struktur template blogger
tetapi jika Anda tetap melakukan latihan maka Anda dalam beberapa hari,
Anda bisa menjadi ahli dalam hal itu. Mereka
web desainer yang dapat membuat HTML Template atau tema lainnya
platform blogging maka saya tidak berpikir mereka akan menghadapi
masalah. Bahkan merancang template blogger adalah salah satu yang paling platform yang paling mudah daripada yang lain.
Di atas kita hanya menciptakan sederhana blogger template yang berisi tulisan header, menu halaman dan blog. Tidak ada sidebar dan footer di template di atas. Anda
dapat membuat sidebar dengan memberikan lebar khusus untuk posting
widget, mengapung posting blog widget ke kiri dan membuat bagian lain
yang akan sidebar. Anda
harus mengapung sidebar di kanan dan juga memberikan lebar tersebut
kepada orang-orang posting blog dan bagian sidebar yang kedua ini harus
sesuai pada daerah. Anda dapat melakukan lebih banyak percobaan dengan blogger template
desain dan juga Anda dapat menutupi setiap bagian widget dengan tag HTML
div tertentu.
Sementara
menciptakan blogger template, kadang-kadang saya menggunakan Inspect
Element di Google Chrome yang umum alat coding dan membantu untuk
mengedit halaman Web manapun. Ini juga akan membantu Anda untuk menemukan kelas dan ID tag spesifik apa pun dan Anda dapat menyesuaikan mereka melalui CSS.Kata-kata akhirJadi teman-teman, itu bagaimana kita dapat dengan mudah membuat template blogger dari awal. Ini
adalah dasar-dasar membuat template blogger tapi saya sarankan Anda
untuk terus melakukan latihan yang akan membantu Anda untuk lebih nyaman
dalam coding blogger template. Saya berharap buku kecil ini akan membantu Anda dalam memahami struktur blogger template dan merancang mereka. Jika Anda baik dalam desain web maka Anda bisa menjadi profesional blogger template designer. Best of luck dalam mengembangkan blogger template. Semoga harimu menyenangkan!
