RESET CSS
Reset CSS yang digunakan, 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 blog ini 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 dibawah ini:
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 blog ini 'date' tidak perlu menggunakan tag heading, karena kurang memiliki nilai. Jadi tag heading pada 'date' dapat Anda 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 dapat Anda 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.
Tidak ada komentar:
Posting Komentar