Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts
How to Edit Blogger Mobile Template
To change blogger's default mobile template and add mobile widgets:
Choose custom mobile template
In Blogger dashboard, go to template panel, click the mobile gear button:
Make sure you select: Yes. Show mobile template on mobile devices.
Choose "Custom" as the mobile template.
Add a widget in layout, in the title, give it an easy-to-find name.
Edit template HTML, find the widget, set its mobile='only' or mobile='yes'(shown in both desktop and mobile).
Problem: An error occurred, please refresh the page and try again
After you add mobile widget, later when you try to move widgets in layout, it may fail with message: An error occurred, please refresh the page and try again
Preview also fails: The template is updated in another place. Please reload the original page and try again.
If this happens continuously, go to template the page to delete the mobile widget, make your change, then later add back the mobile widget.
Choose custom mobile template
In Blogger dashboard, go to template panel, click the mobile gear button:
Make sure you select: Yes. Show mobile template on mobile devices.
Choose "Custom" as the mobile template.
Add a widget in layout, in the title, give it an easy-to-find name.
Edit template HTML, find the widget, set its mobile='only' or mobile='yes'(shown in both desktop and mobile).
Problem: An error occurred, please refresh the page and try again
After you add mobile widget, later when you try to move widgets in layout, it may fail with message: An error occurred, please refresh the page and try again
Preview also fails: The template is updated in another place. Please reload the original page and try again.
If this happens continuously, go to template the page to delete the mobile widget, make your change, then later add back the mobile widget.
Related Posts
Display AdSense Ads Efficiently to Maximize Revenue and Conditionally Show Alternative Ads
As a blogger, we try to provide unique and quality content. At same time, we also try to make some money from it. The first choice is AdSense, as it does pay well in all ads network.
As AdSense only allows 3 standard ad units and 3 link units in one page, one way to try to make more money is to always show maximal allowed ads.
We are writing programming related posts at lifelongprogrammer.blogspot.com.
We show 3 standard ad units: one at one at header,one inside the post body, and one at left-sidebar,
It's easy: just add 2 Adsense widget or HTML/JavaScript widget in Layout setting, and add the ad in appropriate place in the post.
But what about the homepage, archive page, label page?
What We Got
Adsense shows at most 3 standard ad units in order of the ads in the page. In blogspot, the order is like below: center blog post, left side bar(if any), right side bar(if any).
This is not we want:
1. We want to show ads "above the fold" - where user can read without scrolling.
Ads "above the fold" will have a better click-through rate than ads below the fold.
Place ads near where visitors eyeballs naturally go to in order to get the best CTR (top left, near titles, near site navigation, etc).
Read more at 5 Simple Adsense Layout Examples for Increasing Click Through Rates
2. Blank space in left side bar makes blog look ugly and unprofessional.
What We Want
For homepage, archive page, label page, we want Adsense always shows the 3 standard ad units above the folder: the ad at header, the ad in the first post, the ad in left side bar.
Also for other posts, in the ad slot, I want to display alternative da, for example chitika: anyway, Less is better than Nothing.
Also in the first post, we want to display one link ad unit below title, one link ad at the end of post.
With the following change, we see immediate change in Adsense revenue.
Solution
Edit Template
We edit the template: define one variable firstAds, it's true by default, at the end of post <data:post.body/>, change its value to false.
How To Insert Adsense Ads In Blogger Post
7 Blogger Page Types: Analysis, Code Snippets, Data Matrix
5 Simple Adsense Layout Examples for Increasing Click Through Rates
As AdSense only allows 3 standard ad units and 3 link units in one page, one way to try to make more money is to always show maximal allowed ads.
We are writing programming related posts at lifelongprogrammer.blogspot.com.
We show 3 standard ad units: one at one at header,one inside the post body, and one at left-sidebar,
It's easy: just add 2 Adsense widget or HTML/JavaScript widget in Layout setting, and add the ad in appropriate place in the post.
But what about the homepage, archive page, label page?
What We Got
Adsense shows at most 3 standard ad units in order of the ads in the page. In blogspot, the order is like below: center blog post, left side bar(if any), right side bar(if any).
<div class="columns-inner"> <div class="column-center-outer"/> <div class="column-left-outer"/> <div class="column-right-outer"/> </div>Adsense will always fill the first ad at header, for the remaining 2 ads, Adsense fill 2 ads in the first 2 posts, and leave blank area in left side bar.
This is not we want:
1. We want to show ads "above the fold" - where user can read without scrolling.
Ads "above the fold" will have a better click-through rate than ads below the fold.
Place ads near where visitors eyeballs naturally go to in order to get the best CTR (top left, near titles, near site navigation, etc).
Read more at 5 Simple Adsense Layout Examples for Increasing Click Through Rates
2. Blank space in left side bar makes blog look ugly and unprofessional.
What We Want
For homepage, archive page, label page, we want Adsense always shows the 3 standard ad units above the folder: the ad at header, the ad in the first post, the ad in left side bar.
Also for other posts, in the ad slot, I want to display alternative da, for example chitika: anyway, Less is better than Nothing.
Also in the first post, we want to display one link ad unit below title, one link ad at the end of post.
With the following change, we see immediate change in Adsense revenue.
Solution
Edit Template
We edit the template: define one variable firstAds, it's true by default, at the end of post <data:post.body/>, change its value to false.
<script src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- define firstAds = true -->
<script>var firstAds = true;</script>
</head>
<div class='post-header'>
<div class='post-header-line-1'/>
<script>
<!-- display one link ad below title if it's first post -->
// <![CDATA[
if(firstAds){
document.write("<br><ins class='adsbygoogle' ></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>");
}
// ]]>
</script>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<!-- display one link ad after the first post, and set firstAds to false -->
<script>
// <![CDATA[
if(firstAds){
document.write("<br><ins class='adsbygoogle' ></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>");
firstAds=false; // change its value to false
}
// ]]>
</script>
Use firstAds to Conditionally Display Ad in Post
When add ad in post, we will use the firstAds variable: if it's true(means this is the first post in homepage, archive page or label page), display Adsense ad, otherwise display alternative ads.
ResourcesWhen add ad in post, we will use the firstAds variable: if it's true(means this is the first post in homepage, archive page or label page), display Adsense ad, otherwise display alternative ads.
<script>
//<![CDATA[
if(firstAds){
document.write("<ins class='adsbygoogle' ...></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>")
} else {
// javasctipt to show alternative ads.
}
//]]>
</script>
How To Insert Adsense Ads In Blogger Post
7 Blogger Page Types: Analysis, Code Snippets, Data Matrix
5 Simple Adsense Layout Examples for Increasing Click Through Rates
Related Posts
Add Outbrain Related Posts Widget to Blogger and Remove Empty DIV
Adding Related Posts to your article/blog is an effective solution to increase site traffic. There are several Related Posts Widgets that wrks in Blogger such as Outbrain, LinkWithin. I chose Outbrain for my blogger.
About how to add Outbrain Related Posts Widgets to Blogge, please read Get Outbrain Widget
After added it, it shows related posts.
But I noticed there is a white div section like below at the end of my post.
So next I have to remove this empty div.
go to dashboard -> "Template", Click "Edit Html", add the following CSS code before </head>
About how to add Outbrain Related Posts Widgets to Blogge, please read Get Outbrain Widget
After added it, it shows related posts.
But I noticed there is a white div section like below at the end of my post.
go to dashboard -> "Template", Click "Edit Html", add the following CSS code before </head>
Save the template, now the empty div is gone.
Related Posts
Subscribe to:
Posts (Atom)