Membuat Tampilan Layout Blogger (Blogspot) Berwarna

Membuat Tampilan Layout Blogger (Blogspot) Berwarna - Salah satu kelebihan dari platform Blogger atau Blogspot adalah mudahnya di edit sesuka hati, diobok-obok sampai bingung sendiri. Dan salah satu hasil obok-obok Blogger hari ini, kita bisa mengganti tampilan layout blogger atau Tata Letak Blogger menjadi lebih menarik dan tidak membosankan dengan cara membuat tampilan layout (tata letak) blogger atau blogspot menjadi berwarna seperti pelangi dan hasilnya bisa dilihat pada tampilan gambar berikut ini

Dan bandingkan dengan tampilan Layout Blogger yang tidak berwarna berikut ini yang merupakan tampilan awal dari gambar diatas

Jika Anda tertarik untuk mengganti tampilan Layout (Tata Letak) Blogger seperti gambar pertama diatas yaitu membuat tampilan layout blogspot menjadi berwarna maka yang perlu dipersiapkan pertama kali adalah Anda harus punya blog di Blogger, setelah itu mengetahui letak Layout Blogger tersebut. Letak layout blogger berada di halaman dashboard akun Blogger Anda, perhatikan gambar pertama diatas, ada menu deretan vertikal pada bagian sebelah kiri, pada gambar menu Layout berwarna oranye. Layout adalah menu halaman tata letak blogger yang digunakan untuk mengatur dan menambahkan widget kedalam blog

Membuat Tampilan Layout Blogger (Blogspot) Berwarna
Untuk membuat tampilan layout blogger tersebut menjadi berwarna, yang wajib diperhatikan adalah struktur kode CSS dari kode template blog yang Anda gunakan karena tidak semua kode CSS template blog memiliki struktur kode yang sama. Pada contoh gambar diatas merupakan salah satu blog saya yang diganti tampilan layoutnya, struktur blog saya tersebut menggunakan kode CSS dasar dari sebuah template blog. Anda bisa melihat kode CSS template blog saya tersebut di view-source:neuwindow.blogspot.com jadi kode CSS template dasar yang saya gunakan adalah sebagai berikut:

#header-wrapper{..} /* dan beberapa kode pengikut didalamnya seperti tag id #header, #header-right. #header-left dan #menu
#outer-wrapper{..} /* pembungkus bagian body artikel yang bisa meliputi #header-wrapper sampai #footer
#content-wrapper{..} /* pembungkus bagian body artikel yang bisa meliputi #main-wrapper sampai #sidebar-wrapper
#main-wrapper{..} /* pembungkus bagian konten artikel yang meliputi tag .post sampai dengan tag .comments
#kotak-sidebar{..} /* pembungkus bagian widget disisi kanan blog, bisa disebut juga dengan tag #sidebar-wrapper
#footer{..} /* pembungkus bagian footer termasuk copyright

Sedangkan pada halaman Tata Letak (Layout) Blogger, sebagai kode dasarnya menggunakan tag kode CSS dengan id #layout
Sehingga untuk mengganti warna background halaman Tata Letak Blogger adalah menggunakan kode CSS berikut ini:

#layout {background:#88c354!important;} /*menghasilkan background warna hijau seperti contoh gambar diatas
Kenapa menggunakan !important, silahkan baca di kode !important di CSS

Mengganti warna widget header (Judul Blog) di halaman tata letak (layout) Blogger
Jika header blog Anda terbagi menjadi dua (seperti contoh gambar diatas) kanan dan kiri, maka akan memiliki dua struktur kode css untuk header yaitu tag #header atau #header-left yang membentuk sisi kiri header dan biasanya ditempati judul blog dan tag #header-right yang biasanya digunakan untuk tempat iklan atau widget lainnya
Untuk mengganti warna widget pada header blog maka gunakan kode CSS berikut ini:

#layout #header .widget-content {
color: #fff;
background: #d50ae2;
}

Mengganti warna widget header sisi kanan (biasanya widget Iklan) di halaman tata letak (layout) Blogger
#layout #header-right .add_widget {
background: #f98f48!important;
}

Mengganti warna widget Menu di halaman tata letak (layout) Blogger
#layout #menu {
width: 100%;
height: 70px;
background:#66666;
}

Mengganti warna widget Posting Blog di halaman tata letak (layout) Blogger
#layout .main .locked-widget .widget-content {
color: #000000;
background: #f4c649!important;
}

Mengganti warna widget sidebar di halaman tata letak (layout) Blogger
Pada bagian sidebar ini, saya menggunakan tiga kode css untuk mengganti warna pada widgetnya yaitu sidebar yang sudah terdapat widget dan belum (lihat gambar diatas):

• Warna untuk background sidebar:
  #layout .sidebar {
  background:#fb8f3d;
  }
• Warna untuk Add Widget
  #layout #kotak-sidebar .add_widget {
  background: #057199 !important;
  }
  #layout #kotak-sidebar .add_widget a {
  color: #ffffff!important;
  }
  tag #kotak-sidebar sama dengan #sidebar-wrapper
• Warna untuk yang sudah ada widgetnya
  #layout .sidebar .widget-content {
  background: #dc5e4b;
  color: #ffffff;
  }

Mengganti warna widget footer di halaman tata letak (layout) Blogger
Pada contoh gambar diatas, saya tidak melakukan pergantian warna pada bagian footer, jika Anda ingin mengganti warna widget footer juga, silahkan gunakan kode CSS berikut ini dan isi value sesuai dengan keinginan anda
#layout #footer-wrapper {}
#layout #footer {}

Mengganti tombol Edit di halaman tata letak (layout) Blogger
Untuk mengganti tombol Edit seperti contoh gambar diatas, gunakan kode CSS berikut ini:
.editlink {
height: 35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding:0 10px;
color:#ffffff!important
}

Untuk menggnati tombol Edit pada header dan sidebar, gunakan kode CSS berikut ini:
#layout .sidebar .widget-content .editlink, #layout #header .widget-content .editlink {
height:35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}

Untuk mengganti tombol Edit pada Potingan Blog dengan tombol Edit pindah ke pojok kanan atas seperti contoh gambar, gunakan kode berikut ini:
#layout .main .locked-widget .widget-content .editlink {
height: 35px;
line-height: 35px;
top: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}

Jika kode CSS disatukan maka akan menghasilkan kode CSS untuk layout (Tata Letak) Blogger seperti berikut ini:
#layout {
background: #88c354!important;
}
#layout #header .widget-content {
color: #fff;
background: #d50ae2;
}
#layout #header-right .add_widget {
background: #f98f48!important;
}
#layout #menu {
width: 100%;
height: 70px;
background:#66666;
}
#layout .main .locked-widget .widget-content {
color: #000;
background: #f4c649!important;
}
#layout .sidebar {
background:#fb8f3d;
}
#layout #kotak-sidebar .add_widget {
background: #057199 !important;
}
#layout #kotak-sidebar .add_widget a {
color:#fff!important;
}
#layout .sidebar .widget-content .editlink, #layout #header .widget-content .editlink {
height:35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout .main .locked-widget .widget-content .editlink {
height: 35px;
line-height: 35px;
top: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout #footer-wrapper {}
#layout #footer {}

Untuk menerapkannya kedalam blog, silahkan salin kode berikut ini setelah atau dibawah kode ]]></b:skin> atau bisa juga </style>
<b:template-skin>
<![CDATA[
#layout {
background: #88c354!important;
}
#layout #header .widget-content {
color: #fff;
background: #d50ae2;
}
#layout #header-right .add_widget {
background: #f98f48!important;
}
#layout #menu {
width: 100%;
height: 70px;
background:#66666;
}
#layout .main .locked-widget .widget-content {
color: #000;
background: #f4c649!important;
}
#layout .sidebar {
background:#fb8f3d;
}
#layout #kotak-sidebar .add_widget {
background: #057199 !important;
}
#layout #kotak-sidebar .add_widget a {
color:#fff!important;
}
#layout .sidebar .widget-content .editlink, #layout #header .widget-content .editlink {
height:35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout .main .locked-widget .widget-content .editlink {
height: 35px;
line-height: 35px;
top: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout #footer-wrapper {}
#layout #footer {}
]]>
</b:template-skin>

Sebelum menerapkan kode diatas, perhatikan struktur kode CSS template blog Anda, kode diatas adalah kode dasar dan umum digunakan pada semua template blog. Jika kode diatas tidak ada didalam template blog Anda berarti kodenya lain, silahkan atur dan sesuaikan sendiri. Sedangkan untuk kode CSS Layout Blogger, semuanya memiliki kode yang sama. Dan jika masih belum paham silahkan tinggalkan komentar Anda di artikel ini, Membuat tampilan Layout (Tata Letak) Blogger (Blogspot) berwarna. Terimakasih

Membuat Tampilan Layout Blogger (Blogspot) Berwarna 2015-02-13T07:28:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni