Artikel Copas 100%

Berbagi seadaanya.

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • Static Page
  • Error Page
Home » Template » Susunan Dasar Template Blogger

Jumat, 13 Juni 2014

Susunan Dasar Template Blogger

Add Comment
Template
Susunan Dasar Template Blogger.com

Posting ini akan menuturkan tentang beberapa bagian dalam struktur pengkodean dasar template Blogger�, dimana obyek template adalah template Blogger� yang diakses melalui �Edit HTML�, sehingga opsi Customize dapat diabaikan. Mungkin diterjemahkan dalam bahasa sederhana artinya apabila ingin merubah sesuatu berkenaan struktur pengkodean, maka dilakukan secara manual. Bentuk sederhana HTML pada sebuah situs web atau blog adalah sebagai berikut.

<html>
<head>
<title>Format Sederhana HTML</title>
</head>
<body>
</body>
</html>

Ketika kode di atas diaplikasikan pada peramban, maka akan terlihat layar kosong & tab peramban akan menampilkan title. Lebih lanjut, tambahkan baris teks dalam body, contoh: Aku adalah tubuh HTML. Layar peramban akan menambahkan sebuah baris teks sesuai dengan apa yang kita tulis di antara <body> � </body>

Deklarasi xml (eXtensible Markup Language)

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

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.

Simpulan

Dengan beberapa ringkasan sederhana di atas, mungkin kita telah dapat menggambarkan bagaimana sebuah blog pada Blogger� dibentuk. Tinggal menambahkan beberapa selector (id dan/atau class) atau elemen-elemen dalam HTML5 (header, article, aside, footer, dan sebagainya) untuk mengapit elemen widget tersebut serta konfigurasi CSS (Cascading Style Sheets) yang dibutuhkan. Sedangkan isi konten kita upayakan agar tetap memberikan tanda, sehingga lebih bermakna bagi pembacanya.
Suka Artikel? Bagikan: Facebook Twitter Google+
0 Komentar untuk "Susunan Dasar Template Blogger"

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Popular Week

  • EDU Backlink
    EDU Backlink
    Backlink .EDU sekarang ini masih menjadi incaran bagi para blogger untuk menaikkan ranking situs/blog mereka, tapi kadang-kadang kita meras...
  • Bosan Dengan Dunia Blogger..
    Bosan Dengan Dunia Blogger..
    Selamat pagi sobat semua.. Mungkin anda sudah merasakan suatu kejenuhan yang anda alami saat ini dengan blog anda mungkin pertama anda membu...
  • About This Tattoo
    About This Tattoo
    Apa itu Tattoo? Dalam Bahasa Indonesia disebut dengan istilah "Rajah". Tattoo merupakan produk dari Body Decorating dengan mengga...
  • Opini Tentang Blog Ini
    Opini Tentang Blog Ini
    Sejauh ini saya sudah merasa bersalah dengan apa yang saya share.  Beberapa hal gak penting terkadang juga saya share sampai sampai sobat bi...
  • Optimasi Posting Blog
    Optimasi Posting Blog
    Yang namanya sebuah blog, tentu tidak terlepas dari posting. Posting dalam blogger merupakan sebuah "entry" yang ditulis dengan me...
  • 7 Apps Android Untuk Pengguna Blogger
    7 Apps Android Untuk Pengguna Blogger
    Dibawah ini adalah 7 AplikasiAdroid yang populer dan banyak digunakan oleh pengguna Blogger. Dan sebagai seorang pengguna blogger tidak ada ...
  • Free Download Smadav 9.3 Pro Full Version + Serial Number
    Free Download Smadav 9.3 Pro Full Version + Serial Number
    Semenjak Blogger saya di hapus saya jarang update di Faceblog jadi ketinggalan software yang sudah update deh, tapi gak apa apa daripada g...
  • Menampilkan Pesan Pada Jam Tertentu
    Menampilkan Pesan Pada Jam Tertentu
    Pernah terpikirkan untuk menampilkan pesan pada jam tertentu (Time Message) pada blog kita? tentu saja ya, Ada kalanya ketika sedang tidak o...
  • Scattered Polaroids Gallery (Tersebar)
    Scattered Polaroids Gallery (Tersebar)
    Sebuah flat bergaya Polaroid Galeri di mana item-item (di sini saya gunakan foto) yang tersebar secara acak dalam sebuah wadah (Container). ...
  • Karma - Creative Landing Page Blogger Templates
    Karma - Creative Landing Page Blogger Templates
    Karma adalah template untuk blogger yang menyediakan banyak fitur yang luar biasa yang paling canggih. Template ini sangat maju, mungkin sed...
Diberdayakan oleh Blogger.

Labels

  • Android
  • Blogging
  • CSS
  • Facebook
  • Game
  • jQuery
  • Komputer
  • Lain-Lain
  • Photoshop
  • SEO
  • Software
  • Template
  • Twitter
  • Widget

Blog Archive

  • ▼  2014 (101)
    • ►  Juli (5)
    • ▼  Juni (10)
      • Microdata Schema org di Template Blogger
      • The FiSEO Magz Blogger Template V.2
      • Optimasi Posting Blog
      • RDFa License Dan Microdata dalam Blog
      • Tabulasi Kode dalam Blog
      • Susunan Dasar Template Blogger
      • Ebook SEO Gratis
      • GOV Backlink
      • EBook Cara Membuat Template Blogger
      • Popular Post Thumbnail Valid HTML5
    • ►  Mei (12)
    • ►  April (12)
    • ►  Maret (11)
    • ►  Februari (14)
    • ►  Januari (37)
  • ►  2013 (71)
    • ►  Desember (13)
    • ►  November (6)
    • ►  Agustus (1)
    • ►  Juni (8)
    • ►  Mei (33)
    • ►  April (10)

Labels

  • Android
  • Blogging
  • CSS
  • Facebook
  • Game
  • jQuery
  • Komputer
  • Lain-Lain
  • Photoshop
  • SEO
  • Software
  • Template
  • Twitter
  • Widget

Labels

  • Android
  • Blogging
  • CSS
  • Facebook
  • Game
  • jQuery
  • Komputer
  • Lain-Lain
  • Photoshop
  • SEO
  • Software
  • Template
  • Twitter
  • Widget

About Me

Unknown
Lihat profil lengkapku or visit on

© Artikel Copas 100% powered by Blogger.com.
All Right Reserved.