Chủ Nhật, 29 tháng 5, 2016

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.




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?

Thứ Sáu, 20 tháng 5, 2016

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".

Thứ Năm, 19 tháng 5, 2016

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 }