Dan bandingkan dengan tampilan Layout Blogger yang tidak berwarna berikut ini yang merupakan tampilan awal dari gambar diatas
Jika sobat 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 sobat harus punya blog di Blogger, setelah itu mengetahui letak Layout Blogger tersebut. Letak layout blogger berada di halaman dashboard akun Blogger sobat, 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 sobat 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. sobat 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 sobat 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;
}
Pada contoh gambar diatas, saya tidak melakukan pergantian warna pada bagian footer, jika sobat ingin mengganti warna widget footer juga, silahkan gunakan kode CSS berikut ini dan isi value sesuai dengan keinginan sobat
#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 sobat, kode diatas adalah kode dasar dan umum digunakan pada semua template blog. Jika kode diatas tidak ada didalam template blog sobat 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 sobat di artikel ini, Membuat tampilan Layout (Tata Letak) Blogger (Blogspot) berwarna. Terimakasih
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@