Minggu, 12 Desember 2010

Hack Tag HTML Blogspot Anda

Hack Tag HTML Blogspot
Hal pertama yang dilakukan ketika membuat template blogger, melakukan reset, katakanlah seperti itu. Reset Blogger Template yang dimaksud disini adalah untuk memperbaiki tampilan dan struktur dasar template, agar lebih baik.

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