Menata Ulang Title, Deskripsi dan Logo pada Dynamic Template Blogger

Masih seputar mendisain ulang Dynamic template pada blogger, kali ini kita akan menata ulang antara logo, judul/title blog dan deskripsi yang sudah kita pasang pada tutorial sebelumnya. Posisi penampakan template terakhir saya kira-kira seperti ini :

Buat yang ketinggalan mengenai tutorial sebelumnya, silahkan dibaca kembali postingan saya tentantang Menambahkan Logo pada Header Dynamic Template.

Sekarang saya akan mencoba menata ulang susunan tampilan antara logo, deskirpsi dan title blog yang sudan saya buat pada tutorial senelumnya seperti pada gambar diatas.

Seperti biasa, pertama-tama login terlebih dahulu pada blogger, kemudian pilih blog yang mau di edit >> pilih template >> kemudian klik tombol sesuaikan/cotumize. Kemudian pilih background dan pada menu alignment coba logonya di pindahkan ke sebelah kiri, kira-kira gambarannya seperti ini :

 

Hasil penempatan logo ke sebelah kiri pada header maka tampilan template dynamic menjadi hancur seperti ini:

Bisa dilihat dari gambar diatas bahwa logo dan judul/title blog saling tumpuk satu sama lainnya, sekarang akan saya coba perbaiki. Masih pada perancangan template blog/disgn template, pilih menu advance/tingkat lanjut >> kemudian pilih tambahkan CSS.

Pada bagian ini akan saya coba tambahkan kode css seperti ini :

.title h1{
position: relative;
left: 55px;
}

Setelah ditambahkan kemudian seperti biasa klik tombol "terapkan ke blog" pada pojok kanan atas yang berwarna orange. Perlu diingat, disini kita cuma menambahkan, bukan menghapus css yg sudah ada sehingga css sebelumnya tidak perlu dihapus. CSS di atas yang saya tulis berfungsi untuk menggeser title blog sehingga tidak menumpuk dengan logo yang sudah ada. Hasil penampakannya kira-kira seperti ini :

Ok hasilnya ternyata title blog sudah berkeser ke kanan tetapi menimbulkan maslah baru yaitu menumpuk dengan deskripsi, jadi perlu di tambahkan CSS lagi untuk memperbaikinya. Unruk mempercantik penampilannya saya menambahkan konsep agar deskripsi blog berada tepat dibawah judul/title blog, soalnya kalau tetap di tambahkan di samping sepertinya tidak enak dipandang mata karena terlalu panjang ke kanan seperti kereta api.

Masih pada menu CSS perancangan template blog/disagn blog template, tambahkan kode CSS berikut ini :

.header-bar span.title a h1{
top: -16px;
}
.header-bar span.title h3{
top: 12px;
left: -40px;
}

Dan setelah di tambahkan CSS tersebut kemudian klik "terapkan pada blog" pada pojok kanan atas. Ingat CSS ini cuma ditambahkan dan tidak perlu menghilangkan CSS yg sudah ada. Hasil dari penambhan ini akan menjadi seperti ini:

Seperti terlihat pada gambar, title blog, logo dan deskripsi sudah tertata rapi. Sekarang Dynamic template blogger sudah memiliki penampilan yang baru. Untuk menambahkan desain lainnya silahkan lakukan sekratif anda dengan menggunakan CSS, kebetulan saya juga masih butuh banyak belajar tentang CSS ini. Selamat bereksperimen.