Belajar membuat Tema Bloger sendiri dari awal
Halo pembaca setia blog kami! Pada kesempatan kali ini, kita akan membahas topik yang tak kalah penting dalam dunia blogging, yaitu pemilihan tema blog. Tema bukan hanya sekadar tata letak visual atau warna-warni yang menarik, melainkan fondasi yang akan membentuk identitas dan kesan pertama pembaca terhadap blog Anda.
Di artikel ini saya akan sedikit berbagi tentang cara membuat Tema Bloger sendiri,kalian tingal copy paste saja kode yang akan saya bagi di bawah ini.
Pertama kalian log in dulu ke akun Bloger kalian,jika sudah masuk ke halaman Tema.
ikuti langkah sesuai gambar di bawah.
Jika sudah ,hapus semua kode yang ada di halaman dan ganti dengan kode yang berwarna biru di bawah ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS rules goes here... */
/*
1. CSS Reset
2. Core Layout Structure
3. Template Design
4. Utility Classes
5. Media Queries
*/
]]>
</b:skin>
</head>
<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>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
</header>
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
<b:section class='sidebar1' id='sidebar1' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<footer>
<div>
Copyright © <strong><data:blog.title/></strong>
</div>
</footer>
</body>
</html>
Kurang lebih jadi seperti ini.
Langkah selanjutnya kita perlu menambahkan kode CSS,ikuti langkahnya.
Tempel kode yang berwarna biru di bawah ini di dalam Tag <b:skin> atau di antara <! [ CDATA [
/* Template's Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#header {
text-align:center;
font-family:arial;
}
#main {
float:left;
padding: 50px 20px 20px 20px;
width:76%;
height:80%;
font-family:arial;
display: table-cell;
}
aside {
padding-top:50px;
float:right;
width:20%;
height:80%;
display: table-cell;
}
footer {
width: 100%;
clear: both;
padding: 50px;
font-family:arial;
text-align:center;
}
Tempelkan di sini.
Semoga bermanfaat,Terimakasih.
👉 Part 2
