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.
#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.
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:-
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…..
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.
