Panduan Lengkap Membuat Template Blogger Dari Awal Hingga Akhir # Part 2

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


Langkah pertama yang dapat anda lakukan adalah pemberian CSS reset. Jadi fungsi dari CSS reset itu untuk mengatur tampilan pada semua tag HTML agar tidak ada jarak-jarak kosong yang mengganggu. Untuk lebih jelasnya silakan lihat gambar dibawah:


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


Pada kerangka ini, kode HTML header ditandai dari tag <header> sampai </header>. Tahap pertama yang harus anda lakukan adalah mendesain bagian headernya terlebih dahulu, lalu mendekor bagian judul dan deskripsi blog. Silakan masukkan kode CSS berikut ke dalam tag <style> baru:

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


Bagi yang belum tau, wrapper merupakan sebuah tag DIV pembungkus untuk bagian MAIN dan ASIDE. Main merupakan bagian postingan, sedangkan Aside merupakan bagian Sidebar. Jadi fungsi dari Wrapper untuk membungkus postingan dan sidebar agar tidak bergabung dengan header dan footer, sekaligus memudahkan anda dalam mendesain.

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:

Masih agak jelek ya, perlu kita perbaiki lagi. Langsung saja silakan tambahkan kode berikut:

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...
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Akbar Rahman Kode Jarwo
Akbar Rahman
# 7 Januari 2019 05.03

Masih hidup ente gan ??? :v

Balas
Faisal Halim Kode Jarwo
Faisal Halim
# 6 Januari 2019 22.47

keren kang terimakasih,

Balas
Nurdin SiKalem Kode Jarwo
Nurdin SiKalem
# 22 November 2018 22.48

keren hu

Balas
Wahyu Kode Jarwo
Wahyu
# 30 Oktober 2018 08.05

ditunggu tutor fullnya om :D

Balas
Lemari Buku Kode Jarwo
Lemari Buku
# 22 Oktober 2018 19.59

ini baru keren, cara yang ngasih tutorial kaya gini

Balas
Deny Listianto Kode Jarwo
Deny Listianto
# 7 Oktober 2018 13.51

Terima Kasih mbah, di tunggu part selanjutnya.

Balas
Wahyu Kode Jarwo
Wahyu
# 6 Oktober 2018 17.13

mantap

Balas
Wahyu Kode Jarwo
Wahyu
# 6 Oktober 2018 17.13

mantap

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 6 Oktober 2018 16.54

Seep gan...

Balas
budy Kode Jarwo
budy
# 6 Oktober 2018 14.09

Ditunggu part selanjutnya bang

Balas