Let's make this life Easy, as well as you can
Mengulas berbagai cerita kehidupan mulai dari tradisi hingga teknologi, tips, solusi, informasi, internet, pekerjaan, hiburan, Kesehatan, mitos, fakta, klenik, unik bahkan mistik yang diulas berdasarkan pengalaman serta dari berbagai referensi, semoga bermanfaat
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

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

Webmaster, blog template, Blog, cara, customized, layout

Selanjutnya adalah menghapus semua konten html setelah tag <body expr:class='&quot;loading&quot; + 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
Webmaster, blog template, Blog, cara, customized, layout
Webmaster, blog template, Blog, cara, customized, layout

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='&quot;loading&quot; + 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='&quot;loading&quot; + data:blog.mobileClass'>
<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>
Struktur kompnen yang di inginkan sudah dibuat, sekarang kita tinggal mengaturnya dengan CSS pada tag <b:skin></b:skin>,

Berikut ini adalah Contoh CSS <b:skin> :
<b:skin>
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>
Selesai, 
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

Webmaster, blog template, Blog, cara, customized, layout


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

Label: , , , , ,

Bagikan ke :
facebook google+ twitter BBM

Tulisan Cara mengatur layout atau Customized Template Blogger ini ditulis pada 4/10/2015, Admin akan berusaha sebaik mungkin agar informasi ini sesuai dengan kondisi saat ini (Terupdate), harap maklum jika informasi yang terkandung dalam artikel ini sudah kadaluarsa
| Cari Cara mengatur layout atau Customized Template Blogger di : AOL | Ask | Bing | DuckDuckGo | Microsoft | Google | ixquick | Yahoo | Yandex | Yippy | MySearch