Sekarang waktunya membuat template! Silakan ikuti panduan di bawah ini dengan berurutan, jangan sampai ada yang terlewat, dan baca dengan baik kata demi kata agar anda dapat memahami dan tidak terjadi kesalahan hehe...
Tips: Cara mudah untuk melihat CLASS / ID sebuah elemen HTML adalah dengan menggunakan fitur inspect element. Arahkan kursor ke elemen yang ingin dicari CLASS / ID nya, klik kanan, klik Inspect Element, lalu lihat nama class dan id nya di sana.
Bisa dilihat pada gambar contoh diatas, element tersebut memiliki tag <div>, ID #blog-pager, dan CLASS .blog-pager.
Atau, belum baca part 1? Kalau iya, klik link ini untuk part 1 nya...
Panduan Lengkap Membuat Template Blogger Dari Awal Hingga Akhir # Part 1
a. Pemberian CSS Reset
Bisa dilihat di sana terdapat jarak-jarak kosong antara judul post dengan gambar thumbnail dan info postingan. Untuk pemasangan CSS reset ini, anda dapat menaruh kode berikut di dalam <b:skin> atau <style>.
/* ----- CSS Reset by KodeJarwo.com ----- */
b {font-weight:bold!important}
i {font-style:italic}
u {text-decoration:underline}
strike {text-decoration:line-through}
html {background:#eee}
a {text-decoration:none}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; word-wrap: break-word;}
Selain menghilangkan jarak, CSS Reset juga berguna untuk membuat teks menjadi responsif dan otomatis terpotong bila layar dikecilkan serta menambahkan fungsi teks tebal, teks mining, garis bawah, dan strikethrough.
b. Pembuatan Header
header {
background: #fff; /* Agar background header berwarna putih */
text-align: center; /* Membuat judul dan deskripsi blog berada di tengah */
padding: 30px; /* Memberi jarak dalam header agar tulisan tidak nempel ke pojok */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Memberikan efek bayangan di bawah header */
}
Maka kurang lebih hasilnya menjadi seperti ini:
Sekarang mari kita beri jarak antara judul dengan deskripsi blog. Silakan anda lihat ID untuk judul blognya, lalu berikan padding-bottom untuk memberi jarak dengan deskripsi, atau lebih jelasnya yaitu dengan menggunakan kode CSS berikut ini:
#header-inner {
padding-bottom: 20px;
}
Angka 20px diatas dapat diubah menjadi sesuka hati anda, semakin tinggi angka semakin lebar juga jaraknya.
Sehingga sampai tahap ini kita telah membuat kode CSS sebanyak:
header {
background: #fff; /* Agar background header berwarna putih */
text-align: center; /* Membuat judul dan deskripsi blog berada di tengah */
padding: 30px; /* Memberi jarak dalam header agar tulisan tidak nempel ke pojok */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Memberikan efek bayangan di bawah header */
}
#header-inner {
padding-bottom: 20px;
}
c. Pembuatan Wrapper
Biasanya wrapper ditandai dengan berbagai macam ID, seperti main-wrapper, wrapper, wrap, dan lain sebagainya. Tetapi pada kerangka template saya, saya menggunakan ID wrapper, atau kurang lebih bentuknya seperti ini di dalam tag HTML:
... header ... <div id='wrapper'> ... post dan sidebar ... </div> ... footer ...
Ada baiknya luas wrapper tidak terlalu lebar apalagi hingga selebar layar, sehingga anda dapat mengubah max-width nya menjadi 1000px. 1000px merupakan lebar wrapper yang paling umum digunakan. Contoh kodenya seperti ini:
#wrapper {
display: flex; /* Karena WRAPPER berbentuk tag SPAN, maka harus diberi display flex agar dapat digunakan */
max-width: 1000px; /* Lebar wrapper */
padding: 20px; /* Jarak dalam agar tidak menempel dengan header dan footer */
margin: 0 auto; /* Supaya wrapper menjadi di tengah, bukan menempel di sebelah kiri */
}
Berikut tampilan template hingga tahap ini:
Sekarang, mari kita buat template menjadi dua kolom, yaitu kolom kiri untuk postingan dan kolom kanan untuk sidebar. Caranya cukup mudah, anda hanya perlu membagi lebar (width) antara main dengan sidebar. Pada kerangka saya, tag untuk postingan adalah <main>, sedangkan untuk sidebar adalah <aside>. Langsung saja berikut kode CSS yang dapat anda gunakan:
main {
width: 70%; /* Lebar postingan adalah 70% dari lebar layar */
float: left; /* Posisi postingan di sebelah kiri */
padding-right: 30px; /* Jarak antara main dengan sidebar */
}
aside {
width: 30%; /* Lebar sidebar adalah 100% - lebar postingan (70%), jadi 30% */
float: right; /* Posisi sidebar di sebelah kanan */
}
Berikut tampilan template hingga tahap ini:
Bisa dilihat pada gambar diatas lebar dari postingan adalah 70% dari layar, sedangkan lebar dari sidebar adalah 30% dari layar. Sekarang mari lanjut ke mendekor postingan...
d. Pembuatan Main
Di kerangka KTBKJ, struktur HTML untuk postingan saya namakan .post-outer. Untuk lebih jelasnya silakan anda inspect elemen sendiri, cari tag DIV dengan class post-outer. Berikut kode CSS yang dapat kita gunakan untuk mendekor postingan:
.post-outer {
background: #fff; /* Membuat latar belakang postingan berwarna putih */
padding: 20px; /* Jarak dalam post */
margin-bottom: 30px; /* Jarak antara satu post dengan yang dibawahnya */
box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1); /* Memberikan efek bayangan */
min-height : 140px; /* Tinggi minimal */
}
Berikut tampilan yang akan anda dapatkan bila menggunakan kode diatas:
Sudah terlihat lumayan bagus, cuma tinggal perlu beberapa perbaikan...
.thumbnail-post {
position: relative; /* Nda terlalu berguna sih, tapi saran saya pake aja */
margin-right: 20px; /* Jarak antara gambar thumb dengan judul post dan tulisan di sampingnya */
overflow: hidden; /* Supaya gambar thumb yang kebesaran jadi terpotong */
width: 180px; /* Lebar thumb */
height: 140px; /* Tinggi thumb */
float: left; /* Supaya thumb berada di sebelah kiri */
}
.thumbnail-post img {
width: 100%; /* Supaya gambar thumb jadi memiliki lebar yang menyesuaikan div di atasnya (180px) */
}
.entry-header {
margin-bottom: 20px; /* Jarak antara judul post dengan info post */
}
.post-author {
float: left; /* Supaya nempel kiri */
margin-right: 5px; /* Jarak kanan */
}
.post-author img {
display: none; /* Supaya gambar author ilang */
}
.post-tag a {
float: left; /* Nempel kiri */
margin: 0 5px; /* Jarak kanan */
}
.post-tag a:last-child {
margin-right: 10px; /* Jarak kanan */
}
.entry-content {
margin-top: 20px; /* Jarak atas */
margin-left: 200px; /* Jarak kiri */
}
.blog-pager span {
border-radius: 5px; /* Membuat ujung kotak menjadi bulat */
background: #fff; /* Warna latar */
padding: 10px 20px; /* Jarak dalam */
box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1); /* Efek bayangan */
}
.blog-pager span#blog-pager-older-link {
float: right; /* Nempel kanan */
}
Silakan masukkan kode diatas, sehingga kurang lebih tampilan main post nya seperti ini:
e. Pembuatan Sidebar
Supaya matching dengan tampilan main nya, saya akan membuat sidebar memiliki desain yang mirip dengan main, yaitu berlatar putih dengan bayangan tipis di belakangnya. Berikut kodenya:
aside .widget {
padding: 20px; /* Jarak dalam */
box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1); /* Efek bayangan */
margin-bottom: 20px; /* Jarak bawah */
background: #fff; /* Warna latar */
}
Setelah menambahkan kode diatas, tampilannya bakalan menjadi seperti ini:
aside .widget h2 {
margin-bottom: 20px; /* Jarak bawah */
}
aside .widget ul {
list-style: none; /* Menghilangkan titik di sisi kiri */
}
aside .widget ul li {
padding-bottom: 10px; /* Jarak bawah */
}
aside .widget .item-thumbnail {
float: left; /* Nempel kiri */
margin-right: 10px; /* Jarak kanan */
}
Simpan, dan kurang lebih sekarang hasilnya seperti ini:
Sekarang mari kita lanjut ke tahap membuat template yang terakhir, yaitu pembuatan footer.
f. Pembuatan Footer
Tanpa basa basi lagi, langsung saja tambahkan lagi kode berikut:
footer {
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1); /* Efek bayangan */
padding: 20px; /* Jarak dalam */
text-align: center; /* Supaya tulisan di tengah */
background: #fff; /* Warna latar */
}
Selesai, sekarang tampilan footer anda sudah menjadi seperti ini:
Bagaimana? Sudah jadi bukan templatenya? Tetapi masih ada dua langkah lagi yang perlu anda lakukan, yaitu membuatnya menjadi responsif agar mobile friendly dan tentunya agar SEO. Untuk peresponsifannya, akan saya buat pada part selanjutnya...
Oh iya, sampai selesai part 2 ini anda sudah membuat kode CSS sebanyak ini:
<style>
/* ----- CSS Reset by KodeJarwo.com ----- */
b {font-weight:bold!important}
i {font-style:italic}
u {text-decoration:underline}
strike {text-decoration:line-through}
html {background:#eee}
a {text-decoration:none}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; word-wrap: break-word;}
header {
background: #fff; /* Agar background header berwarna putih */
text-align: center; /* Membuat judul dan deskripsi blog berada di tengah */
padding: 30px; /* Memberi jarak dalam header agar tulisan tidak nempel ke pojok */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Memberikan efek bayangan di bawah header */
}
#header-inner {
padding-bottom: 20px;
}
#wrapper {
display: flex; /* Karena WRAPPER berbentuk tag SPAN, maka harus diberi display flex agar dapat digunakan */
max-width: 1000px; /* Lebar wrapper */
padding: 20px; /* Jarak dalam agar tidak menempel dengan header dan footer */
margin: 0 auto; /* Supaya wrapper menjadi di tengah, bukan menempel di sebelah kiri */
}
main {
width: 70%; /* Lebar postingan adalah 70% dari lebar layar */
float: left; /* Posisi postingan di sebelah kiri */
padding-right: 30px; /* Jarak antara main dengan sidebar */
}
.post-outer {
background: #fff; /* Membuat latar belakang postingan berwarna putih */
padding: 20px; /* Jarak dalam post */
margin-bottom: 30px; /* Jarak antara satu post dengan yang dibawahnya */
box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1); /* Memberikan efek bayangan */
min-height : 140px; /* Tinggi minimal */
}
.thumbnail-post {
position: relative; /* Nda terlalu berguna sih, tapi saran saya pake aja */
margin-right: 20px; /* Jarak antara gambar thumb dengan judul post dan tulisan di sampingnya */
overflow: hidden; /* Supaya gambar thumb yang kebesaran jadi terpotong */
width: 180px; /* Lebar thumb */
height: 140px; /* Tinggi thumb */
float: left; /* Supaya thumb berada di sebelah kiri */
}
.thumbnail-post img {
width: 100%; /* Supaya gambar thumb jadi memiliki lebar yang menyesuaikan div di atasnya (180px) */
}
.entry-header {
margin-bottom: 20px; /* Jarak antara judul post dengan info post */
}
.post-author {
float: left; /* Supaya nempel kiri */
margin-right: 5px; /* Jarak kanan */
}
.post-author img {
display: none; /* Supaya gambar author ilang */
}
.post-tag a {
float: left; /* Nempel kiri */
margin: 0 5px; /* Jarak kanan */
}
.post-tag a:last-child {
margin-right: 10px; /* Jarak kanan */
}
.entry-content {
margin-top: 20px; /* Jarak atas */
margin-left: 200px; /* Jarak kiri */
}
.blog-pager span {
border-radius: 5px; /* Membuat ujung kotak menjadi bulat */
background: #fff; /* Warna latar */
padding: 10px 20px; /* Jarak dalam */
box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1); /* Efek bayangan */
}
.blog-pager span#blog-pager-older-link {
float: right; /* Nempel kanan */
}
aside {
width: 30%; /* Lebar sidebar adalah 100% - lebar postingan (70%), jadi 30% */
float: right; /* Posisi sidebar di sebelah kanan */
}
aside .widget {
padding: 20px; /* Jarak dalam */
box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1); /* Efek bayangan */
margin-bottom: 20px; /* Jarak bawah */
background: #fff; /* Warna latar */
}
aside .widget h2 {
margin-bottom: 20px; /* Jarak bawah */
}
aside .widget ul {
list-style: none; /* Menghilangkan titik di sisi kiri */
}
aside .widget ul li {
padding-bottom: 10px; /* Jarak bawah */
}
aside .widget .item-thumbnail {
float: left; /* Nempel kiri */
margin-right: 10px; /* Jarak kanan */
}
footer {
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1); /* Efek bayangan */
padding: 20px; /* Jarak dalam */
text-align: center; /* Supaya tulisan di tengah */
background: #fff; /* Warna latar */
}
</style>
Menurut saya itu masih sedikit sih...