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.

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

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:

2. As a floating Popup Box

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

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