How to add Google Analytics into blogger blog?

Are you looking for how to add google analytics to the blogger site?

Have you ever thought of your monitoring blog status and tracking traffic data to your blogger blog? If so, then we can analyze your blog status and traffic data using Google analytics. As a blogger, all of us might be interested in monitoring the traffic of our blog post or blog site. For do that task, Google Analytics is the right tool that can be used to get your blog traffic data.

But you will think like that, Blogger also has a traffic tracking feature called as ‘Stats’. That feature also gives useful data about the traffic of your blog. Then you will have the question may arise that when the blogger can give traffic data from that state feature, why we should add Google Analytics to blogger? 

The simple answer is that That blogger state data and Google Analytics data do not match with the former giving inflated data. GA is considered to be more reliable & informative web traffic tool, also it has many more features more than the ‘Stats’ in your blogger dashboard. It provides full information about web traffic or visitors including their locations, how much time spend with our site, their landing pages. 

What is Google Analytics?

Google Analytics is a leading free service tool provided by Google. Google Analytics platform created with the purpose of helping users to track the number of visits and page views on our blog also uses several filters to check exactly from where the visitors are coming from. It shows accurate status and real-time web traffic to your blogger blog. 

As mention above, we can get real-time traffic details. So easily you will be able to know from where that traffic comes from? The number of people currently viewing your blogger blog, how many people visited your blog in today, last seven days, or last month. Also, you can know the amount of time each visitor spends on your blog, how many numbers of the unique visitor to blog, how many new visitors, returning visitors and their bounce rate and many more.

If you prefer you can get an informative report every month ends. Also, it offers suggestions and improvement tricks to your blog.

How to add Google Analytics to Blogger blog?

Step 1.   Go to Google analytics and log in to your Blogger or G mail account.

Step 2.   After signing in you will see an image. Now click on sign up to start using Google Analytics.

Step 3.   You will see two tabs under what would you like to track? Website and mobile app. Just select Website.

Step 4.  Enter your personal details like Account Name, Website Name, Website URL, Industry Category, Time Zone.

Step 5.   After you filled the details, click on the Get Tracking ID button.

Step 6.   Now accept the Google Analytics terms and conditions by clicking I Accept.

Step 7. Then Page will redirect you to a new page. Google Analytics now provides you with Tracking Id (UA-12345678-2) and Tracking code. On the top of the page, there will be a “Tracking Id” and on the bottom, there would be a “Tracking JavaScript Code”. Just keep the page open and move to your blogger blog.

How to add Google Analytics tracking id to blogger blog?

Sign in to your Blogger Blog   -->> Settings -->> Other -->>   Google Analytics   and paste the Tracking ID in that box   -->> Now click on the Save setting.

How to add Google Analytics tracking code in Blogger?

You have to add Google Analytics tracking code in your blog template.

For that sign in to your Blogger blog -->> Dashboard -->> template -->> edit HTML -->> Click on Ctrl + F and find out </head> tag. Copy and paste the below code just above the </head> tag and save the Template.

<b: include data=’blog’ name=’google-analytics’/>

OK. Now you add Google analytics into your blogger blog successfully. Just keep claim and wait for 24 hours to see your blog data in Google Analytics. After that Google Analytics will updates your site report each and every day.

I Hope above method help you to add google analytics into your blogger blog. And if you have any problem or know more fixes on this slow internet speed issue, Please share with us in the comments section below.

Enjoy your blogging.

How to show or hide Sidebar widgets in Blogger blog

Is it possible to show and hide widgets sidebar in blogger blog? Yep. that is possible… you can hide or show widgets in the sidebar.

We can show & hide sidebar widgets in blogger blog by using conditional tags. By using that tag We can show or hide sidebar gadgets on any page of your blogger blog. But remember works on all gadget types except the "Google+ Badge" gadget and the old "Followers" (Google Friend Connect) gadget.

How to Hide widgets in Blogger Sidebar

Step01:  Back Up Your Template.

Step02:  Find Your Gadget in the Template. For that,

 Open your template by clicking the Edit HTML.

 Use the Jump to widget drop-down button to jump down to your gadget.

Click here to see image guide

If you cannot find that method, you can use the below method.

go to the main page of your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window Look for "Widget ID" in the URL

 

The text between the equals sign in "WidgetID=" and the ampersand (&) is the widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widgets section in your blog's HTML.

Step03: Expand Your Widget

After you found widget ID in HTML box expand that. For that Click “….” Before </b:widget>

Step04: Choice Conditional Tags as you prefer, you can put that conditional tags for anywhere in the blog template by using below codes as you prefer.

If you want to restrict a gadget to your homepage only, 

<b:if cond='data:blog.url == data:blog.homepageUrl'>

(Gadget code here)

</b:if>

Show Gadget on the Homepage and "Index" Pages,

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

(Gadget code here)

</b:if>

Show Gadget on Post Pages Only,

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

(Gadget code here)

</b:if>

Show Gadget on Static Pages Only,

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

(Gadget code here)

</b:if>

Show Gadget on One Specific Page Only,

<b:if cond='data:blog.url == "PAGE URL HERE"'>

(Gadget code here)

</b:if>

if you want a gadget to show up everywhere except the home page?

<b:if cond='data:blog.url != data:blog.homepageUrl'>

(Gadget code here)

</b:if>

Step05: Inserting Conditional Tags

That code replace

 below the <b:includable id='main'>

and  </b:if> of condition tag goes  above the </b:includable>    

              Step06: Click on preview button & view your blog site.

              Step07: Is it OK? Then, click savebutton.

Now you can easily Show and Hide Sidebar widgets in Blogger blog.

I Hope the above method help you to show or hide Sidebar widgets in Blogger blog. And if you have any problem or know more on this, Please share with us in the comments section below. Enjoy your blogging.

How to add Subscribe us Pop up box into Blogger & Find your Feedburner ID?

Are you looking for how to add subscribe us box for your blogger blog? 

One of the major things that Blogger users missed is Subscribe us Pop Up forms. Because of the limitations of a blogger platform we cannot directly find out a plugin or any widget of Subscribe us pop up box like word press platform. But using the HTML/JavaScript and CSS we can find a solution for that problem. With that, you can say your blog is successful because of it ready to had a great number of loyal visitors by using that Subscribe Us Pop up box.

How to add a Subscribe Us Pop up box in Blogger?

1. At first, you should have to install JavaScript library(JQuery) on the head of your blogger template. To do that,
 

       Go to Blogger Dashboard ->> Template ->> Click on Edit HTML and find this code <head> (click in HTML box ->>press CTRL+F copy  & paste) Paste the following code in template as given below ->> Click Save.

2.     Now you can add a pop-up subscription box into your blogger. So,

       Go Blogger Dashboard ->> Click on Layout ->> Add a Gadget ->> HTML/JavaScript then copy and  paste the following codes as given below.

<script type="text/javascript" src='http://aireshalili.github.io/internetsmash/popup-email-subscription.js'></script>

<style type="text/css">

.internetsmash-swing{-webkit-animation:swinging 10s ease-in-out 0s infinite; -moz-animation:swinging 10s ease-in-out 0s infinite; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0;} @-webkit-keyframes swinging{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(0deg); } 40% { -webkit-transform: rotate(0deg); } 45% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(0); } } @-moz-keyframes swinging{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes swinging{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(0deg); } 40% { transform: rotate(0deg); } 45% { transform: rotate(0deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0);}}

.outer-email-popup-box {display: none;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;}

.email-popup-box{width: 500px;height: 280px;position: fixed;top: 0;left: 0;right: 0;bottom: 25%;margin: auto; text-align: center; background: #fff;-webkit-animation: swinging 10s ease-in-out 0s infinite; -moz-animation: swinging 10s ease-in-out 0s infinite; animation: swinging 10s ease-in-out 0s infinite;}

.email-popup-header{text-align: center;font-size: 2em;color: #FFFFFF; background: #006D90; padding: 4px 15px 7px 10px; margin: 13px 0px 14px 0px;}

.email-popup-subheader{text-align: center; font-size: 1.1em; color: #676767;padding: 10px 0px 22px}

.email-popup-body{text-align: center; margin-top: 9px;padding: 22px 0px 3px 0px;background: #006D90;}

.email-right{background: green;float: right;}

.email-left{background: red;float:left;}

.email-form{width: 80%; margin: 0 auto;}

.in-popup-mail{padding: 10px;margin: 0 auto;width: 270px}

.btn-popup-mail{padding: 10px; background: #006D90;border: 2px solid #fff;color: #fff;margin: 0 auto;}

.btn-popup-mail:hover{background: #003E52}

.background-img{width: 40px; margin: 0 auto; padding-top: 5px}

.exit-button-subbox {float: right; cursor: pointer; position: absolute; right: 0px; top: 0px; margin-top: 4px; margin-right: 4px;}

.exit-button-subbox:before { content: "X"; padding: 4px 4px; background: #FFFFFF; color: #000000; font-weight: normal; font-size: 15px; font-family: sans-serif;}

.footer-popup-mail{color:#fff;font-size:12px;margin-top:-5px}

.footer-popup-mail a{color:#fff}

</style>

<div class="outer-email-popup-box">

<div class="email-popup-box internetsmash-swing">

<div class='exit-button-subbox'></div>

<div class="background-img">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN7QmYbtFd6ioFb4rRTFG5q5WppimdPuSkZpQd14WyAOctfvz5ctTO5wUuPxZqribvu7l-Fn2FSS157PtAKmuzFegF4VpvfR4tkaucPhIdYUoe7oNeNPIcXVdVvmITu0ncwsD8JkxFGtE/s89-Ic42/mail.png" style="width:50px" />

</div>

<div class="email-popup-header">

FREE subscription to get our newsletter

</div>

<div class="email-popup-subheader">

Join our blogger community to creating successful blogger blogs and more

</div>

<div class="email-popup-body">

<div class="email-form">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/Thewonderspot?uri=Internetsmash', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">

<table width="100%">

<tbody>

<tr>

<td>

<input class="emailu in-popup-mail" name="email" placeholder="Enter your email address" type="text" />

</td>

<td>

<input class="mail-buttons btn-popup-mail" type="submit" value="Subscribe" />

</td>

</tr>

</tbody>

</table>

<input name="uri" type="hidden" value="Thewonderspot" />

<input name="loc" type="hidden" value="en_US" />

</form>

</div>

<div class="footer-popup-mail">

Powered by: <a href="https://www.thewonderspot.com/">Thewonderspot" rel="nofollow">Thewonderspot</a></div>

</div>

</div>

</div>

<script type="text/javascript">

jQuery(document).ready(function($){

if($.cookie('popup-email-box') != 'yes'){

$('.outer-email-popup-box').delay(20000).fadeIn('medium');

$('.exit-button-subbox, .button').click(function(){

$('.outer-email-popup-box').stop().fadeOut('medium');

});

}

$.cookie('popup-email-box', 'yes', { path: '/', expires: 7 });

});

</script>

* Customize below features as you prefer.

HTML/CSS

host-pot:Change this with your own feed burner address.

Header and subheader:Change this with your desired phrases.

#006D90: Just change your background color.

JavaScript

20000: the subscription box is set to appear after 20 seconds (1000 = 1 second). If you want to change that time just change it with your desired number.

7: with that by default your visitors can only see the subscription box once every 7 days. If you want to increase or decrease the cookies expiration date just change that value.

Now it’s ready. You can text your pop up a subscription box. If it has any issue, please clear the browser cookies & reload your blog post.

OK, then you have a beautiful subscribe us popup box.

How to Find  Feedburner ID for an email subscription?

With that part, we discuss How to Find your Feedburner ID. When you are creating an email subscription feature for your blogger it may ask you for your Feedburner ID. There are some different ways to  Find your Feedburner ID.

The ID used to be a numeric sequence but since Google’s acquisition of Feedburner, the ID is now the same name that is appended to your Feed burner URL,  http://feeds.feedburner.com/yourid.

You can find your Feedburner ID by the following 2 methods.

Method:01

1. The easiest way to find your ID is to visit your feed from within the Feedburner interface. Simply click the feed icon as shown circled in red in the screenshot below.

That will open the Feed Content page in your web browser.

Now look in the address bar at the top and you will see your Feedburner ID appended to the URL. http://feeds.feedburner.com/yourid.

Or

  

Method 02:

1.      Login to your Feedburner account

2.     Click on the publicize tab from the upper menu

3.     On the left hand select Email Subscriptions and activate it if it's disabled.

You will find your id in the embed code written after “?uri=YOUR ID”. You will notice that gabfire is our id based on the screenshot below.

I Hope the above methods help you to add Subscribe us Pop up box into Blogger & Find your Feedburner ID. And if you have any problem or know more fixes on this, Please share with us in the comments section below.