I am trying to improve the design of this blog these days, and if you are a regular visitor to this blog then you must be noticing the changes I am making. The latest thing which I added into the blog design is a Greet Box which you can see in the beginning of the post or the screenshot of it given below .

This type of greet boxes are basically available in the Wordpress blogs but with the help of a hack, you can add it in your Blogger blog too.

Add Wordpress Greet Box In Blogger Blog

This feature lets you show a different greeting message to your visitors depending on their referrer URL or sources from where they are coming to your blog or site.

Features of Blogger Greet Box

  • Show a different greeting message to your visitor depending on the referrer URL.
  • Beautiful set of icons to represent various websites
  • Shows a default greeting message if the user hits the URL directly or comes from a referrer which is not specified
  • Ability to remove the message when the user navigates within the same site so we do not keep nagging them with greeting messages.
  • Currently the following referrers are installed :
  1. Google
  2. Digg
  3. Facebook
  4. Yahoo
Steps To Add Greet Box

1. Goto Blogger dashboard of your blog.
2. Goto Layout tab, click “Edit Html
3. Check the “Expand Widget Templates” checkbox
4. Locate
<div class='post-header-line-1'/>

5. Just below the above code, paste below code snippet given below, and save the template.

<script src="http://bloggergreetbox.googlecode.com/files/TextToBeDisplayedDiv-minv3.0.js"
type="text/javascript">
</script>
<div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none">
<div style="float: right; margin-right: 5px; margin-top: 5px;">
<href a="#" onclick="closeGreetBox('7')"><img border="0" alt="x"
src="http://img214.imageshack.us/img214/9837/closebutton.gif"/>
</href></div>
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "Your Feed URL Here";
var dynamicHTMLText = displayRequiredText(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>


NOTE : Replace the feed URL with your own feed URL i.e just remove the line Your Feed URL Here with the feed URL of your blog.

If you liked this post then feel free to join the Facebook page, spread the word about it by sharing or subscribe Email updates to get latest posts in your inbox.... Thanks
 
Top