Make an Adsense Ad Box Next to the Blog Title

How to Make an Adsense Ad Box Next to the Blog Title

Ad box or ad space next to the blog title has a very high level of visibility, both on desktop and cellular devices. With such conditions, of course the ad space in the blog header has an offer value that is far greater than other ad space on the Blog.

There are two ways to divide the Blogspot Header into two parts. The first way to use the percent model that the tutorial I've shared is with the title How to create ad space in the Blogspat header . And for the second way is to give a definite value in the width of one part of the blog header. 

However, if you want to create an advertisement box besides the blog title to place Adsense ads, you should use the second model. 

Here's how to create an advertisement box beside the blog title, the second version. 

1. Look for the HTML code similar to the one below.

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bakul Oreg (Header)' type='Header' version='1'>⋯</b:widget>
</b:section>

2. Copy the following code, then place it right above the first code.

<div class='columns'>
<div class='column-center-outer'>
<div class='column-center-inner'>

3. Copy the following code, then place it right below the first code.

</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<b:section class='header' id='header-2' maxwidgets='1' name='Header-Ads' showaddelement='yes'/>
</div>
</div>
<div style='clear: both;'/>
</div>

4. Place the following CSS code above the code </head>

<style type='text/css'>
  .header-outer{overflow: hidden; margin: 0 0 20px;}
  .header-inner .columns{padding-left: 0!important; padding-right: 728px!important;}
  .header-inner .column-right-outer{width: 728px!important; margin-right: -728px!important;}
  .header-inner .Header .titlewrapper, .header-inner .column-right-outer{padding: 10px 0 0;}
  .Header h1, .Header .description{text-align: center!important;}
  .Header h1{font-size: 30px;}
  .Header .description{font-size: 10px}
  @media screen and (max-width:970px){
    .header-inner .columns{padding-left: 0!important; padding-right: 0!important;}
    .header-inner .column-right-outer{width: 100%!important; margin-right: 0!important; padding: 0!important;}
    .Header h1{font-size: 50px;}
    .Header .description{font-size: 15px;}
  }
</style>

5. Save Themes / Templates 

Also read:

1. How to move the main_Blog1 ad unit into the article.
2. Tips for receiving Adsense requests quickly
3. List of Blogger responsive default templates & suitable for Adsense lists

Note:

1. Although the header-ads position on the layout is not adjacent to the blog title, it does not affect the original appearance.
2. If you have hidden the CSS Bundle widget, temporarily uninstall the code. After the ad is installed, please install the code again.
3. For blog headers with dark backgrounds, it usually takes a little longer for ads to show.