Tidak sedikit blogger yang membahas bagaimana cara mengatur layout blogspot sesuai dengan keinginan sendiri, template 1 kolom, 2 kolom 3, 4 5 atau banyak kolom sekalipun dapat dilakukan dengan mudah, berikut ini adalah tahapan-tahapan mengatur tampilan blogspot sesuai dengan selera.
Terlebih dahulu saya jelaskan bahwa cara ini tidak berlaku pada classic template
Selanjutnya adalah menghapus semua konten html setelah tag <body expr:class='"loading" + data:blog.mobileClass'>
Kemudian menghapus <b:skin></b:skin>, dan juga hapus <b:template-skin></b:template-skin> maka hasilnya akan terlihat seperti gambar dibawah ini
Langkah berikutnya adalah menambahkan <b:skin><b:skin> yang nantinya akan diisi dengan CSS script untuk layout yang di inginkan.
Lengkapi juga di bawah tag body dengan kode html yang hilang, untuk mempercepat bisa mengcopy paste script dibawah ini, kita mulai saja dari tag body
Nah, mengosongkan layout sudah dilakukan, selanjutnya kita tinggal membayangkan layout seperti apa yang di inginkan, 1 kolom, 2 kolom, 2 kolom kira dan kanan atau terserah. Disini saya akan memberikan contoh membuat Layout Template Blogger 2 kolom total screen width 870px dengan struktur komponen kurang lebih terdiri dari Header, Banner, Blog Post, Sidebar, 3 kolom additional space dan footer yang tergambar pada gambar dibawah ini
Nah, untuk mendapat Template layout seperti diatas, penyusunan kode HTML dan CSS Stylenya adalah sebagai berikut ini
Berikut ini adalah Contoh CSS <b:skin> :
Simpan konten <b:skin></b:skin> diatas tag </head>, dan jika semuanya benar maka tampilan pada halaman "Tata Letak" akan terlihat seperti gambar dibawah ini
Jika sudah seperti ini, maka langkah selanjutnya adalah menambahkan berbagai widget pada setiap section yang sudah dibuat.
Untuk tampilan dan desain, silahkan gunakan imajinasi anda untuk di aplikasikan pada CSS Style <b:skin></b:skin>
Untuk melihat DEMO, lihat disini
Untuk melihat DEMO dengan CSS tambahan, lihat disini
Terlebih dahulu saya jelaskan bahwa cara ini tidak berlaku pada classic template
Step by step membuat template blogger sendiri atau mengatur sendiri layout blogger sesuai dengan selera
Tentunya agar dapat melakukan hal ini adalah harus login dulu ke http://blogger.com, lalu pilih blog yang ingin di customize, pilih menu template dan klik Edit HTML, Lihat pada gambar
Selanjutnya adalah menghapus semua konten html setelah tag <body expr:class='"loading" + data:blog.mobileClass'>
Kemudian menghapus <b:skin></b:skin>, dan juga hapus <b:template-skin></b:template-skin> maka hasilnya akan terlihat seperti gambar dibawah ini
Langkah berikutnya adalah menambahkan <b:skin><b:skin> yang nantinya akan diisi dengan CSS script untuk layout yang di inginkan.
Lengkapi juga di bawah tag body dengan kode html yang hilang, untuk mempercepat bisa mengcopy paste script dibawah ini, kita mulai saja dari tag body
<body expr:class='"loading" + data:blog.mobileClass'>
</body>
</html>
Nah, mengosongkan layout sudah dilakukan, selanjutnya kita tinggal membayangkan layout seperti apa yang di inginkan, 1 kolom, 2 kolom, 2 kolom kira dan kanan atau terserah. Disini saya akan memberikan contoh membuat Layout Template Blogger 2 kolom total screen width 870px dengan struktur komponen kurang lebih terdiri dari Header, Banner, Blog Post, Sidebar, 3 kolom additional space dan footer yang tergambar pada gambar dibawah ini
Nah, untuk mendapat Template layout seperti diatas, penyusunan kode HTML dan CSS Stylenya adalah sebagai berikut ini
<body expr:class='"loading" + data:blog.mobileClass'>Struktur kompnen yang di inginkan sudah dibuat, sekarang kita tinggal mengaturnya dengan CSS pada tag <b:skin></b:skin>,
<center>
<div class='frame-utama'>
<!-- Header start-->
<b:section id='header'/>
<!-- Header Stop-->
<!-- Banner start-->
<b:section id='banner1'/>
<b:section id='banner2'/>
<!-- Banner Stop-->
<!-- Blog Post-->
<b:section class='main' id='tulisanku' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<!-- Blog End-->
<!-- Sidebar start-->
<b:section id='sidebar'/>
<!-- Sidebar End-->
<!-- Additional space-->
<b:section id='space1'/>
<b:section id='space2'/>
<b:section id='space3'/>
<!-- Additional stop-->
<!-- Footer Start-->
<b:section id='footer'/>
<!-- Footer Stop-->
</div>
</center>
</body>
</html>
Berikut ini adalah Contoh CSS <b:skin> :
<b:skin>Selesai,
body {font-family: sans-serif; font-size: 1em; padding: 0px; margin: 0px; background: #c7c7c7}
.frame-utama {width: 826px; padding: 24px; text-align: left; background: #fff}
.section, .widget {padding: 0px; margin: 0px}
#header, #footer {margin-bottom: 24px}
#banner1, #banner2, #tulisanku, #sidebar, #space1, #space2, #space3 {display: inline-block; vertical-align: top; margin-bottom: 24px}
#banner1 {width: 399px; margin-right: 20px}
#banner2 {width: 399px}
#tulisanku {width: 498px; margin-right: 20px}
#sidebar {width: 300px}
#space1, #space2 {width: 258px; margin-right: 20px}
#space3 {width: 258px}
</b:skin>
Simpan konten <b:skin></b:skin> diatas tag </head>, dan jika semuanya benar maka tampilan pada halaman "Tata Letak" akan terlihat seperti gambar dibawah ini
Jika sudah seperti ini, maka langkah selanjutnya adalah menambahkan berbagai widget pada setiap section yang sudah dibuat.
Untuk tampilan dan desain, silahkan gunakan imajinasi anda untuk di aplikasikan pada CSS Style <b:skin></b:skin>
Untuk melihat DEMO, lihat disini
Untuk melihat DEMO dengan CSS tambahan, lihat disini
Labels: Blog, blog template, Cara, customized, layout, Webmaster