Bagaimana cara menambahkan Gadget di dalam Blogger Blog Header untuk Iklan AdSense

Baru-baru ini, kami telah belajar untuk membuat dan memasukkan kode Iklan AdSense ke dalam Template Blogger dengan cara yang sangat tepat. Setelah membaca tutorial itu, salah satu pembaca meminta saya untuk menambahkan Gadget di dalam header blog blogger untuk tujuan menampilkan Iklan AdSense.

Itu sangat menarik bagi saya karena tidak ada opsi apa pun di template blogger default atau bahkan banyak blogger premium / template gratis yang tersedia di internet untuk menambahkan Gadget baru di dalam slot tajuk bukan Anda bahkan tidak bisa memindahkan widget tajuk dari tempat default.

Sebagian besar blogger ingin memasukkan kode AdSense mereka atau spanduk Iklan pengiklan langsung ke header blog karena ruang ini berada di paro atas, lebih menarik perhatian dan mendapat jumlah tayangan maksimum.

Oleh karena itu, hari ini kita akan mempelajari trik untuk menambahkan widget baru di sebelah header Blogger di samping logo blog Anda atau judul atau deskripsi untuk tujuan menampilkan Iklan AdSense atau untuk menambahkan kode HTML / JavaScript pihak ketiga lainnya.Cara Membagi Header Blogger Blog menjadi Dua Bagian

Sebelum kita mulai mengedit template blogger, saya sangat menyarankan Anda untuk membuat cadangan template blog Anda untuk referensi di masa mendatang di sisi yang aman. Sekarang, ikuti langkah-langkah berikut ini dengan sangat hati-hati sehingga Anda dapat dengan mudah membagi header blog BlogSpot Anda menjadi dua bagian dalam upaya pertama.

Langkah-1 (Default Header Layout):

Login ke akun blogger Anda dan kunjungi bagian Layout blog Anda untuk melihat posisi header apakah itu tunggal atau sudah dibagi. Berikut adalah screenshot untuk header blog blogger standar.

Jika blog Anda hanya berisi satu kolom di bagian header seperti di atas, ikuti langkah selanjutnya untuk membaginya menjadi dua bagian.

 Langkah-2 (Editor Template):

Pergi ke bagian Template blog Anda dan klik tombol Edit teks HTML di samping tombol Kustomisasi. Lihat tangkapan layar untuk templat Edit tombol HTML.

Langkah-3 (Edit Template):

Klik pada Jump to widget dari menu drop down dan pilih Header1 seperti yang ditunjukkan pada screenshot ini.



 Langkah-4 (Hapus Bagian Header Default):


 

Anda akan melihat kode berikut (Screenshot) yang mewakili bagian header blog blogger default.

Sekarang, hapus semua kode ini sehingga bagian header yang lebih lama akan dihapus.

Langkah-5 (Masukkan Bagian Header Baru):

Salin dan tempel kode-kode HTML ini sebagai ganti kode bagian yang dihapus dari bagian header lama seperti yang ditunjukkan pada tangkapan layar ini. 

<pre class="prettyprint linenums"><a href="https://www.blogger.com/blogger.g?blogID=8998354706297137257" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a> <!-- SWT Header Section START --><div class="region-inner swt-header-inner"> <b:section class="header-left" id="header-left" maxwidgets="1" name="Header-Left" showaddelement="yes"> <b:section class="header-right" id="header-right" maxwidgets="1" name="Header-Right" showaddelement="yes"> </b:section></b:section></div> <!-- HELP: http://www.superwebtricks.com/display-adsense-in-blog-header --> </pre> <pre class="prettyprint linenums"><!-- SWT Header Section START --><div class="region-inner swt-header-inner"> <b:section class="header-left" id="header-left" maxwidgets="1" name="Header-Left" showaddelement="yes"> <b:section class="header-right" id="header-right" maxwidgets="1" name="Header-Right" showaddelement="yes"> </b:section></b:section></div> <!-- HELP: http://www.superwebtricks.com/display-adsense-in-blog-header --></pre>

Jangan hapus alamat URL BANTUAN dari baris terakhir kode di atas karena dapat membantu Anda di masa mendatang untuk setiap pembaruan tutorial dan kode yang diperbarui.

Langkah-6 (CSS untuk Bagian Header Baru):

Sekarang, tekan Ctrl + F untuk mencari ]]>

dan tempel kode CSS berikut di atas atau sebelum itu.

<pre class="prettyprint linenums"><span style="color: brown;"> </span> </pre> .header-left { width:50%; margin:0; padding: 0; <span class="IL_AD" id="IL_AD9">float</span>:left; overflow:hidden; } .header-right { width:50%; margin:0; padding: 0; float:right; overflow:hidden; /* Blog Header inserted by https://sumberinspirasihidup.blogspot.com */}</pre>


Lihat screenshoot

Sekarang, klik Save Template untuk menyimpan semua langkah avobe di template blog Anda.

Kustomisasi: Anda dapat menyesuaikan lebar bagian Header-Kiri dan Header-Kanan sesuai dengan judul / logo blog Anda atau ukuran Iklan AdSense yang akan ditampilkan.

Anda juga dapat menentukan lebar dalam piksel, bukan persentase. Misalkan Anda ingin menampilkan LOGO blog Anda (70px) di sisi kiri dan sisipkan kode AdSense (728px) di sisi kanan di bagian header. Ganti kode CSS lebar kepala-kiri: 70 piksel; dan lebar header-kanan: 730px; tergantung lebar layout blog Anda (800px).
Langkah-7 (Insert New Gadget):

Arahkan bagian tata letak blog Anda untuk melihat perbedaannya. Ini screenshotnya.

 

Sekarang, Anda dapat mengeklik Tambah Gadget untuk menambahkan widget Header Laman Anda di blog dan kode Unit Iklan AdSense atau kode HTML / JavaScript pihak ketiga. Ini screenshot untuk bantuan Anda.