Create Own Blogs

bigstock SEO flow chart on a whiteboard 30908507 3 Ways to Transform Your Blog Into a SEO Machine

When my daughter turned two, the only people that showed up to eat birthday cake at the party were immediate family members – mom, dad and her big brother, Adam. Why? Because we didn’t send out invitations or put any effort into getting guests to show up.

While this may be perfectly fine for a family event or a toddler that doesn’t know the difference, who wants to put time and effort into a business blog if readers aren’t showing up? Over 80% of blogs stagnate with no traffic and few readers but, like Jillian’s birthday party, the problem often lies with how people are invited to participate.

Simply having one doesn’t make it generate results.

What are the most effective ways to get blog posts read?

Sharing on social media
Using an email list to distribute new posts
Purchasing Google or Facebook advertising to drive awareness
Search Engine Optimization (SEO)

Using ALL of these options is ideal, but if you can only chose one, then SEO gets my vote every time.

If you have a few hours to invest, here are 3 ways to transform your WordPress blog (or website) into a search-friendly traffic generator. All of them are free, other than the time you’ll invest.

1. Install a good SEO plug-in.

My favorite free SEO solution is WordPress SEO by Yoast, which makes it easy as red light, yellow light, green light. Pretty easy, right? Make sure to keep in mind that simply installing this plugin isn’t helpful in and of itself – but many bloggers stop at this first step. Its real power lies in understanding how to use it correctly and choosing the right keywords.

2. Do keyword research.

Head over to the Google Keyword Popularity Tool and invest some time in keyword research to better understand which keywords drive the most traffic. The trick with keywords is to never assume you know which ones are best; ALWAYS do research to ensure you are using popular keywords that best suit your product, service and/or blog topic.

If you use localized keywords for your SEO efforts – such as “az life coach” or “life coach in phoenix” instead of just “life coach,” you are much more likely to rank well – with the added benefit of landing more targeted readers. This is especially important if you are a local business.

I recommend creating a free account on AdWords (or log-in to your account, if you already have one), then search for the keywords you think are most likely to be searched. Adding your city and state will give you local search results to review, plus some great ideas for blog posts that fit what people are looking for. Using the keywords you entered, Google will bring up a list of other relevant keywords that were actually searched for in the previous month. I prefer to export them to Excel, get rid of unnecessary columns, rank them from most to least popular, then save the document for easy reference later.

3. Choose one keyword, then include it in your post permalink, title, and first sentence.

Make sure you have WordPress set to name the page URL as your post name (which can be changed in settings> permalinks> post name), this will automatically put the keyword in your post URL – also called the permalink. This is an essential component for SEO success.

Then, simply use the default text for the “SEO title” field at the bottom of the page (which is your title plus the name of your blog), and copy the first sentence of the post into the “Meta Description” field. If good writing dictates NOT using the keyword in the first sentence (which happens often but is not optimal), then paste in the first blog sentence that DOES have the keyword in it, or write one that uses the keyword and describes the post in a way that people will want to read it. Put the keyword in the “Meta Keywords” field, then you are all done.

SEO magic happens when you identify one keyword to focus on, then put it in the trifecta of permalink, page title, and page description.

Make sure that keyword is included in the body of post a few times, is relevant and appropriate, and then hit publish. While there are other steps and tactics that help boost SEO, that’s fodder for another article!

One last note – be sure and offer multiple ways for readers to subscribe. If you can’t convert them to subscribers via email or RSS and/or they aren’t seeing your new posts show up on social media, odds are good that they won’t think to return to your site. Your SEO may bring them to your blog the first time, but it may not bring them back. Keep this in mind as you consider and implement these strategies.

Want more detail on mastering Yoast and SEO? Head over to the Yoast Definitive Guide to Better Ranking.

The CSS files of your website may have several redundant rules that are no longer used by any element on the web pages. For instance, you may have added a site search box on your website and associated styles went into the stylesheet. Later, if you decide to remove that search box, the styles may continue to exist in your CSS though they aren’t being used anywhere.

These unused entries in your CSS files increase the page load time of your website and also affect the site’s performance as the browser has to do extra work parsing all the extra rules. And even if the impact on performance is minimal, it would make your task of maintaining CSS easier if the files are kept clean and well-structured.

Opera and the Firefox browser have a popular add-on called Dust Me that scans your current web page and lists all the unused CSS rules that are defined in the stylesheet but not used on the page. Google Chrome users however do not need to install any add-ons as the Developer Tools built inside the Google browser itself offer this option.

Remove Unused CSS from the Stylesheet

Here’s how you can easily find all the unused selectors in your CSS files in Google Chrome:

Open any page of your website inside Google Chrome and then launch the Dev Tools available under File -> Tools -> Developers Tools.
Click the Audits tab inside Dev Tools and select the “Web Page Performance” and “Reload Page and Audit on Load” options. Now click the “Run” button to begin the CSS audit process.
On the results page, expand the “Remove Unused CSS Rules” group and select the CSS file(s) that are linked from your site. You may ignore the CSS files added by social plugins and widgets since you do not have control over them.

Here you will get a sorted list of all styles that are defined in the CSS file but not used anywhere on the current page.

You can copy and save the results in a text file and repeat the steps for couple of other pages on your site. This is essential as not all selectors may be used on all pages. You can find the count of various selectors in the combined resultset, maybe using Google Sheets, and the selectors with the highest count can probably be “safely” removed.

Copy-pasting some body else work is very common. Though, very few people actually give the credit link or mention about the source. Specially, in Blogging people copy each other content and increase plagiarism. Apart from all Auto-bloggging tool, most common form of copying a page is by selecting text > mouse right-click and copy the content. Though in WordPress, we can easily disable this by using disable right click WordPress plugin. Though according to me right click gives a bad user experience and for Bloggers, you can always fight such copy-paste blogger using Google DMCA.

Now for me, when I have to write a tutorial, I take information from the pages on Internet and give proper credentials with link in the post. Now, the problem which I have faced recently is many of these sites have right click disabled and it’s pain to copy from these sites normally. So, here I have compiled a series of possible ways to copy content from those pages. FYI, many websites disable CTRL +C options to ensure better security from hackers and malicious sites.

Ways to copy text from Right click Disabled pages:

Most of the bloggers and webmasters uses JavaScript technique to disable right-click, to prevent scrapers sites from stealing their content.

Many times we often come to websites where we found contents useful like how-to , Guides and we copy it into worded or notepad. Generally we select some text and then right click to copy. But on Protected sites a message box appears saying “Right-Click on this site is disabled. Hold Ctrl key and click on link to open in new tab”

But there are numerous way through one can copy contents from Right Click protected sites

By disabling browser JavaScript in browser
Using Proxy Sites
By Using the source code of the site

Disabling JavaScript in Browsers [Google Chrome]

In Chrome browser, you can quickly disable JavaScript by going to settings. See the screenshot for better explanation:

Goto Setting >> UnderHood Tab >> Content Settings
or enter chrome://settings/content
Then Select Do not allow any site to run JavaScript

Similarly if you are using Firefox, you can remove the tick from “Enable JavaScript” option.

Using Proxy Sites

There are many proxy sites, which let you disable JS while browsing. All you need to use those proxy sites, which offer such features and you can quickly use right-click on click disabled sites.

Through Viewing Source Code

If you have to copy the specific text content and you can take care of HTML tags, you can use browser view source options. All the major browser give an option to source of the page, which you can access directly using the format below or by right click. Since, right click is out of question here, we will simply open chrome browser and type: view-source: before the post URl Like

view-source: http://createownblogs.blogspot.com

And find the paragraph or text you want to copy and then paste it into any text editor.

Well, using this trick ethically or unethically is in user hand but for a normal blogger like me and you, this tip will certainly help. Do you use any other plugin or add-on to copy content of pages with right click disabled? Do you also see this feature as bad user experience?

When we start blogging and plan to take it to next level, first of all we look out for best set of tools and software’s to make our work easier. The problem is there are so many options for everything and it’s hard to decide which one to select. All tools are good in a way or other, and most of them have different features. When I pick any professional blogging tool, I make sure that it’s full of features and is value for money. In last 5 years I have tried various blogging tools, for example I started with Windows live writer as my first editor, and now I use WordPress default dashboard for writing because it’s evolved so much. I started with All in one SEO plugin for SEO optimisation, but now I use Thesis theme + Easy WP SEO combination to make my blog rank higher.

The point is picking that right set of tool, and this is why I maintain this page. This page consists of those blogging tools which I personally use and recommend. Some of the tools that I have tried and works great, they are also part of it. I keep updating this page when ever I find something brilliant and remarkable. So if you are a regular visitor of ShoutMeLoud, I suggest you to keep checking this page every month to discover new tools.

If you have questions for any specific tool which is not listed here, feel free to drop me an email at [email protected] or tweet me at @denharsh and ask about it. So, lets get started with recommended blogging toolset:

Blogging platform:

Self hosted WordPress Platform (WordPress.org)

Blogging furniture or physical tools:

Herman Miller chair for pro-bloggers.
Yeti blue mic for voice recording and podcasting.
Macbook Air laptop for great performance and mobility.

Email software:

Feedburner (Free)
Aweber (Paid) 1st month is for $1 only.

Web-hosting:

Bluehost (Shared hosting great for new WordPress blog) (Discount coupon added into link)
WPEngine (Managed WordPress hosting)
Knownhost (managed VPS)
Linode (Unmanaged VPS)

Domain Names:

ShoutMyDomain (Accept payment via Paypal)
Godaddy (Use this link to get domain name for $2.95)

WordPress Themes:

Thesis Theme (This is the framework I use at ShoutMeLoud)
Genesis Theme ( Best alternative to thesis theme. Grab the pro-package which give access to all the current and future skins)
Codelight : Beautiful modern theme for tech-blogs.

Social Media Management Tool:

Hootsuite (Supports Google plus too) : Perfect for managing all social profile from one place.
Bufferapp : Perfect for keeping your social-media profile updated.
PostPlanner : Best Facebook tool to manage your pages.

Image Capturing tool:

SnagIt! : Best tool for screen-capture and image editing.
Image Optim : For Image compression on Mac.

Screencast software:

Camtasia (This is the video recording tool I use for creating videos for my Youtube channel. You can check my video blog here)

SEO tools:

SEMRUSH (This is the only tool I use for Keyword research and discovery.
Ahrefs for Backlink

Monetization Program:

Google AdSense : Best contextual ad network.
Viglink : Best way to monetize your outbound links.
BuySellAds : For quality direct advertisement.
Infolinks : For in-text ads. Good for tech niche.

CDN:

MAXCDN : Very cheap and easy to configure with WordPress.

WordPress Pro plugins:

EasyWPSEO: Best plugin for Keyword optimization and works perfectly with WordPress SEO by Yoast.
Curationtools for Curation WordPress theme and plugin to quickly curate content.

Affiliate network:

Proxies:

Buyproxies for your desktop Keyword research or other SEO tools.

Design:

48 Hours logo for logo designing.

Google is trying to integrate it's wide range of services to Blogger; allowing millions of blogger user to easily implement it's services to their blogs. And latest update on that matter is, Google have just made changes to the Blogger dashboard and therefore connecting AdWords with Blogger.On the first two days of July/2014; like me many Blogger users have noticed that their Blogger blog's dashboard now have a "Campaigns" tab for AdWords.

Google has integrated Adsense and Google Plus to Blogger and now Adwords. Though Adsense was integrated a long time ago, Google Plus connectivity is fairly new. 90% to 95% of Google's revenue comes from Advertising. And, AdWords is the most greatest "Weapon of Mass Earnings" in the arsenal of Google.

So; what are the reason behind this new change from Google and Blogger. And how it will help the Blogger and Google users.

More Revenue for Google

Google's revenue was over $15.4 billion in the first quarter of 2014. And the company's revenue is increasing in each quarter substantially in both USA and International territory. The reason being; improving the products, importantly for mobile.

We got lots of product improvements done, especially on mobile. I'm also excited with progress on our emerging businesses.
Larry Page, CEO of Google.

This change also will be fruitful for Google because. As blogger has a huge number of users and thus, more of blogs. And most of them are serious about their blog's branding and success. So this update clearly will have a great impact on the Blogger user.

Another Great Tool for Blogger Blogs

Many wants to take their blog to the next level and this AdWords tool inside blogger dashboard will help that cause. This will allow you to see the results of you AdWords campaigns in your dashboard also a direct view of the impact of your blog's stats because of it. This helps you optimize your campaign properly to meet your budget and needs.

Improving the Image of Blogger as Blogging Platform

This new change will definitely increase the use of Blogger as a blogging platform. Despite of its easy nature of use and don't forget it's free of charge; Blogger in certain issue do fail to attract professionals to use it for blogging. Many choose other platforms like Wordpress, Tumblr, Livejournal. But this certainly a plus point for Blogger. (As if Adsense Integration was not enough!!)

Yet Another Reason for using Google for you Online Life

The Oxford dictionary defines the world Google as-"Search for information about (someone or something) on the Internet using the search engine Google". Somebody in the Google's boardroom meetings saw this and they vow to change this by taking Google from just a "search engine" to a "human necessity"(almost). All the products of Google (Android, Blogger, Search engine, Youtube, Gmail, Google Plus, AdWords, Adsense,..... and that car that runs without a human driver) had a great impact on human life worldwide. And Google every day trying to find new ways to connect these products and invent new ones to enrich our life and making huge bucks in the process.

Clearly it is a new attempt by Google to integrate and connect its products in ways that the users and customers can use for their own interest. Now let's see how to use this.

How to Use AdWords for Blogger Blogs

Click on "Start now" to connect and setup an AdWord Campaign for your blog.
You will be redirected to AdWord website. If you are new you have to sign up or if have an AdWord account already you can use that.
After signing up or signing in use tools to create your Campaigne and fill the billing information. And start running it.

That it you have now AdWords Campaigns for your Blogger blog. Do share your views on this recent addition of Blogger in the comment's section.

For webmasters and web developers who wants their website's and blog's to load faster in browsers Lazy Load is well known name. There are many easy solutions for to implement Lazy Load in your website if you are using WordPress or any other system. Except for us Blogger users there's no plugin or simple code to use Lazy Load. However with a little outside of the box thinking Lazy Load can be used in Blogger.

In this post we are going use a jQuery lazy load solution that is fast and easy to implement in the Blogger blog. Not only the post images, every images of every widget/gadget or section of your blog can be lazy loaded and it will cause absolutely no problem to your blog's functionality, design, content, SEO, or whatever you are worried about.

Lazy load is a super pro-feature that will make you blogger blog awesome but it will take some focused hard work too implement this.

What is lazy Load?

Lazy loading is a design pattern commonly used in computer programming. Its purpose is to defer initialization of an object until the point at which it is needed. In other words load things when they are needed not loading them all at the sometime. Lazy Load in websites loads objects (i.e.. image, iframe) only if any only that is in the user's browser viewpoint size is at that time. Instead of loading all the elements at once load then in need to load basis.

Why Should You Use Lazy Load in Your Blogger Blog

Many will ask why use this but the question should be why not. Our website's and blog's are no longer just a webpage with some text and one or two pictures. They are now filled with images, embedded elements, social media buttons and badges, advertisements, slides, and many other must use items. In spite of loading all at once, load them only when the object comes to the viewpoint of the user's viewpoint.

Lazy load is truly for the users or visitors benefit. Throwing all the data of the website at once to browser to load may cause the impression that the website is going to take forever to load. This could lead to a performance hit.

These tips in this post are for anybody who is using Google's Blogger platform; especially for:-

The brilliant custom Blogger template makers. They spend very long time to develop the beautiful looking and functional blogger templates. And many of them release the templates for free of charge. Some of them try sale the template in places like freelancer.com, themeforest.

Unfortunately many of the custom made templates fails in speed test. They are awesome and but sometime they take an awful long time to load.

Adding lazy load to you blogger template means a new super professional features to you Blogger template which attract more free-users downloads and/or buyer.

The professional or want to be professional blog's hosted in blogger.
Blog's which uses a lot of image everywhere.
Blogger's who care about their visitors comfort and bandwidth.
If you are tired of the slowness of you blogger blog.
Anybody who is using blogger for blogging, learning, earning.

Adding Lazy Load in blogger requires making serious change in your blogger blog's template and entire template. Before making any changes you must backup you blogger template.

Enough chit chat; in this post we are going to try to use lazy load for images and other elements in our Blogger/Blogspot blog.

Add jQuery in Blogger

First we will need to use jQuery in our blog. All most all the custom made blogger templates available usesjQuery as it helps to add many pro elements in the blogger blog like; related posts, pagination, next and previous post and much more. If you are using the default templates given by blogger then your blog probably do not use jQuery in you blog. Check if you are already using jQuery in your blog.

For this particular solution you will need jQuery version 1.7 or above. I am going to use jQuery v1.11.1 for this.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

If you are not using the jQuery then;

Go to Blogger dashboard > template > click 'Edit HTML'.
Find </body> and paste the jQuery code just before it. Please note; I am assuming that you are not using jQuery and any other elements that uses jQuery. So I am calling it as late as possible but you can put this in any part of the blog. Many use this just above </head>.
Save template.

The jQuery should be used before any other element and script that uses jQuery.

Add Lazy Load codes in Blogger

This particular solution is given by ressio.in which one of the popular lazy load solution. It is a fast and mobile-oriented jQuery plugin for lazy loading of images/videos/iframes with build-in support ofjQueryMobile framework. Works find in in IE 6-11, Chrome 1-31, Firefox 1.5-27.0, Safari 3-7, Opera 10.6-18.0, iOS 5-7, Android 2.3-4.4, Amazon Kindle Fire 2 and HD 8.9, Opera Mini 7.

We are going to try and implement this in the blogger:-

Again go to the template editor of Blogger.
Find </body>.
Paste the following JavaScript code just before it and click 'Save template'

<script type='text/javascript'>//<![CDATA[
/*! Lazy Load XT | (C)2014 RESS.io | MIT License
 * BLOGGER Implementation by Muntasir Minhaz http://www.techinfoknow.com/2014/08/lazy-load-blogger.html */
(function($,window,document,undefined){var lazyLoadXT='lazyLoadXT',dataLazied='lazied',load_error='load error',classLazyHidden='lazy-hidden',docElement=document.documentElement||document.body,forceLoad=(window.onscroll===undefined||!!window.operamini||!docElement.getBoundingClientRect),options={autoInit:true,selector:'img[data-src]',blankImage:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',throttle:99,forceLoad:forceLoad,loadEvent:'pageshow',updateEvent:'load orientationchange resize scroll touchmove focus',forceEvent:'',oninit:{removeClass:'lazy'},onshow:{addClass:classLazyHidden},onload:{removeClass:classLazyHidden,addClass:'lazy-loaded'},onerror:{removeClass:classLazyHidden},checkDuplicates:true},elementOptions={srcAttr:'data-src',edgeX:0,edgeY:0,visibleOnly:true},$window=$(window),$isFunction=$.isFunction,$extend=$.extend,$data=$.data||function(el,name){return $(el).data(name)},$contains=$.contains||function(parent,el){while(el=el.parentNode){if(el===parent){return true}}return false},elements=[],topLazy=0,waitingMode=0;$[lazyLoadXT]=$extend(options,elementOptions,$[lazyLoadXT]);function getOrDef(obj,prop){return obj[prop]===undefined?options[prop]:obj[prop]}function scrollTop(){var scroll=window.pageYOffset;return(scroll===undefined)?docElement.scrollTop:scroll}$.fn[lazyLoadXT]=function(overrides){overrides=overrides||{};var blankImage=getOrDef(overrides,'blankImage'),checkDuplicates=getOrDef(overrides,'checkDuplicates'),scrollContainer=getOrDef(overrides,'scrollContainer'),elementOptionsOverrides={},prop;$(scrollContainer).on('scroll',queueCheckLazyElements);for(prop in elementOptions){elementOptionsOverrides[prop]=getOrDef(overrides,prop)}return this.each(function(index,el){if(el===window){$(options.selector).lazyLoadXT(overrides)}else{if(checkDuplicates&&$data(el,dataLazied)){return}var $el=$(el).data(dataLazied,1);if(blankImage&&el.tagName==='IMG'&&!el.src){el.src=blankImage}$el[lazyLoadXT]=$extend({},elementOptionsOverrides);triggerEvent('init',$el);elements.push($el)}})};function triggerEvent(event,$el){var handler=options['on'+event];if(handler){if($isFunction(handler)){handler.call($el[0])}else{if(handler.addClass){$el.addClass(handler.addClass)}if(handler.removeClass){$el.removeClass(handler.removeClass)}}}$el.trigger('lazy'+event,[$el]);queueCheckLazyElements()}function triggerLoadOrError(e){triggerEvent(e.type,$(this).off(load_error,triggerLoadOrError))}function checkLazyElements(force){if(!elements.length){return}force=force||options.forceLoad;topLazy=Infinity;var viewportTop=scrollTop(),viewportHeight=window.innerHeight||docElement.clientHeight,viewportWidth=window.innerWidth||docElement.clientWidth,i,length;for(i=0,length=elements.length;i-edgeY&&elPos.left<=viewportWidth+edgeX&&elPos.right>-edgeX)}if(visible){triggerEvent('show',$el);var srcAttr=objData.srcAttr,src=$isFunction(srcAttr)?srcAttr($el):el.getAttribute(srcAttr);if(src){$el.on(load_error,triggerLoadOrError);el.src=src}removeNode=true}else{if(topEdge1){waitingMode=1;checkLazyElements();setTimeout(timeoutLazyElements,options.throttle)}else{waitingMode=0}}function queueCheckLazyElements(e){if(!elements.length){return}if(e&&e.type==='scroll'&&e.currentTarget===window){if(topLazy>=scrollTop()){return}}if(!waitingMode){setTimeout(timeoutLazyElements,0)}waitingMode=2}function initLazyElements(){$window.lazyLoadXT()}function forceLoadAll(){checkLazyElements(true)}$(document).ready(function(){triggerEvent('start',$window);$window.on(options.loadEvent,initLazyElements).on(options.updateEvent,queueCheckLazyElements).on(options.forceEvent,forceLoadAll);$(document).on(options.updateEvent,queueCheckLazyElements);if(options.autoInit){initLazyElements()}})})(window.jQuery||window.Zepto||window.$,window,document);(function($){var options=$.lazyLoadXT;options.selector+=',video,iframe[data-src]';options.videoPoster='data-poster';$(document).on('lazyshow','video',function(e,$el){var srcAttr=$el.lazyLoadXT.srcAttr,isFuncSrcAttr=$.isFunction(srcAttr);$el.attr('poster',$el.attr(options.videoPoster)).children('source,track').each(function(index,el){var $child=$(el);$child.attr('src',isFuncSrcAttr?srcAttr($child):$child.attr(srcAttr))});this.load()})})(window.jQuery||window.Zepto||window.$);
//]]></script>

Please remember that the jQuery should be above of this code always. Do not remove the license comment at top of the code. The coder tried hard to build this and I tried had to run this in Blogger.

You have just added the codes of Lazy Load but still the main work is remaining.

Basic Setting of Lazy load: Required Changes for Image and iframe Tags

Image tags in html looks like this;

<img src='bloggerimage.png' width='200px' height='200px' title='maybe a title text' alt='maybe a alt text'/>

Now for lazy loading we need to change the only src='...' to data-src='...'; like this:

<img class='lazy' data-src='bloggerimage.png' width='200px' height='200px' title='maybe a title text' alt='maybe a alt text'/>

Now the image will be lazy loaded. As you see here; src='...' to data-src='...' and aclass='lazy' is added and both is a must.

It is wise to add a noscript tag for the images in case users wonder in you website disabling the JavaScripts:-

<img class='lazy' data-src='bloggerimage.png' width='200px' height='200px' title='maybe a title text' alt='maybe a alt text'/>
<noscript>
<img src='bloggerimage.png' width='200px' height='200px' title='maybe a title text' alt='maybe a alt text'/>
</noscript>

Now image will load even if the JavaScript is disabled. Inside the noscript tag do not change src="..." todata-src="..." and do not add class="lazy".

For iframe add use data-src="...." instead of sre="..." in the tag; like this:-

<iframe data-src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftechinfoknow%2F&amp;width=280&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=282574525118582" scrolling="no" frameborder="0" rel="nofollow" target="_blank" style="border:none; overflow:hidden; width:280px; height:62px;" allowtransparency="true"></iframe>

YouTube videos are also can be emmeded using iframe and they can be lazy loaded by doing the same simple thing:-

<iframe allowfullscreen="" class="lazy" data-src="//www.youtube.com/embed/pcnCF1brqWs&rel=0" frameborder="0" height="480" width="640"></iframe>

Now that's you have an idea how lazy load for images and iframes works. Let's try to implement it in blogger's different parts.

Lazy Load the Post Images in Post Pages of Blogger

Normally images after uploading an image in post editor it will look like this in HTML of post editor:-

<a herf='bloggerimage.png.jpg'>
<img title='maybe a title text' class="lazy-loaded" height="600" width="800" src="bloggerimage.png.jpg" alt="maybe a alt text"></a>

Change this to:-

<a herf='bloggerimage.png.jpg'>
<img class="lazy" title='maybe a title text' height="600" width="800" data-src="bloggerimage.png.jpg" alt="maybe a alt text">
<noscript>
<img title='maybe a title text' height="600" width="800" src="bloggerimage.png.jpg" alt="maybe a alt text">
</noscript>
</a>

Remove the <a> tag completely if you do not want the images to be clickable. As mentioned right above; thesrc="..." will become data-src="...", class="lazy" will be added and for noscript tag there will be no change.

If you have done all the above that means the in the post image will be lazy loaded in the post pages.

Lazy Load Images in the Default gadgets/ widgets, Snippet Images and Other Parts of Blogger Blog

This part is very tricky and requires making huge changes in you blog's template. You need not only to lazy load images of widgets or gadgets; such as; Popular Posts, Author info and bio, search results from the default blogger search box and more. Also require to add lazy load to the images in the post summaries (read more post summaries) of the home and index pages. These need to be updates from the template and they are very tricky.

However we are going to add lazy load value to all of them. First let's know a little basic thing. Go to you template and just look for the <img (image tag) in you blogger template. Almost in ever one you will find something like this;

<img expr:src='data:something.something' ..... />

The <img tags will come with expr:src='' instead of src=''. It's the same actually; it's basically telling that get the image from something.something. Now inside of the something.somethingpart you will find thing like these;

data:sourceUrl : Load the header image/blog's logo. I suggest you to leave the header image along as it's the first think your blog that loads. So there's no need to lazy load this.
data:blog.postImageUrl : Loads the first image of your blog.
data:post.thumbnail : Loads the thumbnails; the 72x72 sized cropped images of your blog posts.
data:post.thumbnailUrl : Also loads the thumbnails.
data:post.authorPhoto.url : Loads the profile picture from your blogger or Google plus account.
And more like this.

Now to lazy load them all we need to do in something like this;

<img class='lazy' expr:data-src='data:something.something' ..... />

As you see I just change it to expr:data-src='data:something.something'. Adding the data-src='' that is required for lazy loading. Do not worry this will work perfectly. Also added theclass='lazy' to. I do not think the <img tags you will come across will have any class attribute before adding it, unless you or the template designer added it. Also you may want to add a noscript tag for the image too.

<img expr:data-src='data:something.something' ..... />
<noscript>
<img expr:src='data:something.something' ..... />
</noscript>

As you see it's the same principle. Now let's see the example below for changes in the popular posts widget images.

If you are using the blogger's default popular posts and you show images with them then;
In the blogger template editor Look for <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> or use the 'Jump to widget' button on it to go to the popular posts.
Look for this <div class='item-thumbnail-only'> inside it
Inside that you will find a <img tag like this;

<img alt='data:post.title' border='0' expr:src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'/>

Just change the expr:src='data:post.thumbnail' to expr:data-src='data:post.thumbnail' and add the class='lazy'. Also are a noscript tag along like this;

<img alt='data:post.title' border='0' class='lazy' expr:data-src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize'/><noscript><img alt='data:post.title' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></noscript>

After that save you template and you will see the lazy load working just fine and the images also appear when JavaScript loading is turned oof in the browser.

I think this example help you to understand the point. Just find expr=src='' in an <img tag and make necessary changes to it. It's not that complicated as its sound. And these changes will not cause and problem to your blogger template, blog's design and in loading the blog.

Lazy Load for Images of Auto Generated Widget or Gadgets via JavaScripts of Blogger

New custom made templates are getting more and more complex for the average user and most of them come with little or no instruction to edit. That makes it harder to implement Lazy Load in blogger. But still we can use lazy load for images in other parts of blogger. It will be difficult than before but we can still do it.

It will be tricky to use Lazy Load in the auto generated gadget/widgets by JavaScript for an average Blogger user. Most custom made blogger blog's use them. Widgets or gadgets like related post, features posts, label wise posts, and more like then are generated by JavaScript and most of them requires jQuery. This means one part of the job is done; adding jQuery to blog. These gadgets generates post link and details with images which are sometimes unavoidable for providing a better user experience to visitors.

Despite this you can easily implement lazy load for images generated by these auto generated widgets. Let's see the following example:-

<!-- label wise recent post -->
<script defer='defer' type='text/javascript'>
hposts=5;imgr = new Array();showRandomImg = true;aBold = true;summaryTitle = 250;
function showhomeposts(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;img  = new Array();for (var i = 0; i < 15; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error) {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/w200/picture_not_available.png';}if (i==0) {

var trtd = '<a title="'+posttitle+'" alt="'+posttitle+'" href="'+posturl+'"><div id="plw" class="plw"><div class="entry"><div class="feature-image"><img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'"><h2 class="onetittle" >'+posttitle+'</h2></div></div></div></a>';

document.write(trtd);}
else{var trtd = '<a href="'+posturl+'"><div class="widgeth"><li>'+posttitle+'</li></div></a>';document.write(trtd);}j++;}}
</script>
<!-- Goes in widget content -->
<script type='text/javaScript'>
    document.write( & quot; & lt; script src = \ & quot;
    /feeds/posts /
    default / -/LABEL?max-results="+hposts+"&orderby=published&alt=json-in-script&callback=showhomeposts\"><\/script>");
</script>

On the above example in line-7 find <img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'">. It indicates the HTML class of the image and its source. Actually the entire line-7 indicates what the HTML of generated gadget will look like.

You will find something similar in your auto generated widgets like this. In most cases there will a line or section in the main JavaScript code where you will find the possible HTML which indicates the structure of the generated widget. It also requires for building CSS styles for them.

Now coming to the line-7 again where we will add the lazy load settings for the images;

Find <img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'">.
We are going to change the class to or add class="lazy" and change the src="+thumburl+" todata-src="+thumburl+"..
After replacing it will look like this:- <img class="wimage" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'">.

Done. Now images generated by this gadget will be lazy loaded. For auto generated widgets like related post, recent post, featured or label wise post and others this is what you have to do. Find the HTML setting in the JavaScript and add required thing for lazy load. Unless they are encoded; you will easily find them.

Right now I am using this kind of solution in the related posts section of my blog. Ask the person who have made the blogger template and/or ask the author who have given you the widget code and tutorial. Also I will try to help.

SEO Impact of Lazy Load

Many say that adding a lazy load feature will increase your rank in Google and other search engines. There are others who say it does completely opposite of that because of the empty src attribute in the <img tag of the websites. Both assumptions are somewhat wrong and also right. Actually it's complicated but let’s simplify.

Dose it increase search engine rank?

Remember; you are adding lazy load only for the images, videos and iframes in you website or blog. It stops visitor’s browser to load all the images at once instead the images are loaded only when they come in the view port of the user’s or visitor’s browser. In most cases the lazy load will increase the page speed, or at least reduce the time takes loading all the images in webpage. You might be using lazy load but for other elements in you website it might be still slow to load. Improving the perceived performance of your site for users can really help your rankings.

Google is concerned about page speed it’s old news. If fewer people bounce back to the search results because of performance problems with your site, your rankings will improve. So just adding lazy load will not increase you visits and page views, a fast loading website will; provided that your website is containing original content and on-page SEO is done properly.

Dose it reduce search engine rank?

Lazy load solely do not increase (fast loading webpage dose) and certainly not responsible for decrease in the rank of your site. I have not found any examples where the website’s rank went down because of lazy load.

Only slight problem is that Google will not be able to index your images for image search but there’s remedy for that too. There are some easy technical fixes such as:

Use <noscript> tags that show the images for users that don't have JavaScript enabled and search engine bots. As you noticed I have incoraged this in the whole post.

This is a better solution; link to your images.

<a href="/imageblogger.png "><img data-src="/imageblogger.png"…..></a>

It doesn't seem to matter to image search whether the image is in the <img src or in the a href. So the above snippet would get the image lazy loaded and the full size image linked will be indexed in image search.

For blogger it's easy as after uploading the post editor shows the images in linked form. Also by resizing the Google photos or picasa images you can load a smaller sized image in the blog and the original sized image will be indexed.

How Fast the Lazy Load Will Make a Blogger Blog

Lazy load will make you blog faster than before most certainly. But it's not the only factor to truly making your blog loading fast. Instead of lading all the images of a blog pages from top to bottom at once; Lazy Load will load you images one by one as visitors scroll down top to bottom. Not only to the destop viewer also to the mobile viewers too.

Most mobile devises run on a low-speed internet connection and also they have problems loading websites that contains large dates; especially the images. Lazy Load will help you mobile viewer to load you blog smoothly.

Lazy Load You can also use lazy load for iframe items, like Facebook like box and button, YouTube video. No matter how much codes you have in your blogger blog or website, images are the ones that takes most of the bandwidth and you should optimize their loading by lazy load.

Demos of Using Lazy Load in Blogger Blogs

There are three domes we made for you.

Demo 1: For a custom made blogger blog template.
Demo 2: For a default blogger blog template.

The process of implementing Lazy load is same for both default templates and custom made templates.

Demo 3: This website techinfoknow.com is hosted in blogger and using lazy load proudly. Rome around the blog to see its beauty.

Suggestion and CSS codes for Beautifying the Use Lazy Load

I suggest you that:-

Only after completely writing a new post, implement these changes for lazy loading images.
Copy the entire post's HTML from the post editor and save it in a notepad. Then make the changes in the codes. Update/publish you post and see if they are working.
If you have lot of post in your blog then I suggest you do this from newer to older posts.
Do not rush into making these changes.
If your blog has too many posts do not rush in changing them. Do this changes one post at a time. Check if it's working properly even in noscript. Then movie to another post.

Use these CSS codes to beautify and avoid problems in Lazy Load.

If you use a responsive template and after uploading an image if you fix the width and height of it in the post editor; then you will need to add this CSS code in your template:-

@media screen and (max-width: 700px)
.post img {
width: auto !important;
height: auto !important;
max-width: 100% !important;}

(max-width: 700px)

<style>

Use the following in your CSS code for a fade-in load effect of images.

.lazy-hidden{opacity:0;background:#038D1A url('http://2.bp.blogspot.com/-bL-eL_VIl2A/UoHFt0i8-wI/AAAAAAAAFI8/vn7h5nIbz6A/s1600/bs+loading+dot.gif') no-repeat center}
.lazy-loaded {-webkit-transition: opacity 0.4s;-moz-transition: opacity 0.3s;-ms-transition: opacity 0.4s;-o-transition: opacity 0.4s;transition: opacity 0.4s;opacity: 1;}