Solution Found!
As mentioned earlier the only problem I faced was in calling the JavaScript function and even after calling it correctly I was not able to disable the effect. Thanks to EnglishJavaDrinker I just get to know that instead of adding the JavaScript above </head> we must add it between <body> and </head> which sounds really weird but it is working just perfectly!Do this in order to disable the effect:
- Go To blogger > Design > Edit HTML
- Backup your template
- Search for </body>
- Paste the following code just below </body>
<script type='text/javascript'>5. Save your template and you are all done!
document.getElementById('main').innerHTML = document.getElementById('main').innerHTML.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");
</script>
I hope this will be helpful to all those who wish to get rid of this annoying effect unfortunately brought by blogger in a really wrong way. Peace and blessings pals! :)