Ini Nih Cara Membuat Template Blogger dari Nol!


Cara Membuat Template Blogger dari Nol!

Kita sering melihat atau mencoba membuat sebuah blog.. tapi terkadang terbersit pertanyaan bagaimana ya cara membuat atau meng-custom desain blogspot kita sendiri? tentunya sesuai yang kita mau, pertanyan ini sering terlintas khususnya di pikiran para webdesigner. Artikel kali ini kita akan bahas bagaimana cara membuat template blogger dari nol.

Langkah 1. Mempersiapkan Testing/Demo Blog Untuk Membuat Template
Ini 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, list bernomor,
list bullet 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 Blogger
Sebelum 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='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 == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <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>

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.

Langkah 3. Membuat header
Setelah 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' locked='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 header widget. Cukup, menambahkan ini di bawah CSS antara <b: skin> tag dan mengisinya dengan properties Anda sendiri.

#header {  }

#header h1 {  }

#header h1 a {  }

#header .description {  }

Saya lupa menyebutkan widget menu halaman yang juga penting untuk membuat menu. Bahwa jenis menu hanya menampilkan link tersebut yang sesungguhnya merupakan halaman yang dibuat di blog blogger. Default blogger template, 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 custom di mana saja di template. Tapi untuk menu halaman ini, Anda mungkin menghadapi masalah. Mari kita mulai.

Langkah 4. Membuat Halaman menu Widget
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. Cukup tempatkan di bawah coding mana saja di mana yang ingin Anda munculkan itu widget menu dalam halaman.


<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
        <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
       </b:widget>
</b:section>

Seperti yang kita lakukan di widget Header, ini juga hanya bagian kecil dari tag yang secara otomatis akan melengkapi diri dengan encoding default. Untuk kustomisasi, sangat sederhana Anda hanya dapat mengambil ID dan tag class 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 untuk desain yang lebih baik.

.tabs {  }
#corsscol {  }
#PageList1 {  }
#PageList1 ul {  }
#PageList1 ul li {  }
#PageList1 ul li a {  }

Ini adalah hal utama yang harus penting sebagian besar dari semua. Di blogger, kita membuat widget standar yang posting sebenarnya widget. Di dalam halaman Layout, Anda mungkin telah melihat widget bernama besar Posting Blog. Kita bisa dengan mudah membuat standar posting blog widget dengan sedikit coding tapi mengkustomisasi itu sesuai dengan kebutuhan kita mungkin sedikit sulit. Pertama-tama, membuka editor html di blogger dan paste berikut posting blog kode widget di sana.

Step 5. Creating Blog or Content Widget
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, mulai dalam menyesuaikan tulisan bagian sesuai dengan kebutuhan Anda. Lihatlah class dan untuk ID tag dan menulis CSS untuk tag tersebut untuk mempercantik area posting. Ketika Anda akan memperluas posting blog widget, Anda akan mendapatkan banyak <b: includable> tag yang sebenarnya area posting. Akan ada spesifik tag memiliki includable id = 'post' dan untuk var = 'post'. Jika Anda expand pada tag includable maka akan munculkan pengkodean area posting hanya di mana Anda bisa melakukan customisasi dengan mudah.

Langkah 6. Membuat Gadget Kustom Area Anda seperti Sidebar dan Footer
5 langkah tersebut di atas akan mendapatkan template sederhana namun menciptakan area posting gadget custom 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 custom 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 section.
 


<b:section class='' id='' maxwidgets='' showaddelement='yes'>

</b:section>

Tidak ada yang khusus maka <b: section> tag di coding di atas. class 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 section 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 Layout kemudian tetap ya di tag showaddelement jika menimpanya dengan pilihan No.

Langkah 7. Setting Page Layout
Sementara 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 dapat mengatur widget dan bagian gadget melalui menggunakan CSS sangat sederhana.


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 }

Advance GuideSiapapun 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.

Final Words
Jadi teman-teman, itulah cara kita dapat dengan mudah membuat template blogger dari awal. Selamat Mencoba!! ^_^

7 comments

  1. wih mantep gan
    kunjungi juga ya blog ku
    http://abiputral.blogspot.co.id/

    ReplyDelete
  2. Good job. Sukses selalu untuk kita semua.

    Untuk yang newbe banget, mungkin bisa belajar dan diskusi bareng di sini.

    ReplyDelete
  3. Penjelasan yang ringkas dan ringan jadi gampang dipahami. Selama ini saya selalu kesulitan untuk buat template sendiri. Meski copas kode, tetap tdk mengerti. Terimakasih ya

    ReplyDelete