cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog men...
cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.
Langsung saja, cara merubah tampilan bagian sidebar.
- Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
- Dan pilih Desainer Template > Tingkat Lanjut.
- Tambahkan CSS. lalu masukan kode dibawah ini.
- Terapkan ke blog. Selesai.
.sidebar .widget h2{
text-align:center;
border:1px solid #ddd;
margin:-10px -10px 0 -10px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 5px 5px #aaaaaa;}
.sidebar .widget {
text-align:center;
border:1px solid #ddd;
padding:5px 0 5px 0;
box-shadow:0px 10px 10px #aaaaaa;}
text-align:center;
border:1px solid #ddd;
margin:-10px -10px 0 -10px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 5px 5px #aaaaaa;}
.sidebar .widget {
text-align:center;
border:1px solid #ddd;
padding:5px 0 5px 0;
box-shadow:0px 10px 10px #aaaaaa;}
- .sidebar .widget h2{ mengatur judul pada bagian sidebar.
- .sidebar .widget { mengatur isi dari bagian sidebar.
- text-align:center; membuat tulisan ditengah.
- border garis kotak
- margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
- padding mengatur tulisan dibagian dalam tulisan.
- background:#eee; warna background.
- box-shadow: warna bayangan dikotak
Cara Merubah tampilan posting blog.
- Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
- Terapkan ke blog. Selesai.
h2.post-title{
border:1px solid #ddd;
margin:-12px -20px 0 -20px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 10px 5px #aaaaaa;}
.post{
border:1px solid #ddd;
padding:10px 10px 0 10px;
margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
border:1px solid #ddd;
margin:-12px -20px 0 -20px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 10px 5px #aaaaaa;}
.post{
border:1px solid #ddd;
padding:10px 10px 0 10px;
margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
- h2.post-title{ untuk mengatur bagian judul posting
- .post{ untuk mengatur isi dari bagian posting.
- Jika h2.post title tidak ada ganti dengan h3.post title
- Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.
Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.
