August 30, 2019

CARA MEMPERBAIKI LAYOUT DESAIN TEMPLATE BLOGGER DENGAN MUDAH

desain dan layout
kreidt gambar: pexel.com
Layout template blog itu penting bagi pengguna awam. kalau desainernya ya pasti mengerti bagaimana mengedit template dari warna hingga tataletak dan tampilan widget template blog yaitu melalui halaman editor HTML.

Namun karena template juga di pakai oleh pengguna yang kurang mengerti koding, makanya dibuatkanlah LAYOUT untuk pengguna umum. Sebagai seorang blogger anda pasti pernah dong memasang atau menambahkan widget widget seperti popular posts, follower, Featured post masuknya ya melalui pengaturan blog dengan cara mengklik "layout" kalau bahasa Inggris, atau "tataletak" kalau blognya menggunakan bahasa Indonesia. Perhatikan gambar:
blogger layout normal
layout blogger normal (template layout versi 3)
Gambar layout diatas adalah layout terbaru blogger atau layout versi 3 yang normal. Layout akan menjadi cacat biasanya ketika menambahkan elemen baru pada template, misalnya pada saat kita menambahkan menu navigasi custom menggunakan dengan material, HTML-CSS-JavaScript, sering terlihat tampilan layout menjadi tampak "cacat" memiliki dots atau titik titik seperti terlihat pada gambar berikut:
layout tidak normal
layout blogger tidak normal (template layout versi 3) 
Bagaimana cara memperbaikinya?
Mudah! Sengaja saya bahas dan berikan contoh layout dengan template jenis terbaru dengan layout versi ketiga seperti: Contempo, Soho, Emporio dan Notable. Karena jenis atau tipe template template default (bawaan) terbaru ini sangat dianjurkan pemakaiannya oleh Google.

Pertama: Anda harus masuk ke dalam pengaturan blogger dan masuk ke "edit HTML" cari kode berikut:  <b:template-skin>... </b:template-skin> letaknya dibawah kode ]]></b:skin>

Untuk template contempo:
Hapus semua kode diantara <b:template-skin> dan </b:template-skin> misalnya pada template contempo formatnya:
<b:template-skin>
<![CDATA[
body#layout .hidden,
body#layout .invisible {
display: inherit;
}
body#layout .navigation {
display: none;
}
body#layout .page,
body#layout .sidebar_top,
body#layout .sidebar_bottom {
display: inline-block;
left: inherit;
position: relative;
vertical-align: top;
}
body#layout .page {
float: right;
margin-left: 20px;
width: 55%;
}
body#layout .sidebar-container {
float: right;
width: 40%;
}
body#layout .hamburger-menu {
display: none;
}
]]>

</b:template-skin> 
Hapus kode yang saya merahkan saja. Ganti dengan kode:
 <![CDATA[
body#layout .hidden,
body#layout .invisible {
display: inherit;
}
body#layout .navigation {
display: none;
}
body#layout .page,
body#layout .sidebar_top,
body#layout .sidebar_bottom {
display: inline-block;
left: inherit;
position: relative;
vertical-align: top;
}
body#layout .page {
float: right;
margin-left: 20px;
width: 55%;
}
body#layout .sidebar-container {
float: right;
width: 40%;
}
body#layout .hamburger-menu {
display: none;
}
]]>
Untuk template soho
Caranya sama dengan contempo, hapus kode yang terletak diantara <b:template-skin> dan </b:template-skin> namun kodenya penggantinya adalah:
<![CDATA[
body#layout .hidden,
body#layout .invisible {
display: inherit;
}
body#layout .page {
width: 60%;
}
body#layout.ltr .page {
float: right;
}
body#layout.rtl .page {
float: left;
}
body#layout .sidebar-container {
width: 40%;
}
body#layout.ltr .sidebar-container {
float: left;
}
body#layout.rtl .sidebar-container {
float: right;
}
]]>
Untuk template emporio
Caranya sama dengan contempo dan soho, yakni hapus kode yang terletak diantara <b:template-skin> dan </b:template-skin> namun kodenya penggantinya adalah:
<![CDATA[
body#layout .hidden,
body#layout .invisible {
display: inherit;
}
body#layout .centered-bottom {
position: relative;
}
body#layout .section.featured-post,
body#layout .section.main,
body#layout .section.vertical-ad-container {
float: left;
width: 55%;
}
body#layout .sidebar-container {
display: inline-block;
width: 39%;
}
body#layout .centered-bottom:after {
clear: both;
content: "";
display: table;
}
body#layout .hamburger-menu,
body#layout .search {
display: none;
}
]]>
Untuk template Notable
Caranya sama dengan contempo dan soho dan emporio, yakni hapus kode yang terletak diantara <b:template-skin> dan </b:template-skin> namun kodenya penggantinya adalah:
<![CDATA[
body#layout .hidden,
body#layout .invisible {
display: inherit;
}
body#layout .navigation {
display: none;
}
body#layout .page {
display: inline-block;
vertical-align: top;
width: 55%;
}
body#layout .sidebar-container {
display: inline-block;
float: right;
width: 40%;
}
body#layout .hamburger-menu,
body#layout .search {
display: none;
}
]]>

Kegunaan tataletak/layout pada blogger:
  1. Memudahkan pengguna template mengatur tataletak widget template
  2. Memudahkan pengguna template menambahkan elemen elemen blog buatan pihak ketiga
  3. Menambahkan atau merobah judul blog
  4. Menambahkan atribusi pada footer blog
  5. dll

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist