seo tips: July 2017

Friday, July 28, 2017

How To Install Emoji Reactions(Smileys) In Blogger

We all are familiar with emoji reactions because all of us use social networks and chatting and texting is incomplete without emoji reactions(smileys). These emoji reactions help us to explain our feelings about things and so I decided to create a post about it. So far I have seen in many blogs that they have emoji reactions in comment form and a emoji code is to be placed where emoji is to be shown but that's too old and most people don't like it. So I decided to tell you about these new type of emoji reactions that are placed in the bottom of post and show reaction of people to that post.

Maybe you are thinking why should I add emoji reactions in my blog, it is useless but let me tell you that blogging is not just about growing blog more and more and earn money, but you must have something more which will make your blog special and these emoji reactions will grab attention of many visitors and will also tell them about how many people liked your post. Here is a picture of emoji reactions which can be added in your blog posts.

Look how cute these are ! , I have taken a screenshot of these smileys and you can see that there are certain numbers tell us expression of people. So its a good thing for your blog, ain't it ? if not tell me in comments !

Features Of Emoji Reactions Buttons:

1. Ofcourse these buttons are absolutely free.

2. You can add them in website or blog.

3. Compatible with mobile and desktop site.

4. Reaction clicks are counted by IP.

5. Analytics available.

How To Install Emoji Reactions Buttons In Blogger ?

Follow below steps:

Step 1: Go to Sharethis Reaction Buttons.

Step 2: Click on GET REACTION BUTTONS button.

Step 3: Align your buttons to left, right or center.

Step 4: Click on REGISTER & GET THE CODE button.

Step 5: Enter your domain/blog URL, Email and password, check the terms and use box and click on GET THE CODE .

Step 6: Copy the first code and go to blogger dashboard > Theme and click on Edit HTML.

Step 7: Paste the first code after <head> in your theme code and save theme.

Note: In case if blogger is not saving theme when you paste the first code after <head> then replace "&" from your script with & as shown below

Step 8: Copy second code as shown in the image above and paste it where you want to show reaction buttons.

To Show Reaction Buttons Below Posts:

If you want to show reaction buttons below your posts then copy below code and paste it above <div class='post-footer'> in your theme code.

<b:if cond='data:blog.pageType == "item"'>
<div class="sharethis-inline-reaction-buttons"></div>
</b:if>

Note: You will find <div class='post-footer'> two times in your theme paste the above code above second <div class='post-footer'> .

Step 9: Save your theme.

Step 10: Go to Sharethis and login to your account.

Step 11: Click on Labs(beta) in the menu on left side and choose Inline Reaction buttons.

Step 12: Turn on your reaction buttons and wait for 5 minutes to let your reaction buttons get activated and start appearing below your posts.

Congratulations, you are done! wait for 5 minutes to see reaction buttons!

If Reactions Button Are Not Appearing:

Sometimes reaction buttons still don't appear even after 5 minutes of activation, in that case go to your Sharthis account, Login to it and click on Property Settings and verify your email by clicking on the send verification button and go to your email and click on the verification button sent from Sharethis.

I hope you found this post helpful and enjoyed reading it, read more from below. If you have any question ask me in comments or you can contact us.

Thanks for visiting +101helper .

Search keywords: smileys for blogger,add emojis to blogger posts,facebook smileys in blogger,smiley reaction buttons below blog posts,emoticons blogger script,blogger emoji

Monday, July 10, 2017

Google Adsense In-Feed & In-Article Ads Update - Boost Adsense Earnings

Google Adsense is frequently improving and letting publishers use their new ad types. Recently Google Adsense updated "Matched Content" New Adsense Ad Unit which is like a related post widget and is really useful because it not only makes you money but also increase your page views.
Now Google Adsense have updated in-feed and in-article ad types which are also good and will improve your earnings. First let me tell you something about In-Article adsense ad unit.

Google Adsense In-Article Ads:

These are actually native ads and they are specially for articles as indicated by their name. This ad type is good for those blogs and website which have articles about something and because of their great look these ads will improve earnings. Here is a demo of Google Adsense in-article ad.

In-article ad is a responsive type of ad so you can't decide its width, it will adjust itself on its own. There are many options to customize ad look. You can see these options at the time of adding this ad.

Also you have option to "Show selected display ads" in the Global options section in your adsense account which allows you to to show selected display ads which can help you boost your earnings. Google decides which ads will be best for your blog or website. Here is a screenshot of customization options:

Adding this add is simple and exactly same as "Matched Content" New Adsense Ad Unit. To add Google adsense in-article ad in your blog's post go to your blog edit a post, switch the editor to HTML and paste the ad code where you would like the ad to show.

Read More: How To Add Ads Between Posts In Blogger

Google Adsense In-Feed Ads:

This is I guess best ad unit for smart phone and tablets devices. And it is a good ad unit to get more clicks on ads from mobile traffic. Comparing with In-article ad unit In-feed ad unit has four different types and it comes with more customization options. Take a look:

1. Image Above In-Feed Ad:

2. Image On Side In-Feed Ad:

3. Title Above In-Feed Ad:

4. Text Only In-Feed Ad:

All these ad units comes with same customization option which are shown in below image.

in-feed-google-adsense-ad-cusomize-options

You can add these ads in your posts as well as in the layout above or below your post. I recommend adding in between posts to get more clicks.

Read More: How To Add Ads Between Posts In Blogger

Read More: How To Show Ads Below/Above Post Footer And Header In Blogger

I hope you found this post helpful, read more from below for Google adsense tutorials.

Thanks for visiting 101Helper. Share this post with others!

Search keywords: Google adsense in-feed & in-article ads, increase,boost adsense earnings,get more clicks on adsense ads,ad units for mobile site,make money online blogging,101helper

Tuesday, July 4, 2017

How To Add Refreshable Random Post Widget In Blogger

I am again posting about random post widget and this is because I have made a special random post widget that can be refreshed by simply clicking on a button, I am also using this widget and so I decided to share it with you. You might be thinking why I am sharing this widget because you already have this widget but this is not an ordinary random post widget. It is a special widget and your visitors can refresh content and hence you have more reach to your older posts.

This widget is more good for big blogs which have 100 posts and visitors visit only a few pages. If you have same problem then this widget will help you, how ? the answer is obvious ! For example a visitor visits your blog from Google and read your post and see your ordinary random post widget and all the post he see doesn't grab his interest then he just leave your blog but if there is a refresh button he will just click on it and get some fresh content that will grab his interest and hence every visitor will give you atleast 5 views. I have tried this widget and it really multiply page views.

Another special thing about this widget is if your visitor doesn't refresh content it will be refreshed automatically after given time so your visitor gets fresh content any way and you get your traffic multiplied.

Features:

1. Refreshable content is available to visitors.

2. Automatically refreshable as well as can be refreshed by refresh button.

3. More exposure to visitors (old posts get reach ).

4. Increase your page views upto 5 pageviews / person.

What you need to install this widget ?

1. A Blogger blog

2. A free hosting like 000webhost or any other webhost to store your code on.

3. 5 minutes to follow below steps

Steps to Install Refreshable random post widget:

To add refreshable random post widget in your blog your need to follow below steps.

Step 1: Go to 000webhost and signup for a free account, enter your email, password and hosting website name(e.g myrandompost).

Step 2: Go to your email and click on the verification link to verify your account in the email from 000webhost.

Step 3: After confirming your account click on "MANAGE WEBSITE".

Step 4: Click on "UPLOAD OWN WEBSITE".

Step 5: Click on the icon as shown in the below image to create a file.

how-to-add-random-post-widget-in-blogger

Step 6: Name it "index.html" and click on create.

You are almost done keep going !

Step 7: Copy below code:

	<head>
	<meta http-equiv="refresh" content="40">
	</head>
	<div id="important">
	<style>
	#important h3 { font-family: trebuchet ms; position: relative; top: 5px; }
	#random-posts li {list-style: none;padding: 3px 0px;border-bottom: 1px solid #ddd;}
	#random-posts a {color:#3993e2;text-decoration:none;}
	#random-posts a:hover {text-decoration:none}
	#random-posts li:last-child {border:0}
	#random-posts li { margin-bottom: 5px; list-style-type: none; width: 100%; float: left; }#random-posts img { float: left; margin-right: 5px; border: 2px solid #D9D9D9}
	#random-posts {padding: 0;width: 24%;height:435px;padding: 0 0 0 5px;width:100%;list-style-type: none;padding: 0px;}
	#random-posts a {font-size: 14.3px;font-family:trebuchet ms;}
	#fresh { width: 100%; text-align: center; position: relative; top: 10px; }
	#fresh a {font-family: trebuchet ms; font-size: 14px; font-weight: bold;color: #fff; background: #64ca64; padding: 8px 30px; width: 100%; text-decoration: none; border-radius: 100px; }
	</style>
	<h3>You may like reading:</h3>
	<ul id="random-posts">
	<script>
	var randomposts_number = 5;
	var randomposts_chars = 0;
	var randomposts_details = 'no';
	var randomposts_thumbnails = 'no'
	var randomposts_comments = 'Comments';
	var randomposts_commentsd = 'Comments Disabled';
	var randomposts_current = [];
	var total_randomposts = 100;
	var randomposts_current = new Array(randomposts_number);

	function randomposts(json) {
	total_randomposts = json.feed.openSearch$totalResults.$t
	}
	document.write('<script type=\"text/javascript\" src=\"https://101helper.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

	function getvalue() {
	for (var i = 0; i < randomposts_number; i++) {
	var found = false;
	var rndValue = get_random();
	for (var j = 0; j < randomposts_current.length; j++) {
	if (randomposts_current[j] == rndValue) {
	found = true;
	break
	}
	};
	if (found) {
	i--
	} else {
	randomposts_current[i] = rndValue
	}
	}
	};

	function get_random() {
	var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
	return ranNum
	};
	</script>
	<script>
	function random_posts(json) {
	for (var i = 0; i < randomposts_number; i++) {
	var entry = json.feed.entry[i];
	var randompoststitle = entry.title.$t;
	if ('content' in entry) {
	var randompostsnippet = entry.content.$t
	} else {
	if ('summary' in entry) {
	var randompostsnippet = entry.summary.$t
	} else {
	var randompostsnippet = "";
	}
	};
	randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
	if (randompostsnippet.length < randomposts_chars) {
	var randomposts_snippet = randompostsnippet
	} else {
	randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
	var whitespace = randompostsnippet.lastIndexOf(" ");
	randomposts_snippet = randompostsnippet.substring(0, whitespace) + "";
	};
	for (var j = 0; j < entry.link.length; j++) {
	if ('thr$total' in entry) {
	var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
	} else {
	randomposts_commentsnum = randomposts_commentsd
	}; if (entry.link[j].rel == 'alternate') {
	var randompostsurl = entry.link[j].href;
	var randomposts_date = entry.published.$t;
	if ('media$thumbnail' in entry) {
	var randompoststhumb = entry.media$thumbnail.url
	} else {
	randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVS336klHeVdb93uS9BaTK2YNOM9SUMbAV4bZDmMu-XuA_bc5cQAqjsU-siPiUsdoH8G-Tph5J7scQGTPi_TNC6DFccQAm6jtPbEmw-NXQjUjTUfzEv16xFzk7xIE7XDkPDbmZFjVGKvg/s1600/no_thumb.png"
	}
	}
	};
	document.write('<li>');
	document.write('<a href="' + randompostsurl + '" rel="dofollow" target="_parent"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
	document.write('<div><a href="' + randompostsurl + '" rel="dofollow" target="_parent">' + randompoststitle + '</a></div>');
	}
	};
	getvalue();
	for (var i = 0; i < randomposts_number; i++) {
	document.write('<script type=\"text/javascript\" src=\"https://101helper.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
	};
	</script>
	</ul>
	</div>
	<div id="fresh"><a href="/">Refresh Content !</a></div>

Step 8: Right click on your index file you just created and edit it.

how-to-install-refreshable-random-post-widget-in-blogger

Step 9: Paste the copied code which you copied in step 7 and click on "SAVE & CLOSE"

Make following changes before saving:

1. Replace https://101helper.blogspot.com with your blog URL.

2. Change 40 if you want the widget to refresh automatically after desired time.

3. Change 5 to change number of posts.

Step 10: Now again right click on your file and click on "VIEW".

Congratulations ! now your refreshable widget in ready to be installed in your blog.

Step 11: Copy your file URL from the browser and replace it with YOUR LINK HERE in below code and copy the final code.

Note: Do not include https: in your URL, you URL should be without https: otherwise browser will not let it load e.g: //widget.000webhostapp.com/index.html

Final code appearance:

Step 12: Go to blogger > layout and click on add a gadget in the sidebar. choose HTML/Javascript.

Step 13: Paste the copied code and click on save.

Open your blog to see refreshable random post widget.

I hope you liked this widget, share your opinion in comments.

Share this post with others because ❤ Sharing is caring !

Search keywords: Refreshable Random Post Widget for Blogger, Random post widget for blogger, iframe random post widget, blogger gadgets, 101helper blogging tutorials.