Kamis, 25 September 2014

Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blog

Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blogger - Tutorial ini adalah lanjutan dari Cara Membuat Template Blog Sendiri. Pada tahap ini anda akan dibimbing untuk membuat Header beserta tempat untuk memasang banner iklan di sebelah kanannya.

Pada tutorial sebelumnya kita telah belajar membuat Pembungkus atau disana kita menyebutnya #wrapper dengan ukuran 1000px. Maka untuk membuat Header dengan ukuran 728 x 90 kita membutuhkan ruang yang berukuran 738x 100. Tentunya dalam pembuatan template blog harus di desain se rapi mungkin, alasan saya menambah ukurannya adalah supaya ada jarak antara header dan tempat banner tersebut. Sebut saja jarak itu sebagai padding.

Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blog

Pada gambar diatas adalah contoh header dan tempat banner yang sudah jadi. Setelah dilakukan pengecekan menggunakan Inspect Element maka akan terlihat jarak antara kedua header tersebut adalah 5px.

Karena kita sudah mengetahui ukuran header kanan yang tepatnya adalah 738px. Maka untuk mengetahui lebar header kiri adalah 1000px - 738px = 262px.

Untuk mulai membuat headernya pertama-tama kita membuat dulu CSS header ini. Sebut saja #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 kurang lebih seperti ini.
<b:section class='header' id='header-kiri' maxwidgets='1'/>
<b:section class='header' id='header-kanan' maxwidgets='1'/>

Perlu anda ketahui 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 HTMLnya akan seperti dibawah 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 kita sudah menentukan lebar header kanannya yaitu 738px, dan header-kiri berukuran 262px. Maka untuk membantu Element widget tersebut berdampingan, 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.

Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blog

Namun, hasilnya masih kurang rapi 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 gambar dibawah ini.

Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blog

Itulah Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blog. Apabila kebingungan bisa bertanya pada kolom komentar. Apabila saya mampu, saya pasti akan menjawabnya. Semoga sukses.

Artikel Sebelumnya :
- Cara Membuat Template Blog Sendiri

Artikel Selanjutnya :
- Cara Membuat Sidebar
- Cara Membuat Dropdown Menu
- Cara Membuat Footer


Source : http://www.noval.web.id/2014/01/cara-membuat-header-dengan-iklan-728-x.html

Artikel Terkait

Cara Membuat Header Dengan Iklan 728 x 90 Pada Template Blog
4/ 5
Oleh

8 komentar

26 September 2014 05.49 delete Komentar ini telah dihapus oleh administrator blog.
avatar
27 September 2014 16.32 delete

Cukup mudah di pahami, izin bookmark dulu :)

Reply
avatar
27 September 2014 19.07 delete

Caranya lebih panjang dari blog lain, tapi ane bookmark dulu siapa tau bisa work di blog ane

Reply
avatar
16 Juli 2015 17.35 delete

kalau untuk wordpress gmn gan?

Reply
avatar
27 Agustus 2015 06.42 delete

Misi kk numpang share ya..!! jika ada yang berminat bisa langsung ke website kami
INFO AGEN JUDI ONLINE 988BET
AGEN JUDI ONLINE
AGEN JUDI
AGEN BOLA
PROMO BONUS 988BET
PREDIKSI BOLA

Reply
avatar
25 Maret 2016 20.22 delete

cantik gan tulisan nya...
tangkyu..
kenziemaysa/tk

Reply
avatar
31 Agustus 2016 10.02 delete

makasi admin :) tutorialnya work di template >>> www.imammustofa.com

Ditunggu kunjungan baleknya

Reply
avatar

Mohon masukkan saran / kritikan Anda. Atau tanyakan sesuatu yang tidak Anda pahami. Free promosi asal sopan.