> > Advanced Blogger Greet box – WP Greet box plugin Blogger version

Advanced Blogger Greet box – WP Greet box plugin Blogger version

Plugins like Blogger Greet box are important for increasing site traffic because web today is not just googling, it includes Liking, Plusing, Tweeting, Digging and so on. As a webmaster trying to increase his traffic, one should have to be bothered about all such sources of traffic. People spend more time in social medias and if we work seriously we can get a major share of traffic from social medias. Blogger Greet Box plugin is a nice plugin which make it is for your visitors to bookmark your post to various sites

Advanced Blogger Greet box plugin

WP greet box is a must have plugin for WordPress which will show greetings to visitors based upon where they are coming from. While searching for a Blogger version of this great plugin, I found one Blogger Greet Box created by Koushik at Classictutorials. It was good, though it lacks some features that WP Greet box has.(still there are lots of new options there)

So i decided to create one by myself which looks exactly similar to WordPress version. But I still used the style and few methods of Kaushik to avoid confusion for old users. This version of blogger greet box plugin will show different messages and options for each referrer sites.

Blogger greet box support up to 35 sites referrals including:-

facebook, stumbleupon, linkedin, twitter, digg, delicious, google, yahoo, myspace, reddit, technorati, blinklist, blogmarks, diigo, furl, magnolia, mister-wong, newsvine, simpy, dzone, windowslive, msn, example.com, netvibes, youtube, flickr, wordpress, tumblr, friendfeed, plurk, bing, wikio, scoopeo, designrfix, webdesign-ne

You can display blogger greet box in two different ways on your blogger:-

  1. As a greeting message attached to your blog post content.(same as wp greet box plugin)
  2. As an animated floating popup box which float through your page.
You can see a live demo here

How to add Blogger Greet box to your blog?

Let’s have a look at displaying greet box on your blog. Remember you can use only one among the following types at a time.

1. As standard Blogger Greet Box

Blogger Greet Box plugin
Blogger Greet Box plugin

In blogger dashboard open “Template->Edit HTML” and find the firs occurrence of : <data:post.body/>

Add the following code block just above <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://advanced-blogger-greetbox.googlecode.com/files/newgreetbox.js' type='text/javascript'/><div id='mainDisplayDiv' style='background:#ffffff;border:1px solid #EEE; border-radius:10px; display:none;'>
<div style='float: right; margin-right: 5px; margin-top: 5px;'>
<href a='#' onclick='closeGreetBox(1)'><img alt='x' border='0' src='http://img214.imageshack.us/img214/9837/closebutton.gif'/></href>
</div>
<div id='dynamicContentDisplayed'/>
<script type='text/javascript'>
var feedURL = "http://feeds2.feedburner.com/blogspot/"; //put your rss feed URL here
var dynamicHTMLText = returnHtml(feedURL);
document.getElementById(&quot;dynamicContentDisplayed&quot;).innerHTML = dynamicHTMLText;
</script>
</div>
<script src='http://bloggergreetbox.googlecode.com/files/HideShowDiv-minv3.0.js' type='text/javascript'/><script type='text/javascript'>
showHideDiv();
</script></b:if>

refer this image to avoid errors:

Advanced Blogger Greet box plugin
Blogger HTML Editor

2. As a floating Popup Box

This one is more eye catchy and certainly capture visitors attention.

Advanced Blogger Greet box plugin
Advanced Blogger Greet box popup

To add Blogger Greet box as popup, add an “HTML/JavaScript” element under “Layout” tab in Blogger dashboard. Place the following code block in it.

<script language="javascript">
var name = "#floatBox";
var menuYloc = null;
jQuery.noConflict();
jQuery(document).ready(function($){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function(){
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
function closeFloatBox(){
jQuery('#floatBox').css('display', 'none');
closeGreetBox('0');
}
</script>
<style type="text/css">
#floatBox {
position:absolute;
top:-10px; //adjust this value to position popup
left:10%;
margin-left:0px;
width:450px;z-index:9998;
opacity:0.99;
border:6px solid rgba(0, 0, 0, .5);
border-radius:10px;
}
#floatBox:hover {
opacity:1;
}
#mainDisplayDiv {
background:#ffffff;
border:1px solid #EEE;
border-radius:10px;
display:none;
}
</style>
<script src="http://advanced-blogger-greetbox.googlecode.com/files/greetbox.js" type="text/javascript"></script>
<div id="floatBox">
<div id="mainDisplayDiv">
<div style="float: right; margin-right: 5px; margin-top: 5px;">
<href a="#" onclick="closeFloatBox()"><img border="0" alt="x" src="http://img214.imageshack.us/img214/9837/closebutton.gif"/></href>
</div>
<div id="dynamicContentDisplayed"></div>
<script type="text/javascript">
var feedURL = "http://feeds2.feedburner.com/blogspot/"; //put your rss feed URL here
var dynamicHTMLText = returnHtml(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script src="http://bloggergreetbox.googlecode.com/files/HideShowDiv-minv3.0.js" type="text/javascript"></script>
<script type="text/javascript">
showHideDiv();
</script>
</div>

If it is not floating add this line right after the <head> tag in your blog template:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

That is all about Blogger Greet box!

If you have any problems, doubts or suggestion, feel free to post here.

This is my first version of Blogger Greet box, I will release newer version based on your response.
GQWRKRFVQBDY

The following two tabs change content below.

Vipin Raj

Vipin Raj is a software developer specialized in PostgreSQL Database and Data Modeling, the man behind technobytz and an IoT and Security enthusiast. Having 3+ years of experience in the IT industry, he is currently pursuing his masters in computer science and information security. He spend his free time writing blog posts with the intension of sharing his knowledge to the tech community.

10 thoughts on “Advanced Blogger Greet box – WP Greet box plugin Blogger version

  • Pingback: How do i find a blog on blogspot? [2 working solutions]

  • May 10, 2013 at 5:14 am
    Permalink

    I added the code to my template. I dont seem to see the box however. I get no errors having the code installed…but cant quite tell if it’s working

    Reply
    • May 10, 2013 at 6:19 am
      Permalink

      ok, so I got it to work by posting the code above the last instance of “data:post.body” instead of the first. However, when using IE9, the text is as large as my titles are. In chrome it seems to be great. any ideas?

      Reply
      • May 11, 2013 at 5:54 pm
        Permalink

        I have updated the code. It might work correctly now. Try replacing your code with above code.

        Reply
          • May 14, 2013 at 4:56 am
            Permalink

            We were unable to save your template.

            Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:
            The content of elements must consist of well-formed character data or markup.

  • January 19, 2014 at 3:11 pm
    Permalink

    The popup box shows up way up in the top-left corner and all I can see is the bottom of the box. I see in the code where it says adjust for position, but nothing I adjust repositions the box. Can you be a little more specific on how to adjust it? I need the box to come down quite a ways and to the right a little bit

    Reply
    • January 19, 2014 at 4:25 pm
      Permalink

      Try changing the value of top:
      top:20px;
      Or if you could give your blog URL, I will suggest the appropriate value to use.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *