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!
<? 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!
.jpg)
0 komentar:
Posting Komentar