Cara mudah modif desain Blogger bagi pemula.
Dibawah ini adalah elemen yang terdapat dalam template Blogger responsive yang sebagian diantaranya tetap sama dengan template Klasik Blogger.
Untuk mengetahui jenis Templatenya, buka di format_paint Tema.
Head
Kode<head></head>
Ini adalah kepala blog yang tidak ditampilkan untuk pengunjung blog namun merupakan elemen utama yang memuat deskripsi / informasi meta atau deskripsi tersembunyi dari kerangka sebuah halaman situs / blog Header
Kode<header></header>
Header adalah kepala blog yang ditampilakn untuk pengunjung blog dan element ini memuat Judul serta deskripsi blog, posisinya tentu dibagian paling atas. Title
Kode<h1></h1>
Title sudah pasti merupakan judul blog yang menjadi kebanggaan masing-masing dan letaknya ada didalam area HeaderDescription
Kode<p></p>
Ini adalah elemen sederhana namun sangat penting sebagai informasi bagi pengunjung dan juga untuk SEO. Elemen ini memuat deskripsi atau penjelasan singkat dari blog, elemen ini berada didalam area Header tepat dibawah Title Body
Kode<body></body>
Body atau badan halaman merupakan konten utama karena disini memuat seluruh konten yang disajikan. Post Title
Kode<h3 class='post-title' ></h3>
Elemen ini adalah judul dari Artikel atau postingan. Post Body
Kode<div class='post-body'></div>
Post body berbeda dengan Body, karena elemen ini berada didalam Body dan memuat artikel utama sedangkan Body memuat semua kontennya dari Post Title, Post Body. Sidebar
Kode<div class='sidebar-container'></div>
Sidebar atau bilah samping merupakan elemen pendukung yang letaknya disamping Post Body baik itu permanen ataupun berupa slide yang bisa dimunculkan dan bisa disembunyikan. Secara garis besar, kerangka halaman blog tersusun oleh elemen-elemen diatas seperti diilustrasikan dibawah ini.
Jika kamu bisa membuat kerangka seperti dibawah ini didalam postingan maka, kamu sudah menguasai HTML & CSS dasar.
Silahkan diintip kode sumbernya dengan Dev Tool atau Source Code Viewer.
<html>
<head>
<meta content='xxx' />
<meta content='xxx' />
<title>description</title>
<b:skin>
kode-css{.......}
</b:skin>
</head>
<body>
<header>
</header>
</html>
<head>
<meta content='xxx' />
<meta content='xxx' />
<title>description</title>
<b:skin>
kode-css{.......}
</b:skin>
</head>
<body>
<header>
<h1>Title - Judul Blog</h1>
<p>Description ini deskripsi</p>
</header>
<div class='post-body'>
</div>
<h3>Post Title</h3>
<p>Disini artikel konten isi postingan</p>
</div>
<footer>
</body>powered by Blogger
</footer></html>
- Jenis Font
- Warna teks / link
- Ukuran teks
- Latar belakang / warna background
- Lebar halaman / lebar bilah samping (sidebar)
Untuk menyesuaikan, buka halaman , klik tombol