How to Add AdSense Page-level ads in Blogspot

Recently, page-level ads were made available for blogspot bloggers and webmasters which means that you can now display AdSense Ads right on your mobile templates. You can now monetize your efforts on the templates as you do with mobile apps thanks to the Google Admob Ads.

Why Choose AdSense Page-level ads?

There are a number of reasons why you choose page-level ads from AdSense to bolster your revenue stream.

• Increase Revenues
• Provide Better User Experience
• Two New Formats
• Doesn't Count Against 3 Ad Limit
• Optimized and Responsive to Mobile Needs

Page-level Ad Formats

Today, the two types of page-level ads available include Anchors which are ads places at the bottom of the screen and Vignettes which are full screen ads that work similar to Admob's Interstitial adverts.
Vignettes tend to be more effective for mobile advertising.

How to Setup Page-Level Ads in Blogspot Blogs

The good news is that you can install these ads from AdSense fairly quickly and easily thanks to the process which guides you through.

1. Log into your AdSense Account
2. Click on this link
3. Click the two toggle buttons to switch on "Anchor/overlay ads" and "Vignette ads"

4. Scroll down and click the "Get Code" button

5. Copy the code

6. Go to Blogger, then Template and Backup your Template
7. Click the 'Edit HTML' button and search for the </head> tag
8. Paste the page-level ad code above the </head> tag

Note: You will also need to replace the attribute async with async="async" in order to help complete the process, otherwise Blogger will give you an error message. Once you have completed these steps, all you need to do is save it to your template.

Test Page-level ads in your Blogger template

After installation, get out your mobile device so you can test the AdSense page-level ads and see if they are working correctly. You will need to be a visitor to your site in order to check out the ads.

• Type #googleads at the end of the URL so you can access them
• Select the ad format from the tabbed box that will appear above the body of the blog
• Check out the ads

You will get to see the ads in action before the public does so that you can tell if they are working fine. If you are impressed with what you see, then it is ready to go. However, if you see something that you want to change or if the ads are not present, you'll need to start over again.

The Effectiveness of Page-level ads

Since October, 2015 when these ads were first rolled out the effectiveness that they have demonstrated is considerable. Today, the ads have been used in countries all over the world and they continue to impress. For those who have already used these mobile ads on WordPress or other blogger blogs you can see just how effective they have been in terms of reaching all of your visitors. In addition, the effect on your revenue may be considerable depending on the popularity of your blog.

In the end, AdSense page-level ads are remarkably effective for mobile use and will help you build a stronger income base for your blog.

How to Fix Mixed Content Errors in Blogspot Blogs

With HTTPS now automatic in Blogger the benefits have been considerable. However, there are some issues that are now facing bloggers thanks to this change in policy and one of the most common is mixed content errors.

What are mixed content errors?

This is when a web page becomes secured by SSL, but it contains both secure HTTPS and also the non-secure HTTP which is usually links, scripts, style sheets, video, and images. This results in browser errors that negatively affect the performance of your website and cause security issues. This means that source codes such as template, layout gadget, and post and paste may be causing the issues in the HTML side of the equation.

How to identify mixed content errors?

This is a fairly straightforward process that you can use through Google Chrome:

1. Visit blog using HTTPS, for example - https://yourblog.blogspot.com
2. Access the Chrome Menu at the top-right of your browser window and go to "More Tools" > "Developer Tools" and switch to the "Console" tab or use the CTRL + SHIFT + J keys to open the JavaScript console
3. Look in the Console for mixed content errors which will look similar to these:

Examples of mixed content errors include, but are not limited to the following:

- Insecure Script Request
- Insecure Image Request
- Insecure URL Request

You should list all unsecured URLs and visit the other pages on your blog to check for other mixed content errors.

Fix the mixed content errors in a Blogger template

To fix the errors encountered which may be found in the template or layout, you will need to do the following:

1. Go to Blogger and select your blog, then click on "Template" and press the "Edit HTML" button
2. Click anywhere in the code area and press CTRL + F to search for http://

3. Replace all http:// prefixes with https://

Verify that the new URLs using the HTTPS addresses work by opening them in a new window on your browser. If the links you are receiving provide the same results, then you can Save Template.

To check for layout errors:

Go to Blogger and click on 'Layout' > check for any HTML/JavaScript gadget and click 'Edit' on each gadget. Replace all http:// prefixes with https:// then verify that they are working and hit Save.

Fix the mixed content errors in Blogger posts and pages

To check for post and page errors, do the following:

1. Log into your Blogger Dashboard and select your blog, then click on 'Posts' or 'Pages' and select any post or page > hit the "Edit" link below the Post/Page title.

2. Once the Post editor opens, switch to the "HTML" tab and press CTRL + F keys to look for http:// prefixes. After you found them, replace http:// with https://

Be sure to verify that the new link works by opening up your browser and testing them. After you've tested them, hit Update.

Update to the Blogger post editor to fix mixed content

To find and fix mixed content errors automatically, Blogger has released a warning tool that alerts you to possible mixed content issues in your posts. All you need to do is go to "Edit" inside a post, switch to the "HTML" tab and hit the Update button. All of the errors will be presented along with the ability to fix them. Once they have been corrected, hit Update.

In the end, fixing these types of errors will greatly improve the performance of your blog, particularly when it comes to pages that may have this particular issue with mixed content generating errors. It also applies to custom domains as well as long as you have an SSL certificate. All it takes is a few minutes and you can greatly improve your blog site that has been impeded with mixed content errors.

Automatic Featured Posts Slider Widget for Blogger

Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you'd definitely want them to read another, right? After all, isn't it one of the tenets of SEO to make people stay longer on your blog if it has to have a fighting chance at the rankings game?

The question now is: how exactly do you entice them to read a few more of your blog posts?

First off, you don't know exactly what brought a reader to your site. Well, you sort of do, if you have Google Analytics and all that. But that's beside the point. It wouldn't be productive for you to stare at GA the entire day hoping that it will tell you that yes, someone has been perusing your blog.

The point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.

How exactly do you do that?

The Tactics of Persuading Users to Stay

Bloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for Popular Posts, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.

Now, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.

Thankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.

Demo

How to Add Featured Posts Slider Widget in Blogger

1. Go to 'Layout' > click the 'Add a gadget' link in the sidebar area and select 'HTML/JavaScript' gadget from the pop-up window.

2. Add the code below inside the empty box:

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tseH8eXdebGPVeGIYQrYNMTSpYy2jzbS1rlLZHrtisFPqShS65aREB-cNXD2JV9LaEQ_fca7dpfjc_tuwOGjtjcF_Ykyag5-lOWIfzRoH4E8LD7BanbuRe0EeoUHQeShzTYd1U_QSHY/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://helplogger.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjayKG9j8m_4ScAdQwN3Si3h-BZoHHXyDxdQcY-UQ71ymu3nRxgzSaDhvoLIe9XBA_oPIdbUhl4G6D-iyk1nmUi4b26z5hmo7JHlAay6bASGQugDWEqMCQ2xcSXe6oW_-KlEQd61JwL5IU/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Automatic Featured Posts Slider Settings

• listURL - replace "https://helplogger.blogspot.com/" with your blog URL
• featuredNum - add the number of posts to display in the slider
• listbyLabel - if you want to display posts by category / label, such as the tag fashion, it will be written as listbyLabel: "fashion"
• feathumbSize - the size or dimension of the image in pixels
• interval - time taken to change the slides position in milliseconds
• autoplay - replace true with false if you don't want the slides to change automatically.

3. Once you are done with the settings, click the 'Save' button.

Now, this code is for a slider widget which means that instead of just a random list of Featured Posts, you get to display them with images (if they have one) and you can include effects too. You can also control how many slides should be shown because it just wouldn't be prudent to feature your entire oeuvre, right?

Plus, being a slider widget, it adds a nice little visual to your site. And we all know how visuals are important in enticing people to stay, don't we?

Google Translate Autocomplete

Google Translate's site for desktop and mobile now shows suggestions and autocompletes your text, much like Google Search. This works for English, French, Italian, Spanish, German, Portuguese, but you have to manually pick the input language instead of relying on automatic detection.

The new feature helps you translate faster common phrases, words and expressions, but it's not very useful for long texts.

For example, I picked French as the input language, typed "k" and one of the suggestions was "kinésithérapeute", which means "physiotherapist".

It also works when you use the mobile site:

{ Thanks, Emanuele Bartolomucci. }

The Ever-Expanding Knowledge Graph Cards

Sometimes Google's Knowledge Graph cards use more real estate than all the other search results combined. I've searched for [from Paris with love] in the experimental mobile-like desktop interface and got a huge card with images, information about the movie, ratings, cast. Then Google displayed 10 search results and 3 other cards with John Travolta movies, Luc Besson movies and action movies, followed by another list of related searches.

Somehow, the list of search results felt like a placeholder for future Knowledge Graph enhancements. Here's the entire page:

Google Tests Card-Style Search Interface for Desktop

Google experiments with a desktop search UI that looks more like the mobile interface. The experiment uses the same white cards on a gray background for both search results and ads.

When the card-style layout was launched for the mobile site back in 2013, Google mentioned that the new look was "cleaner and simpler, optimized for touch, with results clustered on cards so you can focus on the answers you're looking for".

Google Works Better With Chrome

When you open google.com in Firefox, Safari or any other browser than Chrome, you'll sometimes see an ad for Chrome. Usually, Google's promotional messages suggested you should try Chrome because it's fast, but now Google has a new ad: "Google works better with Chrome". Clicking "Yes, get Chrome now" sends you to the regular Chrome homepage, which promotes Chrome as "one browser for your laptop, phone and tablet" since "Chrome brings your open tabs, bookmarks and recent searches from your computer to your phone or tablet, and vice versa".

Chrome has many features that integrate Google services (translation, spell checking, reverse image search, Safe Browsing, Cloud Print) and many Google features only work in Chrome (voice search, offline Google Drive, Google Play Music uploading).

Maybe Google should link to a page that explains why "Google works better with Chrome", since it's not exactly obvious. A Twitter user says that "if you can't get a 1 field 2 button form & list of results working cross-browser, you're doing it wrong", while another one finds that "'@google works better with Chrome' sounds like a bug report. Can you just fix it please?". F. Nonnenmacher thinks that "Microsoft was sued for less than that".

Android Instant Apps

Back when the desktop was king, Google used to be all about the Web and the browser. As mobile devices got more popular, browsers were no longer the most important application for many users. Specialized apps for music, video, photos, messaging, maps were much more popular because they were better suited for mobile.

Google pushed the boundaries of the mobile web with Chrome, but a few years ago it started to move on. New services like Inbox no longer have mobile web apps, Google Play Music no longer works from a mobile browser, the Google Docs mobile app no longer lets you edit documents etc. Google started to index mobile apps and link to the apps directly from Google Search. More and more sites push users to install their mobile apps, some of them display limited content and force users to install the apps to read the entire content (example: TripAdvisor).

Now Google announces a new Android feature that will make apps even more powerful. Android Instant Apps will let you launch apps without even installing them: your device will only download the required modules for displaying the content.

"With Instant Apps, a tap on a URL can open right in an Android app, even if the user doesn't have that app installed. As a developer, you won't need to build a new, separate app. (...) You modularize your app, and Google Play downloads only the parts that are needed, on the fly. And when you do upgrade, your app will be available to more than a billion users on Android devices going back to Jelly Bean," informs Google.

Right now, Google works with a small number of developers from BuzzFeed, B&H Photo, Medium, Hotel Tonight, Zumper and Disney to refine the experience. Instant Apps will be available later this year as part of a Google Play Services update.

Instant Apps will be limited to the content you want to display (a Medium article, a B&H camera), but you'll be able to install the full app if you like. It's like launching a personalized trial version of the app.

While the new feature is impressive and has many potential uses, I think it will make the mobile web even less important. If Apple launches a similar feature, developers will start to close their mobile sites and the mobile web will disappear. That's quite dangerous, since it will limit the mobile OS choice to Android and iOS. It's much easier to create a site than an app and many apps are completely unnecessary, not to mention that web apps use open standards, while mobile apps use proprietary APIs and have to rely on closed app stores. The open web ecosystem made Google what it is today.

Google Assistant

Sundar Pichai, Google's CEO, mentioned in this year's Founders' Letter that "the next big step will be for the very concept of the 'device' to fade away. Over time, the computer itself — whatever its form factor — will be an intelligent assistant helping you through your day. We will move from mobile first to an AI first world."

Right now, Google has an assistant, but it's not that conversational. You can find it in the Google Now cards and the voice search feature. It's there for answering quick questions, but it's not that good for having meaningful conversations.

This is about to change, now that Google will launch its answer to Amazon's Echo device later this year. It's called Google Home and it's a "voice-activated product that brings the Google assistant to any room in your house. It lets you enjoy entertainment, manage everyday tasks, and get answers from Google — all using conversational speech. With a simple voice command, you can ask Google Home to play a song, set a timer for the oven, check your flight, or turn on your lights".

Google Home is always listening for the "OK Google" hotword, much like the Google app from your phone. It's also a WiFi speaker with Google Cast support, so you can tell it to play music on other speakers or group it with other speakers. Google Home can even send video to your TV if you use a Chromecast or you have an Android TV.

Google Assistant is not only available in Google Home: it will also be added to the new Allo messaging app and to the Google Search app. "The assistant is conversational — an ongoing two-way dialogue between you and Google that understands your world and helps you get things done. It makes it easy to buy movie tickets while on the go, to find that perfect restaurant for your family to grab a quick bite before the movie starts, and then help you navigate to the theater."

Google starts to build its own ecosystem of devices that work together: smart routers, smart speakers, smart TVs, smartwatches, home automation devices, car dashboard integration. As people use more smart devices, the Google experience is about to change and Google Assistant will become the main "interface" for interacting with Google.

{ via Google Blog }

Allo and Duo: Google's New Messaging Apps

Hangouts was supposed to be Google's unified messaging solution, but things didn't go as planned: Hangouts was buggy, lacked features and many people hated it. After releasing a separate app for SMS (Messenger), Google will soon launch 2 other apps: Allo for group chat and Duo for video calling.

Both Allo and Duo use your phone number, much like WhatsApp, so you can chat or talk with anyone from your phonebook. Allo includes a special version of the Smart Reply feature from Google Inbox and it suggests replies for both text messages and photos. Smart Reply learns over time and adapts to your style, suggesting replies you are likely to send.

There's also a Google Assistant you can add to a conversation to answer quick questions, show search results and even perform actions like reserving a table at a restaurant. "The Google assistant in Allo understands your world, so you can ask for things like your agenda for the day, details of your flight and hotel, or photos from your last trip. And since it understands natural language patterns, you can just chat like yourself and it'll understand what you're saying," informs Google.

Allo lets you share photos, add text to photos, add emojis and stickers. There's also a Whisper Shout feature that lets you resize the text before sending it.

Allo has an incognito mode for private conversations. The incognito mode features end-to-end encryption and discreet notifications. Much like in Chrome, you'll need to manually start an incognito conversation and some features aren't available in incognito mode.

Duo is a simplified one-to-one video calling app that uses your phone number, works well on slow Internet connections (it uses WebRTC) and has a Knock Knock feature that shows a live preview of the caller before you answer. Hopefully, users will be able to block those who abuse this feature.

"Duo calls are in crisp HD video (up to 720p) and audio. We've optimized Duo to work well even on spotty networks, so if bandwidth is limited it gracefully adjusts quality so you're still able to connect. We also seamlessly transition calls between cellular and Wi-Fi, so you don't need to worry about what network you're on. Finally, we built Duo with privacy and security in mind and all calls on Duo are end-to-end encrypted," explains Google.

Allo and Duo will launch this summer and will be available for Android and iOS. For now, Hangouts will continue to exist, since Allo and Duo lack many of the features from Hangouts.

Google doesn't have a good track record when it comes to messaging services, so it's hard to tell whether the new apps will be successful. It looks like Allo and Duo will be simple, fast and more focused.

{ via Google Blog }

Google Image Search Ads

Google's product listing ads are now available in mobile Google Image Search. They're placed above the list of image search results and look much like the shopping ads from web search. Google also shows a colorful list of related keywords you can add to your query: brands, colors, categories and more.

"Whether they're looking for a new sofa or the perfect pair of earrings, people who search and shop on their smartphones at least once a week say that product images are the shopping feature they turn to most. And it turns out, the top questions Google Images users ask us are 'What's the price of this?’ and ‘Where can I buy it?'. That's why we are introducing Shopping ads on image search," informs Google.

Here's the "shop on Google" section from web search.

Shopping Snippets in Mobile Google Image Search

Google's image search engine now shows rich snippets for shopping sites like Amazon and eBay, but only when you use the mobile interface. Google displays the name of the product, the price, the rating and the number of reviews, stock information and a short description. There's also a message that asks users to "check website for latest pricing and availability".

Google Image Search is pretty useful for finding products and the new snippets include even more information. I'd like to see a filtering option for products in web search and image search, now that Google Product Search only shows paid listings (also known as ads) and "payment is one of several factors used to rank these results".

Automatic Translation in Google Search

If you search for a word in a foreign language, Google now automatically shows the translation. For example, you can search for [amanecer] to get the English translation of the Spanish word, instead of typing [translate amanecer] or [translate amanecer to english].

This only works for words, and some expressions, not for longer texts. It works for [buenas noches], but not for [buenas noches señora], so you'll still have to search for [translate buenas noches señora] or [buenas noches señora to english].