Bani Cyber Blog – Artikel ini adalah kelanjutan dari artikel yang sebelumnya mengenai cara modifikasi tampilan blog agar keren, jika kamu tertarik kamu bisa baca artikel diatas. Sidebar adalah bagian dari blog yang biasanya diletakkan widget, contoh widget adalah popular post, label, profil, dan juga bisa meletakkan kode/html.


Oiya untuk sekedar info aja, peletakan sidebar yang benar pada blog adalah dibagian kanan postingan ataupun setelah postingan misalnya dibagian bawah postingan. Yang tidak disarankan adalah dibagian kiri dan juga bagian atas postingan blog.


Pada template blog yang belum dimodifikasi [CSS] nya sama sekali, bagian sidebar blog pasti terlihat hampa. Kamu perlu modifikasi sendiri bagian sidebar agar terlihat keren ataupun beda dari yang lain.


Tapi masalahnya sekarang adalah kamu tidak mengerti cara memodifikasi tampilan sidebar blog dan tidak memiliki pengetahuan mengenai HTML dan CSS. Apakah benar? Gak. Yaudah kalau gitu gak usah kita lanjutin, Tapi rasanya saya dengar tadi kamu bilang IYA deh, hehehe:D.


Dalam memodifikasi tampilan pada sidebar, kamu perlu mengenal CSS. Bukan Sidebar saja yang memerlukan CSS tapi juga seluruh tampilan pada blog kamu memerlukan css, fungsinya untuk menghias tampilan pada blog kamu.


Udah gak sabar untuk modifikasi tampilan pada sidebar blog kamu, baiklah inilah cara paling mudah untuk modifikasi tampilan sidebar pada blog kamu.

1. Silahkan Log In Ke Akun Blogger Kamu.
2. Setelah Itu Buka Template » Edit HTML.
3. Silahkan Unduh Template Lama Kamu Sebagai Pengaman.
4. Tambahkan Kode Berikut Sebelum Atau Diatas Kode ]]></b:skin>

INFO!!!
Apabila Kamu Sudah Memiliki Kode Yang Serupa Dengan Kode Dibawah, Jangan Lakukan Langkah Nomor [4].

#sidebar-wrapper {float: right; width: 320px; margin: 12px 0;
}
.sidebar-container {margin: 0 0;
}
.sidebar h3 {font: bold normal 14px Arial, sans-serif; background: #666; color: #232323; margin: 0 0 10px 0; padding: 4px 8px;
}
.sidebar .widget {background: #fff; margin: 0 0 0.5em; padding: 0.5em;
}
.sidebar ul, .sidebar ol {list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0;
}
.sidebar li {margin: 0 0 0 0; padding: 3px 0; border-bottom: 1px dotted #ddd
}

5. Save Template

Apakah hanya sampai disitu? Tidak. Kode yang diatas hanyalah contoh kode dari blog ini, kamu perlu memodifikasi css nya lebih dalam lagi. Ok, kita mulai dari yang pertama, apa itu? Ini dia.


1. Modifikasi Ukuran Widget Sidebar

Log In Blogger.com
Template » Edit HTML
Cari Kode Dibawah

#sidebar-wrapper {float: right; width: 320px; margin: 12px 0;
}

Ganti Kode 320px, Sesuai dengan ukuran yang kamu inginkan.
Save Template


2. Mengubah Background Widget Sidebar

Log In Blogger.com
Template » Edit HTML
Cari Kode Dibawah

.sidebar .widget {background: #666; margin: 0 0 0.5em; padding: 0.5em;
}
Ganti Kode #666, Sesuai dengan warna yang kamu inginkan.
Save Template


3. Modifikasi Background Font Judul Sidebar

Log In Blogger.com
Template » Edit HTML
Cari Kode Dibawah

.sidebar h3 {font: normal 14px Arial, sans-serif; background: #f2f2f2; color: #232323; margin: 0 0 10px 0; padding: 4px 8px;
}
Ganti Kode #f2f2f2, Sesuai dengan warna yang kamu inginkan.
Save Template


4. Modifikasi Warna Font Judul Sidebar

Log In Blogger.com
Template » Edit HTML
Cari Kode Dibawah

.sidebar h3 {font: normal 14px Arial, sans-serif; background: #f2f2f2; color: #232323; margin:0 0 10px 0; padding: 4px 8px;
}
Ganti Kode #232323, Sesuai dengan warna yang kamu inginkan.
Save Template


5. Modifikasi Jenis dan Ukuran Font Judul Sidebar

Log In Blogger.com
Template » Edit HTML
Cari Kode Dibawah

.sidebar h3 {font: normal 14px Arial, sans-serif; background: #666; color: #232323; margin:0 0 10px 0; padding: 4px 8px;}
Ganti Kode 14px, Sesuai dengan ukuran yang kamu inginkan, dan
Ganti kode Arial dengan jenis font yang kamu inginkan.
Save Template


Sampai disitu ada yang kurang dimengerti, apabila kamu masih bingung dalam memodifikasi tampilan sidebar pada blog mu, jangan segan segan untuk bertanya melalui komentar.

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


0 Tanggapan Untuk "Cara Modifikasi/Mengubah Tampilan Sidebar Agar Keren"

Post a Comment