Tutor ini di terbitkan buat kita2 yang hoby ataupun yang mau otak atik template blognya, dengan panduan ini mudah2 apa yang dilakukan jadi semakin mudah.
<?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><![CDATA[/*
Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk meta tag keyword dan meta tag yang lainnya.
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.
a:link {
color:$linkcolor;
text-decoration:none;
}
Kode ini untuk mengubah tampilan link pada template blog Anda.
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
Ini untuk mengubah tampilan link yang pernah dikunjungi.
a:hover {
color:$titlecolor;
text-decoration:underline;
}
Mengubah tampilan link jika pointer mouse berada di atas link.
a img {
border-width:0;
}
Mengubah tampilan link bergambar
/* Header
-----------------------------------------------
*/
Header berawal di sini
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
Kode CSS ini mengubah tampilan header bagian dalam
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Mengubah tampilan judul dan deskripsi blog tingkat 1
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
Mengubah tampilan link yang terdapat pada header
#header a:hover {
color:$pagetitlecolor;
}
Mengubah tampilan link pada header jika pointer mouse berada di atas link.
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Mengubah tampilan gambar header
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Bagian ini adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Main-Wrapper sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget.
Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget alexa rank yang tempatnya disamping posting area/main wrapper
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll
/* Posts
-----------------------------------------------
*/
Bagian Post dimulai dari sini
h2.date-header {
margin:1.5em 0 .5em;
}
Mengubah tampilan tanggal artikel blog
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Mengubah tampilan post atau artikel blog
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
Mengubah tampilan judul artikel blog
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
Mengubah tampilan link
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
Mengubah tampilan bagian postingan
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Mengubah tampilan footer atau catatan kaki postingan blog
.comment-link {
margin-$startSide:.6em;
}
Mengubah tampilan link komentar
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
Mengubah tampilan gambar pada postingan
/* 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;
}
/* 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
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Rips Way (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
Sumber : Lupa, coz ini dokumen dah lama banget disimpen di PC
