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

Blog tip N trik

• Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
• Trik membuat tulisan berjalan (marquee)
• CONVERT CODE HTML, JAVASCRIPT, CSS, DAN SEJENISNYA
• Cara Memasang Link Pada sebuah Gambar
• Membuat Spoiler (tombol Buka Tutup)
• Pengeditan Template Blogger Tampilan Baru Kurang Maksimal?
• Cara membuat Spoiler Di Komentar Blogspot
• Membuat spoiler di komentar treaded/bertingkat Blogspot
• Membuat spoiler di komentar Blogspot Non Treaded
• Ngerjain Autoblog Rssforward.com offpage
• Ngerjain Autoblog Yang Menforward Feed Kita
• Cara pasang Widget statistik Histats
• Review Komentar untuk Menambah Ide Postingan
• Test kecepatan web (GOOGLE PAGE SPEED ONLINE)
• Anti klik kanan mouse dan Keyboard tanpa script yang panjang
• Pasang widget follower/pengikut asli dan modifikasi sesuka hati
• Anti adblock 2.00 lindungi situs anda dari adblock
• Pasang tombol google +1 di wordpress dan blogspot
• Cara membuat link bergoyang dombret
• Membuat Sumber Otomatis bila ada yang kopas