How To Make Your Content Cause A Wow Effect

As a content marketer you want your content to not just hook in readers, but to impress them enough that they keep coming back for more.

You want to create a wow effect.

However, online content creation is different than writing in other venues.

Simply put, people are in a bigger hurry online. And although good writing is always appreciated and a necessity when trying to entertain or inform either a specific audience or a large mass of people, the truth is that the majority of online web surfers are more likely to scan over a piece of content as opposed to book and magazine readers who really dig into what they�re reading.
How To Make Your Content Cause A Wow Effect
This is why there�s plenty of good print writers who have a tough time trying to transition their talents onto the web. It�s a different arena that emphasizes understanding and pleasing an online audience over traditional writing depth and style, and a lot of print writers don�t get that.

In essence, the wow effect for online content writing is vastly different than it is for print writing.

A big reason for the difference is that with online content, there�s a vastly higher level of instantly accessible alternatives at your fingertips. So if you buy a $5 magazine, take it home and aren�t thrilled with it, you�re probably not going to run back to the store to exchange it.

But in the online market, all it takes is one unsatisfying second for a reader to get bored and with a single mouse click, move on to a competitors site � and if wherever they land doesn�t do the trick, they can simply bounce off to the next site.

So with a nearly endless ocean of websites providing virtually the same content, it�s crucial for you to know exactly what you�re doing to create content that makes the impatient world of online readers happy.
Read more �

Featured Posts Slider Widget for Blogger - [Automatic]



dynamic blogger sliderEver wondered how to display your most recent posts from a selected category inside a dynamic Image slider? Let's create a responsive featured content slider widget for BlogSpot blogs that may display recent posts from a specific label automatically. Without our Blogger JSON Feeds guide, building Blogspot widgets would not have been that easy!


UPDATE: We just released Random Posts Slider Widget and a Static Slider For Blogger!


Image Sliders for blogs play a vital role in showcasing your featured content whether it be a static list of featured images linked to your bog posts or a dynamic/automatic list of recent posts from a specific label or an automatic list of random posts. We are sharing with you all for the first time, all these three amazing blogger featured content sliders built using FlexSlider and Blogger JSON Feeds API. These blogspot widgets are rarely shared with all advanced functionality and we are pleased to develop them exclusively for blogger community. 



In the past we have developed and shared several static Content Sliders for Blogspot blogs but this time we will learn how to make that content load dynamically instead of manually creating the featured content list and then displaying it.




See our previous sliders by following these links:



What is a Featured Posts Slider Widget?



Featured posts slider widget for blogger blogs is a unique way to showcase your most favorite and exclusive articles on your homepage. It automatically displays your latest articles from a specific category inside animated slider, thus drawing your visitors attentions towards your note worthy content. 





Even news sites like Yahoo news and TV channels like Discovery displays their hottest content using a featured content slider on their homepage. This helps the website visitors to see most trending and most featured stories in a glance. Featured posts slider really helps to draw visitor attention to your old but exclusive articles, thus helping in increasing your page views. 





Wordpress sites use several plugins to showcase featured content on homepage but with the help of blogger JSON feed API & FlexSlider we were able to create the most advanced featured posts slider for blogger platform.





Features of Featured Posts Slider Widget


Featured posts slider is an advanced widget equipped with these features:


  1. Author Avatar - Unique!

  2. Displays recent posts dynamically inside Slider. - Unique!

  3. Displays recent posts from a specific category/label.


    1. Slider with two animations: Slide & Fade - Unique!

    2. Clickable Comments Count

    3. Custom Date Format

    4. Clickable Animated Featured Image Thumbnails

    5. Option to increase or decrease Image Resolution for quality- Unique!

    6. Support for Third-party Images and YouTube Video thumbnails - Unique!

    7. Title Length is adjustable



    Most Responsive Content Slider For Blogger Blogs!


    Blogger featured posts slider is built using FlexSlider and it therefore automatically adopts the width of the parent container. Multiple breakpoints are added to ensure the slider fits to device screen size just perfectly. See the screenshots below


    [ SMARTPHONES ]

    responsive blogger slider





    [ TABLETS / IPADS]

    responsive blogspot slider




    [ DESKTOP / LAPTOPS ]

    responsive blogspot content slider


    Add Featured Posts Slider To Blogger


    If you'd like to display the featured post slider on your homepage, please follow these instructions:


    1. Go To Blogger > Template

    2. Backup your template

    3. Click "Edit HTML"

    4. Just below <head> tag paste the following JS and CSS source links:

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

      <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

      <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

      <link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>

      <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

      Note: Do not add JQuery, FontAwesome, FlexSlider or Oswald source links to your template if you are already using them on your site.


    5. Next search ]]></b:skin> and just above/before it paste the following code:



      /*######### Blogger Slider By MyBloggerTricks #############*/

      .mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden}

      .mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}

      .mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}

      .mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}

      .mbt-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}

      .flex-direction-nav .flex-prev{left:-50px}

      .flex-direction-nav .flex-next{right:-50px;text-align:right}

      .mbt-s .flex-control-paging{display:none}

      .flex-direction-nav{position:relative;top:-250px}

      .mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}

      .mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}

      .mbt-s li a{color:#0080ff;text-decoration:none}

      .mbt-s i{color:#999;padding-right:5px}

      .mbt-s .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#31363a;padding:3px 10px;display:inline-block}

      .mbt-s .icontent{line-height:1.5em;margin-top:5px}

      .mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}

      .mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}

      .mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}

      .mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}

      .mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}

      .mbt-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}

      .mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}

      .mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}

      .mbt-s .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}

      .mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}

      .mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}

      .mbt-s .icomments a:hover{text-decoration:underline}

      .mbt-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}

      .mbt-s .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}

      .mbt-s .idate:before{content:'\f073';padding:0 5px;color:#fff}


    6. Make these changes


      • To change the black background color behind the title edit: #222

      • To change the yellow color of the slide title font edit: #ff0 and to change the white color of the title on mouse hover edit: #fff

      • To change the color of the comment link eidt: #0080ff

      • The color can be in rgb or #hexadecimal, both work. Use our  Color Code Generator.



    7. Save your template.

    8. Now go to Blogger > Layout

    9. Select "Add a Gadget"

    10. Choose "HTML/JavaScript" gadget

    11. Keep the title field empty and then paste the following code inside it:

      <script type="text/javascript">

      $(window).load(function() {

        $('.mbt-s').flexslider({

      animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});</script>

      <div class="flexslider mbt-s">

      <ul class="slides">

      <script type="text/javascript">

      //################### Defaults

      var ListBlogLink = "http://mybloggertricks.com";

      var ListCount = 6;

      var ListLabel = "Events";

      var TitleCount = 66;

      var ImageSize = 600;

      //################### Function Start

      function mbtslide(json) {

      for (var i = 0; i < ListCount; i++)



      //################### Variables Declared

      var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";

      //################### Category

      if (json.feed.entry[i].category != null)

      {

      for (var k = 0; k < json.feed.entry[i].category.length; k++) {

      ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";

      if(k < json.feed.entry[i].category.length-1)

      { ListTag += " ";}

      }

      }

      //################### URL

      for (var j = 0; j < json.feed.entry[i].link.length; j++) {

            if (json.feed.entry[i].link[j].rel == 'alternate') {

              break;

            }

          }

      ListUrl= "'" + json.feed.entry[i].link[j].href + "'";

      //################### Info

      TotalPosts = json.feed.openSearch$totalResults.$t;

      if (json.feed.entry[i].title!= null)

      {

      ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);

      }

      if (json.feed.entry[i].thr$total)

      {

      ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";

      }

      ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");

      ListAuthor=ListAuthor.slice(0, 1).join(" ");

      AuthorPic = json.feed.entry[i].author[0].gd$image.src;

      //################### Date Format

      ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

      ListDate= json.feed.entry[i].published.$t.substring(0,10);

                               Y = ListDate.substring(0, 4);

                              m = ListDate.substring(5, 7);

                               D = ListDate.substring(8, 10);

                               M = ListMonth[parseInt(m - 1)];                      

      ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);

                               YY = ListUpdate.substring(0, 4);

                              mm = ListUpdate.substring(5, 7);

                               DD = ListUpdate.substring(8, 10);

                               TT = ListUpdate.substring(11, 16);

                               MM = ListMonth[parseInt(mm - 1)];  

      //################### Thumbnail Check

      if (json.feed.entry[i].media$thumbnail)

      {

      thumbUrl = json.feed.entry[i].media$thumbnail.url;

      sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");

      ListImage= "'" + sk.replace("?imgmax=800","") + "'";

      }

      // YouTube scan

      else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)

      {

          var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

         

          if (youtube_id.length == 11) {

              var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";

              }

      }

      else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)

      {

      // Support For 3rd Party Images

      ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];

      }

      else

      {

      ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAGUfSnOl8Z80gfkB3nf4E6leIH9b9OTX5_A6kGYdeyDWGdLwiDFiBviv0bDAWrrvjSJCz_-CkNJYcTYjw1u7RpJBfat_lFl0hPlE_kv7AADKMtFU4PPpY8DM21SEgNMaR2xUN21hR6D0/s200/Icon.png'";

      }

      //###################  Printing List

      var listing = "<li><div class='flex-div'><div class='iFeatured'><a  href="

      + ListUrl+

        "><img src="

      +ListImage+

      "/></a></div><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"

      +ListAuthor+

      "</span><span class='icomments'>"

      +ListComments +

      "</span> <span class='idate'>"

      + D +

      " "

      + M +

      "</span></div><a class='mbttitle' href="

      +ListUrl+

      "target='_blank'>"

      +ListTitle+

      "</a></div></li>";

      document.write(listing);

      } }

      <!-- #### Invoking the Callback Function #### -->

      document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslide'></"+"script>");

      </script>

      </ul></div>

      Changing the following control options will help you customize blogger sider:


      • animation: You can select two values here. "slide" or "fade"

      • slideshowSpeed: You can set the speed of the slideshow cycling, in milliseconds

      • animationSpeed: You can also set the speed of animations, in milliseconds

      • pauseOnHover: Pause the slideshow when hovering over slider, then resume when no longer hovering

      • If you don't want to use the title then delete the yellow highlighted code.

      • ListBlogLink : Insert your Blog URL here

      • ListCount : Decide how many posts do you wish to display.

      • ListLabel : Insert your blog label here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar.

      • TitleCount : Choose how many characters to display in slide title.

      • ImageSize : You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 600; where the value 600 means that you want your images to be within 600 x 600 pixels in dimension.

      • /-/"+ListLabel+" Delete this line if you wish to display latest posts of your blog without mentioning a label



    12. Click Save and you are all done!



    Need Help In Installing Automatic Featured Post Slider?



    I just hope you may find this cool slider widget useful and easy to apply. Let me know if you need any help during the installation process of this content slider. You are most welcomed to post your questions in the comment box below. In our next tutorial we will share how to create Random Posts Content Slider for blogger.


    Stay tuned and keep customizing your blog to take it to the next level! =)


    How To Manage Time And Achieve Your Content Writing Goals

    Are you a content creator?

    You probably spend most of your time seeking fresh, new ideas to share with the world. You might be learning new skills and improving your knowledge of SEO tactics.

    Content creators are world changers, however, most creatives find that their time management goals lag behind.
    How To Manage Time And Achieve Your Content Writing Goals
    In order to be a successful creator you must find order.

    If not, you may always struggle with deadlines, writer's block, and bad time management.
    Read more �

    10 Tips To Choose The Best Content Writer For Your Business Blog

    In today�s constantly connected and competitive world of business, it�s imperative for any successful company to have a solid blog.

    Marketers and content writers need to be able to provide informative, engaging and interesting articles, and they must be able to do it consistently on a regular basis.

    This can be overwhelming for any professional, and it�s often necessary and convenient for a business to out source the work.

    Finding the best writers who will get the job done right can also be a confusing process.
    10 Tips To Choose The Best Content Writer For Your Business Blog
    When it comes to articles that will actually gain new visitors and repeat customers, many companies have no idea where to even begin.

    Review the following tips before hiring your next content writer.
    Read more �

    How to Get Free Original Content for Your Site Without Writing it Yourself

    If you want to keep the highest Google ranking of your website, you need to update your content regularly. Freshness and uniqueness are two basic demands to the published content.

    There is a tendency: people create a website, add all necessary pages and stop filling it with new posts.

    First, the ranking of website grows, especially if SEO work has been done properly.

    But very soon it starts to fall. Some website administrators decide that the problem is with SEO and website promotion.
    How to Get Free Original Content for Your Site Without Writing it Yourself
    But in fact, everything depends on how carefully you update your content.
    Read more �

    Win 5 Free Domains & Hosting Accounts from Askforhost.com � Giveaway

    Win 5 Free Domain & Hosting Accounts from Askforhost.com � Giveaway
    Dear MyBloggerLab Readers,

    In the past, we have offered you several giveaways like free web hosting giveaway, free WordPress themes giveaways, and more. Today we�re excited to team up with AskForHost.com to bring you another exciting domain and hosting giveaway. In this giveaway, we will be offering Free Domains and Hosting accounts for over a period of one year. This will be ideal for those who are looking to kick-start their business, but don�t have enough funds to afford a hosting or a domain.
    Read more �

    4 SEO Tactics you Have to Stop Using in 2017

    Stop wasting your golden time and leave outdated/old SEO strategies.

    SEO is changing day-by-day, many algorithms are coming and many are rolling. Hole year search engines are changing their robots from upside-down.

    Many of you in SEO industry trying to rank better than rest. All of you can't get good results. You know why? Why your competitors are getting higher rankings? What they are doing and how search engines love them ?. You will get all answers by reading this blog post.
    Image via http://ellescoop.com
    I will describe all tactics which are no longer works, you have to stop using or outdated tactics. Many professional bloggers and search engine masters will tell you these strategies.

    This is why you have to read my article. Before buying any SEO course, read this entire blog post and than search for a good SEO consultant.
    Read more �

    Top 7 Tools for Improving Your Blogging Skills

    Nowadays, blogging has become one of the most popular jobs.

    It is a challenging occupation that requires hard-work, patience and originality. Being a blogger means being innovative and passionate about your writings!

    However, blogging is not about you: it�s about your readers. If they read your articles, you are successful and smart! If they don�t, then�
    Top 7 Tools for Improving Your Blogging Skills
    You might need some help.
    Read more �

    How to Prepare for an Upcoming SEO Conference - Comprehensive Guide

    How to Prepare for an Upcoming SEO Conference - Comprehensive Guide
    There are multiple SEO conferences held each and every year. Those that attend these events are able to learn a great deal about the world of SEO and the techniques, which can help them become successful. Of course, attempting to attend one of these events can be a little more difficult than just purchasing a ticket and renting a hotel. In order to ensure you get the most out of the event, it is pertinent to plan in advance and to plan extensively. Everything needs to be just perfect, so you can focus on the key speakers and their words of wisdom. Below, you will discover tips for preparing for your next search engine optimization conference. In this article, we will show you how to prepare for an upcoming SEO Conference - Comprehensive Give.

    Read more �

    Getresponse - The Best Marketing Automation Tool For Bloggers

    The Trend for marketing automation is at its peak. According to a study, 49% of companies are using marketing automation to automate their business. Companies who use marketing automation believe that it is very important for the overall success of their marketing.

    There are several automation softwares available in the market, but when we talk about the best one, the name that comes in mind is �GetResponse�.
    Read more �

    Make Money Online in Urdu: 14 Ways To Make Money Online in Pakistan


    Make money online isn't as easy as it sounds and as many portray it to be. It requires hard work, consistency, determination and fire in belly to achieve the goals. With this post, I look forward to share all the major strategies you can take to make money online in Urdu language for all the people in Pakistan and India.


    #1 Building Audience/Readership

     The first strategy I would recommend is to create your own readership and audience may that be for your blog posts or your YouTube videos. This can be done by starting a blog or creating a YouTube channel and earn through it.



    Once you have your following and people that trust you, you can create your own product or promote affiliate product to your readership. You can also earn via AdSense or BuySellAds which are famous advertising platforms.

    Once you've created a handsome readership or viewers in the case of YouTube channel, you would experience third party companies reaching out to you for sponsored post and more opportunity. Notice how big giants focus on creating user base without a monetization plan pre set.



    Take an example of Twitter. Since the launch of the platform, the company didn't make any profit even though it has such a huge user base.

    Focus first on creating readership and audience and you'll see opportunities coming up.

    Below are some helpful videos that would help you out :)



    How You Earn?

    With blogging, you can earn with advertisments, affiliate marketing, creating your own product and more. I've talked about it in detail in the following post that would help you out.

    #2 Freelancing

    Freelancing is another way to make money online. Freelancing is where you lend your skills online. There are various platforms online like Freelancer.com, Fiverr and more. These platforms have various categories like graphics designing, programming, content writing (blogging), voice over and more.

    You can explore the categories and see what work you can do amongst them. Next, make up your mind and learn how to succeed on each of these platforms as all of them have their own tactics to get to the top.

    How You Earn?

    With Freelancing, you earn when people on those platforms would give you work. They would find your gig and offer you a task. Once you do that in a specific time predefined in your gig depending upon the work, you would complete it. Then, once your order is complete, the platform would pay you the money that it previously have on hold from the person willing the services.

    You can then retrieve the payment via various payout options like Cheque, wire transfer, PayPal, Payoneer and more depending upon individual platform you work upon.

    #3 Paid to Platforms


    Then there are various platforms that paid to do specific work. Like get paid to review websites, or get paid to fill surveys and more.

    I've talked about that in detail in the video featured above. There are various payment options available with these platforms though I would not personally recommend these for long run.

    These websites don't pay much and its not worth your time to invest it. Instead, build your own online empire like starting a blog or creating a YouTube channel.

    To Conclude


    There are quite many details that I discussed in the video featured at the top of the post. Do let me know if you have any questions in the comment section where I would love to reply in Urdu/Hindi for all of you.

    How To Setup AdSense Matched Content Unit in BlogSpot?

    Setup Adsense Matched Content Unit in BlogSpot blogs

    In 2005 Google Introduced Matched content to help publishers promote their website content to their visitors. AdSense Matched content is actually a content recommendation tool that shows related posts to your readers. It generates contextually relevant article recommendations from the pages on your blog by displaying thumbnails. In other words it helps your blog visitors to discover relevant articles on your blog. It is a Google version of the Related Posts Widget that we use in blogspot and wordpress blogs.

    By setting up matched content on our blogspot blog, we did not only helped our readers to discover related content on our site but we also succeeded in generating more pageviews, lower bounce rate and some extra ad impressions thanks to its native ads option.

    Matched Content unit surely engages your website visitors to spend more time on your blog and thus helps you with higher page views and of course more ad revenue if you monetize it. See a live demo of Matched Content  in action at the bottom of this tutorial [Scroll down].

    Matched Content Display Sizes

    Matched content and Ads are displayed in two types either:

    1. Responsive Size: Related content is displayed horizontally inside a responsive carousel slider with Next/Previous buttons
    2. Fixed Size: A custom size matched content will display recommendations inside a Grid or fixed size slider.

    Responsive Size:

    Note: You can use responsive size only if your blogspot template is mobile responsive. Make your template responsive by reading this interesting and easy guide:

    Matched Content is displayed inside a responsive horizontal slider in Desktop/Laptop screens but displayed inside a vertical slider in Smartphone/Tablet/IPad screens. The Ads are distinguished from the related content using the "Ad" label.

    Matched Content View In Desktop / LaptopMatched Content View In Desktop / Laptop

    Matched Content View In Tablet / Large Smartphones

    Matched Content View In Tablet / Large Smartphones

    Matched Content View In Smartphones

    Adsense  Matched Content View In Smartphones

    Fixed Size:

    A fixed size Matched Content Unit is displayed in Grid Style instead of a Slider. You will have to manually create different matched content units for different mobile screen sizes. I would prefer a responsive one though!

    The thumbnails in fixed size can be displayed inside a fix grid or slider depending on the number of related posts AdSense can fetch out of your site.

    Adsense Matched Content in Fixed sized

    Check If Your Blog Is Eligible For Matched Content

    At present Matched content is available only for blogs with multiple pages and high volumes of traffic. You can easily find out if your blog is eligible for Matched content by checking the "My sites" section in your AdSense account.

    Follow these steps to check the eligibility of your blog:

    1. Sign in to your AdSense account.
    2. Click the gear icon and then select Settings.
    3. In the sidebar, select My sites.
    4. Under "My sites", click Matched content.
    5. In the "Sites" section, check to see if your blog is listed:
      • If your blog is listed, you can surely place Matched content units on any of its pages.
      • If your blog isn't listed, then it's not currently eligible for Matched content.

    Do Matched Content Count Towards ad limit per page?

    No!  AdSense has clarified it quite clearly that Ads displayed inside a matched content unit does not count towards your Content Units and Link units per page. You can still publish 3 ad units, 3 link units and 2 search boxed per page.  Matched content units are bonus ads that you can display.

    Create AdSense Matched Content Unit

    Lets first create a matched content unit and later we will discus how to setup and show matched content native ads in blogspot blogs.

    1. Sign in to your AdSense account.
    2. Visit the My ads tab.
    3. Click the button +New ad unit.
    4. Select Native, then click Matched Content. Create AdSense Matched Content Unit
    5. The drop-down in the upper corner of the preview area will tell you which of your blogs are eligible for Matched content. Eligibility of sites for  AdSense Matched Content Unit
    6. From the right sidebar options, give your Matched content unit a suitable name.
    7. Do enable "Monetize with ads" option to earn extra revenue by displaying native ads inside matched content. You will see this option only if you are eligible to monetize your match content unit with ads.  Monetize AdSense Matched Content Unit 
    8. In the "Size" section, choose "Responsive" if your blogger template is mobile responsive else choose custom. When using a custom size, AdSense recommends to choose an ad size with a width:height ratio of around 2:1 for a horizontal layout, or 1:2 for a vertical layout. Create Responsive AdSense Matched Content Unit
    9. Finally click SAVE AND GET CODE.

    Display Matched Content in Your BlogSpot Blog

    You can display several matched content units per page. It is advised to display just two units: one at the bottom of your articles and second on your sidebar. At present I have added just one unit at the bottom of my blog posts. You can use the same code for both the locations.

    Follow these steps to Add Matched Content Unit widget in BlogSpot:

    1. Go To Blogger > Settings> Template
    2. Backup your template first.
    3. Click "Edit HTML"
    4. Search for this code:  <data:post.body/>   Note it will appear several times depending on your layout. Choose the last occurrence of this code.
    5. Paste your Matched Content Code just at the bottom/below of <data:post.body/>. Note if you are using the responsive code then kindly replace async with async='' inside your code to avoid getting errors in your blogger template editor. Edit your code as shown below:
      <script async='' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
      <!-- Matched Content -->
      <ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-format='autorelaxed' data-ad-slot='xxxxxxxxxxx' style='display:block'/>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    6. Enclose your final code inside these conditional tags so that matched content is displayed in blog posts only and not the homepage or search pages.
    7. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      AdSense Matched Content Code
      </b:if>
    8. Save your template and you are all done! Visit your blog to see it in action :) 

    Have You Used Matched Content?

    Matched content have surely improved our AdSense earnings and blog pageviews. It is really slow at fetching your blog content but with time once AdSense is able to understand your content well enough, it will display more recommendations and less ads. Do add this new widget by AdSense on your blogs and see the difference for yourselves.

    I have also shared a  tutorial on how to add page-level ads on your blogspot blogs. Which are ads specifically built for your mobile audience.

    How is your experience with AdSense Native ads so far? Do share your valuable views with all of us. :)

    13 Tools for Creating Great Website Content

    It really is all about content � content that is of value and benefit to your target audience and, at the same time, engaging and appealing to see and to read. This is a tall order, because the competition is pretty stiff.

    Your website consists of a home page and other landing pages, based upon what you offer to visitors and customers.

    It also consists of a blog which you use to provide great information, education, humor, storytelling, and inspiration.
    13 Tools for Creating Great Website Content
    All of the text and all of the visuals and media you create for your website must reach a pretty high bar, if you are to keep your audience engaged.

    Fortunately, you do have some tools at your disposal that can make your content creation easier and more appealing.
    Read more �

    Our Motivational Workshop on Entrepreneurship at SSUET

    Dear MyBloggerLab Readers,

    On 20th of September 2016, we were invited at Sir Syed University of Engineering & Technology, Karachi (one of the oldest engineering universities of Pakistan) for a motivational workshop on a very interesting topic, "Transforming Students into future Entrepreneurs". The basic idea behind this workshop was to encourage, motivate and inspire students of different universities to transform their life right from their schooling age. Today in this article, we will be discussing about our motivational workshop on entrepreneurship at SSUET IEEE Computer Society.
    Read more �

    Hangouts on Air YouTube: How to Use Hangouts on Air Using YouTube Live Event



    YouTube lately debunked their Hangouts on Air feature that was previously a part accessible via Google Hangouts on Air feature of Google+ social media platform.  


    Though lately, Google has been making moves to make that a part of YouTube platform its self, which is kind of what makes sense.
    As Google+ didn't meet the expected goals and once again became a relative failure for Google in addition to all the previous social media platform launched by Google like Google Buzz etc.

    Google since has been making Google+ as a part of Google for Work platform and might be just limiting the neglected social media platform just for business.

    As the Hangouts on Air feature is embedded within YouTube Live feature, we'll see how one can still do live streaming just like before but taking few different steps.

    Follow the simple steps below to proceed.

    How to do live streaming using YouTube Live Hangouts on Air feature?

    Step #1 Open YouTube Live Option in Creator Studio


    Once you're into your Creator Studio, click Live Streaming >> Events options from the left sidebar.


    Once that's done, click 'New Live Event' Option from the right panel as shown in the image below.


    After clicking that, you'd be taken to a very similar interface that you'd be used to while creating Google Hangouts on Air.

    Here you simply set all the settings like Title, publishing time, tags etc just like you would do in Google Hangouts on Air. In addition to this, all simply choose the radio button from the right side as shown in the image below that would select the settings as Google Hangouts on Air instead of custom settings.

    Once that's all done, simply proceed as normal.

    Hope that was helpful for you. Do let me know if you have any particular questions down below in the comment section.

    How to add Slide out Google Friend's Connect Follow button in Blogger

    How to add Slideout Google Friend's Connect Follow button in Blogger
    In the past, we have shown you how to add Facebook follow button in Blogger, Pinterest Follow button in Blogger and Google+ follow button in Blogger. Recently, one of our users asked us about adding a slide out Google Friend's connect follow button on Blogger? Google Friend's connect follow widget allows Blogger users to keep a track of their favorite blogs that are hosted at Blogger. All the latest updates from different blogs you follow are shown on the Blogger dashboard under Reading list, making it easier for followers to read your updates. Today in this article, we will show you how to add slide out Google Friend's connect follow button in Blogger.
    Read more �
    React Webpack Heroku Youtube Instant Search Working with APIs Tutorial

    React Webpack Heroku Youtube Instant Search Working with APIs Tutorial

    I already have discussed about React JS in my previous posts. Today, lets see advanced way of using React JS, webpack and ES6 with Node.js to build and run your application. Let’s see what webpack and ES6 does. ES6 (ECMAScript6) is the latest version of javascript that has number of new features to write your javascript code easily. Webpack is mainly designed for larger applications to build the application. The main idea behind webpack/ES6 is code splitting. It allows you to write Javascript as a modularized code, so that you can re-use and share the code to maintain your project over-time.

    React Webpack Heroku Youtube Instant Search Tutorial

    Read more »