Merubah Lebar Header Border dan Menu Page Tabs
.header-outer{
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}
left:-40px;
width:1000px;
height:40px;
bottom:10px;
}
Seperti biasa CSS tersebut ditambahkan pada bagian template >> costumize/sesuaikan >> pada desain template klik menu advance/tingkat lanjut >> klik tambahkan css/add css. Pada kode css yang saya warnai hijau left:-40px; merupakan kode untuk mengatur kerapatan sisi kanan header dengan tampilan layar, silahkan angkanya dirubah-rubah sesuai keinginan teman-teman dengan mencocokan perubahan preview yang tampak pada halaman desain blogger, dan jika sudah merasa cocok silahkan di save dengan klik tombol "terapkan ke blogger" pada pojok kanan atas halaman desain blogger. Kode berikutnya yaitu yang saya warnai biru muda width:1000px; merupakan kode untuk menyesuaikan panjang header di sisi kanan, silahkan di sesuaikan angkanya menurut selera teman-teman. Kode berikutnya yaitu yang saya warnai orange height:40px; merupakan kode untuk merubah ukuran tinggi header, seperti biasa silahkan di sesuaikan dengan selera teman-teman. Yang terakhir yaitu kode yang saya warnai merah bottom:10px; merupakan kode jarak dari bagian bawah, jadi jika angka ini dirubah/diperbesar maka akan ada jarak antara header dengan widget yang ada pada bagian bawah header (dalam contoh ini yaitu jarak antara header dan widget pages seperti yang tampak pada blog saya ini).
Merubah Lebar Widget Menu Pages Pada Blogger
.fauxborder-left {
background-position: left top;
background-repeat: repeat-y;
position: relative; width:960px; left:-10px;
}
background-position: left top;
background-repeat: repeat-y;
position: relative; width:960px; left:-10px;
}
Kode css yang saya warnai biru diatas sebenarnya kode yang sudah ada pada edit template blogger untuk template sederhana default blogger, sedangkan kode yang berwarna hijau adalah kode css yang saya tambahkan untuk merubah posisi kiri widget dan memperpanjangnya ke arah kanan, silahkan di rubah angkanya sesuai selera teman-teman.
Sedangkan untuk menambahkan kode css ini bisa langsung melalui edit template blogger dan tekan ctrl+f kemudian cari penggalan kode .fauxborder-left { kemudian silahkan ditambahkan deklarasi untuk width dan left dengan posisi yang sama seperti kode diatas dan kemudian save template. Tetapi saya lebih suka menambahkannya pada bagian costumize/sesuaikan template karena saat kita merubah-rubah angka width dan left-nya bisa langsung di lihat di preview sudah cocok atau belum sesuai yang kita inginkan. Untuk cara kedua ini saat menambahkannya usahakan seluruh code css di atas di copy semua dan di paste pada bagian add css, jadi sedikit berbeda jika kita menambahkannya dari menu edit/html template, karena pada penambahan di edit/html template kodenya sudah ada dan kita tinggal menambahkan kode deklarasi width dan left sedangkan jika mengunakan costumize/sesuaikan template, seluruh kodenya kudu di copy untuk memperjelas class css mana yang ingin kita tambahkan.
Jika anda mengalami kesulitan mempraktekkan langkah-langkah diatas, silahkan hubungi saya di Contact.
Jika anda mengalami kesulitan mempraktekkan langkah-langkah diatas, silahkan hubungi saya di Contact.
