Oya, sebelum kita bahas tentang "Membuat Banner Header Sebelah Kanan" ini, saya mau promosi dulu. Yang pertama, buat sobat yang berdomisili di Semarang. Saya baru saja membuka layanan "Tambal Ban Online / Panggilan." - InsyaAlloh saya siap melayani dan membantu Sobat semua yang sedang mempunyai masalah pada roda kendaraan sobat semua. Namanya TOP_SMG, Layanan Tambal Ban Panggilan di Semarang. Untuk info lengkap (info harga dll.) silahkan lihat di profil IG @top_smg
Yang kedua, biar tulisan "Membuat Banner Header Sebelah Kanan" ini terlihat agak panjang (sebenarnya ini tidak penting), tapi tetep saja biar terlihat agak panjang (karena, konon katanya mesin telusur Google suka yang panjang - panjang), maka dengan senang hati saya ingin mengajak Sobat sekalian untuk melihat juga tulisan saya yang terbaru, yaitu: "Membuat Aplikasi Android Tanpa Coding." Tapi bacanya nanti saja tidak apa - apa setelah selesai Membuat Header Banner Sebelah Kanan.
Oya, sebelum kita mulai pembahasan Membuat Header Banner Sebelah Kanan, saya ingin menyampaikan kembali rangkaian tutorial mengenai Membuat Tema Blogger Dari Nol - 100% Bisa. Adapun bagian - bagian dari rangkaian tutorial tersebut adalah sebagai berikut:
- Bagian #1
Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #1.
Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #2. - Bagian #2
Merapikan Tampilan Dasar Blog. - Bagian #3
Membuat Menu Navigasi. - Bagian #4
Membuat Menu Drop Down. - Bagian #5
Membuat Blog Fast Loading (Page Speed Insights). - Bagian #6
Membuat Widget Untuk Banner Pada Header Sebelah Kanan. (Sobat berada di sini) - Bagian #7
Membuat Widget Footer Tiga Kolom. - Bagian #8
Membuat Blog Resposive (Mobile Friendly Test) & SEO Friendly. - Bagian #9
Merapikan Tampilan Layout.
Definisi Banner Header.
Menurut saya, Banner adalah sebuah gambar yang difungsikan untuk sebuah iklan, baik berupa iklan komersil ataupun iklan layanan (bersifat sosial). Sedangkan Header adalah Bagian atas (kepala) sebuah halaman yang biasanya memuat nama dan informasi singkat tentang halaman tersebut. Jadi, Banner Header adalah sebuah gambar yang diletakkan pada bagian atas sebuah halaman yang memuat sebuah iklan atau promosi atau informasi sebuah layanan, baik berupa iklan komersil atau iklan layanan. (Untuk diskripsi ilmiahnya silahkan sobat buka di Kamus Besar atau wikipedia).
Pada halaman sebuah website, Banner Header umumnya diletakkan pada bagian paling atas sebelah kanan, sedangkan pada bagian sebelah kirinya diisi dengan judul atau nama dan diskripsi singkat website. Lazimnya Banner berfungsi untuk mempromosikan sesuatu yang dianggap penting, selain itu penggunaan Banner sangat dianjurkan karena berupa gambar jadinya bisa membuat website tersebut terlihat sangat menarik. Dan lagi, Sebuah Gambar itu lebih memiliki banyak makna lho..., dari pada seribu kata - kata.
Contoh penggunaan Banner seperti gambar yang terdapat pada bagian atas blog ini yang saya gunakan untuk mempromosikan "Tema Blogger Buatan Saya sendiri." Tapi maaf, kalau untuk Banner yang di atas itu tidak termasuk dalam kategori "Gambar yang menarik," maklum, saya orangnya tidak jago dalam membuat gambar yang bermakna seribu kata. Maaf ya... Sekarang mari kita lanjutkan pokok pembahasan kita.
Dasar - dasar Membuat Banner Pada Halaman Web atau Blog.
Setelah kita sepakat mengenai definisi dan fungsi sebuah banner, selanjutnya yang perlu sobat ketahui adalah Dasar - dasar Membuat Banner Pada Halaman Web atau Blog. Untuk membuat (menampilkan) sebuah banner, yang perlu sobat ketahui adalah:
1. Banner itu merupakan sebuah file yang berupa gambar (jpg, png atau gif)
Jadi, pertama - tama sobat harus mempersiapkan sebuah gambar. Tidak hanya itu, sobat juga harus meng-host atau menyimpan gambar yang ingin ditampilkan ke atas awan (cloud-upload). Untuk hal ini sobat bisa meng-upload gambarnya ke drive google atau melalui fasilitas upload gambar yang terdapat pada blogger. Atau sobat juga bisa menggunakan layanan hosting milik sobat sendiri.
2. Area Widget untuk meletakkan code HTML.
Sobat, halaman website itu sebenarnya adalah sebuah kumpulan kode - kode (HTML) yang tersusun sedemikian rupa dan diterjemahkan oleh web browser menjadi sebuah tampilan halaman yang utuh dan apik. Jadi, untuk menampilkan gambar / banner ke dalam sebuah halaman website atau blog kita harus memiliki ruang / area / widget yang bisa kita gunakan untuk meletakkan code HTML yang memuat tag, atribut dan nilai sumber gambar yang ingin kita tampilkan pada halaman web tersebut. Mengenai Tag dan Atribut bisa sobat pelajari di sini.
3. Banner bisa diletakkan dimana saja sesuai selera sobat sendiri.
Banner adalah salah satu element dari banyak element yang mengisi sebuah halaman website. Jadi, sobat bisa meletakkannya dimana saja sesuai selera. Asal sobat tulis code HTMLnya maka banner akan muncul dimanapun tempatnya sesuai letak asli code HTMLnya ditulis. Bisa di Sidebar, Footer, Header atau bahkan di dalam postingan sobat. Yang jelas terserah sobat mau meletakkannya dimanapun tidah harus di Header.
Adapun kode HTML yang harus sobat sematkan kedalam halaman web atau blog apabila sobat hendak menampilkan sebuah gambar atau banner adalah sebagai berikut:
<a href='http://abcdefg.com'><img src='http://abcdefg.jpg' width='657' height='90'/></a>
- Keterangan:
- a adalah tag HTML untuk menambahkan Hyperlink.
- href='....' adalah Atribut HTML dengan nilai http://abcdefg.com (link tujuan apabila gambar diklik).
- img adalah tag HTML untuk mendiskripsikan sebuah gambar.
- src='....' adalah atribut untuk menentukan sumber file dengan nilai http://abcdefg.jpg (lokasi file tersimpan).
Setelah kita mengetahui dasar - dasar pembuatan banner dan cara menampikalnya ke dalam halaman website, sekarang mari kita buatkan ruang / area / widget untuk code HTML di atas.
Membuat Banner Header Sebelah Kanan.
Sesuai judulnya Membuat Banner Header Sebelah Kanan, pada Bagian #6 ini kita akan menambahkan / membuat sebuah banner yang akan kita letakkan pada Header sebelah kanan pada tema blogger yang kita buat.
-Terimakasih-
Setelah melalui tahapan pembuatan tema blogger dari bagian #1 sampai bagian #5, maka tampilan blog kita akan terlihat seperti gambar di bawah ini:
Dan pada tahap ini, kita akan menambahkan Banner pada Header sebelah kanan, sehingga nantinaya tampilan blog kita akan menjadi seperti gambar di bawah ini:
Sekarang, saatnya kita beraksi.
Untuk Membuat Banner Header Sebelah Kanan, ikuti langkah - langkah di bawah ini:
Langkah pertama:
Buka Dashboard Blogger >>> klik pada Tab Theme / Tema >>> Pada bagian sebelah kanan klik "Edit HTML" (pada dashboard blogger dengan tamilan yang baru klik menu (titik tiga sebelah kanan) >>> akan terlihat "Edit HTML").
Cari code HTML <b:section yang mendiskripsikan Header. Biasanya codenya seperti ini <b:section class='header' id='header' .....'>
Setelah ketemu, ciutkan Code Header tersebut sehingga menjadi hanya satu baris antara Tag Pembuka dan Tag Penutupnya. Caranya klik pada angka yang ada di sebelah kiri yang sebaris dengan code tersebut. Sehingga kodenya akan tampak seperti ini: <b:section class='header-banner' id='header-banner' maxwidgets='1' showaddelement='yes'>...</b:section> (cara ini hanya untuk mempermudah dalam meletakkan kode baru pada tempat yang tepat - anda bisa mengabaikan cara ini)
Agar mudah dipahami, silahkan perhatikan gambar di bawah ini:
Langkah Kedua:
Setelah langkah pertama, selanjutnya tambahkan code di bawah ini dan letakkan tepat di dawah code ini </b:section> (Tag Penutup b:section Header) atau tepat diatas code </div> (Tag Penutup div id="bungkus-header" atau penutup div id="header-wrapper").
Berikut ini code yang harus sobat tambahkan.
<b:section class='header-banner' id='header-banner' maxwidgets='1' showaddelement='yes'/>
Setelah code di atas sobat tambahkan, jangan lupa klik "Save Theme." Pastikan penambahan code yang kita lakukan tersimpan dengan sempurna, jangan ada error. Bila terjadi error, coba perhatikan apa yang salah dan perbaiki kemudian klik "Save Theme" sekali lagi.
Jika yang sobat lakukan sama seperti yang saya lakukan, maka codenya akan terlihat seperti gambar di bawah ini:
Langkah Ketiga:
Selanjutnya, pada Dashboard masuk ke Tab Tata Letak / Layout. Akan muncul Section baru dengan nama "header-banner" >>> Klik "Tambah Gadget / Add a gadget">>> Pilih "HTML/JavaScript" >>> Tulis code untuk menampilkan Banner (format code seperti yang telah saya sampaikan pada sub Dasar - dasar membuat banner) >>> Kemudian klik "Save / Simpan." Lihat gambar:
Catatan: Jika sobat belum punya gambar banner sendiri, silahkan masukkan code lokasi gambar seperti punya saya. Anggap saja ini sebagai alat uji coba saja. Ini codenya: <a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbTqMoa1JV-xf3cwe6Qn0DmJqYXezhYKVRL5hSIWGpwsqICboZrNJdavOa_TPXyaulAxLR-opTfl7-uY3R78Pa3SX6wqOH1RSleLH8Vkl0nkWFiDjVf0gv9okTw8c4bwomdPovtKKKh-l/s320/banner-640x83.jpg' width='657' height='90'/></a>
Setelah langkah ketiga, coba lihat blog terlebih dahulu. Lihat hasil kerja sobat tadi. Kalau punya saya terlihat seperti gambar di bawah ini:
Pada hasil kerja saya di atas terlihat Judul Blog dan Banner tersusun atas dan bawah, bukan kiri dan kanan. Ini disebabkan karena belum ada css yang mengatur mereka berdua. Sekarang langkah terakhir untuk Membuat Banner Header Sebelah Kanan adalah menambahkan css.
Langkah Keempat
Langkar terakhir adalah merapikan tampilan Banner yang baru saja kita buat. Untuk mengatur tampilannya agar terlihat rapi dan posisinya bisa berada di sebelah kanan maka kita harus menambahkan css yang mengatur keedua section di atas. Tuliskan css di bawah ini:
#header {
float: left;
width: 30%;
max-width: 299px;
text-align: center;
}
#header-banner {
background-color:grey;
float:right;
padding:0;
overflow:hidden;
margin:0;
width:69%;
max-width:675px;
}
#header-banner img {
display: block;
margin-top: 21px;
width:100%;
max-width: 655px;
}Letakkan tepat di atas ]]></b:skin>. setelah itu jangan lupa klik "Save Theme / Simpan Tema." Sekarang lihat blog sekali lagi. InsyaAlloh hasilnya akan terlihat seperti gambar berikut ini:
Sobat, dengan menambahkan banner kita bisa menyampaikan atau menawarkan sesuatu kepada pengunjung blog kita. Entah apapun itu yang jelas dengan ditambahkannya banner pada header blog, maka banner tersebut adalah sesuatu yang pertama kali akan dilihat oleh pengunjung, jadi hal ini bisa lebih mengakomodir tujuan kita dalam pemasangan banner tersebut.
Sampai di sini usai sudah pembahasan kita kali ini tentang Membuat Banner Header Sebelah Kanan, tentunya masih banyak kekurangan yang harus ditambahkan. Untuk itu, mohon sekiranya sobat "Bermanfaat" semua berkenan untuk mengkoreksi kesalahan - kesalahan yang ada. InsyaAlloh pada kesempatan berikutnya kita akan membahas tentang "Membuat Widget Footer Tiga Kolom."
Share, komentar dan like dari sobat semua sangat bermanfaat untuk blog ini. Akhir kaya, Salam Sukses untuk kita semua.Aamiin...
