Wordpress To Blogger Converted Blogger Greet Box Message Widget

Standard greetings message for first time visitors recommending them to Sign Up for your RSS feedburenr.Professional bloggers be aware that getting these attractive greeting box on their website boosts their blog exposure and loyal audience.Furthermore,this blogger widget works with various browsers and it loads fast.Also Smashing Magazine used this wordpresss plugin.
[post_ad]

Wordpress To Blogger Converted Widget:

WordPress provides extensive features including to add plugins.For this reason wordpress is known as an improved blogging platform compared to blogger blog.However Blogger fans attempt to convert the wordpress plugins to Blogger widget.WP Greet Box is a nice and clean blogger widget,and it looks very fine.It help you to turn some more search engine users into subscribers.At first glance,it’s a basic plugin which shows a welcome message to help new guests.But,its benefits make it much more effective compared to the results you are getting now.New visitors to your website, once they land on a single post or static page, will be welcomed by using a message welcoming those to the website and encouraging them to subscribe to the RSS feed or take some sorts of action.

Features of the Blogger Greet Box Plugin:

• Greeting message can be placed anywhere.Like you can use it in the top of post or at the end of the post.
• The widget hast the option to close the message.
• It has lot of social bookmarking icons so you can choose whatever you want.
• Added nofollow tags to external links.So it is SEO Optimized

Live Demo

How To Add This Blogger Greeting Message To Blogger Post:

Step 1.Go to blogger dashboard then Template->Edit HTML(Backup your template and press Ctrl+F for search bar) and before </head> copy and paste this javascript snippet.

<script type='text/javascript'> 
//<![CDATA[ 
var mbl_arr = new Array(); 
var mbl_clear = new Array(); 
function mblFloat(mbl) { 
mbl_arr[mbl_arr.length] = this; 
var mblpointer = eval(mbl_arr.length-1); 
this.pagetop = 0; 
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
this.mblsrc = document.all? document.all[mbl] : document.getElementById(mbl); 
this.mblsrc.height = this.mblsrc.offsetHeight; 
this.mblheight = this.cmode.clientHeight; 
this.mbloffset = mblGetOffsetY(mbl_arr[mblpointer]); 
var mblbar = 'mbl_clear['+mblpointer+'] = setInterval("mblFloatInit(mbl_arr['+mblpointer+'])",1);'; 
mblbar = mblbar; 
eval(mblbar); 
} 
function mblGetOffsetY(mbl) { 
var mtaTotOffset = parseInt(mbl.mblsrc.offsetTop); 
var parentOffset = mbl.mblsrc.offsetParent; 
while ( parentOffset != null ) { 
mblTotOffset += parentOffset.offsetTop; 
parentOffset = parentOffset.offsetParent; 
} 
return mblTotOffset; 
} 
function mblFloatInit(mbl) { 
mbl.pagetop = mbl.cmode.scrollTop; 
mbl.mblsrc.style.top = mbl.pagetop - mbl.mbloffset + "px"; 
} 
function closeTopAds() { 
document.getElementById("mbl_bar").style.visibility = "hidden"; 
} 
//]]> 
</script>

Step 2:Css Part copy and paste the CSS code before ]]></b:skin>

.greet_block{background:#fff;border:1px solid #eee;margin:10px 0;width:100%}.greet_image{float:left;padding:0 10px 0 0}.greet_image img{background:none;border:none;margin:0;padding:0}.greet_text{color:#333;font-size:16px;line-height:20px;margin:10px}.greet_block_close{background:#fff;border:0 solid #;float:right;height:15px;margin:0 0 0 10px;width:15px}.greet_block_close a{color:#ccc;cursor:pointer;font-family:verdana;font-size:12px;font-weight:700;line-height:14px;margin:0 3px;text-transform:uppercase}.greet_block_close a:hover{text-decoration:none}.greet_block_powered_by{float:right;font-size:9px;line-height:14px;padding:0 5px}.greet_block_powered_by a{color:#ccc}.greet_search_after{border-top:1px solid #eee;font-size:11px;margin:5px 0 0;padding:2px 0 0}.greet_search_before{border-bottom:1px solid #eee;font-size:11px;margin:0 0 5px;padding:0 0 2px}#greet_search_link{cursor:pointer}.wpgb_cornered{-webkit-border-radius:10px;-moz-border-radius:10px}.wpgb_shadowed{-webkit-box-shadow:#ccc 0 5px 5px;-moz-box-shadow:0 5px 5px #ccc}

Step 3:Add this code on top of your blog widget using HTML/Javascript and after that copy and paste this code

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<div id='mbl_bar'> <div class="greet_block wpgb_cornered"><div class="greet_text"><div class="greet_image"><a href="http://feeds.feedburner.com/softechnogeek" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUu6J0reKrR7-zribQIaML0yCv9gguT3u34xq2sUVBR3bsU3SAxt3MTccObY3YvURGNmOkqreoRhzOdTudf5B1Dtca63a_SYIs3j-PfrhDNgentmP9bIR0URc2RF7MAePPodQbmJ0VKCkO/s1600/google_icon.png" alt="WP Greet Box icon"></a></div><div class="greet_block_close"><a id="greet_block_close" href="#"><span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUd0tVZAB050HLWVs5964nYIu4Ur2xjhR-8g9yZfA_Rd_70uIzB2QkV3AHX-A5bq82aixP8rqata789xay_tWGHOlvT_PMaz6zSuo4vZzUMeGjqZyBeU1dYng4yVJtqlByIlrvIOik_tf/s1600/close_icon.png' style='cursor:hand;cursor:pointer;'/></span></a></div>Welcome <strong>Googler</strong>! If you find this page useful, you might want to <a href="http://feeds.feedburner.com/softechnogeek" rel="nofollow"><strong>Subscribe To The RSS Feed</strong></a> for updates on this topic.<div style="clear:both"></div><div class="greet_block_powered_by">Powered by <a href="http://softechnogeek.com/" title="WP Greet Box WordPress Plugin" style="text-decoration:none;">SOFTECHNOGEEK</a> <a href="http://www.softechnogeek.com/2012/06/wordpress-to-blogger-converted-blogger.html" title="Blogger Plugin" style="text-decoration:none;">Blogger Plugin</a></div><div style="clear:both"></div></div></div>
</div>
<br/><br/>
</b:if>

Replace the Feed URL to yours

For Feedburner Add This Code To The Widget:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='mbl_bar'> <div class="greet_block wpgb_cornered"><div class="greet_text"><div class="greet_image"><a href="http://feeds.feedburner.com/softechnogeek" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-MV_eqKyprV32-917fWYsB15Oi9_yP-N0qrPtfK4pMwi06gkgK14Kj-ixPpdFE_IXnOQpLyRvHfpGYadzBjZBMwFBVgKiYeKLjfKwfYlCfhx00HYcTj8OaWGXe6oZlbCm3XyxB_YPzzhz/s1600/rss_icon.png" alt="WP Greet Box icon"></a></div><div class="greet_block_close"><a id="greet_block_close" href="#"><span style='padding:0px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUd0tVZAB050HLWVs5964nYIu4Ur2xjhR-8g9yZfA_Rd_70uIzB2QkV3AHX-A5bq82aixP8rqata789xay_tWGHOlvT_PMaz6zSuo4vZzUMeGjqZyBeU1dYng4yVJtqlByIlrvIOik_tf/s1600/close_icon.png' style='cursor:hand;cursor:pointer;'/></span></a></div>Welcome <strong>Googler</strong>! If you find this page useful, you might want to <a href="http://feeds.feedburner.com/softechnogeek" rel="nofollow"><strong>Subscribe To The RSS Feed</strong></a> for updates on this topic.<div style="clear:both"></div><div class="greet_block_powered_by">Powered by <a href="http://softechnogeek.com/" title="WP Greet Box WordPress Plugin" style="text-decoration:none;">SOFTECHNOGEEK</a> <a href="http://www.softechnogeek.com/2012/06/wordpress-to-blogger-converted-blogger.html" title="Blogger Plugin" style="text-decoration:none;">Blogger Plugin</a></div><div style="clear:both"></div></div></div> </div> <br/><br/> </b:if> 

Replace the Feed URL to yours.

For Facebook Add This Code To The Widget:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='mbl_bar'> <div class="greet_block wpgb_cornered"><div class="greet_text"><div class="greet_image"><a href="https://www.facebook.com/softechnogeeks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWprhABjEq8zm9C_8bcwFPW3Un09lZI5jD2xCU7WV0VWrdzxIxRmC5YeIgovmy9eMhf9uCKT-9oiNGLIgay5QhrkfatUeOI3wMbINDnLalVAraFq7dzdnsCSbr4bk-6qhA2fNHMSuI9_wE/s1600/facebook_icon.png" alt="WP Greet Box icon"></a></div><div class="greet_block_close"><a id="greet_block_close" href="#"><span style='padding:0px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUd0tVZAB050HLWVs5964nYIu4Ur2xjhR-8g9yZfA_Rd_70uIzB2QkV3AHX-A5bq82aixP8rqata789xay_tWGHOlvT_PMaz6zSuo4vZzUMeGjqZyBeU1dYng4yVJtqlByIlrvIOik_tf/s1600/close_icon.png' style='cursor:hand;cursor:pointer;'/></span></a></div>Welcome <strong>Facebooker</strong>! If you find this page useful, please <a href=" https://www.facebook.com/softechnogeeks " rel="nofollow"><strong>Like Us On Facebook</strong></a> for updates on this topic.<div style="clear:both"></div><div class="greet_block_powered_by">Powered by <a href="http://softechnogeek.com/" title="WP Greet Box WordPress Plugin" style="text-decoration:none;">SOFTECHNOGEEK</a> <a href="http://www.softechnogeek.com/2012/06/wordpress-to-blogger-converted-blogger.html" title="Blogger Plugin" style="text-decoration:none;">Blogger Plugin</a></div><div style="clear:both"></div></div></div> </div> <br/><br/> </b:if> 

Replace the Facebook Page Url to yours.

For Twitter Add This Code To The Widget:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='mbl_bar'> <div class="greet_block wpgb_cornered"><div class="greet_text"><div class="greet_image"><a href="https://www.twitter.com/softechnogeek" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJfRfKPTRRAPZ4rFgHOsLSlEeHDS2lNzPgmHzXMXbhfWudYDkfaNCuD1FZ7Y7TrqjGyduS_lugFPJFcH3k8sr0q1_8d3c4ypDhJxzw8XzcaWXAguUY-McZp9-kPiuSnnzvTi1U4WdNAm_/s1600/twitter_icon.png" alt="WP Greet Box icon"></a></div><div class="greet_block_close"><a id="greet_block_close" href="#"><span style='padding:0px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUd0tVZAB050HLWVs5964nYIu4Ur2xjhR-8g9yZfA_Rd_70uIzB2QkV3AHX-A5bq82aixP8rqata789xay_tWGHOlvT_PMaz6zSuo4vZzUMeGjqZyBeU1dYng4yVJtqlByIlrvIOik_tf/s1600/close_icon.png' style='cursor:hand;cursor:pointer;'/></span></a></div>Welcome <strong>Tweeter</strong>! If you find this page useful, please <a href="https://www.twitter.com/softechnogeek" rel="nofollow"><strong>Follow Us On Twitter</strong></a> for updates on this topic.<div style="clear:both"></div><div class="greet_block_powered_by">Powered by <a href="http://softechnogeek.com/" title="WP Greet Box WordPress Plugin" style="text-decoration:none;">SOFTECHNOGEEK</a> <a href="http://www.softechnogeek.com/2012/06/wordpress-to-blogger-converted-blogger.html" title="Blogger Plugin" style="text-decoration:none;">Blogger Plugin</a></div><div style="clear:both"></div></div></div> </div> <br/><br/> </b:if>

Replace the Twitter URL to yours

For YoTube Add This Code To The Widget: :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='mbl_bar'> <div class="greet_block wpgb_cornered"><div class="greet_text"><div class="greet_image"><a href="https://www.youtube.com/softechnogeek" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWzr9VeGLNgox5tnL6TuO02mhLK_8YGNwU7_g0pAfFSFa0gVQaDLX2MwBcaOSjxH9EKb9J04_UXMofuk9rJprZGZzWq0F6HeOnPXmqboGAxfora62mjJFTLxp4ZYLm56RvOt1EfvpV4QR/s1600/youtube_icon.png" alt="WP Greet Box icon"></a></div><div class="greet_block_close"><a id="greet_block_close" href="#"><span style='padding:0px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUd0tVZAB050HLWVs5964nYIu4Ur2xjhR-8g9yZfA_Rd_70uIzB2QkV3AHX-A5bq82aixP8rqata789xay_tWGHOlvT_PMaz6zSuo4vZzUMeGjqZyBeU1dYng4yVJtqlByIlrvIOik_tf/s1600/close_icon.png' style='cursor:hand;cursor:pointer;'/></span></a></div>Welcome <strong>YouTuber</strong>! If you find this page useful, please <a href="https://www.youtube.com/softechnogeek" rel="nofollow"><strong>Subscribe To Your YouTube Channel</strong></a> for updates on this topic.<div style="clear:both"></div><div class="greet_block_powered_by">Powered by <a href="http://softechnogeek.com/" title="WP Greet Box WordPress Plugin" style="text-decoration:none;">SOFTECHNOGEEK</a> <a href="http://www.softechnogeek.com/2012/06/wordpress-to-blogger-converted-blogger.html" title="Blogger Plugin" style="text-decoration:none;">Blogger Plugin</a></div><div style="clear:both"></div></div></div> </div> <br/><br/> </b:if> 

Replace the YouTube URL to yours.

Video Tutorial On How To Add Blogger Greet Box Widget To Post:

If You need any customization let me know in the comments

Get the best tips from Softechnogeek in your inbox, free!