Memahami Dan Menstail Post Footer

Post Footer merupakan sebahagian daripada bahagian entri tersebut. Secara amnya ia terletak pada bahagian bawah entri, nama pun footer kan? Bagi yang mahir mengedit Css dan Html kebiasaanya mereka akan merestail mengikut kehendak masing-masing.

Ada yang pasang kat atas entri, ada yang pasang kat atas dan bawah entri, dan ada pula yang tak pasang langsung.

Secara asasnya post footer dipecahkan kepada 3 post footer line, setiap post footer line pula mengandungi item-item tertentu seperti tarikh, nama penulis, jumlah komen, email dan sebahagiannya. Kamu juga boleh rujuk pada main page option kalau masih tak faham.



Html Post Footer

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'></div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>

</div>

Setiap satu post footer line mengandungi item masing-masing. Kamu boleh memindahkannya pada mana-mana bahagian contohnya post line 1 untuk diletakkan pada bahagian atas entri.

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

<span class='post-author vcard'></span>
<span class='post-timestamp'></span>
<span class='reaction-buttons'></span>
<span class='star-ratings'></span>
<span class='post-comment-link'></span>
<span class='post-backlinks post-comment-link'></span>
<span class='post-icons'></span>

</div>
<div class='post-footer-line post-footer-line-2'>

<span class='post-labels'></span>

</div>
<div class='post-footer-line post-footer-line-3'>

<span class='post-location'></span>

</div>

</div>

Kebiasaannya aku akan pindahkan Html post footer line-1 pada bahagian bawah post header line 1.

<div class='post-header-line-1'/>

Aku dah tunjukkan kod Html keseluruhan post footer kat web TinyPaste, bolehlah kamu rujuk jika templat kamu kekurangan item post footer. Hal ini mungkin terjadi jika kamu menggunakan templat yang dibuat atau belum diupdate sebelem tahun 2009.

Sebagai tambahan post footer juga boleh ditambah item seperti social bookmark button, subsribe message box ataupun related post. Terpulang!

Css Post Footer

.post-footer{

color:#000;
text-transform:uppercase;
letter-spacing:.1em;
font:normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
line-height:1.4em;
margin:.75em 0;

}

Kamu juga boleh menstailkan bahagian post footer mengikut citarasa masing-masing. Untuk nampak lebih bergaya aku cadangkan kamu turut menggunakan ikon dalam post footer kamu.

.post-author{

background:url(.../author.png) left no-repeat;
padding:2px 10px 2px 20px;

}
.post-labels{

background:url(.../labels.png) left no-repeat;
padding:2px 10px 2px 20px;

}
.post-comment-link{

background:url(.../comments.png) left no-repeat;
padding:2px 10px 2px 20px;

}
.post-timestamp{

background:url(.../timestamp.png) left no-repeat;
padding:2px 10px 2px 20px;

}

Ini adalah sebahagian Css post footer icon yang biasa aku gunakan. Kamu boleh rujuk setiap class yang ada pada post footer. Dalam contoh ini aku gunakan class author, comment link, labels dan timestamp bergantung pada contoh Html yang aku gunakan.

Ikon Post Footer

Jangan lupa upload ikon pada hosting masing-masing sebab aku tak bercadang nak perbaharui hosting aku pada tahun hadapan. Ada sesiapa nak sponser hosting untuk aku?

Aku syorkan kamu gunakan ikon dari Sweetie Icons, Mini Icons ataupun Tango Icons. Semuanya bersaiz 16 piksel.