Mengatur Layout Dashboard Blogger Dengan CSS
Wednesday, November 14, 20182 Comments
Mengatur Layout Dashboard Blogger Dengan CSS

Mengatur Layout Dashboard Blogger Dengan CSS

  • Eka Awaludin

  • A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Kali ini aku dibikin bingung dengan layout dashboard Bloggerku yang tampilannya jadi satu kolom dan agak berantakan padahal aku udah nulis pake kode body#layout di CSS untuk mengatur posisi dan tampilan dashboardnya, sama dengan posisi tampilan aslinya yaitu dua kolom. Usut punya usut ada yang kurang di tag xml bloggerku, yaitu menambahkan tag <b:template-skin>.

Cara Pemasangan
Sebelumnya aku mendapatkan pesan error ketika menambahkan kode tersebut di blog, setelah nyari solusinya di Google aku nemuin sebuah thread di Stackoveflow yang ngasih solusinya dan bisa di terapkan ke blogku. Pertama pastikan menambahkan b:layoutsVersion='3' ke tag html, contohnya seperti berikut ini.
<html b:css='false' b:layoutsVersion='3' 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'>
Kemudian baru tambahkan kode <b:template-skin>, contohnya seperti berikut ini.
<b:template-skin>
<![CDATA[
body#layout {
 width: 1000px;
}
body#layout #header-box-kiri {
 float: left;
 width: 695px;
}
body#layout #header-box-kanan {
 float: left;
 width: 300px;
}
body#layout #body-box {
 float: left;
 width: 695px;
}
body#layout #sidebar-box {
 float: left;
 width: 300px;
}
body#layout #footer-left {
 float: left;
 width: 495px;
}
body#layout #footer-right {
 float: left;
 width: 500px;
}
]]>
</b:template-skin>
Dengan cara menambahkan kode tersebut tampilan layout dashboard Bloggerku kembali normal.
Sebelum menambahkan kode.
Setelah menambahkan kode.
Demikian cara mengatur layout dashboard Blogger dengan CSS.

Sumber
  • https://triksonic.blogspot.com/2018/06/tag-b-skin-blogger-tutorial.html
  • https://stackoverflow.com/questions/46539206/blogger-btemplate-skin-display-an-error-when-saving-it
2 comments :
  1. Tutorialnya sangat bermanfaat sekali buat saya yang lagi mengembangkan blog gan

    ReplyDelete