How To Add Post Views Counter To Blogger

How To Add Post Views Counter To Blogger- I've been looking for some articles about adding post views to bloggers and I find an easy way to do it. Example of the view counter on the blog as below or on the blog that I use this

Counter view is to display the number of views on articles. And counter view certainly has the benefit of making visitors know which articles are most viewed so they know that the article is really useful.

The following step by step in creating a view counter on blogger:

1.Go To HTML>>Template>>Edit HTML
2.Find .showAuthor in html or you can find it with CTRL+F and write . .showAuthor

3.paste the script above all .ShowAuthor as shown below

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

First .ShowAuthor

Second .ShowAuthor

Third .ShowAuthor

4.Paste This Script above </Body> in your html as shown below

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script> 
<script> 
$.each($("a[name]"), function(i, e) { 
var elem = $(e).parent().find("#postviews"); 
var blogStats = new Firebase("https://YOUR-APP-NAME.firebaseio.com/pages/id/" + $(e).attr("name")); 
blogStats.once("value", function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr("name"); 
isnew = true; 
} 
elem.text(data.value); 
data.value++; 
if(window.location.pathname!="/") 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child("value").set(data.value); 
} 
}); 
}); 
</script>

5.Save the script and then you can see the result

Read More

Web Master March 01, 2019  2 comments

add AdSense Ads below Post Title and Post Body in blogger blogs

Adding Ads below post title or Below post body content is not new when it’s comes to blogging world, because one of the facts is that readers spent more time reading article compare to that the content of sidebar(though we don’t complain). But to increase more revenue and engagement with our ads we can use these techniques to increase our income or CTR (Click Through Rate).

 What is CTR (Click Through Rate)?

Click-through rate (CTR) is a way of measuring the success of an online advertising campaign for a particular website as well as the effectiveness of an email campaign by the number of users that clicked on a specific link. ( more information )

Though there are many article already posted by blogger’s on web and they definitely works, but the problem is in the generalization of that tutorial. This solution of generalization of this post makes it unique and a bit different from other posts.

Why this problem of generalization of code arises, that we cannot use same approach towards different type of template. It’s because of the HTML structure of your blogger template which is very much different than that of other templates structure that had been use to explain the tutorial/step by different authors. Therefore my aim is provide a much generalize approach to the problem of different HTML Template irrespective of their makers.

This post is divided into three parts. First part cover steps of adding Ads below post titles, while second post covers steps to add ads below post body and finally last part is about a few conclusion about different ads that could be used in much effective manner. It also includes which type of ads should be place below the post title and below post.

I personally recommend you to take a backup of your XML template before proceeding.

 Adding Ads below Post titles: - 

Search for this code first, you may get more than two of such code or may be even five depending upon the structure of your blogger template.

<data:post.body/>

The above code actually represent your whole Article that you have posted. The AdSense Ads code must place somewhere between First Occurrence and second Occurrence of <data:post.body/> in maximum number of the cases. In this topic we take two different example of code and finally I will tell you where to add your code in their respective examples.

1: Take this first sample of the template code.

In this piece of XML template code we can see that second occurrence of <data:post.body/> is spotted and the ideal place to add your AdSense code is shown. Here ‘post-header’ class is just below the post title.

2: Second sample.

Now also consider the above code for more clearance in this topic. In this example which is most common in most of XML structure of blogger template, the AdSense code should be placed above the second occurrence of <data:post.body/> and above summary code as shown in above image.

Example for Ads below post title :

Make sure you should place the code in between “item” condition as shown the above example of code. It’s necessary to enclosed in “item” condition. This is done to avoid the ads to appear in Home page and should appear only in Post page, also parse your AdSense code to avoid errors.

Use this tool to parse your code.

<b:if cond='data:blog.pageType == "item"'>
Paste your parsed code here.
</b:if>

 Adding AdSense ads below Post Body

This method is much simpler compare to the above methods, all you have to do it to search for the following code just after the Last occurrence of <data:post.body/>. Similarly as above methods you have to enclose you ad code in between “item” condition to avoid showing it to Homepage.

If you don’t find any post-footer-line-1 simply add the following code accordingly. 

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
</div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>

Hope this post help to solve your problem in more efficient way, since I have included most of visual aid to you. Still if you face any difficult you can ask by simply commenting on this post.

 Which type of AdSense ads should place below post title in Post body?

It is seen that Textual Ads generate more CTR if it is placed below Post title and media ads are preferred for below post body. When your readers open post to read more of its content, then their mind is in the state of reading and this state is disturbed/annoyed by placing Media ads in between the post body, while textual ads acts completely opposite when they are place in between the content of post or below post title. And this state of the mind helps to generate more CTR because the readers actually read the ads as well and engage themselves with the ads. Try not to add too much of advertisement just 3 or 4 per page is sufficient.

Preferable size of AdSense: 
Below Post title: 300x250(R), 468x60(R), 250x250
Below Post Body: 338x280(R), 300x250
 (R): Recommended

And one more thing: 

You can enclose your ads code in between some class to give its some style like in this example. 

<b:if cond='data:blog.pageType == "item"'>
<!--adsense below tiltle-->
<span class='adbpt'>
Paste your parsed ad code here.
</span>
</b:if>

and finally add this CSS above ]]></b:skin>, here adbpt = Ad below post title. 

.adbpt{
display: inline-block;
float: left;
margin: 5px 15px 5px 0px;
}

Hope I solved your most of the problem, but still if you need any help

Read More

Web Master February 12, 2019  No comment

Facebook Comment Box Instead of Google Comment Box in Blogspot

Create a Facebook App to Get the App ID.

You must create a Facebook App and get the App ID to add Facebook comment box in blogger. Don’t worry. It is not a big deal. Follow the following step by step guide to do that.

1. Log in to your Facebook account and then visit Facebook developers page. You will see a drop-down named “My Apps” at the top right corner.

2. Hover over the drop-down and click on the “Add a New App” link as shown below.

3. A popup window will open. You have to provide a display name (The name of the app) and contact email address like below. After that click on the “Create App ID” button.

4. Now we have to add our website address to this newly created Facebook comment app. For doing this, take a look at the left menu and click on the “settings” section.

5. In this basic settings section, you have to put the “App Domains” as shown below. After that, you have to click on the “+ Add Platform” > Choose “Website” icon to assign your website with this app. Finally, put your site URL with “http or https” and the trailing “/” at the end of the URL. Now click on the “Save Changes” button.

So you have successfully created a Facebook app to add Facebook comment box in blogger. Now it is time to add it to our blogger blog. So let’s see how to do that?

Add Facebook Comment Box in Blogger.

1. To add Facebook comment box in blogger, you have to log in to the Blogger Dashboard > go to the Theme > Edit HTML. Don’t forget to backup blogger template before editing code.

2. Find the ending </head> tag and paste the following open graph meta tags right above the </head>.

<meta content='Facebook-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-Profile-URL' property='fb:admins'/>

Note: You must replace the highlighted Facebook-App-ID and Your-Facebook-Profile-URL with your own.

3. Now find the line “<b:includable id=’comments’ var=’post’>“. Expand it. Scroll down a little bit and find the ending “</b:includable>”.

4. Copy the following code and paste it right above the ending “</b:includable>” code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.url" expr:title='data:post.title' expr:xid='data:post.id' data-width="100%" data-numposts="5" data-order-by="social" data-colorscheme="light"></div>
</b:if>

Remember, it is a pre modified code placed inside a blogger conditional tag to show the facebook comment box only on the post pages.

5. Finally, you have to scroll all the way down to find the ending “</body>” tag. After that, paste the following JavaScript right above the “</body>” tag as shown below and click on the “Save Theme” button.

<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

You have successfully added Facebook comment box in blogger blog. Go to your blog and click on a post to check the newly added comment platform is working perfectly. At this point, you will see both Blogger threaded and the Facebook comment box is working together. So we have to turn off the default blogger threaded comment. To do that, follow the following steps:

1. Go to Blogger > Settings > Posts, comments and sharing section.

2. Now change the “Comment Location” to “Hide” as shown above. Finally, click on the “Save settings” button at the top right corner. You are done.

Facebook Comment Moderation and Notification.

Comment Moderation: To moderate Facebook comments, Login to the Facebook Developers page > Click on the “Tools & Support” tab from the navigation menu > Find the “Comments Moderation Tool” link and click on it.

Otherwise, use this direct Facebook Comment Moderation link and choose the newly created comment app from the drop-down.

Comment Notification: By default, the comment notification is enabled. If you wish to turn it on or off, go to the comment moderation panel and click on the “Settings” tab as shown above.

Pros of Facebook Comment System.

Easy To Comment: I have already said that almost every Internet user has a Facebook account and they always remain signed in there. Therefore, allowing Facebook comment in your blogger blog will let them leave their comment within a single click. Which is very user-friendly and encouraging for commenters. No registration, no sign in, no hesitation will surely improve the entire comment system of your blogger blog.

Spam Free Comments: Automatic comment spam is truly annoying for bloggers. By using Facebook comment box in blogger, you will be able to say goodbye to automatic spam bot comments. This is one of the most important features of Facebook comment platform. Facebook has its own spam filter to prevent robots from creating a Facebook account.

Effective Comment Bridge: Facebook comments will be shown both on the blog and on the Facebook. In fact, if someone leaves a comment on the Facebook for the same conversation, that will also be shown under your blog post. This will dramatically increase the user engagement and interaction. Also, there will be a great chance to become a post viral on Facebook through that conversation.

SEO Friendly Comments: Obviously, Facebook comments are completely SEO friendly. Many people still have the doubt that Facebook comments are not accessible and indexable by Google. Presently, it is not true. The various case study shows that every single comment generated by Facebook comment system will remain under the blog post and will be crawlable and indexable by search engines.

Chance to get more traffic: Millions of people spend a lot of time on Facebook every day. Among them, when someone comments on any of your blog posts, this activity of that person will also be shown on his news feed. This type of auto promotion will bring more readers, followers, commenters and valuable social traffic for your blog.

Cons of Facebook Comment System.

If someone thinks about his privacy and don’t want to expose his Facebook profile publicly, he may hesitate to leave a comment. Even, sometimes people wish to leave a comment as anonymous. Therefore, many blog commenting platform provides that facility. But in case of Facebook comment, there is no option to do that.

To add Facebook comment box in blogger you have to allow some additional scripts to load in your blog. It may slow down your site a little bit. Another important thing is, you must manually update this Facebook comment box plugin to get the optimum result and omit any security issue. It is a little time consuming and hesitating.

You will have a little customization option for the Facebook comment box. For this reason, it may not look like as the way you want.

People will only have the option to like the individual comment but there is no way to subscribe or share comments on other social media. On the other hand, you will have all of these effective functionalities on many other comment platforms.

If you wish to migrate to any other comment platform, you will not be able to do that with your existing Facebook comments because these comments are not synchronizable. Also, the way to moderate comments manually is little complicated.

I think you have got almost every idea to take the correct decision whether you need to add facebook comment box in blogger or not. Moreover, I have given the complete step by step solution with the screenshot of the entire process. Hope you will like this tutorial and share with your friends on social media. Also, share your thoughts by leaving comments.

Read More

Web Master January 16, 2019  No comment

Top Free Web Hosting

Hosting Provider	Bandwith	Disk Space
InfinityFree	Unlimited	Unlimited
000webhost	10,000MB	1,000MB
Freehosting.com	Unlimited	10,000MB
OHosti	Unlimited	Unlimited
x10hosting	Unlimited	Unlimited
AwardSpace	5,000MB	1,000MB
AtSpace	Unlimited	1,000MB
Freehostia	6,000MB	200MB
Pro Free Host	Unlimited	Unlimited
U Host Full	Unlimited	Unlimited

Read More

Web Master January 10, 2019  No comment

File Hosting & Sharing Sites - - Can Earn Also

Share Cash 

Deposit Files

File Factory

Uploaded

Do Uploads

Upload EV

User Cloud

Daily Uploads

9x Upload

Indishare

BDUploads

File Uploads

Into Uploads

Upload

Read More

Web Master January 10, 2019  No comment