Mulai Belajar Membuat Tema Kustom Blogger Dari Awal

Pada postingan ini, kita akan membuat tema Blogger benar-benar dari awal. Untuk mulai belajar membuat tema kustom Blogger ini, setidaknya Anda sudah menguasai ilmu dasar HTML dan CSS.

Untuk itu kita akan belajar try and error untuk kode-kode HTML dan CSS pada editor HTML Blogger.

Ini adalah dasar membuat tema kustom Blogger agar Anda lebih memahami cara kerja editor HTML Blogger dan lebih mengetahui struktur dasar tema Blogger.

Dengan begitu, Anda akan lebih mudah mengembangkan desain Anda sendiri pada custom template untuk blog Anda.

Namun untuk mengembangkan desain lanjutan, Anda setidaknya harus menguasai dasar Javascript juga. Atau Anda menguasai dasar AMP jika ingin membuat tema AMP pada Blogger.

Membuat Halo Dunia

Mari kita mulai membuat tema kustom Blogger dengan menyapa dunia dahulu di dunia internet. Silahkan buat blog baru di dashboard Blogger Anda untuk belajar membuat tema kustom ini, bebas memilih tema default apa saja untuk awalan.

Kemudian silahkan masuk ke dashboard Blogger > theme > edit HTML lalu klik pada editor Blogger dan klik tombol Ctrl + A pada keyboard.

Silahkan copy kode berikut dan Ctrl + V atau paste di editor HTML Blogger.


<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8' />

<title>Title Blog</title>

</head>

<body>

<p>Halo Dunia</p>

</body>

</html>

Silahkan SAVE tema.

Ups! Kita mendapati notifikasi There should be one and only one skin in the theme, and we found: 0

Untuk itu, silahkan simpan kode skin Blogger dan style berikut di atas kode </head>


<b:if cond='data:view.isLayoutMode'>

<b:skin><![CDATA[

/* css style untuk halaman layout di bawah ini */



]]></b:skin>

</b:if>

<style>

/* custom css untuk tampilan blog di bawah ini */



</style>

Silahkan SAVE tema.

Ups! Kita mendapati notifikasi We did not find any section in your theme. A theme must have at least one b:section tag.

Untuk itu, silahkan simpan kode berikut di bawah kode <body>


<b:section id="halo" class="halo"></b:section>

Silahkan SAVE tema.

Yes! Tema bisa di-SAVE dan kita tidak mendapat notifikasi error di editor HTML. Anda bisa mencoba Pratinjau untuk melihat kodenya bekerja.

Sekarang lihat blog Anda secara live dengan mengakses URL blog Anda. Yes! Anda sudah berhasil menyapa dunia!

Mulai Membuat Postingan Blog

Setelah kita berhasil menyapa dunia lewat blog kita, sekarang kita akan membuat postingan blog. Silahkan buat sebuah postingan dengan meng-upload sebuah gambar dan beberapa kalimat, bisa menggunakan lorem ipsum.

Setelah itu silahkan publikasikan postingan Anda dan silahkan lihat blog Anda.

Ups! Blog saya masih "Halo Dunia", dan postingan yang saya buat tidak tampil!

Itu karena kita belum membuat kode untuk menampilkan postingan. Untuk itu, silahkan ganti kode berikut.


<b:section class='halo' id='halo'/>

<p>Halo Dunia</p>

Silahkan ganti dengan kode di bawah ini.


<b:section class='main' id='main' showaddelement='yes'>

          <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>

          </b:section>

Kemudian silahkan SAVE tema dan cek blog Anda. Sekarang postigan sudah tampil!

Kode-kode Tema Blogger

Sekarang coba Anda keluar dulu dari edit HTML kemudian masuk lagi ke edit HTML.

Maka secara otomatis akan ada kode yang berubah dan ditambahkan otomatis oleh Blogger. Perubahan ini dilakukan agar Blogger dapat me-render blog menjadi lebih baik sesuai mesin Blogger.

Perubahan yang terjadi itu di antaranya:

  • Perubahan pada tag <html>
  • Penambahan kode-kode pada bagian:
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
    Penambahan kode-kode tersebut adalah untuk menambahkan komentar, tombol share, dan lainnya secara default untuk postingan.

Membuat Header Blog

Setelah kita berhasil menampilkan postingan dan mengetahui perubahan kode pada edit HTML yang dilakukan secara otomatis oleh Blogger, kini kita akan menambahkan header blog.

Silahkan simpan kode berikut di bawah kode <body>


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

        <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header' version='1'/>

      </b:section>

Silahkan SAVE tema dan cek blog Anda. Sekarang blog sudah memiliki Title Blog!

Sekarang coba keluar dari edit HTML kemudian masuk lagi ke edit HTML. Maka akan ada perubahan pada kode header tadi yang dilakukan Blogger secara otomatis untuk kode default header Blogger.

Pada kode tersebut menampilkan Title Blog dan Deskripsi Blog atau Sub Header. Untuk deskripsi blog atau Sub Header, silahkan tambahkan di dashboard > setting > basic > description. Silahkan edit dan isi deskripsinya.

Sekarang coba refresh blognya, maka sekarang akan tampil deskripsi blog atau sub header di bawah title blog.

Membuat Sidebar Blog

Setelah kita berhasil membuat postingan dan header blog, kini kita akan membuat Sidebar blog untuk menampilkan widget-widget blogger seperti popular post dan lainnya.

Silahkan tambahkan kode berikut di atas kode </body>


<b:section class='sidebar' id='sidebar' preferred='yes'/>

Silahkan SAVE tema lalu silahkan keluar edit HTML dan lalu silahkan masuk ke Tata Letak dan tambahkan beberapa widget blogger seperti popular post dan lainnya di Sidebar.

Saat ini tampilan Tata Letak masih berjejer ke bawah, di langkah selanjutnya kita akan merapihkan tampilan Tata Letak.

Sekarang silahkan keluar dari Tata Letak dan masuk ke Edit HTML. Maka Anda akan melihat perubahan pada kode sidebar tadi dan terdapat kode-kode widget yang ditambahkan.

Membuat Footer Blog

Sekarang kita akan membuat Footer Blog, silahkan tambahkan kode berikut di atas kode </body>


<div class='clear'/>

<b:section class='footer' id='footer' preferred='yes'/>

Silahkan SAVE tema lalu silahkan keluar edit HTML dan lalu silahkan masuk ke Tata Letak dan refresh Tata Letak agar Footer yang ditambahkan tadi muncul dan tambahkan beberapa widget blogger yang diinginkan seperti di Sidebar.

Sekarang silahkan keluar dari Tata Letak dan masuk ke Edit HTML. Maka Anda akan melihat perubahan pada kode footer tadi dan terdapat kode-kode widget yang ditambahkan.

Sampai langkah ini kita sudah berhasil membuat blog dengan tema kustom dengan menampilkan Header, Postingan, Sidebar, dan Footer.

Namun saat ini tampilan blog masih berantakan dan berjejer ke bawah.

Membuat Style Untuk Tampilan Blog

Setelah kita berhasil membuat blog dengan tema kustom dengan menampilkan Header, Postingan, Sidebar, dan Footer, kini kita akan merapihkan tampilan blog dengan menambahkan CSS.

Berikut adalah style sederhana sebagai dasar untuk style tampilan blog responsive. Silahkan kembangkan sesuai desain yang diinginkan. Di sini pengetahuan CSS Anda dibutuhkan.

Sebelumnya, silahkan tambahkan kode berikut di bawah kode <meta charset='utf-8'/>


<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>

Kemudian silahkan simpan CSS berikut di bawah kode /* custom css untuk tampilan blog di bawah ini */


/*<![CDATA[*/

body {

    margin: 0;

    padding: 0;

}

* {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

.header {

    text-align: center;

    margin: 0;

    padding: 20px 0;

}

.header h1 {

    font-size: 30px;

    margin: 0;

    padding: 0;

}

.header h1 a{

    color: #333;

    text-decoration: none;

}

.header .description {

    font-size: 18px;

    margin-top: 10px;

    padding: 0;

}

.main {

    width: calc(100% - 320px);/*lebar 100% dikurangi lebar sidebar dan margin left sidebar*/

    float: left;

}

.sidebar {

    width: 300px;

    float: left;

    margin-left: 20px;

}

.post .post-body {

    font-size: 16px;

    color: #555;

}

.post .post-body img {

    width: auto;

    max-width: 100%;

    height: auto;

    display: block;

}

h2.date-header {

    font-size: 16px;

    font-weight: normal;

    margin: 0;

}

h3.post-title {

    font-size: 20px;

    font-weight: bold;

    margin: 20px 0;

}

h3.post-title a {

    color: #333;

    text-decoration: none;

}

.post .post-footer {

    margin: 20px 0;

    font-size: 16px;

    color: #555;

}

.post .post-footer a {

    color: #555;

    text-decoration: none;

}

.clear {

    clear: both;

    display: block;

}

.footer {

    width: 100%;

    float: none;

    margin: 0;

    padding: 20px 0;

}

@media screen and (max-width:768px) {

    .main, .sidebar {

      width: 100%;

      margin: 0 0 20px;

      float: none;

    }

}    

/*]]>*/

Silahkan SAVE tema dan cek tampilan blog Anda sekarang. Blog tampil lebih rapih!

Karena ini tema responsive, maka silahkan matikan tema mobile default Blogger.

Menampilkan Konten Head Default Blogger

Selanjutnya kita akan menaruh kode untuk konten head default blogger untuk favicon, rel canonical, atom, RSS, open graph, dan lainnya.

Silahkan ganti kode berikut:


<title>Title Blog</title>

Ganti dengan kode berikut:


 <title><data:view.title.escaped/></title>

 <b:include data='blog' name='all-head-content'/>

Dari kode di atas maka akan menghasilkan kode berikut seperti pada gambar berikut jika dilihat dengan page source blog.

Klik gambar untuk memperbesar. Klik Esc di keyboard untuk kembali.

Merapihkan Tampilan Tata Letak

Sekarang kita akan merapihkan tampilan Tata Letak sesuai dengan layout blog.

Silahkan simpan kode berikut di bawah kode /* css style untuk halaman layout di bawah ini */


.main {

    width: 53%;

    float: left;

}

.sidebar {

    width: 35%;

    float: right;

}

Save Tema dan keluar edit HTML lalu silahkan cek tampilan Tata Letak.

Nah, sampai di sini kita sudah berhasil membuat tema kustom Blogger. Namun fitur dan tampilannya masih sederhana.

Tindakan Lanjutan

Membuat tema kustom dari tutorial di atas memerlukan tindakan lanjutan yang memerlukan pemahaman lebih tentang CSS, HTML, dan Javascript untuk membuat blog menjadi lebih menarik dan sesuai dengan desain yang diinginkan.

Ada banyak tutorial di blog ini untuk beberapa widget dan untuk SEO tema seperti untuk menu, breadcrumb, schema.org untuk postingan, schema.org untuk homepage, defer offscreen image, dan yang lainnya lagi untuk keperluan kustomisasi tema yang bisa dicoba diterapkan pada tema kustom yang Anda buat.

Atau Anda bisa googling untuk mencari tutorial blogger untuk menemukan sesuatu yang Anda inginkan.

Di sini pun diperlukan try and error dan pantang menyerah untuk mengikuti tutorial blogger sampai sukses dan sesuai keinginan.

Postingan ini hanya tutorial dasar tentang cara membuat blogger custom template agar lebih mengerti cara kerja editor HTML Blogger dan struktur dasar tema blogger.

Atau silahkan tonton video tentan cara membuat blogger custom template ini agar lebih jelas.

Semoga bermanfaat.

UPDATE:

Bagian 2 Lanjutan Belajar Membuat Tema Kustom Blogger Dari Awal simak di sini. Pada tutorial lanjutan belajar membuat tema kustom blogger dari awal bagian 2 tersebut kita akan merubah dan membuat header blogger menjadi dinamis sehingga menjadi lebih SEO friendly.

Bagian 3 Lanjutan Belajar Membuat Tema Kustom Blogger Dari Awal simak di sini. Pada tutorial lanjutan belajar membuat tema kustom blogger dari awal bagian 3 tersebut kita akan mengatur lebar blog dan memasang menu, untuk pengembangkan lebih lanjut sesuai dengan desain yang Anda inginkan.