Membuat Template Dasar Blogger

Membuat Template Dasar Blogger
Theme Blogger <code>


Getcond Blogger, Blogger atau Blogspot adalah platform blogging yang dimiliki oleh Google. Ini memungkinkan pengguna untuk membuat dan mengelola blog mereka dengan mudah.

Selain itu, menyediakan alat dan fitur yang sederhana untuk membuat konten dan membagikannya ke dunia. Yang terkenal dari blogger fitur bawaannya yaitu widgetnya baca juga. Dari Segi tampilan template atau tema menurut saya pribadi dari template atau tema bawaan dari blogger mengusung tema simplify tampilan blog personal. Maka untuk itu untuk membuat tema blogger mudah atau Susah? Ada banyak sekali tema bawaan dari blogger mulai dari Contempo, Soho, Emporio, Notable, Essential, Simple, Dynamic Views, Picture Window, Awesome Inc, Watermark, Etheral, dan Travel.


Tema Blogger

Kode tema blogger menggunakan bahasa xml (eXtensible Markup Language) untuk mempresentasikan baik menyimpan data atau mengangkut data, mengatur tampilan dsb. Sayangnya XML lebih berfokus pada representasi data hierarkis dan bukan pada logika aplikasi atau pemrograman server-side, kecuali lewat pihak ketiga. XML blogger hanya mendukung bahasa HTML, CSS dan Javascript. Untuk itu kamu harus tahu minimal dasar dari HTML, CSS dan Javascript (opsional) untuk membuat tema pada blogger. Saya berikan contoh kode tema blogger, berikut kodenya.


Kode Awal

HTML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:layoutsVersion='3' lang='id' 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>
<!-- Title -->
<title>Tema Web Blogger First Blogger</title>
<meta charset='UTF-8' />
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3' name='viewport' />
  <b:if cond='!data:view:isLayoutMode'>
    <b:skin><![CDATA[
	
	  <!-- CSS For Web Page -->
 
 ]]></b:skin>
  </b:if>
    <!-- CSS For Layout Section-->
    <b:if cond='!data:view:isLayoutMode'>
	
    <b:template-skin><![CDATA[

	]]></b:template-skin>
      </b:if>
</head>
<body>
<style>

<!-- CSS For Content -->

</style>
<!-- Content Website -->
<b:section class='topnav' id='navbar' name='navigation' showaddelement='true'>
 <b:widget cond='data:view.isMultipleItems or data:view.isSingleItem' id='LinkList1' locked='true' title='Navigation' type='LinkList' version='1'>
 </b:widget>
</b:section>
<!-- Blog Main -->
<b:section class='blog-container' id='blogcontents' name='blog entries' showaddelements='true'>
 <b:widget cond='data:view.isSingleItem' id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='1'>
 </b:widget>
</b:section>
<!-- Footer Section -->
<b:section class='footer-row' id='footer1' name='footer' showaddelement='true'>
 <b:widget cond='data:view.isMultipleItems or data:view.isSingleItem' id='HTML2' locked='true' title='Addres' type='HTML' version='1'>
 </b:widget>
</b:section>
</body>
</html>


Keterangan

  1. Baris pertama menyatakan versi XML dan encoding yang digunakan.
  2. Baris kedua menyatakan tipe dokumen sebagai HTML
  3. Mendefinisikan elemen HTML dengan beberapa atribut tambahan untuk Blogger.
  4. b:layoutsVersion, lang, dan beberapa atribut lainnya berkaitan dengan konfigurasi dan pengaturan Blogger.
  5. Mendefinisikan elemen <head> yang berisi informasi meta dan pengaturan tampilan.
  6. Menentukan judul halaman, pengaturan karakter, dan konfigurasi viewport.
  7. Menggunakan kondisi Blogger (b:if) untuk menyertakan CSS jika tidak dalam mode tata letak (layout mode).
  8. Menambahkan gaya CSS khusus untuk konten blog.
  9. Mendefinisikan tiga bagian utama: navigasi, konten utama blog, dan footer.
  10. Menggunakan widget Blogger (b:widget) untuk menyusun elemen-elemen di dalam setiap bagian.

Kode ini memberikan kerangka dasar untuk tata letak dan tampilan blog di Blogger. Kode XML di atas membentuk struktur dasar tema Blogger. Anda dapat menyesuaikannya dengan menambahkan, mengubah, atau menghapus elemen sesuai dengan desain dan kebutuhan spesifik tema Anda.

Posting Komentar

Lebih baru Lebih lama

Advertisement

Formulir Kontak