Sedikit pengulangan dari Bagian 2.
Untuk memudahkan pembahasan, saya akan mendefinisikan pengistilahan yang nanti akan disebut berulang-ulang. Selengkapnya adalah :
<b:skin><![CDATA[*/
Kode-kode di sini disebut css skin
]]></b:skin><b:section class='main' id='main' showaddelement='yes'/>
Kode-kode di sini disebut section dan widget
</b:section>
<style>
Kode-kode di sini disebut css style
</style>
Css Skin saya pergunakan untuk mengatur tampilan versi Desktop. Css Style digunakan untuk mengatur tampilan versi Mobile. Dengan cara ini kita akan mudah memperbaiki template bila ada masalah. Juga memudahkan untuk modifikasi.
Bila anda belum sempat mengikuti tutorial dari awal, maka silahkan klik link-link berikut :
*****
Okey sob, kita mulai bagian 3 ini dengan membahas main dan sidebar. Main adalah pembungkus postingan anda di blog. Bila tidak dibungkus maka postingan tersebut akan berantakan posisinya. Adapun sidebar adalah pembungkus bilah kiri atau bilah kanan dari blog kita sebagai tempat meletakkan aneka widget, termasuk iklan. Pada template kita ini akan menggunakan sisi atau bilah kiri. Bila sobat ingin meletakkannya di kanan, nanti akan saya bahas pula.
Sidebar dan main secara bersama-sama dibungkus oleh content-wrapper. Untuk menambahkan kedua-duanya maka lakukan penambahan kode css ini ke css skin :
#sidebar {
width:300px;
border:1px solid grey;
margin:0.2em auto;
background:white;
padding:0.2em;
}
#main {
width:600px;
border:1px solid grey;
margin:0.2em auto;
padding:0.2em;
background:white;
}
Kemudian pada bagian section, pada kode ini :
<div id='content-wrapper'>
<b:section class='main' id='main' showaddelement='yes'/>
</div>
Tambahkan section baru untuk sidebar, kodenya adalah :
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
Letakkan kode tersebut di atas kode :
<b:section class='main' id='main' showaddelement='yes'/>
Sehingga sekarang berubah menjadi :
<div id='content-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
<b:section class='main' id='main' showaddelement='yes'/>
</div>
*****
Sekarang yang belum adalah section untuk footer-wrapper dan credit-link. Untuk membuatnya anda tinggal menambahkan kode ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
<div id='credit-link'>
<b:section class='credit' id='credit' showaddelement='yes'/>
</div>
Letakkan kode-kode tersebut di bawah kode ini :
<div id='content-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
<b:section class='main' id='main' showaddelement='yes'/>
</div>
Selanjutnya pada css skin tambahkan kode ini :
#footer-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#credit-link {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
*****
Pembaca sekalian, bagi anda yang menemui kesulitan mengikuti turorial ini, bisa melihat langsung rangkuman sintaks yang merupakan gabungan dari artikel bagian 1, bagian 2, dan bagian 3. Inilah rangkuman sintaks-nya yang bisa anda paste-kan langsung di template.
<?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>
<meta charset='UTF-8'/>
<b:include data='blog' name='all-head-content'/>
<b:include data='blog' name='google-analytics'/>
<meta content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width' name='viewport'/>
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*
<b:skin><![CDATA[*/
html, body, ul, dir, nav, aside, hgroup, header, footer, 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, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0px;padding:0px;border:0px none;outline:0px none;background:transparent;}
a:link {text-decoration:none;color: blue;}a:visited {color: rgb(72,14,182);} a:hover {color: darkblue;}
html,
body{font-family:Helvetica,Tahoma,sans-serif;color:#444;line-height:1.3;display:block;width:100%;margin:0px auto;word-wrap:break-word;}
h1{font-size:1.2em;}h2{font-size:1em;}
h3{font-size:0.8em;}
#outer-wrapper {
width:970px;
border:5px groove grey;
background:#DCDCDC;
margin:1em auto;
padding:0.5em;
display:block;
}
#header-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#menu-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#content-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
display:flex;
justify-content:space-around;
}
#sidebar {
width:300px;
border:1px solid grey;
margin:0.2em auto;
background:white;
padding:0.2em;
}
#main {
width:600px;
border:1px solid grey;
margin:0.2em auto;
padding:0.2em;
background:white;
}
#footer-wrapper {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
#credit-link {
width:960px;
border:1px solid grey;
background:#F0F8FF;
margin:0.2em auto;
padding:0.2em;
}
]]></b:skin>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<div id='outer-wrapper'>
<div id='menu-wrapper'>
<b:section class='menu' id='menu' showaddelement='yes'/>
</div>
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>
<div id='content-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
<b:section class='main' id='main' showaddelement='yes'/>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
<div id='credit-link'>
<b:section class='credit' id='credit' showaddelement='yes'/>
</div>
</div>
</body>
</html>
Jangan lupa untuk selalu Simpan Template dan lihat hasilnya dengan cara klik Lihat Blog setiap kali selesai melakukan perubahan.
Sampai bertemu lagi di bagian selanjutnya yang berjudu : Template Berkualitas Hasil Rancangan Anda Sendiri.
Demikianlah artikel dari Kontakmedia yang berjudul Cara Membuat Sendiri Template Blogger Yang Berkualitas - Bagian Ketiga, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.