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.
Al Bani HR Friday, December 9, 2016 Blogging
Berlangganan via Email
Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.
Post a Comment