Tuesday 31 May 2016

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.

how to add adsense page-level ads in blogspot

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"

enable adsense page-level ads in blogger

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

enable adsense page-level ads in blogger

5. Copy the code

google adsense page-level ads code

6. Go to Blogger, then Template and Backup your Template
7. Click the 'Edit HTML' button and search for </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 the process, 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 start to 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.

Sunday 29 May 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/AVvXsEiXdE7elaiwZXPHOOMiXRQoEjjK0HU3Yexe_Ezl7ayhV8nFhzutxetfds26i_XlM7msDsw0sVPXHUqVzeqrywkbWVQrdxM6rjfgj1A2grom9jk-raq9ijnRuCDKRHhLVVtMtNC_xjemn3o/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/AVvXsEhXk3Xw1T4KP-fv7J6LwV_j_8aPI8P027C6ubzgxhyphenhyphenMTMRXIvd6rXhs1wnghUTSJcb76WpOo8cNCKLfT7XbIPwW8XE_PDa-xeoytofYNa6Ekks6zdxO0Vhm1wiIVGQtLMsFhDvOfStzl5M/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>

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?

Wednesday 6 April 2016

Blogger.com turns on HTTPS on all blogspot domain blogs

For many bloggers, enabling the free HTTPS support for your blog on blogspot offers a number of benefits. However, if the latest news from Blogger.com is true you may not need to manually enable the HTTPS support from now on. Every current non-HTTPS blogs are going to be automatically changed to HTTPS and this means a whole new world for bloggers and webmasters who use this particular domain.

First, this means that all blogs on blogspot will be granted a free SSL Certificate whether it is something that you want or not. Before, the webmaster was the one who decided whether the HTTPS was right for your site. Today, it has become mandatory which means that you will need to be prepared for the benefits and potential consequences.

Blogger.com turns on HTTPS on blogspot blogs

The Blogger.com HTTPS Notification

The notification that was sent out by Blogger.com essentially stated that everyone who visits a blog on their domain would be able to view it through an encrypted connection. In addition, all bookmarks and links will still work on your site, but the HTTPS Availability setting will no longer be present and your blog will always use the HTTPS version that is available.


Those who log into their Blogger account will see the message and can interpret for themselves the ramifications of what it truly means. It should be noted that this is only for domains on Blogger.com that are free and that the custom ones will continue to go on functioning as they have in the past. That means there will be no support provided by free SSL HTTPS to custom domains.

While this will naturally cause some concern for webmasters because Blogger.com does have some limitations that are well known, the truth is that this particular change may bring about a better, more secured experience to those visiting the sites as well as have a positive impact on search engine optimization (SEO).

What is HTTPS?

The use of Hyper Text Transfer Protocol Secure (HTTPS) is basically a secure version of HTTP. This means that the data which is transferred between the user and server is now encrypted and protected from access or hacking from unwanted third parties.

HTTPS as a ranking signal

Perhaps the most notable impact is how it will affect the SEO of your site. With Google in particular placing a higher importance of HTTPS as compared to HTTP sites, the secured connection actually makes a positive impact thanks to the additional security. Better security means higher ratings for your blog.

In addition, your blog might actually run a little better with a secured connection as compared to your competition, some of which might not enjoy such a connection.

Since all of your traffic will now be automatically diverted, there will not be a negative effect in terms of loss or lowering of your SEO. In fact, this is actually a good move for blogspot.com and is certainly a worthwhile addition to all of their blogs as the support offers solid benefits for every blogger who uses their domain.

Wednesday 14 October 2015

Stop Blogger from Redirecting Blogspot to Country Specific URLs

Let's say you're from France and have set up - just for examples sake - a blog called frenchlitgeek.blogspot.com where you share your thoughts and insights on French literature. Now, with Google's country specific redirection in Blogger, you might be redirected to frenchlitgeek.blogspot.fr when you try to access your site. The thing is, you perfectly liked the .com and didn't sign up for the .fr but you find yourself being directed there. Sure, your blog works and all but you also wonder why.
blogger country specific redirection

Why Did Google Do This?

Google has always supported the expression of views, and they stated as much on their official blog. In the post Free expression and controversial content on the web, which was published in 2007, it said "Our world would be a very boring place if we all agreed all the time. So, while people may strongly disagree with what someone says, or think that a particular newspaper is total nonsense, we recognize that each of us have the right to an opinion."

The post continued, "We also know that letting people express their views freely has real practical benefits. Allowing individuals to voice unpopular, inconvenient or controversial opinions is important. Not only might they be right (think Galileo) but debating difficult issues in the open often helps people come to better decisions".

blogspot country redirection

While the company is clearly on the side of people freely expressing their opinions, they also believe that a line has to be drawn somewhere. Then again, for a company providing services in over 100 countries around the world and each with their own national laws and cultural norms, it's surely difficult for a company like Google to decide where to draw boundaries.

However, there are cases like child pornography which is illegal in just about any country where decisions are clear cut.

For a company whose products are "specifically designed to help people create and communicate, to find and share information and opinions across the world", how does Google deal with this challenge?

One of the most challenging areas where Google deals with issues regarding free expression is in Blogger, their content generation platform. Since Google can't check what you've written before you publish, they rely on active vocal users who are diligent in alerting the proper if a post borders on offensive. Then again, that in itself is a tricky issue as well because what one person may view as offensive, another might not.

In other words, it's always a work in progress with Google.

Fast forward to January 9, 2012 when Google announced it was making changes to the Blogger platform with regards to censorship. That said change would make use of a country specific domain to the Blogger platform. Doing this would allow Google to censor and remove content specific to a certain country.

In their announcement, Google said: "Migrating to localized domains will allow us to continue promoting free expression and responsible publishing while providing greater flexibility in complying with valid removal requests pursuant to local law. By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers."

The move by Google come after pressure from countries like India that are working on hunting down content on social media sites which are considered inappropriate. Also, the move followed closely on the heels of Twitter's new censorship policies.

Since Google aims to "help people create and communicate, to find and share information and opinions across the world", it would be strange to take down a post that was just banned in a certain area. In essence, with country specific redirection, a piece of content can still be accessible by the world save for the country where it was blocked.

How Would Country Specific Redirection Affect Your Site?

Of course, not all site owners greeted the country specific URL change with open arms. A few of the issues brought up in regard to the change include:

1. A reduction in social stats. These are your Facebook Likes, Google +1s and so on from your blog posts. They might be reduced because the URLs from one blog post will be different depending on where your readers are from.

2. A problem with external commenting platforms. If you use Disqus - for example - for your comments section, then you might run into trouble because blog URLs will be different even if essentially the page being accessed is just the same.

3. A slight problem with AdSense earnings. Some users have complained about seeing a dip in their earnings when their pages are served through country specific domains.

4. An issue with link juice. You want external sites to link to you and not your country specific URL. But the issue here is that you can't control how others link to your page. They might use the top level domain or they might use the country code top-level domain.

Stop Blogger from Redirecting to Country-Specific Domains

If country specific redirection affects important factors such as traffic and link juice, and you need those in order to rank well, what can you possibly do? Well, thankfully, Google has provided a way to get around this. All you have to do is add an ncr/ to the end of the URL - ncr here stands for No Country Redirect. So basically, it goes frenchlitgeek.blogspot.com/ncr/.

That solution is great but do you want your users to always have to do that every time they visit your blog? To eliminate that hassle, and for the good of your site statistics, a simple redirection script will do the trick. Here's how:

1. Log in to your Blogger account.

2. Click on Template ? Edit HTML.

3. Find the <head> tag in the HTML editor by opening the search box using Ctrl + F.

blogger country redirection

4. Copy the redirection code seen below after the <head> tag.
<script type="text/javascript">
var blog = document.location.href.toLowerCase();
if (!blog.match(/\.blogspot\.com/)) {
blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");
window.location.replace(blog);
}
</script>

5. Click on "Save Template".

Credit: labnol.com

And that's it! Whenever someone accesses your Blogger, they'll be taken to the top level domain rather than the country specific one.

Saturday 10 October 2015

Insert Adsense Inside Posts: After the First Paragraph

Want to know which part of your site or blog will bring you more profit? Add AdSense inside posts and then check out the famous Google AdSense heat map. Recent studies, however, showed that placing AdSense after the first paragraph of a site or blog is one of the best AdSense placement. Unfortunately, the default Blogger platform offered by Google doesn't allow placement of ad after the first paragraph. But because it has become one of the most profitable areas, plenty of webmasters have tried to take advantage of the best AdSense placement. How can you enjoy the same level of profit?

To solve the problem, we will just move the locations of the ads to be displayed by adding JavaScript and DIVs. With the following script, you can easily choose the paragraph or heading after which you want to inject the ad to. This way, you won't have to manually change every post.

adsense inside posts, adsense placement

How to Display AdSense Ads after the First Paragraph in Blogger

1. Log into your Blogger account, select your blog and click "Template" on the left side. Open the Template editor using the "Edit HTML" button. Once the editor has opened, click anywhere inside the code area and press the CTRL + F keys (or Command + F) on your keyboard to open the editor' search box. Search the following line:
<data:post.body/>
Note: You will find multiple occurrences of <data:post.body/>, stop at the second one or if you don't see any changes, test the last one.

2. Add the below DIVs in red before and after, like this:
<div id='adsense-target'><data:post.body/></div>
3. Copy the AdSense code that you want to show and use this tool to convert it into plain text. Just above the line that we just found, add the following HTML and replace the "ADSENSE CODE HERE" text with the converted ad code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE CODE HERE</div></b:if>
Screenshot:


Align AdSense Left or Right

By default, the Google AdSense ad unit will appear in the middle just after the first paragraph. If you are unhappy with the results and want to wrap text around the ad, you can choose one of the options below:

a) Align AdSense to the left: change <div id='adsense-content' style="display:block;text-align: center"> with
<div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px">
After modifying it, the ad will display something like this:

adsense inside posts, adsense placement

b) Align AdSense ad to the right of the content: change <div id='adsense-content' style="display:block;text-align: center"> with
<div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px">
4. Finally, right after <div id='adsense-target'><data:post.body/></div> (step 2), add this script:
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>
Note:
- To insert the ad after the second paragraph, change "0" from the line in red with "2".
- If you want to put AdSense just below the heading h2 or heading h3 of a post, replace br from &quot;br&quot; with h2 or h3.

5. Click "Save template" to save the changes and you're done.

With this trick, you can insert AdSense after the first paragraph automatically in Blogger with ease. Now it's your turn to decide which format works best on your site.

Wednesday 7 October 2015

How to Add Font Awesome Social Icons in Blogger

It's near impossible to find a blog or site these days without at least one social media account to their name. Be it Twitter or Facebook, Instagram or Pinterest, or all of those for that matter, what's become increasingly clear is that social media helps increase your online presence.

Gone are the days when you used to rely on good old search engine results alone. These days, maybe you don't rank well in results for your keyword on Google or any other search engine, but you can launch a social media campaign that can hopefully give you the results that you want.

Essentially, your site and social media need to co-exist. One cannot live without the other, if you want another way of putting it. Social media is one of the best drivers of traffic on the internet, and if you want to increase your chances of being seen, then you have got to get an account on one or more platforms as long as it fits with your brand's identity.

font awesome social icons

Spreading Awareness of Your Social Media Presence

Once you've set up your social media accounts, you don't just leave it there to be discovered. Sure, you can make use of hashtags and communicate with industry leaders, but that's not enough to bring awareness to your customers. To let them know you have a presence on Facebook, Twitter, Instagram, Vine or Pinterest, you have to make use of the real estate on your website.

How exactly do you do that, you ask? Well, by means of social icons.

Social icons are those little images you see that represent a symbol associated with a particular social network. For example, social icons for Twitter usually feature a blue bird. If not that, then a lowercase letter T.

The presence of these images remind your viewers that they have other ways of being up to date with whatever you put out. Social media use is pretty high these days thanks to the immediacy of the medium as well as the fun factor. And more likely than not, your audience would want to know whether you're on any social network.

If you're on the Blogger platform, you can add these social media representations through Font Awesome social icons.

What is Font Awesome?

Font Awesome "gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS". In essence, it functions as a toolkit where you get access to more than 500 icons for use on your site - free of charge.

Now, if you've used social media icons before, you know that there are non-vector varieties. But those offered by Font Awesome are scalable vector icons, and in the long run, they are the better option for your site.

Why is that the case?

Well, a very good reason would be that images take time to load. Yes, these images are tiny but the point still stands. Plus, images tend to lose their quality as computer resolution increases. In other words, if you want your icons to load faster and have a nice, crisp and clean look, then you're better off with using the collection of Font Awesome. Also, the chance to customize your icons accordingly is definitely an attractive factor too.

Why you should start using Font Awesome?

Of the many providers out there, why stick with Font Awesome?
  • Large collection of icons. You'll not only find social media icons here, but other traditional icons as well.
  • CSS support. With CSS, you can adjust the icons according to what suits your site best. You can tinker with the colors, size, shadows and other components. This is something sorely lacking with non-vector images because you're stuck with the icon you chose.
  • Speed. Vector images are lightweight and therefore load faster.
  • Free. You don't have to pay a single thing when you use Font Awesome.
So now you know the importance of icons on your site, it's time to learn how to add Font Awesome icons in Blogger.

Adding Font Awesome Social Icons in Blogger

The adding of icons to your Blogger isn't rocket science. In fact, the process is pretty straightforward.
Here's what you have to do:

Add Font Awesome Stylesheet into Blogger

Follow the steps below to get Font Awesome working with your blog:
1. Download Font Awesome from the official page.
2. Copy the entire font-awesome directory into your project.
3. Open your Blogger dashboard, go to Template and press the Edit HTML button. Find the <head> tag then add this line of code referencing the location of your font-awesome.min.css stylesheet.

font awesome stylesheet

Or if you'd prefer the easiest method, add this line just below the <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
4. Start playing with Font Awesome!

Using the Font Awesome Icons

After you get the steps in the previous section done, you're now ready to use Font Awesome in your blog. The first thing you need to do is add the social icons links to the HTML and delete the icons that you don't need anymore. This is a sample HTML that you can add:
<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>
In the above HTML code, we can see 8 separate social icons which can be recognized by looking at the link title attribute. For example, the first one is for Facebook.

To use the social icons, paste your URL where it says URL-HERE for each social icon you want to include. Put the link between the quotes and make sure to not remove any of the quotation marks.

If you want to remove a social icon, just delete that line of code starting with "<a href" and ending with "</a>".

Now, keep in mind that Font Awesome works anywhere with the <i> tag as it was designed to work with inline elements. Although you can use <span>, official documentation prefers the <i> option for brevity.

Font Awesome icons can be placed anywhere using the CSS prefix fa together with the name of the icon. For a list of social media icon names, you can refer to the official website of Font Awesome.

Let's say that you want to display a Youtube icon so you can link it to your official account on the platform. Find the Youtube icon on the list and click on it:

font awesome icon

That will bring you to a page for Youtube where you will see this code:

font awesome social icons

To include the icon within the list, copy any line starting with "<a href" and ending with "</a> from the code above, paste where you want it to appear and replace the code starting with "<i class="fa " and ending with "</i>" with that of your chosen icon.

Finally, after adding the icon, the list will look like this:
<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
<a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</div>
Note: don't forget to change the title and add your URL between the quotes.

Once you've finished editing the icons, insert the code into a HTML/Javascript gadget by going to "Layout" and click on the "Add a gadget" link. If you're using WordPress, paste it in a Text widget.

Customize the Font Awesome Icons Using CSS

Suppose you want to make the icons a lot bigger than they currently are. That task is made simple with the use of CSS. Here's a sample code:
#fawesomeicons a {
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
To change the font size, increase or decrease the 16px value. Below are the values (30px) for the container's width and height which should always match. Increasing/decreasing these values, will increase/decrease the size of the container where is the font.

Here are some different styles for the font awesome social icons. In the CSS, look for the #background-color, #border-color, #font-color and #hover-color text so that you can know here to put the color codes. You can use this tool to generate the color code: Color Code Generator. If you don't know how to add CSS, follow this tutorial.

font awesome social icons

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

font awesome social icons

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}

font awesome social icons

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

font awesome social icons

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}

font awesome social icons

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
color: #font-color;
display: inline-block;
font-size: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

Now, what if we want to change the background or font color of a specific icon? First, we need to identify the icon class which is just after the <i class="fa ..." and add it like this:
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
Here, we can change the background and color for the Facebook icon but we can do it for any icon you want. For example, let's add another rule for the twitter icon:
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
 #fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}
To make the fonts bigger, we can add the CSS code like this:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a .fa{
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
}
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
 #fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}
To apply, copy the code above and add the CSS rule with the icon class that you wish to change.

Important: When adding the class for your icon, always put a dot (.) in front of it as you can see in the example above, otherwise it won't work.

And that's it! Hopefully, this tutorial helped you to add Font Awesome social icons in Blogger. If you're still in trouble adding them, please take a look at Examples page.

Tuesday 22 September 2015

5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.

Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.
popular posts widget for blogger

Adding the Popular Posts Widget for Blogger

Just click on your blog title, access the Layout menu, click "Add Widget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the instructions carefully to know if you'll need the snippet and image thumbnail or not).

Configuring Popular Posts Widget for Blogger

Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.
popular posts widget for blogger
CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>
These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Template" on the left side and select "Edit HTML" under the template preview.

These next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.

Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:
</head>
Just ABOVE the </head> tag, copy-paste the CSS code of one of the styles above.


Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work.

Please note that most of the styles are using the Oswald font which you need to add to your template's code as well.

So, search for this tag:
<head>
Just BELOW it, add this line:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Adding the JavaScript

These styles also require JavaScript codes in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript, search the </body> tag and paste the following script just above it:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
Note: if you have already the jQuery library in your template, remove the line in red.

Once you have added all the codes in the right place, press the "Save template" button to save the changes.

That's it!

The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.