Pada posting sebelumnya, kita telah mengetahui tentang dasar penyusunan template di Blogger.com. Sekarang tinggal tergantung pada kreativitas masing-masing dalam menambahkan beberapa selector atau elemen HTML5 agar blog dapat ditampilkan pada layar peramban. Toturial berikut dapat diterapkan dengan cara yang berbeda pada tiap blog & tentu saja tergantung pada pengelola blog yang bersangkutan. Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan template kemungkinan besar akan meninggalkan residu dari pengkodean template sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan reset template, yakni — dengan cara — pergi ke dashboard Blogger.com, kemudian “terapkan” salah satu template dasar.
Sebagai langkah pertama, silakan simpan (copy & paste) beberapa widget yang mungkin akan kita tampilkan dalam blog — seperti navbar, header, dan main (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (Hypertext Markup Language) berikut.
<?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'>
<head>
<!--[if lte IE 8]> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <![endif]-->
<!--[if gte IE 9]> <meta content='IE=9' http-equiv='X-UA-Compatible'/> <![endif]-->
<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=960' 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>
<b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:
URL:
Designer:
-------------------------------------------------------------- */
/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
]]></b:skin>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
</body>
</html>
Kedua, tambahkan satu-persatu kode widget dalam tubuh HTML (<body>). Misalnya:
<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</body>
Ketiga, memberikan beberapa selector atau elemen pada HTML5 untuk mengapit kode widget. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. Selector id berarti kustomasi hanya dilakukan pada id yang bersangkutan & tidak ada perulangan, karena sifatnya yang unik (satu id sama dengan satu elemen). Sedangkan class dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satu class sama dengan beberapa elemen).
<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div id='content'>
<header id='header-content'>
<div class='head-wrap'>
<div class='header-group'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
</div><!-- .header-group -->
</div><!-- .head-wrap -->
</header><!-- #header-content -->
<div id='main-wrapper'>
<div id='main-content'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div><!-- #main-content -->
<aside id='sidebar-content'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside><!-- #sidebar-content -->
<div style='clear:both;'></div> <!-- Mungkin lebih baik menggunakan <div class='clear'></div> yang diatur dengan CSS -->
</div><!-- #main-wrapper -->
<footer id='footer-content'>
<div class='foot-wrap'>
<div id='content-info'>
<p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>↑ <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
</div><!-- #content-info -->
</div><!-- .foot-wrap -->
</footer><!-- #footer-content -->
</div><!-- #content -->
</body>
Keempat, simpan HTML template hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom & memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (Cascading Style Sheets) dalam markah <head>. Contoh CSS berikut menggunakan fixed layout dengan lebar konten 960px sesuai dengan <meta content='width=960' name='viewport'/>.
<b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:
URL:
Designer:
-------------------------------------------------------------- */
/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
/* =Layout
----------------------------------------------- */
#content {
margin: 0 auto;
width: 960px;
}
#header-content,
#main-wrapper,
#footer-content {
width: 100%;
}
#main-content,
#sidebar-content {
display: inline;
position: relative;
}
#main-content {
float: left; /* Tentukan letak main-content di sebelah kanan (right) atau kiri */
width: 640px;
}
#sidebar-content {
float: left;
width: 320px;
}
.header .widget,
.main .widget,
.sidebar .widget {
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
}
/* =Global
----------------------------------------------- */
body,
button,
input,
select,
textarea {
color: #000;
font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
background: #fff;
text-align: left;
width: 100%;
}
body:before, body:after {
content: '';
display: table;
}
body:after {
clear: both;
}
/* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */
.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}
… dan seterusnya …
]]></b:skin>
Kelima, pratinjau hasilnya & apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” template.
Dengan 5 (lima) langkah di atas, kita telah dapat membuat template blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang CSS dan HTML. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan selector class yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada footer berikut.
HTML
<footer id='footer-content'>
<div class='foot-wrap'>
<div id='sidebar-footer'>
<aside class='supplementary'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</aside>
<aside class='supplementary'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</aside>
<aside class='supplementary'>
<b:section class='sidebar' id='sidebar4' preferred='yes'/>
</aside>
<div class='clear'></div>
</div><!-- #sidebar-footer -->
<div id='content-info'>
<p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>↑<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
</div><!-- #content-info -->
</div><!-- .foot-wrap -->
</footer><!-- #footer-content -->
CSS
.supplementary {
display: inline;
float: left;
position: relative;
width: 320px;
}
Catatan: Untuk kode yang berwarna orange, konfigurasi CSS widget dalam section class='sidebar' sama dengan pengkodean sebelumnya (.sidebar .widget).
Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi & dengan harapan — mungkin — akan lebih semantik.
Posted by rike
Pada posting sebelumnya, kita telah mengetahui tentang dasar penyusunan template di Blogger.com. Sekarang tinggal tergantung pada kreativitas masing-masing dalam menambahkan beberapa selector atau elemen HTML5 agar blog dapat ditampilkan pada layar peramban. Toturial berikut dapat diterapkan dengan cara yang berbeda pada tiap blog & tentu saja tergantung pada pengelola blog yang bersangkutan. Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan template kemungkinan besar akan meninggalkan residu dari pengkodean template sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan reset template, yakni — dengan cara — pergi ke dashboard Blogger.com, kemudian “terapkan” salah satu template dasar.
Sebagai langkah pertama, silakan simpan (copy & paste) beberapa widget yang mungkin akan kita tampilkan dalam blog — seperti navbar, header, dan main (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (Hypertext Markup Language) berikut.
<?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'>
<head>
<!--[if lte IE 8]> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <![endif]-->
<!--[if gte IE 9]> <meta content='IE=9' http-equiv='X-UA-Compatible'/> <![endif]-->
<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=960' 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>
<b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:
URL:
Designer:
-------------------------------------------------------------- */
/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
]]></b:skin>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
</body>
</html>
Kedua, tambahkan satu-persatu kode widget dalam tubuh HTML (<body>). Misalnya:
<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</body>
Ketiga, memberikan beberapa selector atau elemen pada HTML5 untuk mengapit kode widget. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. Selector id berarti kustomasi hanya dilakukan pada id yang bersangkutan & tidak ada perulangan, karena sifatnya yang unik (satu id sama dengan satu elemen). Sedangkan class dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satu class sama dengan beberapa elemen).
<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div id='content'>
<header id='header-content'>
<div class='head-wrap'>
<div class='header-group'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
</div><!-- .header-group -->
</div><!-- .head-wrap -->
</header><!-- #header-content -->
<div id='main-wrapper'>
<div id='main-content'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div><!-- #main-content -->
<aside id='sidebar-content'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside><!-- #sidebar-content -->
<div style='clear:both;'></div> <!-- Mungkin lebih baik menggunakan <div class='clear'></div> yang diatur dengan CSS -->
</div><!-- #main-wrapper -->
<footer id='footer-content'>
<div class='foot-wrap'>
<div id='content-info'>
<p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>↑ <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
</div><!-- #content-info -->
</div><!-- .foot-wrap -->
</footer><!-- #footer-content -->
</div><!-- #content -->
</body>
Keempat, simpan HTML template hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom & memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (Cascading Style Sheets) dalam markah <head>. Contoh CSS berikut menggunakan fixed layout dengan lebar konten 960px sesuai dengan <meta content='width=960' name='viewport'/>.
<b:skin><![CDATA[/*
--------------------------------------------------------------
Blogger Template Style
Name:
URL:
Designer:
-------------------------------------------------------------- */
/* =Reset
----------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}
/* =Layout
----------------------------------------------- */
#content {
margin: 0 auto;
width: 960px;
}
#header-content,
#main-wrapper,
#footer-content {
width: 100%;
}
#main-content,
#sidebar-content {
display: inline;
position: relative;
}
#main-content {
float: left; /* Tentukan letak main-content di sebelah kanan (right) atau kiri */
width: 640px;
}
#sidebar-content {
float: left;
width: 320px;
}
.header .widget,
.main .widget,
.sidebar .widget {
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
}
/* =Global
----------------------------------------------- */
body,
button,
input,
select,
textarea {
color: #000;
font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
background: #fff;
text-align: left;
width: 100%;
}
body:before, body:after {
content: '';
display: table;
}
body:after {
clear: both;
}
/* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */
.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}
… dan seterusnya …
]]></b:skin>
Kelima, pratinjau hasilnya & apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” template.
Dengan 5 (lima) langkah di atas, kita telah dapat membuat template blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang CSS dan HTML. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan selector class yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada footer berikut.
HTML
<footer id='footer-content'>
<div class='foot-wrap'>
<div id='sidebar-footer'>
<aside class='supplementary'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</aside>
<aside class='supplementary'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</aside>
<aside class='supplementary'>
<b:section class='sidebar' id='sidebar4' preferred='yes'/>
</aside>
<div class='clear'></div>
</div><!-- #sidebar-footer -->
<div id='content-info'>
<p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>↑<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p>
</div><!-- #content-info -->
</div><!-- .foot-wrap -->
</footer><!-- #footer-content -->
CSS
.supplementary {
display: inline;
float: left;
position: relative;
width: 320px;
}
Catatan: Untuk kode yang berwarna orange, konfigurasi CSS widget dalam section class='sidebar' sama dengan pengkodean sebelumnya (.sidebar .widget).
Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi & dengan harapan — mungkin — akan lebih semantik.
