Stylish and multifunctional Comments Forms for your blogs

 Each blogging platform has it's unique comments form system. But new generation of comments forms has arrived. These are not only stylish but are also multifunctional. They are attractive and easy to use also.

Here we will discuss third party Comments Forms that will work with most of the blogging platforms like Bogger, WordPress, TypePad, tumblr.


1. DISQUS

Right click and open this image in new tab for larger view.

It's free. Most of the blog owners are using it. It provides rating for comments. Comments can be easily tracked and moderated.

Installation: http://disqus.com/


2. IntenseDebate

Right click and open this image in new tab for larger view.

It is another free comment form service. It's main features are: Comment Threading, Reply-By-Email, Email Notifications, Commenter Profiles, Moderation/Blacklisting, Reputation Points and many more. (Full list of all features: http://intensedebate.com/features)

Installation: http://intensedebate.com/home



3. JS-Kit / Echo

Right click and open this image in new tab for larger view.

It is free as well as priced. The free package offers threaded comments. You can format the text of comments and can also add images, videos and smiley to your comments. (Full list of features: http://wiki.aboutecho.com/Feature-List)

Live Demo: http://aboutecho.com/comments-demo.html

Installation: http://aboutecho.com/products-comments.html

Read More

Boost your Blogger footer with Wibiya's Web Toolbar

You have seen a toolbar on many of the Blogger and Wordpress blogs. It is a Wibiya's Web Toolbar. This toolbar not only helps you to boost viewership of the blogs but also helps your visitors to easily navigate through your blogs. It also has so many social networking websites icons to share the contents. The toolbar also includes Recent Posts, Random Posts, Search and Translate features. You can add or remove applications from the toolbar in one click.



How to Install Wibiya's Web Toolbar

1. Go to the Wibiya's Web Toolbar website: http://www.wibiya.com/  and click an account there(by clicking on Get it Now).

2. Choose a toolbar theme. You can see a toolbar preview at the bottom of the screen.

3. Select your Apps. Add or Remove applications you want on the toolbar.

4. Choose Your Website / Blog Platform from Wordpress, Blogger, Ning, Typepad, Drupal, Joomla, vBulletin, Tumblr or other. Select Blogger.

5. You will be then directed to Blogger. Select your blog and click on Add Widget. It's done.

Read More

Gadget Max Blogger Template

Read More

jQuery based navigational drop down menu bar for Blogger blog.

Our previous Drop Down menu bar was awesome.

Here we present another drop down menu bar which uses jQuery and much simpler than previous.

The original HTML codes are of other but I modified then at certain points to give you this elegant menubar.

Live Demo

Let's add this to your blog.
1. Adding Style and JS

Login to Blogger Dashboard > Design > Edit HTML and find following in your template

</head>

Now add following code ABOVE it.

<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #00217b; /*Purple*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{
padding: 4px 9px;
background: #24313C
}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #bd9cc5; /*Light Purple*/
color: #242628}

#jsddm li ul li a:hover
{ background: #e7bff1}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;
</script>

Save Template. You can customize the background colors, fonts and padding easily.


2. Adding Menus and Sub Menus

Go to Page Elements > Add a Gadget > HTML/Java Script and add following code into it and save.

<ul id="jsddm">
<li><a href="http://film-cast.blogspot.com">Hollywood</a>
<ul>
<li><a href="http://film-cast.blogspot.com/search/label/Hollywood%20Movies?&amp;max-results=6">Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Hollywood%20Featured%20Stories?&amp;max-results=6">Featured Stories</a></li>

</ul>
</li>

<li><a href="http://film-cast.blogspot.com">Bollywood</a>
<ul>
<li><a href="http://film-cast.blogspot.com/search/label/Hindi%20Movies?&amp;max-results=6">Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Upcoming%20Hindi%20Movies?&amp;max-results=6">Upcoming Movies</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Music?&amp;max-results=6">Music</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Featured%20Stories?&amp;max-results=6">Featured Stories</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Hindi%20Video%20Songs?&amp;max-results=6">Video Songs</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Stars?&amp;max-results=6">Stars &amp; Superstars</a></li>
<li><a href="http://film-cast.blogspot.com/search/label/Bollywood%20Poster%20%2F%20Wallpapers?&amp;max-results=6">Wallpapers/Posters</a></li>
</ul>
</li>

<li><a href="http://www.getlyricz.com/">Hindi Lyrics</a></li>

<li><a href="http://blogger-help.com/">Blogger Help</a></li>

</ul>

Add your Menus and their respective links to above code.
You can also add step 2 code just above <div id='header-wrapper'>

Source for codes: http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Some of the codes are modified.

Read More