Home  ›  Blogger

Cara Membuat Tata Letak Blogger Sendiri

Pada pertemuan terdahulu kita sudah bisa membuat hello world di Blogger. Setelah itu lanjut dengan membuat menu responsif yang masih sederhana. 

Sampai tahap ini sepertinya masih jauh untuk bisa membuat theme blogger sendiri. Meski demikian ada rasa puas ketika saya bisa melakukan percobaan ini.

Ya, meskipun tidak susah payah mengetik kode baris demi baris layaknya programmer atau web developer beneran. Tapi mencari tutorial yang tepat dan kemudian diadaptasikan sesuai keinginan pada template sendiri itu sesuatu banget. Apalagi ini adalah template blogspot yang dibuat dari nol sama sekali.

Sekarang, coba perhatikan pada bagian tata letak atau layout blogger masing-masing. Setelah berhasil dengan percobaan-percobaan kemarin. Kata-kata pada baris kode berikut ini yang ada di menu edit HTML yang isinya <b:section class='main' id='main' showaddelement='yes'/>. Maka, akan terlihat pada bagian tata letak layout blogger seperti ini:

Cara Membuat Tata Letak Blogger Sendiri

Masih sangat sederhana bukan? Coba bandingkan dengan tata letak theme blogger yang lain. Misalnya template yang Anda miliki; entah melalui pembelian atau pun download gratis seperti berikut ini:


Cara Membuat Tata Letak Blogger Sendiri

Untuk itu saya kembali belajar otodidak membuat theme blogger. Kali ini pada tahap membuat tata letak atau biasa disebut dengan istilah layout blogger. Berikut ini tahapan-tahapannya yang disertai dengan screenshot gambar.

1. Masuk ke blogger > Theme > Customize > Edit HTML

2. Perhatikan baris kode yang diapit tag <body> dan </body>.

3. Hapus kode tersebut termasuk baris kode hello world yang kita sudah gak butuh penjelasan lagi.

4. Ganti dengan kode berikut ini.

 <body>

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

    <b:section class='sidebar' id='sidebar' maxwidgets='1' showaddelement='yes'/>

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

    <b:section class='footer' id='footer' maxwidgets='1' showaddelement='yes'/>    

  </body>

5. Klik Save untuk menyimpan

6. Maka inilah penampakannya.

Tata letak pada theme blogger kita sudah bertambah menjadi 4 section. Sedangkan kemarin, theme blogger kita hanya terdiri atas 1 section. Sebetulnya ini hanya copas saja dari baris kode yang sudah ada. Bedanya, sekarang dengan menamakan id dari section tersebut menjadi: header, main, sidebar dan footer. Sehingga diharapkan menambah pengetahuan bagi pemula yang belajar komputer secara otodidak dari nol.

7. Sekarang atur posisinya, tambahkan kode CSS, misalnya seperti ini:

/* MAIN */ #main { float: left; width: 70%; max-width:650px; height: 60%; display: table-cell; } /* SIDEBAR */ #sidebar { width: 30%; max-width:250px; float: right; height: 60%; border-left: 1px solid #ddd; display: table-cell; } /* Footer */ #footer { width: 100%; clear: both; border-top: 1px solid #ddd; padding: 20px; }

8. Letakan kode di atas pada bagian /****CSS CODE*****/ seperti terlihat pada contoh berikut ini:

9. Tampilan tata letaknya menjadi seperti ini gaes.

Pada tahap ini kita baru merancang tata letak blogger. Jika kita buat tulisan dan mencoba untuk dipublish maka postingan belum terlihat pada laman blog. Adapun tulisan "hello world" yang kemarin kita tulis itu juga sudah dihapus. Tulisan tersebut berdiri sendiri dan tidak dapat diedit melalui dashbord postingan di blogger. Sampai sini dulu belajar blogger otodidak kita kali ini. Jika ingin download template sederhana di atas saya tautkan pada link google drive ini. 

Semoga bermanfaat.

Baca Juga

Share This

Tidak ada komentar:

Posting Komentar