Bagian Template Blogger Standar 5

Pada kesempatan kali ini kita akan membahas Bagian Template Blogger Standar 5, postingan ini merupakan lanjutan dari postingan sebelumnya yaitu bagian template blogger standar 4. Jika Anda belum membaca postingan sebelumnya, terlebih dahulu saya himbau kepada Anda agar membacanya terlebih dahulu agar pemahaman mengenai struktur template blogger ini dapat Anda pahami secara menyeluruh. Adapun postingan sebelumnya yang pernah saya bahas dalam pembelajaran mengenai bagian template blogger ini diantaranya yaitu :

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

Jika Anda sudah membaca postingan sebelumnya, saya rasa Anda sudah banyak tau dengan bagian kode-kode CSS yang  membentuk template blogger. Nah, untuk itu, pada postingan ini kita akan membahas comment block, yaitu bagian kotak komentar template blogger, untuk lebih jelasnya dapat Anda lihat gambar dibawah ini :

Sebelumnya saya mohon maaf karena gambarnya sedikit buram, karena sizenya sudah saya kecilkan. Kita lanjut pada pembahasan, bagian atau seluruh area kotak komentar dapat disebut juga comments block. Sebagaimana kita lihat pada gambar, untuk keterangannya berdasarkan nomor urut dapat  Anda baca dibawah ini :

1. Comments h4
2. Comments-author
3. Comments-footer
4. Comments-body
5. Comments h4

Adapun kode CSS yang membentuk kotak komentar blogger ini, dapat anda lihat keterangannya dibawah ini:

/* Comments
----------------------------------------------- */

Line seperti diatas adalah batas dan petunjuk awal mula kode CSS Comments terbentuk.

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

Fungsi dari kode diatas yaitu membentuk dan dapat merubah tampilan judul bagian komentar.

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}

Fungsi kode diatas adalah merubah tampilan bagian komentar.

#comments-block .comment-author {
margin:.5em 0;
}

Fungsi kode diatas yaitu merubah tampilan link author atau link komentator.

#comments-block .comment-body {
margin:.25em 0 0;
}

Fungs kode diatas adalah merubah tampilan isi komentar.

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

Fungsi kode diatas yaitu merubah tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.

.deleted-comment {
font-style:italic;
color:gray;
}

Fungsi dari kode diatas adalah merubah tampilan komentar yang telah dihapus.

.feed-links {
clear: both;
line-height: 2.5em;
}

Fungsi dari kode diatas yaitu untuk merubah tampilan link feed.

Terlepas dari comments blog sedikit saya jelaskan kode-kode yang membentuk sidebar blog, seperti yang diterangkan dibawah ini :

/* Sidebar Content
----------------------------------------------- */

Seperti comments, line diatas merupakan batas dan atau awal mula kode CSS untuk sidebar terbentuk.

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Adapun fungsi kode diatas adalah merubah tampilan sidebar secara keseluruhan.

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

Fungsi kode datas yaitu untuk merubah tampilan daftar pada sidebar.

.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Fungsi kode diatas adalah untuk merubah tampilan definisi daftar dari tag <ul>.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Dan yang terakhir, fungsi kode diatas yaitu untuk merubah tampilan widget.

Saya rasa cukup sekian penjelasan dari saya, dan untuk selanjutnya kita akan membahas bagian template blogger standar 6 yang merupakan postingan terakhir untuk mengenal bagian-bagian template blogger beserta kode-kode yang membentuk bagian tersebut. Semoga bermanfaat, Happy Blogging, salam sukses dari Super-Bee