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.
#header { }
#header h1 { }
#header h1 a { }
#header .description { }
Langkah 4. Menciptakan halaman Menu Widget
Aku lupa menyebutkan halaman menu widget yang juga penting untuk membuat menu. Bahwa jenis menu hanya menampilkan link tersebut yang sebenarnya halaman dibuat dalam blogger blog. Di blogger template default, itu sebagian besar digunakan begitu di sini saya akan mengajarkan Anda bagaimana kita dapat menerapkan mereka di blog kita. Saya hanya akan memberikan Anda default XML dan HTML coding dan akan menunjukkan kepada Anda cara untuk desain yang dengan CSS. Jika Anda dikenal dengan HTML dan CSS, maka Anda dapat dengan mudah membuat menu kustom ada di mana saja dalam template. Tapi untuk menu Halaman ini, Anda mungkin menghadapi masalah. Mari kita mulai.
Halaman menu widget ini juga dilakukan dengan menciptakan koleksi widget dan widget. Jadi, di bawah saya akan memberikan Anda kode lain yang akan memiliki tag bagian dan akan ada halaman daftar widget yang adalah hal utama. Hanya menempatkan di bawah kode mana saja yang mana Anda ingin muncul bahwa halaman menu widget.
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>Seperti yang kita lakukan dalam Header widget, hal ini juga hanya sepotong kecil tag yang secara otomatis akan lengkap sendiri dengan standar pengkodean. Untuk kustomisasi, ini sederhana, Anda hanya dapat mengambil kelas dan ID tag dari kode di atas dan mulai menulis CSS sendiri untuk mereka. Namun, kali ini aku juga akan memberimu CSS Tag kosong di mana Anda sudah mengisi properti sesuai dengan kebutuhan dan desain yang lebih baik.
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
</b:widget>
</b:section>
.tabs { }
#corsscol { }
#PageList1 { }
#PageList1 ul { }
#PageList1 ul li { }
#PageList1 ul li a { }
Langkah 5. Menciptakan Blog atau konten Widget
Ini adalah utama harus hal yang paling penting dari semua. Di blogger, kami menciptakan sebuah widget default yang adalah sebenarnya posts widget. Dalam tata letak halaman, Anda mungkin telah melihat widget besar bernama posting Blog. Kita dapat dengan mudah membuat widget default blog posting dengan sedikit coding tetapi menyesuaikan yang sesuai dengan kebutuhan kami bisa agak sulit. Pertama-tama, buka html editor di blogger dan paste blog posts widget kode berikut ada.
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
Seperti widget lainnya, kami juga telah membuat bagian untuk widget posting blog. Setelah menyimpan widget ini dalam template, reload editor html akan mendapatkan standar pengkodean blog posts widget secara otomatis. Di sini, memulai dalam menyesuaikan bagian posting sesuai dengan kebutuhan Anda. Lihatlah kelas dan id tag dan menulis CSS untuk tag tersebut untuk mempercantik posting daerah. Ketika Anda akan memperluas widget posting blog, Anda akan mendapatkan banyak tag <b:includable> yang benar-benar di area posting. Akan ada tag includable tertentu yang memiliki id = 'mengirim' andvar = 'mengirim'. Jika Anda memperluas includable tag kemudian itu akan muncul pengkodean posting daerah hanya mana Anda bisa melakukan menyesuaikan dengan mudah.
Langkah 6. Menciptakan Area kustom Gadget seperti Sidebar dan Footer
Lima langkah di atas Anda akan mendapatkan template sederhana tetapi menciptakan area gadget kustom dapat berguna seperti membuat sidebar, footer dan daerah lain diperlukan gadget gadget. Jadi, dalam langkah ini kita akan belajar bagaimana yang dapat kita dengan mudah membuat custom gadget bagian dalam tata letak blogger. Kami hanya akan menulis <b:section> tag di mana kita dapat menambahkan widget lain seperti yang kita inginkan. Buka html editor dan paste kode berikut di manapun Anda ingin membuat area gadget atau bagian.
<b:section class='' id='' maxwidgets='' showaddelement='yes'>Ada tidak ada yang istimewa maka <b:section> tag dalam kode di atas. Kelas dan ID Tag ini kosong di mana Anda dapat menambahkan nama Anda sendiri kustom untuk memanggil CSS untuk bagian tersebut. Anda dapat menggunakan kelas dan ID untuk memanggil CSS dan Kecantikan bagian gadget tersebut dengan menambahkan setiap lebar, tinggi, padding, margin dll. Tag lain, maxwidgets ='' ini juga di mana Anda menulis nomor maksimum seperti 10 sehingga bagian tidak berisi lebih dari 10 widget. Jika Anda ingin menunjukkan Tambah pilihan Gadget yang layout kemudian tetap ya dalam showaddelement tag jika tidak menimpa dengan no.
</b:section>
Langkah 7. Mengatur tata letak halaman
Sementara membuat template, juga mengurus tata letak halaman di blogger blog karena halaman tersebut tergantung pada template blog. Jika Anda melakukan hal-hal dengan benar maka itu tidak akan mendapatkan kacau tapi jika Anda menghadapi masalah maka kita punya solusi untuk ini. Kita dapat mengatur ulang widget dan gadget bagian tidak melalui menggunakan CSS sederhana. Dan untuk apa, saya sudah menulis posting besar memperbaiki blogger tata letak halaman kacau. Untuk mengatur ulang widget dalam tata letak halaman, kita akan menggunakan CSS dan akan seperti ini.
body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID2 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }
1 Comments
trimakasi untuk postingannya menurut saya baik sekali,
ReplyDeletesaya pemula dan ingin bisa membuat template, saya coba membuat desainnya di photoshop dan di bentuk dengan dreamweaver namun hasilnya tidak dapat di terapkan
apa ada yang kurang mhon sarannya/tutorialny mas
(yopiyuspito@gmail.com)