Add Featured Post slider in Blogger (homepage/below post) Carousel style

Couple of month ago I published a high-end featured post widget which can be add to sidebar of your Blogger blog. Here today I am publishing another featured post widget what you can use on your homepage or below posts. This widget is a jQuery slider also known as ticker image slider. This featured post slider is:

• Simple: Easy to configure and customize

• Small: Don’t take much space wherever you set it

• Light weighted: Some jQuery, CSS and HTML made

• High-end: Responsive

• Awesome: Smart and neat looking carousel style

Let’s see how it looks like and how to add it in Blogger blogs.

Add featured post slider in Blogger (homepage/below post)

Preview:

Live Demo: (click here)

Codes for copy:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             $('#slider').bxSlider({
            ticker: true,
            tickerSpeed: 5000,
            tickerHover: true
          });
          });
</script>
<style>
/*crawlist.net slider CSS*/
#slider {
    list-style:none;
    padding:0px;
}

.slider-container {
    background:#fff;
    width:80%;
    height:150px;
    padding:17px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow:hidden;
margin:auto;
}

.newcon { width:80%; margin:auto; overflow:hidden}

#slider img {
    width:200px;
    height:125px;
    margin:0px;
    display:inline-block;
    border: 1px solid #f5f5f5;   
}

#slider li {
    width:210px
}
/*crawlist.net slider CSS*/
</style>

       
<div class="newcon">
<!-- crawlist.net slider starts -->
<div class="slider-container">
<ul id="slider">  
<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
</ul>  
</div><!-- crawlist.net slider ends --></div>

Adding this widget on Homepage

• First log into Blogger, select your blog,

• Go to ‘Layout’ tab and click ‘add a gadget’ from the below space of header

• Select ‘HTML/JavaScript’ from pop up page;

• Copy and paste given codes in content box, configure and Save

• Now hit ‘View blog’ and hover mouse on slider widget’s editing icon wrench;

• And look bottom of web browser and you will see a line, that contains Widget ID;

• Detect your widget id it generally looks like (HTML1, HTML2, HTML3, Blog1) see image below;

• Then, go to ‘Template’ tab, ‘Edit HTML’ and search for your widget ID (using Ctrl+F or Cmd+F) into code snippet;

• You will see chunks of codes starts with <b:section and ends with </b:section>

• Like this

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
        <b:widget id='WIDGET ID' locked='false' title='' type='HTML'>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
        </b:widget>
      </b:section>

• Identify them and place this line (see image) Before the codes chunk

<b:if cond='data:blog.url == data:blog.homepageUrl'>

• and at the end of code this line

</b:if>

 

• And Save template.

Adding this widget below posts

• Go to ‘Template’ tab, select ‘Edit HTML’

• Search for (using Ctrl+F or Cmd+F) into code snippet

<div class='post-footer-line post-footer-line-1'>

• You may find this line twice so ignore the first time, second time copy paste codes and before all codes add this line

<b:if cond='data:blog.pageType == &quot;item&quot;'>

• And after all code paste this line,

</b:if>

• Configure and Save template

How to configure:

• In 'place link' place your links and add your post title in ‘place hover text’

• In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwist use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 200px width and 125px height

• You can delete a slide content by deleting <li> to </li>

• You can add more slide by coping <li> to </li>

• You can also change the default image size by changing value of height and width (red marked)

How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...

Read More

Add 6 stylish list/bullet to Blogger posts

Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.

Arrow style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Minus style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Check style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Plus style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Carrow style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

Star style

.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDfsInYgCvr3jW5BLsj4mkfyabLjqnG80orArBUxz7csJlMT73pCSPtOzAmntfpZYJ1UWrktV2EWjKdYOcKj_Smqq7jb67k75R5NefPaghOd9d5mlbhpdUDknriPGa-9FiFagnzBxriCk/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

How to add:

• Log in to your Blogger, select your blog

• Go to ‘Template’ tab, select ‘Edit HTML’

• Search for ]]>< into code snippet (using Ctrl+F or Cmd+F)

• Before ]]>< copy paste any of style you want to use

• Save template, and see the changes by visiting blog or new post editing

Caution and FAQ:

• Most of Template have default list/bullet style designed into template codes; and those code stays in

.post-body ul {} and .post-body ul li {}

So you your template already have these lines; mark them and delete them. And set my given codes.

• You can’t use two or more style. But if you know little bit of coding then change the CSS class,

.post-body ul {} and .post-body ul li {}
to
.1 ul {} and .1 ul li {}

And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)

So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....

Read More

Add ‘Text to Speech/Read it loud’ option to your Blogger blog

Sometimes site visitors/readers don’t like to read long full articles or they don’t have enough time to read long articles that case not to losing those visitors you can add ‘Text to Speech’ option on your Blogger site. That case you will have better visitor engagement, conversation rate, bounce rate etc. In web there a lot of ‘Text to Speech’ option you can find but most of them are not completely functional. But this service I use it’s cool and offer lots of function; this service will give you complete ‘Text to Speech’ solution with an advance way. Let’s see how to add ‘Text to Speech/Read it loud’ option to your Blogger blog, how to configure and run.

Add ‘Text to Speech/Read it loud’ option to your Blogger

The service we are going to use for adding ‘Text to Speech/Read it loud’ option name is ResponsiveVoice

This service features:

• HTML5-based Text-To-Speech library designed to add voice features to web sites and apps across all smartphone, tablet and desktop devices.

• Supports 51 languages through 168 voices, no dependencies and lightweight

• This is the easiest way to use the spoken word in your app or website.

• Latest HTML5 technology what allows the Speech API for Speech Synthesis and Speech Recognition, Speech Synthesis or more commonly known as Text To Speech (TTS) is now available in most modern browsers, unlike other ‘Text to Speech’ options (Text To Speech engines to render MP3 audio files from text and then download them from servers) HTML5 technology doesn’t follow that, so it super instant and super powerful.

• This service is free forever with (Unlimited Words, All Voices, Voice-Enable your site with one line of code, Dashboard for Voice Features, Voice Message Editor, HTML5 Text to Speech , Multilanguage Voices , Page Welcome Message, Select Text to Speak It , Speaking Menus and Links etc)

How to add:
You can add the ‘Text to Speech’ option in two ways:

1. Put text into a code and embed it to a post, ‘Play’ button to play speech 

• Login to Blogger; select your blog;

• Go to ‘Template’ option; select ‘Edit HTML’

• Search for </head> using (Ctrl+F or Cmd+F) into code snippet

• Copy and paste this code before </head>, and Save template

<script src="http://code.responsivevoice.org/responsivevoice.js"></script>

• Now select a new post/old post from post editor switch to HTML option;

• Copy and paste this line and ‘your text here’ replace with your text.

<input onclick="responsiveVoice.speak(' your text here ');" type="button" value="Play" />

• Switch back to ‘Compose’ part and hit ‘Play’ button to see it working.

2. Turning all text elements to speech; upon selecting the text and hovering links:

• Go to Responsivevoice site, open an account, login

• From Dashboard, you may set up welcome massage

• Tic ‘Select text to speak’ and ‘Spoken page links’

• Select Voice style, put email and website link

• Hit create page code

• Copy the given code from next page,

• Now on other tab, login to your Blogger, select your blog

• Got to ‘Template’ option, select ‘Edit HTML’

• Search for </head> using (Ctrl+F or Cmd+F) into code snippet

• And paste the copied code before </head>, and Save template

Done, you may tell everybody you have ‘text to speech’ system; and that can be turn on by selecting text; so

• Go to ‘Layout’ tab, select ‘add a gadget’ from sidebar

• Select ‘Text’ gadget and in content put announcement (like this site offer’s text to speech option, you can hear article by selecting text’) Save gadget.

After setup process; Check your blog out to see how it working.

This text to speech service is free to use for personal purpose and site; but if you looking for more customizable option and professional solution you may switch their premium version. Adding text to speech service to site is optional option but it enhance visitor engagement to you site, not everybody like to read that case they will find an awesome alternative, So what your thought about this tutorial don’t forget to mention by comment. Chill.....

Read More

6 best Free Email Marketing tools/Newsletter sending services

When you are going to run an online business project you must tell people about your project; allure them to you site and turn them into customers. The easiest way to do that job online marketers basically do Email marketing (proverb goes that ‘Email marketing is the backbone of any kind of online business’) sending newsletter to subscribers. That’s why here I made a list of such email marketing tools/newsletter sending services. And this list made it for beginners and small business projects; so I just listed those services what you can use for free with sending range of 500-5000 subscribers. Read on-

6 best Free Email Marketing tools/Newsletter sending services

1. Mailchimp
Mailchimp is the coolest free email marketing service. Their free plan includes 2,000 subscribers and up to 12,000 emails a month. Mailchimp offers both email templates and the ability to create your own emails from scratch with Drag and drop system, include WYSIWYG editor, subscriber profiles, third party integrations, analytics, customizable templates, a full-featured API to sync existing customer databases, shopping carts, sending plain text emails, Feedburner integration, default opt-in forms, simple dashboard easy to use all the basic features and manage and grow subscriber list.

2. Madmimi
Madmimi is the second best free email marketing service. Their free plan includes 2,500 subscribers and up to 12,500 emails. The free plan includes a variety of useful features including image hosting, reporting and tracking, Google analytics, a third party integrations lots of extension/plugins, sending plain text emails, WYSIWYG editor, default templates and forms.

3. Mailigen
Mailigen introduced their “Epic Free” plan that has all the features of their paid plans for up to 5,000 subscribers. Build your subscriber list faster using advanced web signup forms, drag and drop editor, survey clients, social media integration, reports and tracking, auto responders etc.

4. Target hero
Target hero’s free plan includes 1,000 contacts and unlimited emails. They offers strong contacts  management system that divide your contacts into groups, segment them by demographics, and personalize your message for results-driven, targeted email-marketing with a personal touch, strong  WYSIWYG editor with both one-click templates and build your own, image hosting, HTML and plain text emails, real time analytics, strong spam filters etc.

5. GrowMail
GrowMail’s free package comes up with Sending 2000 emails every Month for free. Unlimited subscribers and all features included. Features are cool too like Unlimited Subscribers allow you to have millions of contacts, subscribers. Unlimited campaigns sending, scheduling email, unlimited Image hosting, templates, Social Media Integrations, Auto-responder, HTML Editor to customize built-in templates, analytics. Spam score checker, Send in any language etc.

6. Elite Email
Elite Email is an old school Email marketing service what offers you to have 500 contacts are free forever, No time limit. 400 ready-to-use templates, social media integration, fully-branded subscription center where your customers can set up their preferences, enter their info and even edit their profiles, Over 80 interactive reports to track your results and ensure maximum email marketing success, Mailing List Management Simplified, powerful & easy drag-and-drop editor, unlimited image storage and easy personalization, spam filters etc.

So try any of these services and grow your business. By the time your project is progressing you can switch up to their premium services for using all features. Some of premium only services offers cost friendly email sending option with lots of cool features and they offers trial you can try them up too (like:-

Get-response
World’s Easiest Email Marketing with Auto-responders, Create, publish and host beautiful, high converting landing pages in minutes, Live Support, better delivery rates, fewer bounces rate and stronger results, 500+ professionally designed email templates and drag and dropping customization, FREE access to over 1,000 stock images, A/B testing up to 5 versions and modern UI. Get-response offers 1 month free trial full featured.

Aweber
Time-Saving Autoresponders, Seamless Integrations WordPress, Facebook, PayPal, Salesforce, Shopify, Heyo and many more to support all of your marketing programs,  Faster Email List Growth Mobile-ready sign up forms and email templates, brading, Easy Importing Migrate your current list in minutes without another opt-in, spam filter, Live Expert Customer Support etc. Aweber offers 1 month free trial full featured.

Constant contact
Constant contact is one of the most comprehensive email marketing applications on the web, with a variety of tools, such as surveys and event marketing add-ons, built-in analytics, impressive customizable template database and social sharing features. They offers 2 months free trial to try all of campaign types as often as you like by sending to up to 100 contacts.

Sending newsletter to subscribers is a guaranteed audience; everyone who signs up will receive your newsletter that means you will get a better Conversion Rates with your targeted audience (that’s utterly means success). So sign up any of these services and turn your entrepreneurship to success profession. What service you going to use don’t forget to mention. Goodluck.....

Read More

3 Responsive Navigation menus for Blogger

Recently I published high-end CSS3 made 2 different hover styled navigation menu also I published a cool multipurpose dropdown menu too. But none one of them are responsive. Those menu works fine on non-responsive template but if you using responsive template (adapts any screen size, tabs and mobile phone) also you turned off default mobile view on mobile devices then those menu using is worthless. That case we use responsive navigation bars. For your consideration here I am publishing 3 of coolest responsive navigation bars for your responsive templates. They doesn’t come up with dropdown menu but coming soon (working on that), made with CSS, HTML, CSS3 and jQuery. Let’s see how they look like and how to add them on your Blogger blog.

Black responsive navigation menu

Black oriented gradient colored; equipped with cool CSS3 transition effect, Google font.

Live demo: (Click here)

Codes:

<div id='ks-pluto'>
<ul><!--crawlist.net menu starts-->
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Tutorials</span></a></li>
   <li><a href='#'><span>Customization</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul><!--crawlist.net menu ends-->
</div>


<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#ks-pluto ul,
#ks-pluto li,
#ks-pluto a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#ks-pluto {
  border: 1px solid #000000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#ks-pluto ul {
  zoom: 1;
  background: #47474e;
  background: -moz-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #47474e), color-stop(100%, #2f2f33));
  background: -webkit-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -o-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: -ms-linear-gradient(top, #47474e 0%, #2f2f33 100%);
  background: linear-gradient(top, #47474e 0%, #2f2f33 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#ks-pluto ul:before {
  content: '';
  display: block;
}
#ks-pluto ul:after {
  content: '';
  display: table;
  clear: both;
}
#ks-pluto li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#ks-pluto li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
  -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
#ks-pluto li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #47474e;
}
#ks-pluto li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #171718;
  border: 1px solid #000000;
  -moz-box-shadow: inset 0 5px 10px #000000;
  -webkit-box-shadow: inset 0 5px 10px #000000;
  box-shadow: inset 0 5px 10px #000000;
}
#ks-pluto li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #47474e;
}
#ks-pluto li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #171718;
  border: 1px solid #000000;
  -moz-box-shadow: inset 0 5px 10px #000000;
  -webkit-box-shadow: inset 0 5px 10px #000000;
  box-shadow: inset 0 5px 10px #000000;
}
/*crawlist.net CSS ends*/
@media screen and (max-width: 768px) {
    #ks-pluto li {
  float: none;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}   
}
</style>

Black and blue responsive navigation menu

Faded black (flat) colored, equipped with cool CSS3 transition effect, Google font and blue underline appears on link hover.

Live demo: (Click here)

Codes:

<div id='ks-menu'>
<ul><!--crawlist.net menu starts-->
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Tutorials</span></a></li>
   <li><a href='#'><span>Customization</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul><!--crawlist.net menu ends-->
</div>


<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);

#ks-menu {background: #333;
  width: auto;
}

#ks-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  display: block;
  zoom: 1;
}
#ks-menu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#ks-menu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#ks-menu.align-right ul li {
  float: right;
}
#ks-menu.align-center ul {
  text-align: center;
}
#ks-menu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#ks-menu ul li a:hover {
  color: #fff;
}
#ks-menu ul li a:hover:before {
  width: 100%;
}
#ks-menu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#ks-menu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background:#3CF;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#ks-menu ul li.last > a:after,
#ks-menu ul li:last-child > a:after {
  display: none;
}
#ks-menu ul li.active a {
  color: #f5f5f5;
}
#ks-menu ul li.active a:before {
  width: 100%;
}
#ks-menu.align-right li.last > a:after,
#ks-menu.align-right li:last-child > a:after {
  display: block;
}
#ks-menu.align-right li:first-child a:after {
  display: none;
}
/*crawlist.net CSS ends*/
@media screen and (max-width: 768px) {
  #ks-menu {  -moz-box-shadow: 2px 2px 5px #d5d5d5;
-webkit-box-shadow: 2px 2px 5px #d5d5d5;
box-shadow: 2px 2px 5px #d5d5d5;

}

  #ks-menu ul li {
    float: none;
    display: block;

  }
  #ks-menu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
          -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
  }
  #ks-menu ul li a:hover {
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    background:#4c4c4c;
  } 
  #ks-menu ul li.last > a,
  #ks-menu ul li:last-child > a {
    border: 0;
  }
  #ks-menu ul li a:after {
    display: none;
  }
  #ks-menu ul li a:before {
    display: none;
  }
}
</style>

 

Ocean blue responsive navigation menu

Blue oriented gradient colored; equipped with foldable jQuery featured touch menu on mobile, Google font. 

Live demo: (Click here)

Codes:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  border-radius: 4px;
  border: 1px solid #2698e9;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1;
  background: #6bb9f0;
  background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
  background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
  background: linear-gradient(to top, #54aeee, #82c4f2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;
 
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 20px 25px 21px 25px;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li:first-child > a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
}
#cssmen.align-right > ul > li:first-child > a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  background: rgba(125, 125, 125, 0.04);
}
#cssmenu > ul > li:after {
  content: '';
  position: absolute;
  top: 18px;
  right: 0;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .15;
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:after {
  right: auto;
  left: -1px;
}
#cssmenu > ul > li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: -1px;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .35;
  background: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:before {
  right: auto;
  left: 0px;
}
#cssmenu > ul > li:last-child:after,
#cssmenu > ul > li:last-child:before {
  display: none;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li > a {
  padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 18px 25px 19px 25px;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
  color: #444444;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 20px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #fcfefb;
  border-bottom: 2px solid #fcfefb;
  width: 18px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 25px;
  top: 30px;
  display: block;
  width: 18px;
  height: 2px;
  background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #444444;
}/*crawlist.net CSS ends*/
</style>
   
<div id='cssmenu'>
<ul><!--crawlist.net menu starts-->
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Tutorials</a></li>
   <li><a href="#">Customization</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul><!--crawlist.net menu ends-->
</div>

<script>
(function($) {

  $.fn.menumaker = function(options) {
     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
});

});
})(jQuery);
</script>

How to add:

• Log into your Blogger blog; select your blog

• Go to 'Layout' tab; click 'add a gadget’, see image

• Select 'html/javascript' from Pop-up menu,

• Copy following codes and configure

How to configure:

• Change # with your label link and title word with your label name

• Save template; and check your blog out for live preview.

Compatibility

• These navigation menus are compatible with any default and standard designed template. If its design breaks on any template remove it.

• These menus are compatible with any updated Web browser.

Caution

• Make sure your template has this line in <head> area

<meta name="viewport" content="width=device-width, initial-scale=1">

• If your template already has this line, don’t copy twice (For Third number menu) 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

So what your feedback about these menu don’t forget to mention, Goodluck……

Read More

Add 4 Stylish 3D buttons to Blogger blogs

Someday ago I published a cool post featuring 5 cool CSS3 shaking button for Blogger blogs; Here I am publishing another super duper button base post go by the title of add 4 stylish 3D buttons to Blogger. These buttons made with 3D CSS3 Perspective formula. Looks modern and easy to add and configure. These buttons you can use in post for Linking (Download now, Submit now or Subscribe). Let’s see how they looks like and how to add; Read on:-

Add 4 Stylish 3D buttons to Blogger blogs

Live Demo: (Click Here)

1. Downwards

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;   
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3da:after{
    width:100%;
    height:42%;
    left:0;
    top:-40%;
    background:#53a6d7;
    transform-origin:0% 100%;
    transform:rotateX(90deg);
  
   
}
.ks-3da:hover{
    transform: rotateX(-45deg);  
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3da" href="http://google.com" target="_blank">Submit</a>
    </p>  

2. Upwards

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3db:after{
    width:100%;
    height:40%;
    left:0;
    top:100%;
    background:#53a6d7;
    transform-origin: 0% 0%;
    transform:rotateX(-90deg);
}
.ks-3db:hover{
    transform:rotateX(35deg);  
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3db" href="http://google.com" target="_blank">Submit</a>
    </p>  

3. Left to right

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;   
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3dc:after{
    width:20%;
    height:100%;
    left:-20%;
    top:0;
    background:#53a6d7;
    -webkit-transform-origin:100% 0%;
    -webkit-transform:rotateY(-90deg);
    -moz-transform-origin:100% 0%;
    -moz-transform:rotateY(-90deg);
    -ms-transform-origin:100% 0%;
    -ms-transform:rotateY(-90deg);
    transform-origin:100% 0%;
    transform:rotateY(-90deg);
}
.ks-3dc:hover{
    transform:rotateY(25deg);  
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3dc" href="http://google.com" target="_blank">Submit</a>
    </p>  

4. Right to left

Preview:

Codes:

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*crawlist.net CSS starts*/
.ks{
    border:none;
    position:relative;
    background:none;
    padding:22px 80px;
    display:inline-block;
    text-transform:uppercase;
    margin:15px 30px;
    color:inherit;
    letter-spacing:2px;
    font-size:1em;
    outline:none;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    cursor:pointer;
}
.ks_perspective a {    color:#fff;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
}
.ks_perspective a:hover {     color:#fff;
    text-decoration:none;   
}
.ks:after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    transition:all 04.s;
}
.ks_perspective{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
    display:inline-block;
}
.ks-3d{
    display:block;
    background:#5cbcf6;
    outline:1px solid transparent;
    transform-style:preserve-3d;
}
.ks-3d:active{
    background:#55b7f3;  
}
.ks-3dd:after{
    width:20%;
    height:100%;
    left:100%;
    top:0;
    background:#53a6d7;
    -webkit-transform-origin:0% 0%;
    -webkit-transform:rotateY(90deg);
    -moz-transform-origin:0% 0%;
    -moz-transform:rotateY(90deg);
    -ms-transform-origin:0% 0%;
    -ms-transform:rotateY(90deg);
    transform-origin:0% 0%;
    transform:rotateY(90deg);
}
.ks-3dd:hover{
    -webkit-transform:rotateY(-15deg);
    -moz-transform:rotateY(-15deg);
    -ms-transform:rotateY(-15deg);
    transform:rotateY(-15deg);
}
/*crawlist.net CSS ends*/
</style>
    <p class="ks_perspective">
   <a class="ks ks-3d ks-3dd" href="http://google.com" target="_blank">Submit</a>
    </p>

How to add:
When you writing post, Switch HTML part (Compose/HTML), And paste your desired button’s code, in 'Google.com' replace your link, and change ‘Submit word with any word you want, Go back to Compose part to continue.

Compatibility

• Any web browser’s latest version will support these buttons (except-IE)

• Any template will support these button; if doesn’t remove them.

So, any feedback leave with comment, I will publish cooler stuff for bloggers soon stay touch. Chill…..

Read More

7 Best Feedback & Online Help desk software/scripts

If you needs to know what your site/service users thinks about your web project you may be go for contact form or forum discussion system. But those methods are kind of old schooled for high-end and customer base sites. In that case Feedback & Online Help desk software can help you a lot; cause these programs are developed for instantly collect feedback from customers/visitors and prioritize feedback from customers who are allows posting issues or suggestions, and others vote the feedback up or down. So as admin of site/project you will get a future reference about your service/product also you can take direct action based on feedback you getting. Here in this list I am gathered the best 7 Feedback & Online Help desk software/scripts; read on and place them on your site.

7 Best Free & Open-Source Feedback & Online Help desk software/scripts

User Voice
UserVoice makes Product Management & Customer Support Software to help companies build better products and support their users; UserVoice communities are the easiest way to turn customer feedback into action: 1. Share ideas. 2. Vote up the best. 3. Respond, implement & repeat. This program offers Custom Look & Feel, Idea & Comment Moderation, Personalized Views and Notifications, Terms of Service, Multi-Language and Mobile Support, Private Forums.

Get Satisfaction
Get Satisfaction is Comprehensive customer community software. Allow customers to connect with companies and other customers. It provides a variety of plans for enterprises and small organizations. Features; Use case configuration: Use conversation types (questions, problems, ideas, and praise), Self-service customer support capabilities. Deflect customer support cases while helping customers get faster answers to questions, Customer feedback capabilities, Gamification features. Recognize and reward experts, Design a customer community that is a natural extension of your online presence, build in SEO, Social media integration, Multi language, Mobile optimization.

Use response
All-in-one Support Suite Gather ideas, organize online documentation and provide support with customer feedback software, help desk system packed in one simple solution. It features; Build Your Plan Based on Collected Ideas & Questions, Self-Service Community, Social Networks integration, Email Requests, Widgets, Live Chat, Restful API, Private Requests, Announcements , Moderation, Files & Attachments, Customized Reports & Analytics, Polls, Dashboard & User Cards, canned responses , Custom Fields & Properties.

Freshdesk
Freshdesk is award-winning, online help desk software that allows you to support customers over email, phone, the web or even through Twitter and your company's Facebook page along with Email ticketing, Reusable replies with canned responses, Add tags to tickets, solutions and contacts, Time tracking, Integrated customer satisfaction surveys, Multi-Channel support,  Agent collision detection, Helpdesk automation, SLA management, SEO optimization, Mobile customer support iOS, Android, Mobile optimized HTML5 app, Multi-language, Customizable popup and embedded Feedback widget, reporting, Customizations (CSS, Layouts) , Security SSL, Email marketing.

User Echo
User Echo is basically a customer and community platform that provides voting, social networking integration and user moderators. It is reliable tool for driving product innovation and improves your customer service experience, as claimed by its developers. With this utility you can simply organize customer feedback, employ ticketing support system with private topics and even live chat with clients. A couple of other aspects include merging topics, voting on comments, voting for topics, private discussions, ordering and filtering, subcategories, full text search and topics tagging.

Userrules
UserRules empowers your users to submit views & ideas, discuss and share opinions, vote and take part in polls, discuss and track relevant issues and follow on feedback for your company and gives you single interface to manage your community forum, customer-support platform and user analytics all in one place. Also offers Ease of Integration, Facebook Integration, ins and out Customizations.

Idea Informer
Idea Informer is a powerful feedback management tool. It's a platform for putting together your visitors' ideas and recommendations on your project. Instead of conducting expensive research, ask your users what they really want. The tool allows users leave comments on one’s website via an interactive widget. Idea Informer also caters a free feedback extension for Joomla CMS.

Keeping touch with your customers and service user is very important and using Feedback/Online Help desk software on website solves that big problem without tension. So which one you will be using don’t forget to mention.

Read More