Mengenal Bagian template blogger Part2

Oke pada kesempatan ini saya akan mencoba share Mengenal bagian template blogger part2. Dalam tutorial ini hanya saya jadikan ajang untuk berbagi informasi dan belajar bersama, bagi yang lebih paham tentang kode template mohon bimbingannya. Rekomendasi baca dulu Mengenal bagian template blogger part1 agar lebih nyambung.

Oke langsung saja nih saya teruskan bagian template yang kemarin aja:

7. Headings

h2 {
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}

Kode ini biasa digunakan untuk edit judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll

8. Posts

Untuk mengedit hal-hal yang berkaitan dengan postingan

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}

Kode tersebut diatas berguna untuk mengedit tampilan tanggal postingan/artikel blog.

.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}

Mengubah tampilan post atau artikel blog bagian dalam atas dan bawah

.main-inner .column-center-inner {
padding: 0 $(main.padding);
}

.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}

Mengubah tampilan post atau artikel blog bagian tengah

.post {
margin: 0 0 $(post.margin.bottom) 0;
}

Mengubah tampilan postingan atau artikel blog

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

Mengubah tampilan judul artikel blog

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

Mengubah tampilan bagian postingan/badan postingan

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
color: $(image.text.color);
}

Mengubah tampilan gambar pada postingan

.post-header {
margin: 0 0 1.5em;

line-height: 1.6;
font-size: 90%;
}

Mengubah catatan awal postingan

.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;

color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);

line-height: 1.6;
font-size: 90%;
}

Mengubah tampilan footer atau catatan kaki postingan blog

#comments .comment-author {
padding-top: 1.5em;

border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;

border-top: none;
}

Mengubah tampilan Nama-nama komentator yang komen di blog

.avatar-image-container {
margin: .2em 0 0;
}

#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}

Merubah tampilan Gambar avatar komentator

Oke kalau begitu udahan dulu yaw bagi yang mau mengunjungi kelanjutan kisahnya DISINI oke kalau begitu happy blogging and semoga ada gunanya... hi hi hi

Posted by Fayes Cool » Rating 4.5 » at Saturday, July 30, 2011

Postingan Terkait