Sunday

How To place Ads Banner Below Header of blogger Mobile View

Today in this tutorial am going to teach you how to place ads under your blog and header.

Follow this step below. 


Step 1
Visit your blogger dashboard and click on that blog you want to perform this tutorial on.


Step 2
Now move your mouse arrow down to template  and click on it.

image

Step 3
Click on the gear icon below mobile and then choose yes and click on custom and then save it.

Step 4
Now click on the edit button on the edit page click on clrt+f  and search for for this

                  Id='main

Step 5
When you have found the code above now you need to change the showaddelement to yes and include maxiwidget='3'

Yours should look like this

<b:section class = 'main' id='main'maxiwidget='3' showaddelement='yes'>

Step 6
Now click on the the save template button.

Step 7
Now you  you will need to go back to the layout of  the blog and add a gadget above the blog post.

Step 8
Now add a new gadget and select html/java script and paste your adsence code there and save it.

Remember that every gadget has an I'd so click on edit and then check the URL of that gadget you will find an Id copy that Id and save it.



Step 9
Now click on edit html again and press ctrl + f  then paste that I Id and search for it

Add this to the Id  ===  mobile='yes'


<b:widget id='HTML20 locked='false' mobile=yes' tittle=" type =HTML'>

Now save it and search for  this again

                      ]]></b:skin>

Step 10
Paste this code below  before the line above

#HTML20{
display : none;
}

@media all and (Max-width:
768px) {

#HTML20
display : block;
}

}

And then save it. remember that you are to use your own id not this one.

If you want me to help you in doing this i  can still help you out just drop a comment below.

Share :

zealmatblog

15 comments:

  1. Awesome post Sir


    Make Money Online HERE

    ReplyDelete
    Replies
    1. thanks. you are welcome to zealmatblog

      Delete
  2. let me try it first ooo cos i have been wondering how this is done when i see it from other blog. And i will like to see more tutorial on wordpress. Thank you www.soccerloaded.com

    ReplyDelete
  3. let me try it first ooo cos i have been wondering how this is done when i see it from other blog. And i will like to see more tutorial on wordpress. Thank you www.soccerloaded.com

    ReplyDelete
  4. When i save in "custom" in blogger the screen is too big for smart phones and users have to scroll.

    ReplyDelete
    Replies
    1. Johnny Bigfoot what type of template are you using maybe it has no mobile view

      Delete
    2. I'm using blogger and have it set for mobile and it works fine. I think I use a "simple" template.

      Delete
    3. Johnny Bigfoot instead of using your present template i think you should use awesome template .inc or give me your site link let me review your blog

      Delete
    4. http://www.bigfootresearchnews.com/

      Delete
  5. Johnny Bigfoot i think with the way i saw your blog i think it is extreemly perfect or do you want to make it naturall custom ?

    ReplyDelete
    Replies
    1. I just would like a bigger ad on the top of mobile posts instead of that tiny banner.

      Delete
    2. ok all you need to do is to create an ads unit and then select the largest seize and after doing that check the preview or if it not that large for you you can edit the html code

      Delete
    3. i hope you have solve it mr john?

      Delete
  6. PLEASE FELLOW BLOGGERS I NEED HELP HERE==>

    I HAVE BEING TRYING TO ADD ADVERT BANNER'S INTO MY BLOGGER TEMPLATE BUT ALL IS TO NO AVAIL. PLEASE WHAT DO I DO..................... SEE WHAT I GET WHEN EVER HAVE FINISHED EDITING MY HTML

    Error parsing XML, line 2423, column 46: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

    PLEASE HELP ME OUT

    I BLOG @http://ezewest.blogspot.com.ng/

    THANKS
    YOURS FAITHFULLY

    Ezewest Ezennunu Ezenwa

    ReplyDelete
    Replies
    1. Ezenwa Christian thank you for laying your complain and we are sorry for that, the main reason for that was as a result of wrong placement hope you follow the procedures above on the correct placemen?

      Delete



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.