seo tips: Blogger Widgets And Gadgets

Showing posts with label Blogger Widgets And Gadgets. Show all posts

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

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.

Friday, May 19, 2017

How To Install Push Notifications In Blogger To Engage Visitors

push-notification-blogger-blog-101helper

We know that engaging visitors to blog is not easy and there are many ways people use to get people engaged to their blogs such as sending emails, social network followers, send texts to mobiles(Shopping sites) etc and the reason to get people engaged is to improve rank plus increase traffic and earnings. So in this post I am going to tell you about a new way to get people engaged and its the method some big websites such as Facebook is using. By this method you can send push notification to your subscribed visitors on Google chrome and Firefox.

Push notification is not a new thing and almost everyone know it because in smartphones it is very common but on web pages it is not common so its time to get benefit of this thing and engage people to your blog. Here is a screenshot that may tell you better about push notifications.

Best thing about this plugin is you can use it for both your desktop and mobile site and it is also for free. You can also upgrade to unlock some features but for a blog it is good to use it free unless you have a business site.

This plugin is powered by PushEngage and it need a 5 minute integration time so it is easy to use this plugin.

Features:

I always share feature of plugins to let you know about a plugin and decide whether to use it or no. Here are some features of PushEngage plugin.

1. It is for free as well as you can buy premium version.

2. Supports multiple browsers (Chome and Firefox) so you can engage visitors from any of the two browser.

3. Easy and fast integration.

4. Work on both HTTP and HTTPS links.

5. Notification scheduling feature.

6. You can connect your blogs RSS feed and notify your visitors when ever new content is published.

7. Multiple language support.

8. Works on wordpress.

9. You can use one account for multiple sites.

10. You can send text and text + image notifications to your visitors.

11. You get more traffic than Emails.

How To Install Push Notifications In Blogger?

Step 1: Go to PushEngage.

Step 2: Fill out the signup form, type your blog or custom domain URL, enter your email, type a pushengage subdomain name, enter your password and click on start your free trail.

Note: It is written "start your free trail" but you can use account for free untile you have 2500 subscribers and for more your have to upgrade.

Step 3: Scroll down and copy your code as shown in below image.

how-to-install-push-notifications-in-blogger

Step 4: Go to your blogger account and navigate to theme > Edit HTML.

Step 5: Paste the copied code just below <head> in your theme and save it.

Step 6: Customize your notification widget in your PushEngage accoun, you can customize following things:

1. Adding RSS Feed(pro users only).
2. Welcome notification settings.
3. Subscription Dialogbox Settings.

etc.

How To Send A Notification ?

Go to your account and a click on Notifications in the menu and click on New Notification to create your notification. All the settings are easy just fill out and send.

Finalizing Article !

You can get most of it if you upgrade to premium account but its also useful if you can't upgrade because you engage atleast 2500 users. You can find more push notification senders on google and if you have a good one, please let me know so that I can create tutorial about it.

If you have any question related to this article or any other article you can contact me or ask me in comments. Thanks for visiting 101Helper don't forget to share this article with other blogger around you.

Search tags: Push notification gadget for blogger, how to add push notification in blogger blog, custom domain, how to use pushengage,engage visitors to my blog,push notification widget for blogger,101helper blogging tutorials.

Saturday, November 12, 2016

How To Install "HotJar" Feedback Widget In Blogger

Most of blogger think why should I add a feedback widget in my blog, it is not of any use, it will slow down my site, I don't need it because i just own a blog not a big website so I don't need to get feedback of my visitors etc. But its absolutely wrong. Feedback widget is very important whether you own just a blog or a big website. Its because it will tell you about your blog's content, design and how users are experiencing your blog and how can you improve your blog's content and design if something is not liked by visitors.
Because your blog is for your visitors and they spend their time on your blog and visit your blog, its your responsibility to provide them such a good content and design that they never get any difficult and visit your blog again and again and also share it with others. But as I mentioned people will like your blog only when you improve your content, improve your design, improve user experience. And to improve your blog you need to know what are those things that are affecting your site and the only way to know that is to talk to your visitors because they know better than you about how they want the content to be and how the design should be.

So feedback widget is very very important to get feedback from your visitors and improve your site. So in this post I am going to show you how to install "HotJar" feedback widgets in blogger. And after installing this widget you will be able to get response from your visitors about your site and if there is something that is affecting your site you can fix it and improve your site.

First let me tell you something about Hotjar and after that I will show you how to use HotJar in your blog.

Plans And Pricing:

Starting with plans and pricing, HotJar allows your to upgrade to a plus or business account which starts from $29 to $89 but it also allow users to use their services for free within some limitations. You can read more about it in the image given below.

hotjar-feedback-surveys-polls-widgets-for-websites-blogs

Features Of HotJar Widgets:

After discussing about plans and pricing, let me tell you about features of HotJar widgets:

It is available for free for small blogs and for big websites. Premium services are also available.
With Real time analytics get responses from visitors in seconds.
Easy to install, easy to use and easy to manage widgets.
You can install both Feeback polls and Survey widgets.
100% customizable widgets.
No render scripts and doesn't affect site loading speed.
Cookies managing.
Optimized for mobile phones.
Can be used for other platform like wordpress, Joomla, Weebly etc.
Add more than one website per account.

How To Create A HotJar Account ?

STEP 1: Go to HotJar and click on Try it for free !

STEP 2: Fill in your Full name and Email address and click on Let's get started.

STEP 3: Type your password, make sure to use:

One lower character.
One UPPER character.
One special character e.g ! @ # $
One number.

And your password should be of 8 minimum characters.

STEP 4: Check the Terms and Conditions box and click on Next.

STEP 4: Select your roll as other and choose "NO" where you are asked "WILL YOU USE THIS ACCOUNT TO MANAGE CLIENTS ?" and finally type your blog's name and click on Next.

STEP 5: Type your blog or site URL and prove you are Human and Start using HotJar !

hotjar-feedback-widgets-for-blogger-wordpress

This was it. Now you can create your first feedback widget with HotJar. But its time to add the tracking code in your blog's template. So click on Copy To Clipboard and go to blogger > Template > Edit Html and just above <head/> paste the copied code.

Final Step! - Click on the green button shown in image image and Verify Installation.

How To Create Feedback Widget With HotJar For Blogger ?

Well its quite easy to use HotJar, though it seems difficult but its same as Addthis or Hellobar.

Follow below steps to create your first Feedback widget using HotJar.

STEP 1: Login to your HotJar account.

STEP 2: Click on Polls in the menu on left side.

STEP 3: Click on + New Poll button.

STEP 4: Type name of your Poll and click on Next.

how-to-create-feedback-widget-for-blogger

STEP 5: Set Targeting Rules e.g on which devices you want to show your feedback widget and on which devices and pages you want to hide it.

For more specificity click on "On page I specify" and choose any option which you want. For instance if you want to hide your feedback widget in static pages e.g contact, about, sitemap then choose "URL CONTAINS" and after that type "/p" in the text box as shown in below image:

Click on the Next button to proceed...

STEP 6: Type a question which you want to ask your visitors. As an example I am asking "Was this post Helpful ?".

In the next question there are options which are asking for email address of visitors so that you can get back to them about the problem they are facing on your blog.

You can delete this question by clicking on the remove icon. You can also add more questions and options. You can see a live preview of your widget on the page.

After customizations proceed to next step by clicking on Done button.

STEP 7: Later steps are Appearance of your widget, Behavior of your widget and final one is to activate your widget. You can do these steps easily so I am not showing them here.

I hope you found this post helpful, if you have any problem related to this post or other posts contact me or ask me in comments.

What Else Can You Do With HotJar ?

HotJar is not only a feedback plugin but you can do alot of other things with Hotjar. Here are the things which you can do with HotJar:

HeatMaps: Its definitely a new thing that you must haven't heard before. Heatmaps are actually a way to record where on your pages do visitors mostly click. So you can place your ads there.

Visitor's Screen Recording: Its also a new thing in the world of analytics and Google also do not allow you to record your visitor's screen. But its in a limit, you can record your visitor's only when they are on your blog or website. So you can see what they are doing on your site. You can use these recordings to improve your site as well as you can place your ads in the most clickable areas of your page. You can do alot of things with recordings.

Surveys: Its already mentioned above that with HotJar you can get survey from your visitors about anything. You just need to create your widget as you created by following above tutorial.

Forms: You can create forms with Hotjar too.

Don't miss: How To Design Contact Form For Blogger Contact Page

Recruiters: You can design and setup responsive forms and let your visitors to sign up in your website as an author or anything else.

Search Keywords: How to add feedback widget in blogger, how to add survey widget in blogger, how to record visitors screen, how to know where visitors click on your website page, how to track visitors click on page live, how to add hotjar plugin in blogger,101helper.

Sunday, October 30, 2016

Jquery On-click Pop Up Light Box Video Player For Blogger

Showing videos in a pop up light box like blogger lightbox images is really cool and it boosts video views too so I decided to share this cool stuff with you. In this post I am going to show you how to add pop up light box video player in blogger but before that I want to tell u that its a different player so can't just get embed code of your video and paste it and start showing pop up.

This player works in a different way so first you need to add code of this player in your blog and after that you need to add ID of a Youtube video. Remember that it can't play other videos like Dailymotion. Only vimeo and YouTube videos can be played with this player.

And to play a video you need to add its id first whether you want to play a Youtube video or Vimeo video, in both cases you need its id.

So in this post I will show you how to add pop up light box YouTube or vimeo video player and how to get id of a Youtube or vimeo video.

Features Of Pop Up Video Player:

1. Its free of cost.

2. Doesn't slowdown your blog, no render blocking scripts.

3. Easy to install.

4. Can play both YouTube or Vimeo videos.

5. Stylish and responsive design.

How To Add Pop Up Light Box Video Player In Blogger ?

Step 1: Go to blogger and login to your account.

Step 2: Open Layout of your blog.

Step 3: Click on Add a gadget and choose HTML/JAVASCRIPT.

Step 4: Copy code given below and paste it in to HTML/JAVASCRIPT window.

For YouTube Videos:

For Vimeo Videos:

Step 5: Replace "YOUR VIDEO ID" with ID of video which you want to play in pop up.

How To Get ID Of A Youtube Video ?

Open a YouTube video and get the final elements from its URL like below is the URL of a video and the highlighted part of the link after "v=" is its ID

https://www.youtube.com/watch?v=0mFXo88pyaU

0mFXo88pyaU is the ID of this video.

How To Get ID Of A Vimeo Video ?

Similar to YouTube video ID, Vimeo also have video ID in its URL, Like this:

https://vimeo.com/188471047

188471047 is ID of this video.

Step 6: Save your gadget and you are done.

How To Customize Video Player ?

You can show your video's thumbnail which when clicked will show the pop up or you can show some text like "watch this amazing video" both of these will play role of a trigger.

To add your video's thumbnail replace https://i.ytimg.com/vi/0mFXo88pyaU/hqdefault.jpg with your video's thumbnail link.

To show text Replace this piece of code with your text:

<img src="https://i.ytimg.com/vi/0mFXo88pyaU/hqdefault.jpg"/>

Replace YOUR VIDEO ID with your video ID.

I hope you loved this post, if not and you want to give any suggestion, feel free to contact us or leave a comment below. Your feedback is really valuable!

Thanks for visiting 101Helper. ♡ Happy Blogging!

Search Keywords: Jquery on-click pop up light box video player for blogger, Popup video player, pop up youtube video player, pop up vimeo video player, how to create a video player with jquery, jQuery YouTube Popup Player Plugin

Friday, August 26, 2016

How To Add Youtube Channel Feed In Blogger

Do you own a youtube channel? if yes and you want to show your youtube videos list or grid in your blog then you have found a helpful post. This post will show you how to add youtube channel feed in your blog or site it will show all the videos from your channel and you can customize everything like title, video size, number of videos to be shown etc and your site's speed will also not decrease, no matter how many videos you are going to show from your youtube channel.

To show your youtube videos feed on your blog or site you will need to use a plugin that allows you to show youtube videos on your site. Its absolutely free and easy to use. So in this post I am going to show you how to add youtube videos in blogger site.

Want to see a live demo? Check Out My Youtube Channel Feed Here

Similar Posts: How To Install "Get Site Control" Widgets In Blogger

How To Add Youtube Channel Feed In Blogger?

Step 1: Go to https://www.powr.io and create account.

Step 2: Confirm your account from Email and login to it.

Step 3: Click on Create New Plugin.

Step 4: Choose Social Feed from the pop-up menu shown on the page.

Step 5: Click on START FROM SCRATCH in the menu on right side.

how to add youtube videos grid in blogger

Step 6: Select Youtube as SOCIAL FEED TYPE and enter your youtube channel's URL or username in the FOLLOWING tab, select how many videos you want to get from your feed and finally click on Next.

- You can see a preview of your channel's feed on the page.

how to show youtube videos in blogger blog

Step 7: In this step choose how many videos you want to display from your youtube feed and number of characters in title and click on Next.

Step 8: Its the customization step, here you have follow things to be customized:

1. Sizing.
2. Post content design.
3. Post footer.
4. Borders.
5. Password protection. Upgrade required!
6. Advanced Upgrade required!

I am not going into all this because it is not difficult to customize your videos look because you have a live preview on your right hand on the page. Though if you find any difficulty, leave a comment below I will get back to you as soon as possible.

Step 9: Finally click on Publish and give your plugin a title and save it!

how to add gadgets in blogger blog 101helper

Step 10: Its time to implement the gadget you just created so copy the code of your plugin from Powr.io page as shown in below image.

Step 11: Go to blogger dashboard and navigate to Layout.

Step 12: Click on Add a Gadget > Html/Javascript and paste your code.

how to add a gadget in blogger animation

Step 13: Click on save and you are done open your blog to see your youtube channel feed.

You can customize your gadget any time by logging in to your Powr.io account. You can use Powr.io for many other purposes like showing feed from instragram, facebook, twitter etc and there are number of gadgets you can activate for your blog or site.

Check out what else can you get from Powr.io here

I hope this post is helpful to you. Information in this post is rarely available on internet so kindly share this with others. Thanks for visiting 101Helper.

Search Tags: Show YouTube Activity Feed on Your Blogspot, show youtube videos grid on your site, how to get youtube channel feed and show it on website,youtube videos on blogger list,youtube plugins gadgets for blogger 101helper.

Tuesday, July 12, 2016

How To Add "Join This Site" Button In Blogger

Members or "Join this Site" gadget has become common now adays in blogger because this gadget lets visitor to follow a blog. Anyone can start following a blogger blog by his blogger account. After following a blog the person's profile show up in members of blog. This gadget is very good for increasing traffic too because after following a blog, its feed show up in the followers account as shown in below image:

So when post is published it shows up in the blogger account and follower is updated about every post. So it is good for increasing traffic. But "Join this Site" gadget works only on http urls and as blogger has now allowed https for blogger therefore this gadget doesn't work on https urls but this button will still work no matter its a http url or https.

Instead of writing more about this gadget I am going to show you simply how to add join this site button in blogger. So follow below steps to add this button in your blog. If you want to try a live demo of this gadget click on JOIN THIS SITE on your right side.

One more thing that I want to tell you about this button is that when it is clicked you will be redirected to a page as shown below where you can Follow a blog with your blogger account.

How To Add "Join This Site" Button In Blogger?

Step 1: Choose a button and copy its code.

Top Right Floating Button:

<style>

Join button on top right of page

#join {
z-index: 99;
position: fixed;
right: 20px;
width: 150px;
font-size: 16px;
background: #fff;
padding: 0px 5px;
font-weight: bold;
border: 1px solid #999;
border-top: 0;
border-radius: 4px;
top: -5px;
}
#join img {
float: left;
top: 8px;
margin-right: 5px;
position: relative;
}
#join a {
color:#777;
text-decoration:none;
}
</style>
<div id='join'><a href='https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJyXpfCJvKffRVJJ45jWDphyKlSReD4WsUL3UD7DRBPJLoDssNcgg9wuRWMkUxD8n5EQr-Y3XPgfqmbr9ZyslTYRNx4BZ1KxddL-NITNiXa1EmhbSO9ZbDvhm_ZC56oPUzt6yAgue38I/s1600/join.png'/><p>Join This Site</p></a></div>

Top Left Floating Button:

<style>
#join {

Join button on top left of page

z-index: 99;
position: fixed;
left: 20px;
width: 150px;
font-size: 16px;
background: #fff;
padding: 0px 5px;
font-weight: bold;
border: 1px solid #999;
border-top: 0;
border-radius: 4px;
top: -5px;
}
#join img {
float: left;
top: 8px;
margin-right: 5px;
position: relative;
}
#join a {
color:#777;
text-decoration:none;
}
</style>
<div id='join'><a href='https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJyXpfCJvKffRVJJ45jWDphyKlSReD4WsUL3UD7DRBPJLoDssNcgg9wuRWMkUxD8n5EQr-Y3XPgfqmbr9ZyslTYRNx4BZ1KxddL-NITNiXa1EmhbSO9ZbDvhm_ZC56oPUzt6yAgue38I/s1600/join.png'/><p>Join This Site</p></a></div>

Bottom Right Floating Button:

Join button on bottom right of page

position: fixed;
right: 20px;
width: 150px;
font-size: 16px;
background: #fff;
padding: 0px 5px;
font-weight: bold;
border: 1px solid #999;
border-bottom: 0;
border-radius: 4px;
bottom: -5px;
}
#join img {
float: left;
top: 8px;
margin-right: 5px;
position: relative;
}
#join a {
color:#777;
text-decoration:none;
}
</style>
<div id='join'><a href='https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJyXpfCJvKffRVJJ45jWDphyKlSReD4WsUL3UD7DRBPJLoDssNcgg9wuRWMkUxD8n5EQr-Y3XPgfqmbr9ZyslTYRNx4BZ1KxddL-NITNiXa1EmhbSO9ZbDvhm_ZC56oPUzt6yAgue38I/s1600/join.png'/><p>Join This Site</p></a></div>

Bottom Left Floating Button:

<style>
#join {

Join button on bottom left of page

z-index: 99;

position: fixed;
left: 20px;
width: 150px;
font-size: 16px;
background: #fff;
padding: 0px 5px;
font-weight: bold;
border: 1px solid #999;
border-bottom: 0;
border-radius: 4px;
bottom: -5px;
}
#join img {
float: left;
top: 8px;
margin-right: 5px;
position: relative;
}
#join a {
color:#777;
text-decoration:none;
}
</style>
<div id='join'><a href='https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJyXpfCJvKffRVJJ45jWDphyKlSReD4WsUL3UD7DRBPJLoDssNcgg9wuRWMkUxD8n5EQr-Y3XPgfqmbr9ZyslTYRNx4BZ1KxddL-NITNiXa1EmhbSO9ZbDvhm_ZC56oPUzt6yAgue38I/s1600/join.png'/><p>Join This Site</p></a></div>

Pop-Up Join Button:

join this site button for blogger pop up

Join this site pop up button

$("#pop").fadeIn("slow", function () {
$(this).delay(5000);
});
});
$(document).ready(function(){
$("#close-pop").click(function(){
$("#pop").hide();
});
});
</script>
<style>
#pop {
display: none;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.82);
height: 100%;
width: 100%;
z-index: 99;
}
#join {
padding: 10px;
width: 500px;
background: #fff;
border-radius: 4px;
height: 185px;
position: absolute;
top: 240px;
left: 30%;
}
#join img {
float: left;
top: 8px;
margin-right: 5px;
position: relative;
}
#join a {
text-decoration: none;
background: #bd4e5d;
padding: 5px;
color: #fff;
border-radius: 3px;
position: absolute;
top: 115px;
left: 182px;
}
#join h2 {
float: left;
position: relative;
top: 25px;
}
#join p {
float: left;
position: absolute;
font-size: 15px;
width: 300px;
top: 55px;
left: 180px;
}
#close-pop {
float: right;
font-size: 15px;
cursor: pointer;
}
</style>
<div id='pop'><div id='join'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2CuZu1f_cKGQWFmsA6GLn0OFEPjLQBPs0XwI1bqMNiQ4lIQ0fSnkk_W-j-NiggnN7-Lk6roK-qTOVFecGgxjcUyWzrgwrdPcDe1hPZJ1XxOeQacw9eMQ0XNAdh8U7yGELgdKi_k64Jo/s1600/join-icon.png'/><h2>Join This Site</h2><p>Join this site with your blogger account and never miss any post and updates.</p><a href='https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID'>JOIN NOW!</a><b id="close-pop">✖</b></div></div>

Step 2: Go to your blog's template and click on Edit Html.

Step 3: Search for </head> and after this paste the copied code.

Step 4: Click on Save template and you are done!

Customization:

1. Replace "YOUR BLOG ID" with your blog's unique id.
2. In Pop-Up button set delay after which button will fade in, default value is 5000 with mean 5 seconds.

I hope you found this post helpful, the main thing which I want to share in this post is the HTML code below:

<div id='join'><a href='https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJyXpfCJvKffRVJJ45jWDphyKlSReD4WsUL3UD7DRBPJLoDssNcgg9wuRWMkUxD8n5EQr-Y3XPgfqmbr9ZyslTYRNx4BZ1KxddL-NITNiXa1EmhbSO9ZbDvhm_ZC56oPUzt6yAgue38I/s1600/join.png'/><p>Join This Site</p></a></div>

The link in this code takes you to blog follow page which is the main thing, though you can add Join This Site Gadget in your blog but it don't work on https urls. But the benefit of this link is, you can visit it on http as well as https.

If you have any question or suggestions comment below or contact us.

Thanks for visiting 101Helper

Search Tags: Join this site gadget for blogspot,members gadget for blogger,add a join this button in blogger blog,blogger followers gadget,how to add join this blog gadget in blogget