Many blogs have adsense ads or other widgets in the header next to the title of the blog. In this post I will show how you can use this space in the Blogger platform and have the ability to place ads and gadgets next to the title of the blog.
The format of the header of the default Blogger takes the whole width of the blog and can only be used for the title, but can be changed easily. The amendment I propose is to divide the header into two separate sections in order to make the blog title on the left and right a few gadgets like AdSense ads as I did on Microbloggando
This is the layout before the change
This is the layout after changing to a new area where you can see 'add a gadget':
To split the header of the blog into two sections you need to replace both parts of the html code. Although two small pieces of code you should still operate with care and run back up the entire html code before following the steps below.
How to split the header of Blogger into two sections:
Step 1. In your navigation bar, click on 'Layout'> 'Edit HTML'
Step 2. Find the following section of code in the HTML of the blog:
(Click Ctrl and F to use the search bar to the code)
# header {margin
: 5px;
border: 1px solid $ bordercolor;
text-align: center;
color: $ pagetitlecolor;}
Note: The easiest way to find this section is to find the first # header, the rest will sotto.Questa section on your template can be slightly different.
Step 3. You must replace this section with this code:
# header {
float: left;
width: 40%;
height: 200px;
margin: 0px ;
border: 0px solid $ bordercolor;
text-align: center;
color: $ pagetitlecolor;}
header2 # {float: left;
width: 60%;
height: 200px}
Note: You can change size (width) and height (height) to your liking.
Step 4. Now try this section of code in your template:
\u0026lt;div id='header-wrapper'>
\u0026lt;b:section class='header' id="header' maxwidgets='1' showaddelement='no'>
\u0026lt;b:widget id='Header1' locked='true' title=' NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'>
\u0026lt;/ b : widget>
\u0026lt;/ b: section> \u0026lt;/ div>
Note: Once again starts looking \u0026lt;div id="header-wrapper"> and then you'll see the rest below.
The part you have to replace the red with the title of your blog.
Step 5. Replace the section of code you are looking for with this:
\u0026lt;div id='header-wrapper'>
\u0026lt;b: section class = 'header' id = 'header' = maxwidgets '1 'showaddelement =' no '>
\u0026lt;b: widget id =' Header1 'locked =' true 'title =' Blog- Title (Header) ' type =' Header '/>
\u0026lt;/ b: section>
\u0026lt;b: section class =' \u200b\u200bheader 'id = 'header2' maxwidgets = '4 'showaddelement =' yes' />
\u0026lt;div style='clear:both;'/>
\u0026lt;/ div >\u0026lt;!-- end header -wrapper ->
Note: As shown above in red you need to add the title of your blog. Give part (Header) is in blue.
Step 6. Once you've made the changes you can save the template and make sure the page layout now shows two sections of the header where you can add AdSense or other gadgets.
0 comments:
Post a Comment