Cara Membuat Struktur Dasar Template Blog Blogger

Cara Membuat Struktur Dasar Template Blog Blogger - Saat ini Anda sedang membaca panduan membuat template blog sendiri. Pada postingan saya sebelumnya kita telah berhasil membuat blog yang ringan, valid HTML5, dan SEO Friendly.

Cara Membuat Struktur Dasar Template Blog Bloggerhttps://t.co/9oK3h0XmUT
— Nando Sandala (@NandoSandala) November 22, 2019

Kita lanjut dengan Cara Membuat Struktur Dasar Template Blog Blogger dengan source code template blog sebagai berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
&lt;head&gt;
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

<b:skin><![CDATA[
/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}

a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}
]]></b:skin>
&lt;!--<head/>--&gt;
<body>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
&lt;!--</body>--&gt;
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

Kali ini kita akan belajar mengatur tampilan struktur dasar atau tata letak template blog, yang tentu saja dilakukan menggunakan CSS.

Berbicara tentang CSS, sebelumnya kita telah belajar bahwa CSS di dalam template blog di letakkan di dalam tag b:skin.

<b:skin><![CDATA[
   /*CSS di sini...*/
]]></b:skin>
1.
2.
3.

Sebenarnya selain diletakkan di dalam tag b:skin, CSS juga dapat diletakkan di dalam tag style berikut.

<style type='text/css'>
   /*CSS di sini...*/
</style>
1.
2.
3.

Semua tag CSS yang diletakkan di dalam tag b:skin memiliki warna yang sama, sedangkan jika diletakkan di dalam tag style akan berwarna spesifik sehingga memudahkan pengeditan. Perbedaannya silahkan perhatikan gambar di bawah ini.

Selain itu, berdasarkan pengalaman, CSS yang diletakkan di dalam tag style lebih terjamin ditampilkan pada browser lintas platform, daripada ketika ditempatkan di dalam tag b:skin.

Oleh karena itu saya sangat merekomendasikan untuk meletakkan CSS template blog Anda di dalam tag style.

Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS

Pertama amankan CSS Anda terlebih dahulu dengan mem-backup-nya ke dalam notepad.

Kemudian nonaktifkan tag b:skin dengan cara mengubah tag b:skin berikut.

<b:skin><![CDATA[
]]></b:skin>
1.
2.

Menjadi seperti ini.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[
]]></b:skin>
1.
2.

Tambahkan tag style di bawahnya. Kemudian tempatkan CSS yang telah Anda backup di antara tag style, sehingga kurang lebih seperti berikut.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[
]]></b:skin>

<style type='text/css'>
  // CSS di sini...
</style>
1.
2.
3.
4.
5.
6.

Jadi source code template blog kita sekarang akan menjadi seperti berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
&lt;head&gt;
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[
]]></b:skin>

<style type='text/css'>
/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}

a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}
</style>

&lt;!--<head/>--&gt;
<body>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
&lt;!--</body>--&gt;
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.

6 Elemen Utama Template Blog

Berdasarkan tata letaknya, secara umum template blog terdiri dari 6 elemen utama, yaitu :

Body
Body atau tubuh merupakan bagian dari HTML yang bertanggung jawab untuk menampilkan elemen-elemen blog. Semua elemen blog harus berada di dalam body agar dapat ditampilkan.
Wrapper
Wrapper atau sering disebut juga sebagai outer-wrapper merupakan wadah pembungkus terluar elemen-elemen blog setelah body.
Header-Wrapper
Header-wrapper merupakan bagian yang bertanggung jawab terhadap tampilan header blog. Header-wrapper menempati bagian paling atas sebuah blog. Biasanya berisi informasi judul dan deskripsi blog.
Content-Wrapper
Content-wrapper adalah bagian yang mengatur tampilan posting. Posisinya biasanya berada di tengah dan berfungsi sebagai tempat konten atau isi blog.
Sidebar-Wrapper
Sidebar-wrapper adalah bagian yang mengatur tampilan sidebar. Letaknya biasanya berdampingan dengan content-wrapper karena bertindak sebagai pendukung. Sidebar-wrapper biasanya berisi widget atau gadget, informasi penulis, kolom pencarian, dan sebagai tempat iklan.
Footer-Wrapper
Footer-wrapper merupakan bagian yang bertanggung jawab mengatur tampilan footer blog. Footer-wrapper menempati bagian paling bawah sebuah blog. Biasanya footer-wrapper dimanfaatkan oleh pengelola blog sebagai tempat untuk menginformasikan kontak pengelola blog atau sebagai tempat memasang iklan.

Gambar di atas merupakan susunan elemen-elemen template blog yang akan kita buat.

Sebenarnya Anda bisa menambah atau mengurangi jumlah dan mengatur posisi elemen blog sesuka hati. Namun sebagai awalan, kita akan membuat template blog dengan susunan elemen blog sederhana seperti gambar di atas.

Menambahkan CSS Struktur Dasar Template Blog

Pertama yang harus kita lakukan adalah mengatur tampilan struktur dasar template blog kita menggunakan CSS di bawah ini.

#wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;}
#header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;}
.header {text-align:center}
#content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}
#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}
#footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0;}
1.
2.
3.
4.
5.
6.
7.
8.

Penjelasan singkat :

#wrapper untuk mengatur template secara keseluruhan.
#header-wrapper mengatur tampilan header.
.header untuk mengatur bagian header secara lebih spesifik. Misal mengatur judul blog.
#content-wrapper mengatur bagian konten atau posting.
#sidebar-wrapper mengatur tempat widget.
#footer-wrapper mengatur bagian footer.
.clearfix ditambahkan untuk menghilangkan efek float agar tidak merusak tampilan elemen selanjutnya.

Memanggil Elemen-elemen Utama Template Blog

Selanjutnya adalah menulis syntax pemanggilan terhadap elemen-elemen utama template blog yang diletakkan di dalam bagian body.

<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

Jadi sekarang source code template kita menjadi seperti di bawah ini.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
&lt;head&gt;
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[
]]></b:skin>

<style type='text/css'>
/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #cab894;background-position: center center;}

a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}

#wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;}
#header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;}
.header {text-align:center}
#content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}
#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}
#footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0;}

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}
</style>

&lt;!--<head/>--&gt;
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
&lt;!--</body>--&gt;
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.

Sekarang simpan template blog Anda dan lihat hasilnya, seharusnya akan tampak seperti gambar di bawah ini.

Setelah menyimpan template blog Anda, cobalah menutup tab browser yang sedang Anda gunakan.

Perhatikan peringatan yang muncul seolah Anda belum menyimpan template Anda. Jangan khawatir, pilih saja Leave Page, template Anda sudah tersimpan, kok.

Peringatan muncul karena secara default Blogger akan menambahkan elemen-elemen pelengkap di dalam content-wrapper seperti kotak komentar, penanggalan posting, posting mobile, sharing button, dan lain-lain.

Meskipun tidak semua elemen yang ditambahkan tersebut kita gunakan semua, namun hingga sekarang belum ada yang berhasil menghapus dan mengatur ulang secara total elemen-elemen tersebut. Tapi tenang saja, elemen-elemen tersebut sudah saya cek tidak mempengaruhi validasi maupun kecepatan blog.

Bahkan pada tahap selanjutnya kita juga akan memodifikasi elemen-elemen tersebut.

Selamat, Anda baru saja menyelesaikan panduan membuat template blog sendiri. Pemahaman Anda sudah mencapai 20%.

Kini Anda sudah mengerti bagaimana cara membuat struktur dasar template blog sederhana.

Jika Anda belum membaca artikel saya sebelumnya terkiat postingan ini, silahkan buka saja link dibawa ini.

Cara Membuat Blog Ringan, Valid HTML5, dan SEO Friendly

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Awal atau Nol.

Cara Membuat Struktur Dasar Template Blog Blogger

Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS

6 Elemen Utama Template Blog

Menambahkan CSS Struktur Dasar Template Blog

Memanggil Elemen-elemen Utama Template Blog

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel