Cara membuat header dengan iklan

Oleh Bardil

14 Juli, 2014

Bagikan :

Tweet

Oke, kembali lagi dengan saya. Sudah bosan kah? Hehe. Ini merupakan tutorial kelanjutan dari tutorial "Cara Mandiri Membuat Template Blog Sendiri" Pada tutorial sebelumnya saya hanya memberikan template dasar dan pendahuluan untuk membuat template yang paling dasar. Sebelumnya, anda harus keluar dari template editor kemudian masuk kembali ke template editor agar memastikan widget blog / artikel sudah muncul di template.

Kita lanjut membuat template dari atas, ke bawah, dan dari luar ke arah dalam bagian template. Sekarang kita akan belajar cara untuk membuat header blog dengan mendukung iklan 728 x 90 px di blog. Disini saya juga akan memberikan tips-tips yang semoga bermanfaat untuk anda yang ingin membuat template.

Karena sebelumnya saya memberikan template dengan #wrapper berukuran 1000px, maka untuk membuat iklan dengan ukuran 728 x 90 px maka kita tambahkan saja menjadi 738 x 100 px. Loh kok ditambah 10px? Yap, 10 px nya itu untuk jarak antara widget dengan kulit luar element (padding). Jadi, di sekitar gambar iklan tersebut ada jarak 5px antara kulit element. Untuk melihat jelasnya, saya berikan gambar contoh. 

Nah, di gambar atas tersebut pada iklan lazada di antaranya ada padding 5px. Gambar yang berwarna hijau kekuning-kuningan merupakan padding. Sekarang untuk membuatnya 2 kolum kita akan membagi ukuran untuk header yang kiri. Karena header kanan (iklan) berukuran 738px, makan header yang kiri berukuran 1000 - 738 px = 262px. Sebelumnya kita buat dulu CSS untuk membungkus header, anggap namanya #header-wrapper.

Letakkan CSS berikut di atas ]]</b:skin>

#header-wrapper{width:100%;overflow:hidden;}

Sebelumnya letakkan dulu HTML pembungkus header di bawah <div id='wrapper'>

<header id='header-wrapper'>
<!-- Letak Kedua Widget (b:section) Header -->
</header>

Untuk membuat 2 widget didalam 'header-wrapper', maka letakkan 2 b:section didalam 'header-wrapper'. B:section yang dibuat kuranglebih seperti ini.

<b:section class='header' id='header-kiri' maxwidgets='1'/>
<b:section class='header' id='header-kanan' maxwidgets='1'/>

Sebelumnya, b:section merupakan kode bawaan blogger untuk penempatan widget. Class merupakan sesuatu yang menyamakan CSS suatu element. Id merupakan sesuatu yang membedakan CSS suatu element. Maxwidgets merupakan penentu jumlah berapa element maksimal yang boleh ditambahkan.
Kurang lebih kode HTML nya akan seperti ini.

<header id='header-wrapper'>
<b:section class='header' id='header-kiri' maxwidgets='1'/>
<b:section class='header' id='header-kanan' maxwidgets='1'/>
</header>

Karena tadi sudah sepakat bahwa untuk header-kanan berukuran 738px, dan header-kiri berukuran 262px. Untuk membantu Element widget tersebut berdampingan, maka kita gunakan CSS float. Karena header-kiri berada di kiri, maka gunakan float:left dan header-kanan berada di kanan, maka gunakan float:right. Maka letakkan CSS berikut tepat di atas ]]</b:skin>

#header-kiri{width:262px;overflow:hidden;float:left;}
#header-kanan{width:738px;overflow:hidden;float:right;}

Kemudian simpan template. Silahkan buka menu "Tata Letak" dan lihat widget hasilnya. Tambahkan widget header di kiri dan tambahkan widget yang berisikan script iklan. Simpan. Hasilnya kurang lebih seperti berikut.

Namun, hasilnya masih kurang rapih karena belum ada jarak antara isi widget dengan kulit element. Untuk membuat jarak tersebut bisa menggunakan CSS padding. Maka letakkan kode berikut tepat di atas ]]</b:skin>

.header .widget{padding:5px;}

Kurang lebih hasilnya akan seperti berikut.

Selesai.

Nah yang menjadi pertanyaan, kenapa paddingnya tidak ditaruh di CSS #header-kiri dan #header-kanan? Nah, ini ada sedikit tips. Kalau anda sudah menentukan ukuran element tersebut, maka letakkan padding pada element didalamnya. Karena kalau meletakkan padding pada element yang sudah ditentukan ukurannya, maka ukuran tersebut bisa bertambah atau berkurang dari yang sudah ditentukan. Oke, contohnya peletakkan padding di #header-kiri dan #header-kanan. Hasilnya sangat tidak baik.

Dari gambar di atas, ukuran #header-kanan berubah menjadi 748px karena ditambahkan padding sebesar5px. Dan tidak lagi berada berdampingan.

Semoga tutorial dan tipsnya dapat dimengerti dan bisa menjadi ilmu bagi anda yang ingin membuat template.

Tunggu kelanjutan tutorial selanjutnya.

Tag : Belajar menjadi bloger keren