Bagian Template Blogger Standar 4

Kembali lagi kita mempelajari bagian template blogger, pada kesempatan ini kita akan membahas Bagian Tempate Blogger Standar 4. Postingan ini meruakan lanjutan dari pembelajaran kita sebelumnya yang pernah saya posting. Agar membentuk pembelajaran yang berkesinambungan terlebih dahulu Super-Bee ajak kepada sahabat-sahabat blogger sekalian untuk membaca postingan sebelumnya, agar tidak salah dalam pemahaman. Adapun postingan yang berkaitan dengan postingan ini diantaranya adalah :

1. Bagian Template Blogger Standar 1
2. Bagian Template Blogger Standar 2 dan
3. Bagian Template Blogger Standar 3

Jika Anda sudah membaca postingan sebelumnya, tentu Anda sudah paham tentang bagian template blogger ini, dan sedikit membantu saya dalam mempermudah menjelaskan untuk postingan kali ini, Nah, jika demikian pada postingan ini saya akan membahas kode CSS yang berada di bagian post, yaitu bagian dimana didalamnya terdapat judul postingan dan kontent beserta tanggal postingan dan lain-lain. Seperti yang bisa Anda lihat pada gambar dibawah ini :

Bagian Post Template Blogger

Untuk struktur kode yang membentuk halaman post, dapat Anda baca sepert penjelasn dibawah ini :

/* Posts
-----------------------------------------------
*/

Kode CSS dalam membentuk bagian post ditandai atau dimulai dari list dan/atau batas ini.

h2.date-header {
margin:1.5em 0 .5em;
}

Adapun fungsi dari kode diatas adalah untuk membentuk atau merubah tampilan tanggal artikel blog.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Fungsi kode ini yaitu untuk membentuk atau merubah 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;
}

Fungsi kode CSS ini adalah unutk merubah tampilan judul artikel blog.

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

Fungsi kode diatas yaitu untuk merubah tampilan link

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

Sedangkan kode CSS diatas berfungsi untuk membentuk atau merubah tampilan bagian postingan

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Fungsi dari kode ini adalah membentuk atau merubah tampilan footer atau catatan kaki postingan blog.

.comment-link {
margin-$startSide:.6em;
}

Dan fungsi dari kode diatas adalah untuk merubah tampilan link komentar.

.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}

Fungsi kode diatas yaitu untuk merubah tampilan gambar pada postingan.

Cukup sekian dulu penjelasan dari saya, semoga dapat dipahami dan bermanfaat, dan akan kita lanjut pembahasan mengenai bagian template blogger ini ke step berikutnya yaitu bagian template blogger standar 5, yag akan membahas kode CSS yang membentuk post comment, atau bagian komentar blog.