Apakah ada tutorial pembuatan blogspot template ?
: Alam Santiko Wibowo
: Alamha*****@gmail.com
: https://snipkode.blogspot.com
: Hallo gan bisakah menuliskan article tentang
pembuatan blogspot template
Kalau ane jelaskan semuanya mungkin akan sangat panjang ya gan, jadi ane beri 3 langkah simpelnya saja dengan memakai code dasar/source utama dari code template, nanti silahkan kembangkan sendiri.
1. Coretan Sketsa Rencana
Sebelum kita coding, biasanya harus membuat seketsa rencana terlebih dahulu, bikin coretan gitu lah ya, contoh simpel seperti ini ( misal halaman depan/homepage ) :
Nah kalau kita sudah punya target tampilan, baru kita persiapkan codenya, ready gan ^_^
tenang aja, code utama tidak sepanjang yang agan bayangkan kok, tapi nanti setelah di generate oleh blogger, baru dia jadi sangat panjaaaang pakai banget -_-'
2. Code Dasar Template
Template Blogger = kumpulan beberapa section, yang didalamnya terdapat widget
Dari rencana sketsa diatas, tinggal kita urutkan saja gan, jadinya nanti terdapat 5 section :
- header
- menu
- sidebar
- isi content (main), *khusus yang satu ini harus berisi widget Blog1
- footer
Dasar Template Blogger
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' lang='id'>
<head>
<b:skin></b:skin>
</head>
<body>
<b:section id='header'></b:section>
<b:section id='menu'></b:section>
<b:section id='sidebar'></b:section>
<b:section id='main'>
<b:widget id='Blog1' type='Blog'/>
</b:section>
<b:section id='footer'></b:section>
</body>
</html>
Yups, code dasarnya hanya seperti itu kok gan, sekarang kita masukkan code tersebut pada blogger themes, silahkan masuk ke pengaturan theme, dan pilih edit HTML
hapus semua code theme yang ada, dan ganti dengan code kita sendiri
Nanti setelah agan simpan, blogger secara otomatis akan membuat code sesuai dengan nama section dan widget yang kita tambahkan, dan ini yang membuat code kita jadi sangat panjang dan ribet ^_^
Untuk widget selain Blog1, kita tidak perlu menambahkan code secara manual, cukup melalui layout pada blogger.
3. Desain dengan CSS
Ok sekarang tinggal kita buat CSS untuk mengatur tampilan, codenya tidak terbatas, tergantung kreasi masing-masing, jadi tidak mungkin ane jelaskan secara detail, karena tampilan dan warna mengikuti selera.Biasanya code CSS kita awali dengan mengatur lebar masing masing section, untuk sementara kita beri warna background yang berbeda, agar lebih mudah terlihat, dan hurufnya kita tengahkan terlebih dahulu, contoh code CSS seperti ini :
Contoh CSS Pembagian Section
*{text-align:center}
#header {background :green; width:100%; min-height:90px}
#menu{background :blue; width:100%; min-height:50px}
#sidebar {background :yellow; width:40%; min-height:300px; float:left}
#main {background :red; width:60%; min-height:300px; float:left}
#footer {background :brown; width:100%; min-height:50px}
Cara memasukkan CSS ada 2 Cara, silahkan pilih yang termudah,
- Melalui edit template seperti langkah 2
- Atau kalau pusing melihat code yang banyak, bisa melalui menu advance, silahkan pilih customize lalu pilih menu advance, dan letakkan code CSS di situ
Dari sini agan sudah berhasil membuat template dasar untuk blogger, kalau semua sudah sesuai rencana, harusnya tampilan blog agan sekarang seperti ini
Related Artikel Tutorial Dasar Pembuatan Template Blogspot