Modifikasi Blogger hari #6 - mengganti Background, menambah border dan menghilangkan toolbar Template blogger

Merubah kode CSS

Alhamdulillah, berkat latihan di Codecademy (baca Modifikasi blogger hari ke-6), sekarang kita dah sedikit memahami bagaimana dan apa dibalik Tampilan blog kita. Blog yang kita gunakan ini ternyata tersusun oleh Elemen HTML dan penampilannya diatur oleh CSS. jadi kalau kita ingin mengubah tampilan, yang harus lebih kita perhatikan adalah bagian CSS, karena disanalah letak settingannya.

Hari ini, kita akan merubah background sehingga nampak lebih bersih dan professional. menambahkan border / Garis tepi, dan menghilangkan toolbar Blogger yang letaknya paling atas (diatas header)

Merubah Background

Project kita hari ini adalah merubah tampilan background blog kita supaya terlihat Bersih dan profesional, seperti desain yang lagi ngetrend saat ini.
Background warna abu-abu muda, dan garis abu-abu tua.

Langsung saja masuk ke Menu Admin Blogger > Template > Customize
maka akan nampak kotak dialog Blogger Template Designer tempat kita berkreasi mengganti gambar background, warna font, Jenis Font, Warna Menu bar, warna link dll.

Perhatikan penampakannya sbb:

Blogger template designer

setelah dimodif dan diotak atik, berikut ini penampilan Blog zaenal design:

blog Zaenal design

Agak pangling ya, hehe...
Saya hapus gambar backgroundnya
Saya ganti warna background, warna Border/garis tepi, Font Header, warna menu bar.

Bagus sekali. Oiya selain background saya juga ingin menambahkan garis border yang lebih tebal. mungkin sekitar 15px bagaimana ya caranya?

setelah cari-cari informasi akhirnya nemu di mybloggerlab.com, ada postingan yang merubah garis border menjadi lebih tebal.

Merubah Ketebalan garis Border

Langsung saja masuk ke Menu Admin Blogger > Template > Edit HTML

Berikut ini penampakannya:

Edit HTML

Kita akan menambahkan sedikit kode CSS yang akan mengatur ketebalan garis border
langkah-langkahnya sbb:

Temukan kode ]]></b:skin>
Tambahkan kode Dibawah ini sebelum ]]></b:skin>

3. Cari kode <body>
dan tambahkan kode

4. Sekali lagi carilah kode </body>
dan tambahkan kode berikut ini sebelum </body>

JRENGG...!
Kita lihat hasilnya sbb:

Border pada template blogger

Hehe.. bagus ya tampilan bordernya...

Oiya satu lagi yaitu saya juga ingin menghilangkan toolbar Blogger yang terletak paling atas di Template kita, bagaimana caranya?

Menghilangkan Toolbar Blogger

Cara paling mudahnya kita akan temukan kode yang menampilkan toolbar ini dan kemudian menghapusnya.

Berikut ini kode yang mesti dihapus:

Kode toolbar blogger

Setelah ketemu, hapus saja langsung kode diatas. Isinya adalah kode-kode javascript yang fungsinya menampilkan toolbar blogger.

Oiya jangan simpan dulu perubahan yang kita lakukan, tapi KLIK tombol PREVIEW.
Kalau sudah Yakin, barulah Klik tombol SAVE TEMPLATE.

Berikut ini penampakan hasil Modifikasi kita:

Penampakan Template yang sudah dimodifikasi

Alhamdulillah.. bagus ya.. InsyaAllah besok kita akan sedikit otak-atik masalah SEO
Sampai jumpa lagi.
Wassalam..

Zaenal Design

Pages

Sabtu, 09 Mei 2015