Wednesday 9 June 2010

Wordpress greet box for blogger -Widget

You might have seen a warm Greeting message on most of the Popular Wordpress blogs when you visit there from various referring sites. That greeting message is possible by a plugin for Wordpress blogs but now you can add it to your bloggers blog by adding as a gadget.A greeting widget for blogger blogs


Features :
transparent rss icon
1.Greet your visitors.
2.Request them to subscribe for your blog
3.Request them to stumble or tweet your post 


Installation
Best place to add this gadget is Just below post title or as a gadget above post area.
[1]Adding as Gadget above posts 


Log in to Blogger - > Layout - > Add a Gadget and select it as "HTML/JavaScipt"
Now paste this code in to it:

<script src="http://www.yourjavascript.com/24211708790/TextToBeDisplayedDiv-minv3.0.js"
type="text/javascript">
</script>
<div id="mainDisplayDiv">
<div style="float: right;">
<href a="#" onclick="closeGreetBox('7')"><img border="0" alt="x"
src="http://i45.tinypic.com/2m2wcw3.gif" />
</href></div>
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "YOUR FEEDS ADDRESS";
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>
 Replace YOUR FEEDS ADDRESS with your feedburner blog feed.

That’s all. Save your template and see your blog for changes !!

[2]Adding just below post titles within the post

Dashboard -> Layout -> Edit HTML
And search for <div class='post-header-line-1'/&gt;
And paste this code below <div class='post-header-line-1'/>


<script src="http://www.yourjavascript.com/24211708790/TextToBeDisplayedDiv-minv3.0.js"
type="text/javascript">
</script>
<div id="mainDisplayDiv">
<div style="float: right;">
<href a="#" onclick="closeGreetBox('7')"><img border="0" alt="x"
src="http://i45.tinypic.com/2m2wcw3.gif" />
</href></div>
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "YOUR FEEDS ADDRESS";
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>
;
 Replace YOUR FEEDS ADDRESS with your feedburner blog feed.

Adding or defining CSS to the greet box.
Define a class with name mainDisplayDiv and add height ,width,background color,border


#mainDisplayDiv {
margin:10px;
width:540px;
height:55px;
background-color:#98D1E9;
border: 1px dashed #593E1A;
}

Hope you like this tutorial.Do you like this tutorial?Will you add this widget to your blog ?
Share your thoughts and reviews with me.Thanks for reading

No comments:

Post a Comment