Search This Blog

Struktur Dasar Template Blogspot - Single Column Template

  • Thursday, June 14, 2018 at 9:11:00 AM
  • 0 Comments
  • Views
Pada postingan kali ini aku bakalan share tentang membuat template blogspot yang paling sederhana. Karena ini adalah template yang sederhana, template ini hanya terdiri dari satu header, body, footer. Template ini sering disebut template Single Column atau tidak mempunyai sidebar.
Oke langsung saja kode nya seperti berikut ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version="2" class="v2" expr:dir="data:blog.languageDirection" 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="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" />
    <b:if cond="data:blog.pageType == &quot;index&quot;">
        <title>
            <data:blog.title/>
        </title>
        <b:else/>
        <title>
            <data:blog.pageName/>
        </title>
    </b:if>
    <b:skin>
        /* Basic */
        body { font-family: Arial, Helvetica, sans-serif; color: #747474; background-color: #eee; }
        a, a:link { transition: all 200ms ease-in-out 0s; color: #2aa4cf; text-decoration: none; }
        a:visited { color: #2693ba; text-decoration: none; }
        a:hover, a:visited:hover { color: #50b7dc; text-decoration: none; }
        /* Wrapper */
        #wrapper { background-color: #fff; width: 800px; margin: 0 auto; }
        .post-body img {width: 100%;}
    </b:skin>
</head>
<body>
    <div id="wrapper">
        <!-- Header -->
        <div id="header">
            <b:section class="header" id="header" maxwidgets="1" showaddelement="yes">
                <b:widget id="Header1" locked="true" title="Eka Awaludin (Header)" type="Header" />
            </b:section>
        </div>
        <!-- Main post -->
        <div id="main">
            <b:section class="main" id="main" maxwidgets="" showaddelements="yes">
                <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog" />
            </b:section>
        </div>
        <!-- Footer -->
        <div id="footer">
            <b:section class="footer" id="footer" maxwidgets="" showaddelements="yes">
                <b:widget id="Attribution1" locked="false" title="" type="Attribution" />
            </b:section>
        </div>
    </div>
</body>
</html>
Apabila kita menerapkan kode berikut ini di blog kita maka hasil tampilan nya akan terlihat sangat sederhana, tampilannya seperti gambar di bawah ini.
Basic single colum template

Penting
Perlu di ingat supaya kita memback-up dulu template kita sebelum menerapkan kode template ini di blog kita, atau kita bisa menerapkan kode template ini di blog percobaan kita.

Kesimpulan
Tujuanku men-share code template ini adalah untuk berbagi pengetahuan tentang dasar-dasar template blogger yang aku tahu dan untuk selanjutnya kita bisa menambahkan atau mengembangkannya menjadi seperti yang kita sukai.
No comments
No comments

Post a Comment