membuat struktur dasar template blog

Membuat Struktur Dasar Template Blog Blogger
Saat ini Anda sedang membaca serial ketiga dari 11 seri panduan membuat template blog sendiri. Pada serial sebelumnya kita telah berhasil membuat blog yang ringan, valid HTML5, dan SEO Friendly dengan source code template blog sebagai berikut.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

<head>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.postImageThumbnailUrl'>

</b:if>

<b:if cond='data:blog.metaDescription != ""'>

<b:else/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>

<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>

<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>

<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>

<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>

<b:if cond='data:blog.pageType == "index"'><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: ”;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>

<body>

<b:section class='main' id='main'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>

</b:section>

</HTML>

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>

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

/*CSS di sini...*/

</style>

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>

Menjadi seperti ini.

]]></b:skin>

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

]]></b:skin>

// CSS di sini...

</style>

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

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

<head>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.postImageThumbnailUrl'>

</b:if>

<b:if cond='data:blog.metaDescription != ""'>

<b:else/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>

<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>

<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>

<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>

<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>

<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

]]></b:skin>

/* RESET */

blockquote:before, blockquote:after,q:before, q:after {content: ”;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>

<body>

<b:section class='main' id='main'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>

</b:section>

</HTML>

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: " "; clear: both; height: 0;}

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.

<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>

</b:section>

</header>

<b:section class='main' id='main'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>

</b:section>

</aside>

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

</aside>

<b:section class='footer' id='footer' showaddelement='yes'></b:section>

</footer>

</div>

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

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

<head>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.postImageThumbnailUrl'>

</b:if>

<b:if cond='data:blog.metaDescription != ""'>

<b:else/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>

<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>

<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>

<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>

<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>

<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

]]></b:skin>

/* RESET */

blockquote:before, blockquote:after,q:before, q:after {content: ”;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: " "; 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>

<body>

<b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget>

</b:section>

</header>

<b:section class='main' id='main'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>

</b:section>

</aside>

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

</aside>

<b:section class='footer' id='footer' showaddelement='yes'></b:section>

</footer>

</div>

</HTML>

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.

Silahkan melanjutkan membaca serial keempat panduan membuat template blog sendiri berikut : Membuat Menu Navigasi Blog.

Selamat, Anda baru saja menyelesaikan serial ketiga dari 11 serial panduan membuat template blog sendiri. Pemahaman Anda sudah mencapai 20%. Kini Anda sudah mengerti bagaimana cara membuat struktur dasar template blog sederhana.

Kategori Berita

Link Menu Atas Seluler

Iklan Semua Halaman

Link Menu Atas

membuat struktur dasar template blog