How To Place Ads Below The Blogger Header In Mobile View

Today during this tutorial am aiming to teach you the way to position ads beneath your blogger and header in the mobile page view.

Follow these step below.

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

Step 2
Now move your mouse arrow right down to example and click on theme

how-to-place-ads-below-the-blogger-header-in-mobile-view


Step 3
Click on the gear icon below mobile then select affirmative and click on custom, this is to make sure your template is the same as the one for your web or desktop view, then put it aside. Are you frustrated with deleting a blog permanently? Here is the solution

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

how-to-place-ads-below-the-blogger-header-in-mobile-view

                  Id='main

Step 5
When you have found the code on top of currently you would like to alter the showaddelement to affirmative and embrace maxiwidget='3'

Yours ought to seem like this

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

Step 6
Now click on the the save example button.

Step 7
Now you may have to be compelled to return to the layout of  the blogger and add a gadget on top of the blogger post. Do you know you can add multiple authors of your choice in your blogger blog

Step 8
Now add a replacement gadget and choose html/java script and paste your AdSense code there and put it aside.

Remember that each gadget has an ID thus click on edit then check the URL of that gadget you may notice an ID copy that ID and put it aside.

how-to-place-ads-below-the-blogger-header-in-mobile-view

Step 9
Now click on edit markup language once more and press ctrl + f  then paste that ID and explore for it
Learn to change your favicon from blogger's own to customised one
Add this to the Id  ===  mobile='yes'


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

Now put it aside and explore for  this once more

                      ]]></b:skin>

Step 10
Paste this code below  before the road on top of


#HTML20{
display : none;
}

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

#HTML20
display : block;
}

}

And then put it aside. Keep in mind that you simply have to use your own id not this one.

MINIMAL CONTACT FORM

<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://3.bp.blogspot.com/-TgreeOjV9hc/WC8lF19LbaI/AAAAAAAABq4/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB/s1600/avatar%25281%2529.png" width="16" height="16" /></div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><div class="email-icon"><img src="https://4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

If you wish for me to assist you in doing this i will still assist you out, simply drop a comment below. That's all we've got to say on how to place Ads below the blogger header in mobile view. Thanks
Previous
Next Post »

DO NOT MISUSE THE COMMENT BOX Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Thanks for your comment