Kerangka Blogger Template Terbaru

Apakah itu Kerangka Template

Kerangka template blogger adalah susunan dasar yang akan tampil di blog kita, berisi kode xml yang akan dirender otomatis oleh blogger.com dengan struktur data yang telah ditetapkan oleh blogger.

Dengan kerangka template ini kita bisa mengatur semau kita apa yang akan tampil di blog dan apa yang tidak ingin ditampilkan, dengan kerangka ini pula kita bisa mengatur tampilan blog sesuai apa yang kita inginkan.

kerangka dasar template blogger

Tujuan Menggunakan Kerangka Template

Dalam hal ini tujuan utama menggunakan kerangka blogger adalah memahami struktur data yang ada di blogger, karena data inilah yang akan bisa tampil di blog. Dengan mengolah data-data itu kita bisa mengatur tampilan blog sesuai keinginan kita.

Kerangka Dasar Blogger Template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='2.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.localeUnderscoreDelimited' 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>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <title><data:view.title.escaped/></title>
    <b:include data='blog' name='all-head-content'/>

<b:skin version='2.0.0'><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:         Belajar Theme
Version:      1.0.0 - Free
Author:       Member of Blogger
-----------------------------------------------*/
/*! CSS disini */

]]></b:skin>

<b:template-skin>
<![CDATA[
/* CSS dashbor admin */
body#layout .hidden,
body#layout .invisible {
display: inherit;
}

]]>
</b:template-skin>
</head>
<body>
<header class="top-container" role="banner">
<!-- Blog header -->
    <b:section id='header' name='Header' showaddelement='false'>
        <b:widget id='Header1' locked='true' title='Test Template (Header)' type='Header' visible='true'/>
    </b:section>
<!-- End blog header -->
</header>
<div class="main_content">
    <main class="main-blog" id="main" role="main" tabindex="-1">
        <b:section class="main section" id="page_body" name="Page body">
            <b:widget class="widget Blog" data-version="2" id="Blog1"/>
        </b:section>
    </main>
    <aside class="sidebar-container sidebar-invisible" role="complementary">
        <b:section class='sidebar' id='sidebar' name='Sidebar' preferred='yes'>
        </b:section>
    </aside>
</div>
<footer class="footer section" id="footer" name="Footer">
    <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</footer>
</body>
</html>

Keterangan :

b:css='false' : melarang css bawaan blogger
b:defaultwidgetversion='2' : menggunakan widget blogger versi 2
b:layoutsVersion='3' : menggunakan layout blogger versi 3
b:section : setiap widget blogger harus dibungkus oleh section
b:widget : merupakan sekumpulan data bawaan blogger yang bisa ditampilkan, namun yang harus ada adalah dengan id='blog1' yang akan memunculkan semua data postingan blog

Cara Menggunakan Kerangka Blogger

Login ke blog Blogger
Klik ikon tema
pada pilihan sesuaikan pilihlah edit HTML
setelah masuk editor html hapus semua kode gantikan dengan kode kerangka blogger diatas

Semoga bermanfaat dan mari belajar bersama

Link Atas

Top Social

edisini