Breaking News
Loading...

Kode Dasar Template Blogger Buatan Sendiri



 Kode Dasar Template Blogger Buatan Sendiri - Setelah kemarin anda telah belajar Susunan Dasar Pemrograman HTML Untuk Template Blogger dan telah membuat template anda sendiri sekarang kita akan beri beberapa kode agar template yang tadi anda buat bisa berjalan di blogger. Karena kode-kode di bawah ini sangat sensitif, anda harus teliti dalam menaruhnya dan ikuti semua petunjuk.


Deklarasi xml (eXtensible Markup Language)

XML (eXtensible Markup Language) merupakan sebuah himpunan bagian (subset) dari Standard Generalized Markup Language (SGML), yang bertujuan agar SGML secara generik dapat melayani, menerima, dan memproses dalam Web dengan cara seperti yang dimungkinkan HyperText Markup Language (HTML) saat ini.
XML dirancang untuk kemudahan implementasi dan untuk interoperabilitas dengan SGML dan HTML. Jadi XML adalah bahasa markup yang dirancang khusus untuk penyampaian informasi melalui World Wide Web, persis seperti HTML (Hypertext Markup Language), yang telah menjadi bahasa standar untuk membuat halaman web sejak awal kehadiran web.

<?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'>


Ketika kita ingin memasukkan daerah geografi atau bahasa yang didukung oleh konten dalam HTML — tidak perlu menambahkan meta — cukup sisipkan tag lang, contoh: lang='id', lang='en', lang='en-us', lang='fr', dan sebagainya.

<html 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'>

Kode di atas kita taruh di atas atau sebelum kode <html>.

Elemen Head

Head HTML berisi sejumlah markah yang meliputi script, instruksi kepada peramban untuk menemukan stylesheets, memberikan informasi meta, dan lain-lain.

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
  <meta content='' name=''/>
  <link href='' rel='' type=''/>
  <script src='' type=''/>
  <b:skin><![CDATA[ /* CSS Anda di sini */
body {
  background: #fff;
  color: #000;
  font: .875em/1.7143em Georgia, Times, "Times New Roman", serif;
  text-align: left;
  word-spacing: .075em;
}
… dan seterusnya …
  ]]></b:skin>
 </head>


Elemen Body

Body HTML merupakan tubuh dari HTML (HyperText Markup Language) yang akan menampilkan bentuk pengkodean pada layar peramban. Sedangkan beberapa elemen yang melingkupinya dapat kita uraikan sebagai berikut.

<body expr:class='"loading" + data:blog.mobileClass'>

Navbar

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
  <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

Header

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

Main (Posting Blog)

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Sidebar

<b:section class='sidebar' id='sidebar' preferred='yes'/>

Footer

<b:section class='footer' id='footer' showaddelement='no'>
  <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Dari beberapa markah elemen di atas, biasanya untuk menampilkan halaman posting atau halaman statis pada blog, minimal harus ada elemen widget main (posting blog). Sedangkan yang lain dapat dikustomisasi manual, seperti header dapat saja berisi title serta tagline, fungsi fitur navbar dapat kita matikan, dan lain-lain.

Sekian post kali ini, semoga dengan pembelajaran ini dapat memudahkan anda yang sedang belaja membuat template blog sendiri.
Template Kaka Responsive V.1. Blogger Modis
Copyright © 2013. Blogger Modis - Proudly powered by Blogger - All Rights Reserved