Home Test2 Testing Posting 2

Testing Posting 2

6/25/2017 |
Bikin template blogger itu gampang-gampang susah. Gampangnya kalau kita udah ngerti strukturnya, kerjanya makin cepet. Susahnya adalah nyari inspirasi baru untuk design nya. Tapi kalau udah terbiasa bakalan ketagihan sih. Oke nggak pake lama, lets go kita c'mon.

Persiapan

Sebelum kita mulai ada beberapa hal yang harus anda perhatikan, yaitu:
  1. Artikel ini panjang banget, jadi mohon bersabar. Ini ujian. :D
  2. Kita butuh koneksi internet yang stabil  buat Trial-Error template blogger yang udah kita bikin
  3. Blog baru untuk eksperimen. Jangan pake blog utama anda yah. Waspadalah!
  4. Pengatahuan dasar HTML, CSS, dan Javascript saya pikir mutlak untuk kita pahami
Dan berikut ini beberapa link penting yang bisa kita jadikan panduan untuk mengembangkan template lebih lanjut nantinya.

Pengembangan Layout dan Struktur Dasar

Layout template blogger sederhana
Gambar diatas adalah layout yang akan kita gunakan. Sederhana banget yah. Dan ada beberapa hal yang juga  harus diperhatikan dalam struktur dasar template blogger, diantaranya:
  • XHTML declaration tag diawal file. 
  • Element seperti: <html>, <head>, dan <body> wajib digunakan
  • Dalam satu template, harus memiliki minimal satu tag <b:skin>untuk menyimpan kode CSS. 
  • Dalam tag <body> harus memiliki minimal satu tag <b:section> untuk menampung konten (content-wrapper) seperti header, widget, atau postingan.
Nah kita akan masuk ke bagian coding nya. Jika anda kurang nyamana dengan code editor bawaan Blogger, anda bisa menggunakan program ekstrernal seperti Notepad++ atau Atom. Setelah selesai nanti tinggal di copy-paste aja.

Sebelum lanjut, silahkan login ke Blogger. Lalu klik Tema > Edit HTML, lalu hapus semua kode yang ada di halaman tersebut.

Bagian <head>
Kita akan membuat kode untuk tag <head> yang berisi title, meta, dan hal lain yang dibutuhkan oleh blog kita nantinya. Kodenya sebagai berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
 <b:include data='blog' name='all-head-content'/>
<title>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <data:blog.pageTitle/>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <data:blog.pageName/> | <data:blog.title/>
 <b:else/>
 Halaman tidak ditemukan loh! | <data:blog.title/>
 </b:if>
 </b:if>
 </title>
<b:skin>
<![CDATA[

/** CSS **/

]]>
</b:skin>
</head>
Penjelasan kodenya sebagai berikut:
  • Kode yang diberi warna hijau adalah kode XML declaration tag, pembuka HTML, dan namespace xmlns:'url', xmlns:b, xmlns:data, dan xmlns:expr yang digunakan untuk memanggil fungsi pada server Blogger
  • Kode yang berwarna biru kita gunakan untuk membuat title yang 'SEO Friendly'
  • Kode yang berwarna orange adalah kode untuk memasukan beberapa meta yang ada di blogger, seperti meta description, favicon, dsb. 
  • Kode yang berwarna merah adalah tempat kita akan menyimpan CSS
Sampai disini bagian kita sudah menyelesaikan bagian <head>. Nanti anda bisa menambahkan meta lain yang anda perlukan. Untuk sekarang kita akan melanjutkan ke bagian <header> terlebih dahulu.

Bagian <header>
Dibagian header ini kita akan membuat sebuah section. Section ini akan berisi informasi mengenai judul blog dan deskripsinya. Masukan kode berikut ini dibawah kode sebelumnya.
<body>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>

 Bagian <nav>
Untuk navigasi, kita cuman bikin sebuah kolom yang berisi satu section. Nanti pada pengaturan tata letak, kita baru menambahkn widget untuk membuat navigasinya. Dan berikut ini kodenya:
<b:section class='tabs' 
id='crosscol' maxwidgets='1' 
name='Cross-Column' showaddelement='yes'>
</b:section>

Bagian <main> 
Sekarang kita akan langsung masuk dulu ke area konten. Anda bisa menambahkan tag <article> maupun <div> untuk ngebungkus konten dari postingannya. Contoh kodenya sebagai berikut. Dan jangan lupa letakan kode ini dibawah kode sebelumnya.
<main>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
</main>

 Bagian <aside>
Aside atau sidebar akan berisi widget yang akan kita gunakan. Untuk namepsace maxwidgets dikosongkan saja, supaya nanti kita bisa menambahkan widget lebih dari satu. Dan berikut ini kodenya:
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>

 Bagian  <footer>
Bagian ini biasanya kita isi dengan atribusi maupun kredit. Anda bisa berkreasi lebih jauh nanti disini. Berikut ini contoh kodenya:
<footer>
<div class="copyrights" style="clear: both;">
<div><strong>&#60;</strong> coded <strong>&#62;</strong> with 
<span style="color:#b71c1c;">&#10084;</span>
by <strong>Ganti Dengan Nama Anda</strong></div>
</div>
</footer>
</body>
</html>

Setelah semua bagian kita selesaikan selanjutnya kita akan bermain CSS. Kali ini kita hanya menggunakan vanila CSS alias CSS biasa.

Oh iya jangan di save yah template yang kita bikin tadi. Kalau berhasil nanti tampilannya kurang lebih kayak gini:
Layout template blogger yang belum dilengkapi CSS

Pengembangan CSS


Next
This is the most recent post.
Previous
Prev Post »