Load YouTube & Dailymotion Video Player Faster & On Demand


When you embed a Youtube or Dailymotion video on your blog or website, then the video has to load a bunch of extra resources like CSS, JavaScript or images to rendering the videos. And, the bad thing about it that it always load these resources even if a visitors does not hit the play button. These resources increase not only the weight of your template but also the visitor's browser will also need to make multiple HTTP requests to render the videos.

How To Load YouTube & Dailymotion Videos On Demand
Have you ever noticed that Google plus shows the embedded videos on their page with a different thumbnail style. Google+ only display a thumbnail image with a custom play button instead of displaying a embedded video player to make it look like a player. And, when a user clicks over the thumbnail, then the preview thumbnail is replaced by the standard video player. That means the browser loads all the resources that are required to play the video only once when necessary. And, this reduces the loading speed of your website, see demo below,

What are the advantages?

1. Reduce loading speed
2. Reduce HTTP requests on client's browser
3. Very necessary for SEO
4. Reduce weight(page-size) of your template
5. Load videos only when necessary
6. Embedded videos will be responsive

Install Plugin on your blogger template

Backup your blogger template.

1. First navigate to blogger Dashboard > Template > Edit template.

2. Then search for </body> and then copy and paste the below code just above </body>


<!-- videos load on demand script by http://www.bloggerseolab.com start -->
<script src='http://yourjavascript.com/31169646111/load-videos-on-demand.js' type='text/javascript'></script>
<style>
.video-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player, .dmn-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb, img.dmn-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto;transition:all ease-in-out 0.25s; }
img.youtube-thumb:hover, img.dmn-thumb:hover {transform:scale(1.05);transition:all ease-in-out 0.25s;}
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe, #dmn-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>
<!-- videos load on demand script by http://www.bloggerseolab.com end -->
3. And, then save the template.

How to embed YouTube and Dailymotion videos on blog posts?

1. Just navigate to a existing blog post or make a new post and then select to HTML view.

2. Now add the below code for embedding a YouTube video,

<div class="video-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
</div>
Customize: Replace the VIDEOID with the id of your YouTube video.

3. If you want to embed a Dailymotion video, then use the below code,

<div class="video-container">
   <div class="dmn-player" data-id="VIDEOID"></div>
</div>
Customize: Replace the VIDEOID with the id of your Dailymotion video.

Frequently asked questions:

VIDEOID is mentioned in the code.

How to find the video id of a YouTube video?

Just copy and paste the video URL of your YouTube video in Notepad. And you can see a combination of numbers and letters after an equal sign. This is your video ID. see below URL.

https://www.youtube.com/watch?v=-ZWGpOSS6T0

How to find the video id of a Dailymotion video?

Find a Dailymotion video which you like to embed. Here is an example

http://www.dailymotion.com/video/x8oma9_warp-whistle_shortfilms

In this example, the ID would be x8oma9 as you can see above.


Wrapping up

The idea to load Dailymotion videos on demand is taken from Labnol. They already made a tutorial for embedding YouTube videos on demand while keep it responsive. So, I have made some changes to the JavaScript code for adding support to Dailymotion videos also.

The whole idea for embedding videos on demand is taken form Google plus. We only made it possible for blogger or website for reducing loading speed which is a significant factor for calculating page rank..

Thank You. I hope that you will like our work and also appreciate it by sharing on social networks.

PopAds Review 2017 - Can it Make Money for your blog?

popads net review - best popup under ads for blogger and website

Popads ad network is one of the most popular pop-ups under advertising network. And it is a great alternative to popcash and infolinks. The best thing about it that you can withdraw you earned money at any time once, your unpaid earning is reached to a minimum amount of 5$. Currently, It's providing highest CPM rates, excellent technical support, fastest payment in the industry.

From the last three years, I am using Google Adsense for my blog and no doubt it is one of best advertising program which pays high CPC. After that, I was looking for other monetizing networks which can work well along with Adsense for my blog, and that's when I stumbled upon popads net network.

And the first question that came to my mind was,
Can it make money for my blog?
So, I decided to get signed up for this network to check whether it can make money for my blog.  And after using it for two months (Total traffic upto two month, only 20000), I earned 68.26$ that you can see in the below screenshot of my dashboard, (popads earnings)

popads net review - earning dashboard payment
So, in this review, I will answer you some frequently asked question which you may encounter while choosing the best pop-ups under ad network,


How Popads works?


Unlike AdSense, it does not require an ad space that means you visitors don't need to click on anything. And you will get paid whenever your visitors will browse your website.

Popads is great if you are receiving traffic from USA, UK, Cannada because it provides high eCPM for the European countries. But for Asian traffic, you may not earn much until you are getting a huge amount of organic as well as social traffic. (100% fill rates)

Is PopAds.Net Scam Network?


Ofcourse not. It has a large number of publishers who are happy with its technical support and on-time payment.

Most of the people have written the negative reviews on several forum, and this may be due to account ban. Most of the webmaster use bot traffic trick to increase their page views and earnings which is an illegal method. And due to this reason, their account gets banned from the popads network.

But, My experience says that they are legit and genuine because I (many webmasters) already get paid for my earnings. You can see my 'payment proof' below,

popads net payment proof

How To Sign Up for Popads?

The sign-up process of popads network is very easy, and you only need to fill up a publisher form. Just click on the below button to go to popads.net website and fill up a simple form. And you need to wait for 24 hour to get an email from their team that your website is approved.


Can your website be approved? 

Absolutely yes. It accepts all type of website including adult, non-adult, hacking, and cracking.

Is their JavaScript plugin SEO friendly?

Yes. For API integration, they provide a small bit of JavaScript code which you need to add just above the closing body tag. And the best thing about it that, it does not affect the loading speed of your website which is one of the ranking factors of Search Engine Optimization.

What are the CPM rates of popads net?

CPM Rates (approx)
Country Rates (per 1000 view)
United States $14.72
United Kingdom $7.65
Canada $7.05
Australia $10.64
India $2.05

What is the Payout Threshold?

The Payout threshold is very low. You will get paid, whenever your unpaid earnings reach to a minimum of 5$. Payment will issue within 24 hours.

What are the Payment Methods?

Modes of payment:

Modes Minimum Amount Payment frequency
PayPal $5.00 USD Every Day
Debit Card (Payoneer) $20.00 USD Every Day
Bank Transfer (Payoneer) $20.00 USD Every Day
Wire Transfer $2000 USD Weekly
Payza $5.00 USD Every two weeks

Conclusion

As there are thousands of alternative available for pop-ups under ads but no one can compete with popads because it provides high CPM and daily payment. If you rejected by Adsense and media.net program, then I must recommend you to join this network.

I hope the above review will help you to decide the best pop-ups under ads for your blog. If you have any doubt or you are using any other network which is providing better eCpm rates then do let me know by commenting below.


Popads Review
Published Jan 15, 2017
Summary Popads is a rising player among popular pop-ups ad network that is gradually recognized as the best alternative to Infolinks and Popcash.
Reviewer Vishal Chopra
Publisher Blogger SEO Lab
Rating 4/5

OneSignal - Add Free Web Push Notifications In Blogger Blog

free web push notification for blogger - onesignal
Web push notifications is now a new strategy to grow your subscriber. Most of the popular website like Facebook, Twitter are also now using web push notification on their websites. As per the case study by YouNow it is revealed that user's retention has increased by 19%.

Recently, I have started using web push notification in my technology blog. And in this tutorial, I will guide you how to add web push notification your Blogger Blogspot. But before jumping to the whole process, let me tell you something about OneSignal.

What is OneSignal Web Push Notification?

OneSignal is an awesome service which allows adding web push notification to your blog and website. It is a communication channel which enables you to send the custom rich text notifications to your subscribers.

OneSignal lets you send custom messages to different devices or internet browsers. That means if a person subscribed to your blog through their Android or iOs (or any other) device, then your notification will appear on their home screen (or locked screen also). Or if they subscribe with their chrome, firefox (or any other browsers) on their desktop or laptop, then the notification will appear on the right-hand side lower corner of their browser.

What are the features of OneSignal?

As I said above, OneSignal display a short message to the users either on their device's home screen or desktop browser by playing a notification tune. Following are the marvelous features,

  Free
  HTTPS/SSL not required.
  Schedule notification to send at a later date.
  Add unlimited number of subscriber.
  Support all devices and browsers.
  Segmentation targeting.
  Unlimited notifications.
  Realtime analytics.
  Import & Export your data & subscribers.
  A/B testing.
  Full API access.

How to add OneSignal web push notification in blogger?


1. The very first thing you need to do is to sign up or create a free account. Join here

2. Now you need to create your first app.  On, you app dashboard, click on 'Add a new app'.

free web push notifications widget for blogger blog
3. Now a pop-up window will appear. Here you need to add a name of your app. and then click on 'Create'.

free web push notification widget in blogger blog
4. Now again a window will appear 'Select one platform to configure'. here you need to select 'Website Push'. After that, click on 'Next'.

free web push notification in blogger blogspot
5. Now, again a window will appear then click on 'Google Chrome & Mozilla Firefox'. After that, click on 'Next'.

free web push notification in blogger blogspot
6. Now enter your blogger 'URL Address' and 'Favicon URL'. And then click on 'Save'.

free web push notifications for blogger blogspot
7. Now, 'select your target SDK' and then select 'Website Push'. And then click on 'Next'.

free web push notification in blogger blog
8.Now, copy your App ID and keep safe in your Notepad. (Red Color)

free web push notification widget for blogger
9. Now the last part, you need to add JavaScript SDK in your blogger template. Just add the below code above the closing head tag.

<!-- OneSignal Web Push Notification Widget www.bloggerseolab.com -->
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: false, /* Set to true to automatically prompt visitors */
      subdomainName: 'SUBDOMAIN_NAME',   
      httpPermissionRequest: {
        enable: true
      },
      notifyButton: {
          enable: true /* Set to false to hide */
      }
    }]);
</script>
<!-- OneSignal Web Push Notification Widget www.bloggerseolab.com -->
Note: 
- Replace 'YOUR_APP_ID' with the app id of your app. (which you copied at step 8)
- And, 'SUBDOMAIN_NAME' with your subdomain name. As in my case 'bloggerseolab'.

10. And now save the template.That's it.

How to send notification?

1. You just need to select 'New Message' (located at the left hand sidebar menu). see below picture

free web push notification widget for blogger

Wrapping Up

If we compare OneSignal with PushCrew, pushEngage, then I find that only OneSignal is providing a lot of feature without any cost. The installation process is very simple as I shown above. Web push notification is the best tool to send notification because here you will get high click through rate than email marketing.

I hope the above tutorial has helped you to add Web push notification widget in your blogger without any hassle. If you know, there are the best alternative available then comment below.


5 Best Free Image Hosting Websites for Ebay Item Listing

free image hosting for ebay listing and blogger
Images are one of the crucial parts of web designing because it makes your page looks beautiful and also increase the engagement. When you buy a hosting package from GoDaddy or any other, then they provide some storage on where you can upload your files like CSS, JavaScript, and images.

But Ebay does not provide such service because they are an E-commerce company which provides you only a gateway or a platform from where you can buy and sell goods.

While choosing a web server for hosting your pictures, you should consider the five following thing,

1. Enough Disk Space
2. Server Bandwidth
3. Hotlinking, So that you can embed pictures on eBay product description.
4. Uploading procedure is simple.

So I have featured here the best free image hosting providers with unlimited bandwidth and hotlinks,

1. Google Photos

Google Photos - free image hosting
Before Google photos, Picasa was also a part of Google photo sharing service where Gmail users were able to upload their images and also able to obtained hotlinks from there. But, now Picasa is shut down, and Google photos are only the service which provides free 15 GB storage along with hotlinks. And the images can be embed anywhere on the internet with direct linking.

2. Postimage

Postimage - free image hosting for your website
This picture hosting website provides unlimited storage to webmaster without charging a penny. One of the best things of Postimage is that you no need to be a member to upload the picture to their server, but if you become the member, then you will have the option to delete the uploaded image within your account cPanel.
You can either upload your images by visiting their site or by downloading their desktop app. All the option will provide you to upload the pictures one by one or you can also upload in bulk.

3. GifyU

GifyU - free image hosting for ebay's item listing
Like Postimage, you can also upload files directly from your computer or by visiting their website. It provides you the feature of unlimited bandiwtdh so that you site shall never go down. The only limitation is that your images should not be larger than 100 MB. You get the direct link as BBCodes (for forum), HTML Links (can be embed anywhere) and link. And your picture shall also appear here.

4. Imgur

Imgur - free image hosting webiste for ebay
Imgur is a free image hosting website which lets you store unlimited number of photos without registration. The photos uploaded there never gets expired until you decide to delete them. You can upload gif, jpeg, png, apng, jpg etc. GIF uploads shall not be larger than 200 MB. One of the important features of Imgur is that your image gets automtically resized or compressed without losing quality to save server space. You can also create a photo album to embed at your website using jquery or JavaScript.

5. TinyPic

TinyPic - free image hosting
It is just similar to Imgur and postimage, but the features are not limited to the uploading of photos only, you can also upload videos to their server without any registration. You can even upload the pictures by URL of an image. And the acceptable formats are gif, jpg, png, and BMP. One of the limitations of this server is that photos will be scheduled for deletion if photos are not getting enough impression for 90 days.