Search This Blog

Mengatur Layout Dashboard Blogger Dengan CSS

  • Monday, July 2, 2018 at 8:29:00 PM
  • 2 Comments
  • Views
Kali ini aku dibikin bingung dengan layout dashboard Bloggerku yang tampilannya jadi satu kolom 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> disertai dengan kode CSS untuk mengatur layoutnya, 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.

Referensi
2 comments
2 comments
  1. Tutorialnya sangat bermanfaat sekali buat saya yang lagi mengembangkan blog gan

    ReplyDelete