Saturday, 15 November 2014

How to Convert Adsense Ad Code

HTML has special handling for characters like < and > symbols, so it doesn't work well with those characters where they shouldn't be.

Having spurious characters like those symbols in your text can have some weird effects - blocks of text not appearing, broken formatting, and generally just not seeing what you expect to see.

This can all be fixed by 'escaping' those characters. This process involves scanning the text for those characters, and replacing them with a special character-code that browsers can interpret as the correct symbol, without actually embedding that symbol in your text.
For example, the escaped character code for > is &gt;.

Paste Your Code Here

This tool automatically converts javascript ad code into the correct format so you can embed it directly into your new xml Blogger template. It’s perfect for converting AdSense, AdBrite, Chitika or any other javascript ad code you may have.
Instructions Paste your Adsense code or any HTML in the empty box and then press the Convert button.

How to manage Adsense Revenue Sharing Feature in Blogger Blogs

This cool trick shows how to implement Google Adsense Revenue sharing feature in blogger(blogspot) blogs:

Do you run a blogger blog which is controlled by multiple authors ? Are you looking for an idea to share revenue with your co-authors? If so, then this nice Blogger trick solves all your problems.

First, What is Adsense Revenue Sharing ?

Suppose, you're the administrator of a blogger blog which has multiple guest authors. If you want to share the blog revenue with them, normally you divide the total revenue based on the Post count or Page views. But, most of the time it may not be accurate because CPC and CPM varies from post to post depending on the keywords,etc. So, it may not encourage the team members to post more stuff :(

But, with this cool trick, you can share the blog revenue with them more precisely because every author gets his own ad displayed in all the posts he/she does.

So, lets see how to add this feature to your blog..

How to manage Adsense Revenue Sharing Feature in Blogger Blogs

For example, If your blog as 3 authors - John, Ricky and Britney

1. Sign into Blogger » Layout » Edit html

2. Tick the "Expand Widget Templates "
3. You can insert the ad anywhere you want in the post body.. In this example, I'll show you how to add it inside the blog post (between the post title and post body)

Find the following line:


and Paste the below code above that line

<b:if cond='data:blog.pageType == "item"'>

<b:if cond=' == "John"'>

<b:if cond=' == "Ricky"'>



<b:if cond=' == "Britney"'>





Replace the Names with your Blog authors (Case sensitive)

4. Don't Copy and Paste the Adsense Code directly in the template. First, Go to this Convert Adsense Ad Code Page and paste your adsense code in the box provided and click on "Convert Ad Code".
Now, copy that code and paste it in the template.
(Look at the screenshot below)


and Finally, SAVE THE CHANGES.

From now on, Each member of your blog can monetize their posts with their own adsense ads... Happy Blogging :)

Note: You can use the same hack to put other advertising networks as well.. like adbrite, bidvertiser, etc

How to turn Color Image into Black and White in Blogger's Post

Canvas is definitely a powerful tool and you can use it to turn color pictures into black and white pictures.

Actually turning colors into shades of grey is a simple manipulation: declare a canvas, load a picture and apply the transformation script.

How to turn Color Image  into Black and White in Blogger's Post

Here is a canvas loaded with the picture of a street in South-America:

Here is the HTML code that created the canvas and loaded the image (to be inserted in the HTML view of your post) :

<canvas height="400" id="myimage" width="500" style="margin-left:30px; ">
   Your browser does not support Canvas.
   <br />
   var mycanvas   = document.getElementById('myimage') ;
   if( mycanvas.getContext ) {
      var ctx = mycanvas.getContext('2d');
      var imageObj = new Image();
      imageObj.crossOrigin="anonymous" ;
      imageObj.src = 'https://dc788c82bdb50153.../street.jpg';
      ctx.drawImage(imageObj, 0, 0);     

A small customization is required to use this code:
1) the attributes of the canvas tag must be edited: replace the height and the width with the actual height and width in pixels of the image you want to display.
2) In this post, I used an image located on my google drive. Replace the source of the image ( imageObj.src ) with the actual URL of your image (it should be accessible from blogger).

Now that we know how to load a picture into an html canvas, let us see how we can transform this picture and turn colors into shades of grey. To do that we'll use a small javascript function that replaces colors with shades of grey. Insert the following script in your post (in the html view):

function drawImageInGrey(ctxObj, cvsObj  ) { 
var imgData=ctxObj.getImageData(0,0,cvsObj.width-1,cvsObj.height-1); 
var col = 0 ;
for (var i=0;i<;i+=4)
col = Math.floor( ([i] +[i+1] +[i+2] ) / 3 ) ;[i] = col;[i+1] = col;[i+2] = col;

Then apply the transformation to the canvas with the following javascript command (in the html view of your post):

drawImageInGrey(ctx, mycanvas);

Here is the result:

Actually using canvas and javascript, you can go further: turn colors into shades of a single color, replace a color with another, etc.

How to fix image Thumbnails stopped appearing in blogger

If you use blogger to daily push out new updates to your blog, then this morning you might have noticed your entire image thumbnails suddenly got disappeared from the homepage of your blog. This leaves you thinking that you may have done some unnecessary editing to your template, which might be the reason image thumbnails are not appearing on the homepage or archive pages. However, that’s not the case, image thumbnails are broken because of a new bug that recently blogger users are facing. Today in this article, we will show you, How to fix image thumbnail not appearing bug in blogger.

Why Image thumbnails are not appearing?
The very first thing that you would be concerned about is that, why all of a sudden these image thumbnails stopped working? You didn’t do any kind of changes to the template, even tried uploading a fresh new template but the results are all same. If you are seeing this bug, you’re not alone almost all blogger users are having issues with new and old image thumbnails they have on their blog. Following are some people who’re having same image broken issue with their blogs:

"Since yesterday, my newly posted pictures are lacking the thumbnail. I figured earlier that the thumbnail does not get generated if all images are sourced from an external host. That's why I always upload the first photo via Blogger's upload option so that a thumbnail is created automatically.
But since yesterday, that is no longer working. I tried to create a second post today (now the latest post) just to see if the issue was related to that specific post. It appears the issue is site-wide.

Help will be appreciated.


"All of a sudden the images doesn't show up anymore om my homepage. Can you please help me fix it? "

"The problem happens even in the Popular Posts widget and the "data:post.thumbnail" tag, only for posts published today. That's a major issue."

Try publishing a new post by uploading an image, add a title, little post content and press publish. Now go to your blog and you’ll still don’t see your image thumbnail on the home page. This might make you lose your calm but we have a simple solution to this bug.

How to fix image Thumbnails stopped appearing in blogger?

The very first thing you need to do is to go to Blogger >> Posts >> now from the list of your published post select anyone and press Edit Posts. It will lead you to blogger post editor, now revert to the HTML tab and search for the following code:


Upon finding, replace all the URLs that are starting with https:// to http://. We have attached a screenshot below which will help you understand better.

Please note: If niter https:// nor http:// protocol is attached to your image URL then, search for src="// and replace // with http://.

After making changes, publish the post again and your image thumbnails will start appearing again on your homepage. The issue is caused by blogger, which is not giving permission to https:// image thumbnails to appear. However, we hope this bug would be completely fixed by blogger sooner or later.

We hope this quick tip has helped all those users who were continually sending us emails about image thumbnails not showing on the homepage. This article would certainly make them feel relaxed about their site. Do let us know if you’re facing the same bug and what precautions you have taken to fix the bug?

Add Blogger Share Buttons to Custom Blogger Templates

Recently, Blogger released their new Share Buttons feature which makes it easier for your Blog visitors to bookmark, tweet, fshare, email ,etc your post.

But, if you're using any custom blogger template.. you may not see the widget appearing in blog..even though you activate it.
blogger share buttons

So, if you have that problem. here is how to fix it.
(before making any changes..first backup your template)

1. Sign into Blogger > Design > Edit html
(tick the expand widget templates)

2. Add this line anywhere you want the widget to appear

<b:include data='post' name='shareButtons'/>

Normally, in most templates, you can add it after this line..

<p class='post-footer-line post-footer-line-1'>

If you don't find that above line in your template....
Find this one.


and add this code after that line..

<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div>

Note: If you're using Magazine style blogger template, You can find the data:post.body line TWO TIMES.. So, try in both ways and find out which one is working..and remove the other one.

Finally..Save the template!

If you still don't see it in your Blog, Make activated it by going to
Blogger dashboard > Design > Click the 'edit' button of the Blog post section.

Tuesday, 11 November 2014

How to Add a Picture to the Post Title or Description

So you want a picture appended to your blog title and/or blog description. No sweat.

I have found that it is possible to put HTML tags in the post title which means that you just have to add a <img> tag

Sign into Blogger (Dashboard > Settings > Basic > At the top will be the boxes (fields) for typing in the blog title and blog description.

Thus if you want an image followed by the post title, you will then type into the field for the post title the following:

<img src="picture url" /> "put the post title here without the quotes" replacing "picture url" with the actual picture url and "post title" with the actual post title. Below a screenshot to illustrate:
How to Add a Picture to the Post Title or Description

How to Add a Picture to the Post Title or Description

Monday, 10 November 2014

How to recover Email address of your Blogger blogs

These days many people are using Blogger platform to create a blog. Blogger is own to Google Inc. So you are given away many services when you create a new Google account ( Gmail, Blogger, Drive, Code, Feedburner,Wallet, YouTube etc.).  An individual person might have more than one Google account. For instance, if you use Google apps so you have another Google account for your business. I personally know some people have more than two-three Google accounts. They use each account for different purposes. If you’re one like them, you might forget the passwords of some accounts. Also if you’re a blogger you might have many blogs in each account. So in some cases, you would be forgotten which blogger account has the blog established or what blog has been created in which account. So here we have found the best and 100% working method to find the email address of your blogger blog.

How to recover Email address of your Blogger blogs
1: Go to this URL:

2: Now you will see a web page like below. On this page, you can find the forgotten Google email address of the blog or existing blogs in each account.

3: Now type your blog’s primary URL. Ex: =   Then click on “LOOKUP” button.

4: In next page opening in same window, you will be notified that an email was sent to your account. Now log in to each Google account you have and check the Inbox. You would be received an email form blogger slightly similar to below one.

 Now you can log in to your Google account and find the blog which you want to update.

By using second option you can find the forgotten URL of a blog. Just type your Email address and click on "LOOKUP" button.

Blogger is one of most popular blogging platforms. Your blog is secured until your Google account is active. Anyone can not hack or delete your blog. So you can find your blog's email address by using this method.

What methods do you use for finding the forgotten email address of your blogger account ? If you use different method,please share it with us.Happy blogging pals :)

Basics of the New Blogger Dashboard

The Old blogger Dashboard is going to be removed soon, I thought there might be plenty of bloggers who aren’t familiar with the new Blogger User Interface yet. So I came up with the idea to make and share a tutorial that would have all the basics of the new dashboard. In this tutorial you would learn how to upload or restore a template, backup a template, edit a template and how to delete and recover a blog on the New Blogger User Interface.

How to Back up or Upload/Restore a Template on the New Blogger UI?

To backup or upload a template downloaded from the web to your blog on the new User interface, you’d need to follow the steps below

    Go to Blogger >> Template.
    On the top right corner you’d find Backup/Restore, click on that.
    To Download the Template that you’re currently using on your blog, click on the Download Full Template.
    To Upload a new Template, click on choose file, then upload the .xml file and you’re done.

How to Edit a Template on the New Blogger UI?

To Edit your current template’s HTML, you need to follow the steps below

    Go to Blogger >> Template.
    Click on the Edit HTML button and proceed to the HTML of your Blog.

How to delete and restore a blog on the new Blogger UI?

Sometimes you might need to delete a blog from your dashboard which you’re not using, follow the steps below to delete a blog on the new UI.

    Go to Blogger >> Settings >> Other.
    On the top center you will find “Delete Blog” click on that.
    On the new Popup window, Click on “Delete this Blog“. You can restore your deleted blog within 90 days or it would be removed for ever and then anyone would be able to use that address.

Those were the extreme basics of the new blogger dashboard to learn because they are used by bloggers frequently. I hope you like this tutorial, stay tuned!