Buat Tempat Adsense, Banner di Header: Buat Elemen Baru di Header Blog

Membuat sebuah elemen baru yang berada di dalam header mempunyai fungsi yang sama dengan elemen-lemen lain dalam blog, dimana melalui sebuah elemen baru ini akan memungkinkan kita menambah sebuah widget baru. Menambah widget dalam "kolom header" terkadang memang amat diperlukan ketika seorang blogger ingin menempat sebuah "widget khusus" dimana widget spesial ini memang menjadi sebuah prioritas untuk ditonjolkan. Beberapa widget yang biasanya diletakkan di dalam kolom header selain title blog, image blog dan descriptions adalah tampilan gambar dan teks baik yang berkaitan dengan posting ataupun banner untuk kepentingan iklan. Menambahkan widget secara langsung melalui template memang dimungkinkan, akan tetapi sebuah persoalan baru akan muncul dimana widget tersebut akan tertampilkan di "Page Elements". Untuk mensiasati hal inilah maka sebuah "elemen baru" di dalam header amat diperlukan". Meskipun cara ini mengatasi persoalan yang muncul di "Page Elements" atau "Elemen Laman", tak dapat dipungkiri bahwa "persoalan ini" mengharuskan kita untuk membuat sebuah "elemen baru pengganti header" yang harus kita letakkan tepat di atas header. Pembuatan Eelemen baru pengganti header ini akan berlaku untuk blog sebelumnya memanfaatkan "penambahan elemen baru header" guna menempatkan widget di atas header. Widget di atas header ini bisanya berisi daftar menu atau search box (box pencarian). Kita akan coba bahas satu-persatu, dan untuk kali ini kita akan melakukannya pembuatan widget di dalam header ini di "New Blogger Templates" yang mungkin masih cukup menjadi persolan besar bagi beberapa sobat blogger karena kode HTML-nya memang sedikit lebih rumit dan berbeda dengan "Blogger Lama" atau "Template Tata Letak".

Membuat element baru di dalam header memang membutuhkan sedikit kecermatan dan ketelitian, oleh karena itu bagi sobat blogger yang akan mencoba melakukan hal ini aku harap untuk melakukan percobaan terlebih dahulu di "blog khusus percobaan", dimana sampeyan boleh melakukan berbagai experimen modifikasi blog. Setelah percobaan selesai dengan sempurna, dengan sekaligus melakukan beberapa penambahan dan perubahan desain seperti background, lebar, tinggi border dan beberapa yang lain, maka selanjutnya lakukanlah di "blog aktif". Itupun untuk melakukannya aku sarankan untuk melakukan "back-up (mengamankan)" template terlebih dahulu sebagai tindakan preventif apabila terjadi kesalahan yang tidak di harapkan. O ..., ya, perlu di catat bahwa pembuatan Elemen baru di dalam header ini, percobaannya aku lakukan di template "Mudah" (New Blogger Templates) by Josh Peterson.

Sebagai langkah awal untuk melakukan proses penambahan elemen baru di dalam header seperti biasanya kita harus kita harus login terlebih dahulu untuk kemudian membuka "halaman Edit HTML". Silahkan ikuti langkah-langkah berikut.

Cara Membuat Elemen Baru di dalam Header

• Login : Login ke blogger.
  • Tuliskan "User Name" atau "Nama Pengguna" atau bisa juga gunakan "Email Address" jika diperlukan.
  • Tuliskan "Password" atau "Sandi".
  • KLIK "Login", kemudian tunggu beberapa saat hingga halaman "Dasboard" terbuka.
• Dasboard/Dasbor : Cari dan KLIK link "Design" atau "Rancangan". Tunggu kembali beberapa saat.
• Page Elements/Elemen Laman : Cari dan KLIK link "Edit HTML. Di halaman "Edit HTML inilah semua proses penambahan elemen baru di dalam header akan kita lakukan.
• Cari kode ]]>, kemudian copy paste kode CSS yang ada di bawah dan letakkan di atas kode tersebut.
• Lanjutkan dengan mencari kode
  . Gunakan Ctrl+F untuk mencari setiap kode di halaman "Edit HTML". Jika ingin mengetahui cara mencarinya, silahkan buka Special Tutorials (menu di sebelah kiri atas). Didalamnya terdapat tutorial tentang "Cara cepat mencari kode HTML serta beberapa tutorial penting dan mendasar yang lain.
• Copy dan pastekan xHTML di antara tag
  dan .
• KLIK "SAVE Templates" atau "Simpan Template".
• Silahkan lihat hasilnya dengan membuka "Page Elements" atau "Elemen Laman".

Catatan :

• Seluruh pengaturan baik width, ataupun height diperlukan untuk penyesuaian dengan widget yang akan di pasang.
• Jumlah antara width pada header kiri dan kanan tidak boleh melebihi lebar total header (header-outer).
• Pengaturan ukuran lebar header kiri dan kanan pada ukuran yang benar (tepat) juga diperlukan agar pengeditan pada elemen baru (header kanan bisa dilakukan --> di Elemen Laman).
• Setiap penambahan lebar pada sebelah kanan harus diimbangi dengan pengurangan di sebelah kiri, begitu sebaliknya jika penambahan dilakukan di header kiri.
• Pengaturan tinggi header dilakukan untuk mengimbangi tinggi widget yang ditambahkan. Bisa terjadi apabila widget amat pendek (lebih pendek dari header kiri) maka syntax .header-outer ( height: 200px; } tidak perlu digunakan.
• width: 300px; pada syntax .header-outer { width: 300px; } bisa diganti untuk disesuaikan dengan lebar widget yang akan di pasang.

Kode CSS Elemen baru di dalam Header

.header-outer {
       height: 200px; /* untuk mengatur tinggi header (height) */
}
#header {
       width: 550px;  /* untuk mengatur lebar header kiri  - title, description, image */
       margin-right: 10px; 
}
#bgsGR_headerkanan {
       float: right;
       width: 300px;   /* mengatur lebar header kanan */
       margin: 5px 10px 5px 10px;
       padding: 2px;
}
#bgsGR_headerkanan .widget {
       margin: 3px;
}

xHTML Elemen baru di dalam Header

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'/>

 

Lihat di bawah ini posisi penyimpanan xHTML (warna merah)

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='gubhugreyot (Header)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «