How to Put Google Adsense Below Post Title in Blogger?

Adsense is used by majority of expert bloggers for their website monetization because it is a cookie based contextual advertising system that shows targeted ads relevant to the content and reader. As bloggers are paid on per click basis, they try various ad placements on the blog to increase the revenue and get maximum clicks on the ad units.

Well, on some blogs, you might have seen Adsense ad units placed below the post title. Do you know why? It is because the area just below the post title gets the most exposure and is the best place to put AdSense ad units to increase Click Through Rate (CTR).

Even though ads below post title work like a charm but this doesn’t mean that it will work for you as well. If you want to find out the best AdSense ads placement for your blog, try experimenting by placing ads at various locations such as header, sidebar, footer, etc. You can try other blog monetization methods as well to effectively monetize your blog.

In this tutorial, I will guide you about how to show Google Adsense ads below post titles in blogger. So, without much further ado, let’s start the process 

Must Read:

• Incredible Blogging Tips – Take Your Blog from Zero to Hero
• Ultimate Image Optimization Tips For SEO
• How To Find and Use LSI Keywords For SEO?

How to Create Google Ads

1. Login to your Google Adsense Account.
2. Under “My Ads” tab, create a new Ad unit

Create a new ad unit

3. Type ad unit name (it can be anything) and choose desired ad size. For better performance choose wide area ad sizes like 300*250 Medium Rectangle or 336*280 Large Rectangle

Select ad size

4. Customize your Ad Style to match it with your template. Then, click on Save and get code button.
5. The ads won’t appear if you use that code directly. To use this code within the blogger (xHTML) template, you need to parse it first. Use this HTML Parse Tool to change special characters into their corresponding HTML entities.

Copy parsed Adsense code

7. Now, copy the parsed Adsense code.

Adding Google Adsense in Blogger Below Post Titles

1. Open your blogger dashboard >> Template.
2. Backup your current blogger template.
3. Click on Edit HTML button.

Press this button

4. Copy all the template code and paste that into notepad. (to find the below code)
5. Press Ctrl+F and search for <data:post.body/>. You might find this code more than one time but, you’ve to work with the second one.
6. Now, place the below code just above <data:post.body/>

Make your computer greet you every time you start Windows

A simple modification in the previous trick will make your computer welcome you in its own mechanical voice every time you log onto Windows. This is achieved by placing the VBS script responsible for making your computer talk in the Start up folder. Read this post to have a computer said welcome.

Command Prompt too has some tricks up its sleeves

If you think that the Command prompt is a boring old program that no one uses, you are making a huge mistake. It can be used for everything from watching ASCII Star Wars to making folders that you cannot delete. See this post to know about all the cool stuff you can do with the Windows Command Prompt.

Have fun with Notepad

If you think that Notepad is just a basic text editor, then, you will be amazed by its capabilities. You can use Notepad to create everything from personalized logs to harmless viruses that are incredibly annoying. Go see this post to know just how useful Notepad is.

Fable F#-to-JavaScript tool integrates with Microsoft .Net Core SDK

Leveraging the Babel JavaScript compiler, Fable makes JavaScript a back end for F# without having to compile to .Net bytecode. The beta release has .Net Core serving as an open source implementation of .Net for Windows, Linux, and Mac.

[ Get started with functional programming, including examples in F#. | Keep up with hot topics in programming with InfoWorld's App Dev Report newsletter. ]

"Also, as Fable 1.0 relies on the new F# project format, we may wait until it is supported in Visual Studio 2017 -- currently the new .fsproj is only supported in Ionide -- but hopefully that will take only a few weeks," said Alfonso Garcia-Cano, Fable's lead developer.

The beta release also features an improved approach to project files. Developers will see a list of files, references, and CLI tools that can be easily edited without fear of breaking anything in a build, according to Garcia-Cano. The .Net Core SDK accepts references for CLI tools, and with a project file running "dotnet restore," developers can run Fable commands, prefixed with "dotnet fable."

In Fable 1.0, curried lambdas are no longer compiled as nested functions. This situation had caused confusion and forced users to convert the lambdas into delegates before sending them to JavaScript. Instead, the 1.0 version has the compiler detecting whenever more or fewer arguments than expected are being applied to a function, with a nested function created ad hoc if necessary. If this guess is too difficult, Fable will create a dynamic lambda to check the number of applied arguments in runtime.

Also with the beta release, Fable's integration with Webpack means there will only be one configuration file and better interaction with languages like JavaScript or TypeScript. While it might seem risky to tie Fable to Webpack, most users already have been using it, Garcia-Cano said.

Load Only a Section of a Page

Use Case

You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage.

#JQuery

$("#mainNav").load("/store #mainNav")

The first param is the URL (only works for same-domain requests!) and the 

second (well, technically it's still part of the first, separated by a space) is a jQuery selector

 of the part to load. Not passing the second selector param will load the entire page. 

There is an optional third parameter, a callback function, which will run when the load is 

complete.

Load jQuery Only If Not Present

Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don't want to load it again, but if not, you do. This works for that.

Smart Asynchronous Way

// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {

 if (typeof $ == 'function') {
  // warning, global var
  thisPageUsingOtherJSLibrary = true;
 }
 

jQuery Duplicate Plugin

$.fn.duplicate = function(count, cloneEvents) {
       var tmp = [];
       for ( var i = 0; i < count; i++ ) {
               $.merge( tmp, this.clone( cloneEvents ).get() );
       }
       return this.pushStack( tmp );
};

The .clone() function of jQuery will duplicate a set once, but what if you need multiple 
copies of the same set? You would have to do:

$(elem)
   .clone()
   .appendTo(otherElem)
   .clone()
   .appendTo(otherElem)
   .clone()
   .appendTo(otherElem);
Now you can just:

$(elem)
   .duplicate(n)
   .appendTo(otherElem);
The first parameter is the number of clones you want and the second optional parameter 
is a boolean which controls if you want the events bound to those existing elements to be attached to the clones as well (or not).

Force iframe to Reload

$('iframe').attr('src', $('iframe').attr('src'));

Fallback for CDN hosted jQuery

Several big companies offer copies of jQuery hosted on their CDN's (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script.

There is always that twinge of doubt though, that perhaps something goes wrong with these big companies CDN at the script isn't available (it happens). It's more reliable to use your own website, as hey, if they are loading your webpage, then your server is up and will server the script just fine, albeit with out the benefits of the CDN.

So perhaps the best solution is to use both methods! Use the CDN first, and if it fails, load the local copy. Here is a technique:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Find all Internal Links

Find all links that start with the sites domain, a slash, relative file path, or a hashtag.

var siteURL = "http://" + top.location.host.toString();

var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");

Draggable without jQuery UI

It doesn't have all the fancy callbacks and options, but hey, it makes things draggable (and with a specified handle optionally).

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

Usage

$('div').drags();

Display Browser and Version

This is jQuery specific, and contains a bit of a hack/fix for dealing with Chrome. This works between jQuery 1.5.1 and jQuery 1.8.3. It's gone in jQuery 1.9. Presumably because it was used too improperly too frequently and it was hurting the web. Better to feature detect when possible.

var userAgent = navigator.userAgent.toLowerCase(),
    browser   = '',
    version   = 0;

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

// Is this a version of IE?
if ($.browser.msie) {
  userAgent = $.browser.version;
  userAgent = userAgent.substring(0,userAgent.indexOf('.')); 
  version = userAgent;
  browser = "Internet Explorer";
}

// Is this a version of Chrome?
if ($.browser.chrome) {
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.')); 
  version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
  browser = "Chrome";
}

// Is this a version of Safari?
if ($.browser.safari) {
  userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7); 
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent; 
  browser = "Safari";
}

// Is this a version of Mozilla?
if ($.browser.mozilla) {
 //Is it Firefox?
 if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
  userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;
  browser = "Firefox"
 }
 // If not then it must be another Mozilla
 else {
   browser = "Mozilla (not Firefox)"
 }
}

// Is this a version of Opera?
if ($.browser.opera) {
 userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
 userAgent = userAgent.substring(0,userAgent.indexOf('.'));
 version = userAgent;
 browser = "Opera";
}

// Now you have two variables, browser and version
// which have the right info

Check if Event was Triggered or Native

$('button').click(function(event, wasTriggered) {
    if (wasTriggered) {
        alert('triggered in code');
    } else {
        alert('triggered by mouse');
    }
});

$('button').trigger('click', true);

Check if jQuery is Loaded

if (typeof jQuery == 'undefined') {

    // jQuery IS NOT loaded, do stuff here.

}

Transparent Circular Loader

<div class="util-bar">
 <label for="">Change Background: </label>
  <button class="green"></button>
  <button class="teal"></button>
  <button class="blue"></button>
  <button class="pink"></button>
  <button class="red"></button>
  <button class="orange"></button>
  <button class="abstract"></button>
  <button class="nature"></button>
  <button class="food"></button>
</div>
<div class="loader">
  <span class="spinner"></span>
  Loading
</div>

Test here

Autofill submit button

<span>Required:</span> <input required=required type="text"> <br>
<span>Required:</span> <input required=required type="text"> <br>
<span>Required:</span> <input required=required type="text"> <br>
<span>Required:</span> <input required=required type="text"> <br>
<div>
  <button>Send</button>
</div>

Test here

Better Broken Image Handling

Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible, because images that a browser can't find fire off an "error" JavaScript event we can watch for.

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Change WMode with jQuery

If you don't set the wmode on a flash embed it will float over the top of an overlay which can be a pretty big deal. This is ideal in environment with lots of legacy video code or where users will be posting new code and teaching them about wmode is a lost cause. This should work in all browsers.

$("embed").attr("wmode", "opaque");
var embedTag;
$("embed").each(function(i) {
       embedTag = $(this).attr("outerHTML");
       if ((embedTag != null) && (embedTag.length > 0)) {
               embedTag = embedTag.replace(/embed /gi, "embed wmode="opaque" ");
               $(this).attr("outerHTML", embedTag);
       } else {
               $(this).wrap("<div></div>");
       }
});

Button to refresh web page

Allow visitors of your web page to interface with the browser reload function to get the latest information and to interface with other JavaScript's, such as ourrandom quote script.
<FORM>
<INPUT Type="button" VALUE="Reload Page" onClick="history.go(0)">
</FORM>