Hal pertama yang saya lakukan ketika membuat template blogger, dengan acuan template minima, saya melakukan reset, katakanlah seperti itu. Reset Blogger Template yang saya maksud disini adalah untuk memperbaiki tampilan dan struktur dasar template, agar lebih baik.
Reset CSS
Reset CSS yang saya gunakan, yang simpel, jadi tidak terlalu banyak dan tidak membebani, yaitu:
*{margin:0; padding:0;}
.post-body ol,.post-body ul {margin:5px 20px;}
Reset Bawaan Blogger
Reset ini lebih berfungsi untuk menyembunyikan (hack) bawaan blogger yang menurut saya menggangu, seperti: Navbar, Quick Edit, Status Massage, dan Feed Link. Reset Bawaan Blogger keseluruhannya seperti ini:
#navbar-iframe, .status-msg-wrap, .icon-action, .quickedit, .feed-links {display: none;}
Tapi juga bisa dilakukan dengan cara yang ekstrim seperti:
1. Menambah kode berikut diantara </head> dan <body> untuk menghilangkan Navbar
<!-- <body><div></div> -->
2. Menghapus Semua Kode Quick Edit (aktifkan Expand Widget Templates)
<b:include name='quickedit'/>
3. Menghapus Feed Link (aktifkan Expand Widget Templates)
CSS nya:
.feed-links {
clear: both;
line-height: 2.5em;
}
HTML nya:
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
4. Menghapus Status Massage (aktifkan Expand Widget Templates)
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Reset Heading
Idealnya Hirarki Heading (h1-h6) sebagai berikut:
h1 = Judul Blog
h2 = Judul Post
h3 = Judul pada Sidebar/Footer (widgate)
h4 = Judul Komentar
Jadi di Blogger Template perlu ada pembenahan pada Judul Post (h3), Judul pada Sidebar dan Date (h2).
1. Pembenahan pada Judul Post
Pada Kode CSS:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
Pada Kode HTML:
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
Ubah heading h3 menjadi h2
2. Pembenahan pada Judul pada Sidebar/Footer (widgate)
Pada Kode CSS:
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
Pada Kode HTML:
<h2 class='title'><data:title/></h2>
Ubah heading h2 menjadi h3
3. Pembenahan pada Date
Menurut saya 'date' tidak perlu menggunakan tag heading, karena kurang memiliki nilai. Jadi tag heading pada 'date' saya hapus.
Pada Kode CSS:
h2.date-header {
margin:1.5em 0 .5em;
}
Hilangkan h2 nya sehingga menjadi:
.date-header {
margin:1.5em 0 .5em;
}
Pada Kode HTML:
<h2 class='date-header'><data:post.dateHeader/></h2>
Ganti h2 menjadi div seperti:
<div class='date-header'><data:post.dateHeader/></div>
Penutup
Demikian keseluruhan reset Blogger Template yang saya lakukan dalam mengedit template. Tapi reset ini jangan digunakan untuk Free Blogger Template, terutama untuk Reset Heading. Mungkin anda punya cara lain juga. Kalau mau silahkan berbagi dikomentar.
---
Lihat juga: Mengoreksi Blogger Template Ku
0 comments:
Posting Komentar