[Resolved] Create Ads In Header like the example

[khaerul malik]

Hi, i want to create ads like dis how?
in header big like dat
https://prnt.sc/BGtc9SOMLskm

[Fernando]

Hi Khaerul,

Ads usually provide code which you can place in your website for it to appear.

With that said, you may use a Hook Element, and set the hook to your preferred location.

The size of the advertisement is dependent on where you’re getting the ad.

To clarify, are you wanting to insert an advertisement from somewhere like Google Adsense or are you wanting to create something of your own?

Kindly let us know.

[khaerul malik]

i want to insert an advertisement from somewhere like Google Adsense. just like the picture i send it. i want to create dat ads how?

one more how to disappear dis
https://prnt.sc/LJAi5Lvmz6SN
dat i marked.

[Fernando]

Google Adsense provides a script which you may add through a Hook Element as mentioned.
Reference to Hook Elements: https://docs.generatepress.com/article/hooks-element-overview/

You may also refer to this for guidance with regards to adding Google Adsense ads: https://www.namecheap.com/support/knowledgebase/article.aspx/9959/2187/how-to-add-google-adsense-to-your-wordpress-website/

The code you’ll need to add to header.php, you can use a Hook Element hook to wp_head instead.

Then, the code for the ad unit itself, you can add through a Hook Element as well hooked to your preferred location. If you’re going for an ad similar to the image you provided, you may try using hook generate_after_header.

The space in the top is coming from two things.

1. This code you’ve added for the ad is adding the white space: https://share.getcloudapp.com/E0uyzoem
2. The other is the top bar. Can you go to Appearance > Widgets > Top Bar, and remove all widgets there? The top bar shouldn’t appear if there are no widgets added.

Hope this clarifies!

[khaerul malik]

hi
Thank you for the help. adding the hook in the header worked.

it’s about the space above. I’ve removed the widget above. but still there is still space left. can you help me?

here
https://prnt.sc/QwTATqKyFMgO

[David]

Hi there,

what code did you add in the Hook Element ?

[khaerul malik]

Im adding code just code from adsense, nothing else.

[David]

The code isn’t correct, can you share the code you added? Before submitting the reply, highlight the code and click the code button.

[khaerul malik]

<center>  
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9566815561853135"
     crossorigin="anonymous"></script>
<!-- Ojuse Header depan -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9566815561853135"
     data-ad-slot="1182075723"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>

Im just putting dat code in hook. Is dat wrong?

[khaerul malik]

https://prnt.sc/QwTATqKyFMgO

Can u help me with dis space? I want to remove it

[David]

OK you cannot add all that code to the wp_head hook.

1. Add only this code to the wp_head

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9566815561853135" crossorigin="anonymous"></script>

2. Create a new Hook. select the generate_after_header hook.
Add the remaining code:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9566815561853135"
     data-ad-slot="1182075723"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

[khaerul malik]

hi the code is worked. but how i can add some space? between dat ads.
like dis https://prnt.sc/2EcYT1RgaxeV

and mine like dis https://prnt.sc/8i_ViBOisoWX

one more help me wit dis https://prnt.sc/QwTATqKyFMgO i boxed

[David]

What codes do you have in the wp_head hook ?

[khaerul malik]

Code dat you instructions to me sir. Dis
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9566815561853135" crossorigin="anonymous"></script>

[Ying]

Add this CSS to customizer > addtional CSS:

ins.adsbygoogle {
    display: none;
}
.w3-container {
    padding-top: 20px;
    padding-bottom: 10px;
}

[Author]

Posts