Bagian-bagian template Blogger
kita
akan membahas bagian-bagian template Blogger. Sebenarnya sudah banyak blogger
yang memposting artikel tentang bagian-bagian template Blogger, tetapi dengan
cara yang berbeda-beda.
Template yang akan kita kupas tuntas adalah template Minima. Mengapa Minima??? Karena template ini merupakan template yang paling dasar dan yang paling mudah untuk dipelajari.
Bagian pertama
Template yang akan kita kupas tuntas adalah template Minima. Mengapa Minima??? Karena template ini merupakan template yang paling dasar dan yang paling mudah untuk dipelajari.
Bagian pertama
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ini
merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML
jenis Strict digunakan untuk membuat halaman yang layout dan formatnya
dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan
table.
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><
/*
Comments
----------------------------------------------- */
Bagian
Comments dimulai dari sini
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
Mengubah
tampilan judul bagian komentar
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
Mengubah
tampilan bagian komentar
#comments-block .comment-author {
margin:.5em 0;
}
Mengubah
tampilan link author atau link komentator
#comments-block .comment-body {
margin:.25em 0 0;
}
Mengubah
tampilan isi komentar
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
Mengubah
tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.
.deleted-comment {
font-style:italic;
color:gray;
}
Mengubah
tampilan komentar yang telah dihapus
.feed-links {
clear: both;
line-height: 2.5em;
}
Mengubah
tampilan link feed
/* Sidebar Content
----------------------------------------------- */
Sidebar
dimulai dari sini
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
Mengubah
tampilan sidebar secara keseluruhan
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
Mengubah
tampilan daftar pada sidebar
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
Mengubah
tampilan definisi daftar dari tag <ul>
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Mengubah
tampilan widget
bagian-bagian
template blogger berikut ini
/* Footer
----------------------------------------------- */
Bagian
footer berawal di sini
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Footer
ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada
blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah
main wrapper dan sidebar.
]]></b:skin>
Ini
merupakan akhir dari css yang ada pada template blogger. Setelah kode ini, Anda
bisa menyisipkan javascript dari autoreadmore, artikel terkait, dll. Setelah
kode ini, bagian-bagian selanjutnya berisi kode HTML.
</head>
Ini
merupakan tag penutup dari head pada dokumen HTML
<body>
Bagian
body berawal pada tag ini
<div id='outer-wrapper'><div id='wrap2'>
Ini merupakan kode HTML dari outer-wrapper yang bisa diatur tampilannya dengan CSS
Ini merupakan kode HTML dari outer-wrapper yang bisa diatur tampilannya dengan CSS
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogwalking list
(Header)' type='Header'/>
</b:section>
</div>
Bagian
ini merupakan header-wrapper yang bias kita ubah tampilannya dengan CSS
<div id='content-wrapper'>
Bagian
main-wrapper dan sidebar-wrapper berada dalam tag ini
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
Widget
blog terletak di sini
</b:section>
</div>
Ini
merupakan kode HTML dari main-wrapper yang bisa kita ubah tampilannya dengan
CSS.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Widget
blog pada sidebar terletak di sini
</b:section>
</div>
Ini
merupakan kode HTML dari sidebar-wrapper yang bisa kita ubah tampilannya dengan
CSS.
<!-- spacer for skins that want sidebar and main to be the same
height-->
<div class='clear'> </div>
Ini
mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.
</div> <!-- end content-wrapper -->
Ini
merupakan akhir dari content-wrapper
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ini
merupakan kode HTML dari footer yang bisa kita ubah tampilannya dengan CSS
</div></div> <!-- end outer-wrapper -->
Ini
merupakan tag penutup dari outer-wrapper
</body>
Ini
merupakan tag penutup dari body pada dokumen HTML
</html>
Ini
merupakan tag penutup dari dokumen HTML
0 komentar:
Posting Komentar
Bagi yang berkunjung, silahkan isi komentarnya Ok Trims..