7+ Best Comment System for Blogger [Third Party]

Today we are going to see some best comment system for blogger. The comment system is a major part of a blog. Allowing comments can improve the user engagement and decrease bounce rate of a blog amazingly. I have already told in my many posts that comments could keep a blog post alive. So we should provide a user-friendly comment system in our blogger blog.

Blogger default comment system has almost every feature for having user comments. But if we wish to make it little different or take the comment system to the advanced level, we can choose one of the following best third-party comment systems for blogger. I have listed almost every popular third-party comment platform so you may found the list pretty helpful in order to switch the default blogger comment platform.

Best Comment System for Blogger – Complete List

Here I have listed some most popular and top-rated third-party comment platform. All of these comment platforms may use on both blogger and WordPress. I will try to highlight some vital features of these following comment system to make you clear why should you implement that on your blog. Now let’s take a look at the list.

Disqus Comment System for Blogger

Disqus is one of the most popular, widely used and best comment system for blogger. If you don’t like the default blogger comment system and wish to bring your blog’s comment system to the next advance level, Disqus is highly recommended for you. In fact, I personally love Disqus comment platform for its advanced features, strong moderation panel and a huge community of quality commenters.

Also, Disqus will serve more spam free comments from real commenters. Moreover, your readers will have an advance comment environment with all latest commenting extensions like rank, comment feedback, like, dislike, avatar, hovercard, comment sharing and much more. Here is a complete guide you will find very helpful on how to add Disqus on Blogger?

Livefyre Comment System for Blogger

Livefyre is another amazing and one of the best third-party comment system for blogger. Actually, not only for blogger but also it supports other blogging platforms. Livefyre works great in case of increasing readers engagement by providing an advance commenting environment. It has many advanced commenting features.

Presently, it generates a responsive comment form with some attractive features like comment share, attachment on comments, image insertion avatar, follower etc. Actually, we can consider it as an alternative of Disqus. However, this rapidly growing comment system could be a great choice but I would like to remind you that it is not more popular than Disqus.

Intense Debate Comment System for Blogger

You may have heard the name before or seen Intense Debate comment system around the web because it is one of the best comment system for blogger, WordPress, and many other CMS. In addition, it has a large number of commenting features and functionality to take comment system to the next level. It is truly simple to integrate with any CMS.

Moreover, your blog commenters will feel very flexible to leave his valuable comment through this comment platform. Also, people will be able to get their own profile, social sharing opportunity for their comment, comments via email facilities etc. As an admin, you will have plugins, widgets, social integration, strong moderation panel etc. Therefore, we can consider it as one of the best comment system for blogger.

Vicomi Comment System for Blogger

Actually, Vicomi is a complete package of many effective marketing and user engagement increasing tools. It has many products based on many free and premium plans. Among them, the comment system is very successful and highly mentionable. Moreover, it released a plugin for WordPress to integrate the comment system in your WordPress blog.

Of course, it is also very easy to integrate with blogger. In fact, it has some other attractive offers for its user like content marketing, monetize blog by showing related contents etc. Finally, as a comment system, I will say you can use it in your blog without any hesitation because the comment form generated by Vicomi is truly advanced and user-friendly.

Vuukle Comment System for Blogger

Vuukle is completely free and one of the best comment system for blogger. Also one can generate his blog via its revenue-generating program. Although it is not popular as Disqus but the awesome service of Vuukle is making it more and more acceptable to many authors and blog admins day by day.

It generates an HTML/JavaScript code which works with any type of modern CMS including Blogger, WordPress, Joomla etc. The asynchronies loading technology will make this advance comment system load fast to increase your web page overall loading speed. Moreover, the comment form is completely responsive and flexible for readers and commenters.

Popular Social Media Comment System for Blogger

We were talking about some popular third-party comment system in the above part of the post. Now we are going to focus on some popular social media comment platform. As a matter of fact, social comment platform has almost same popularity like many other third-party comment systems. For this reason, I am going to let you know about facebook and google plus comment system for blogger.

Facebook Comment Platform for Blogger

We all know that Facebook is the most popular social media service. Among many products of Facebook Developers, comment platform is very popular and widely used. In fact, when people think to implement a social comment system to their blog, first of all, they think about Facebook.

You may have already seen in many popular online magazine and news site is using this amazing comment platform. You can actually inspire people by using Facebook comments because people will be able to comment by using their Facebook profile. Moreover, you will get a spam free and easy moderation panel too. I recommend you to follow this guide to add facebook comment box in blogger.

Google Plus Comment Platform for Blogger

Another amazing social media comment platform is google plus comment system for blogger. I have already published a tutorial to let everyone know pros, cons, and steps to add this amazing comment platform in blogger. In short, I can say this one is the second most popular social media comment platform that is used by many bloggers.

If I wish to mention some features of this comment platform I will say, you will have spam free comments, leaving a comment to your blog will become more easy for your readers and finally, you will get 10 times better social media exposure. All things considered, this one is also recommended if you want to implement a social media comment system in your blog. This guide will show you how to enable Google plus comments in Blogger and its Pros, Cons & Features.

Pros of Using Third-Party Comment System

Comment Moderation: This is one of the major hesitation for a blogger to prevent the spam comment. Robot spam could be protected through many advance spam filter software or plugin but human spam is still a great threat. These third-party comment system for blogger will ensure you to protect your blog completely from robot spam and decrease human spam through many special spam filter.

Advance Comment Platform: All of the above third party comment system is specially optimized to improve the user experience and provide many advanced features to your blog commenters. Therefore, your readers will have more flexibility to leave their comment. Also, they will find some advanced features like comment share, comment avatar, hovercard, advance comment editor etc.

Increase Traffic and User Engagement: Obviously, relevant comments can make your blog post more informative. Also, people can speak their mind more easily if you can provide a flexible and advanced comment system to them. More comments mean more words for your blog post, more accurate solution, more user feedback and finally more traffic.

If you truly want to take the default blogger comment platform to the advanced level, you should choose one of the best comment system for blogger from the above list. Actually, if you use the default one, you can only redesign or customize blogger comment platform to make it more attractive but using third-party comment system will let you enable some advance commenting features with suitable outlook too.

Read More

How to Add Facebook Comment Box in Blogger

You can add Facebook comment box in blogger to accelerate the comment system for your readers. Presently, almost every internet user has a Facebook account. For this reason, allowing comments via Facebook can increase high quality and spam free comment of your blog.

Actually, comments are very important for every blog post because it can keep that post alive. If you can moderate the comment carefully without destroying the relevancy of your blog post and make the entire comment section spam free, your blog post will have a significant priority from search engines. Therefore it is very important to give your readers a flexible comment platform to leave their valuable comment.

In this post, you are going to learn how to add facebook comment box in blogger. Actually, the Facebook comment system is becoming more and more popular day by day. You may have seen that many bloggers are using various third party comment system. Among them, the Disqus comment system for Blogger is widely used.

As a matter of fact, the goal of using third party comment system is increasing the user experience and engagement. If you don’t want to use third party comment platforms but wish to go with a social comment system like Facebook or Google plus comments for blogger, here is the solution for you.

Create a Facebook App to Get the App ID.

You must create a Facebook App and get the App ID to add Facebook comment box in blogger. Don’t worry. It is not a big deal. Follow the following step by step guide to do that.

1. Log in to your Facebook account and then visit Facebook developers page. You will see a drop-down named “My Apps” at the top right corner.

2. Hover over the drop-down and click on the “Add a New App” link as shown below.

3. A popup window will open. You have to provide a display name (The name of the app) and contact email address like below. After that click on the “Create App ID” button.

4. Now we have to add our website address to this newly created Facebook comment app. For doing this, take a look at the left menu and click on the “settings” section.

5. In this basic settings section, you have to put the “App Domains” as shown below. After that, you have to click on the “+ Add Platform” > Choose “Website” icon to assign your website with this app. Finally, put your site URL with “http or https” and the trailing “/” at the end of the URL. Now click on the “Save Changes” button.

So you have successfully created a Facebook app to add Facebook comment box in blogger. Now it is time to add it to our blogger blog. So let’s see how to do that?

Add Facebook Comment Box in Blogger.

1. To add Facebook comment box in blogger, you have to log in to the Blogger Dashboard > go to the Theme > Edit HTML. Don’t forget to backup blogger template before editing code.

2. Find the ending </head> tag and paste the following open graph meta tags right above the </head>.

<meta content='Facebook-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-Profile-URL' property='fb:admins'/>

Note: You must replace the highlighted Facebook-App-ID and Your-Facebook-Profile-URL with your own.

3. Now find the line “<b:includable id=’comments’ var=’post’>“. Expand it. Scroll down a little bit and find the ending “</b:includable>”.

4. Copy the following code and paste it right above the ending “</b:includable>” code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.url" expr:title='data:post.title' expr:xid='data:post.id' data-width="100%" data-numposts="5" data-order-by="social" data-colorscheme="light"></div>
</b:if>

Remember, it is a pre modified code placed inside a blogger conditional tag to show the facebook comment box only on the post pages.

5. Finally, you have to scroll all the way down to find the ending “</body>” tag. After that, paste the following JavaScript right above the “</body>” tag as shown below and click on the “Save Theme” button.

<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

You have successfully added Facebook comment box in blogger blog. Go to your blog and click on a post to check the newly added comment platform is working perfectly. At this point, you will see both Blogger threaded and the Facebook comment box is working together. So we have to turn off the default blogger threaded comment. To do that, follow the following steps:

1. Go to Blogger > Settings > Posts, comments and sharing section.

2. Now change the “Comment Location” to “Hide” as shown above. Finally, click on the “Save settings” button at the top right corner. You are done.

Facebook Comment Moderation and Notification.

Comment Moderation: To moderate Facebook comments, Login to the Facebook Developers page > Click on the “Tools & Support” tab from the navigation menu > Find the “Comments Moderation Tool” link and click on it.

Otherwise, use this direct Facebook Comment Moderation link and choose the newly created comment app from the drop-down.

Comment Notification: By default, the comment notification is enabled. If you wish to turn it on or off, go to the comment moderation panel and click on the “Settings” tab as shown above.

Pros of Facebook Comment System.

Easy To Comment: I have already said that almost every Internet user has a Facebook account and they always remain signed in there. Therefore, allowing Facebook comment in your blogger blog will let them leave their comment within a single click. Which is very user-friendly and encouraging for commenters. No registration, no sign in, no hesitation will surely improve the entire comment system of your blogger blog.

Spam Free Comments: Automatic comment spam is truly annoying for bloggers. By using Facebook comment box in blogger, you will be able to say goodbye to automatic spam bot comments. This is one of the most important features of Facebook comment platform. Facebook has its own spam filter to prevent robots from creating a Facebook account.

Effective Comment Bridge: Facebook comments will be shown both on the blog and on the Facebook. In fact, if someone leaves a comment on the Facebook for the same conversation, that will also be shown under your blog post. This will dramatically increase the user engagement and interaction. Also, there will be a great chance to become a post viral on Facebook through that conversation.

SEO Friendly Comments: Obviously, Facebook comments are completely SEO friendly. Many people still have the doubt that Facebook comments are not accessible and indexable by Google. Presently, it is not true. The various case study shows that every single comment generated by Facebook comment system will remain under the blog post and will be crawlable and indexable by search engines.

Chance to get more traffic: Millions of people spend a lot of time on Facebook every day. Among them, when someone comments on any of your blog posts, this activity of that person will also be shown on his news feed. This type of auto promotion will bring more readers, followers, commenters and valuable social traffic for your blog.

Cons of Facebook Comment System.

If someone thinks about his privacy and don’t want to expose his Facebook profile publicly, he may hesitate to leave a comment. Even, sometimes people wish to leave a comment as anonymous. Therefore, many blog commenting platform provides that facility. But in case of Facebook comment, there is no option to do that.

To add Facebook comment box in blogger you have to allow some additional scripts to load in your blog. It may slow down your site a little bit. Another important thing is, you must manually update this Facebook comment box plugin to get the optimum result and omit any security issue. It is a little time consuming and hesitating.

You will have a little customization option for the Facebook comment box. For this reason, it may not look like as the way you want.

People will only have the option to like the individual comment but there is no way to subscribe or share comments on other social media. On the other hand, you will have all of these effective functionalities on many other comment platforms.

If you wish to migrate to any other comment platform, you will not be able to do that with your existing Facebook comments because these comments are not synchronizable. Also, the way to moderate comments manually is little complicated.

I think you have got almost every idea to take the correct decision whether you need to add facebook comment box in blogger or not. Moreover, I have given the complete step by step solution with the screenshot of the entire process. Hope you will like this tutorial and share with your friends on social media. Also, share your thoughts by leaving comments.

Read More

10+ Free Travel Blogger Templates – Best and Responsive

Get some top-ranked free travel blogger templates to create a beautiful travel blog. Travel can be your passion and you may need to bring the adventure you went through during the tour in front of your readers. On the other hand, you may wish to start a small online tourism solution. For both cases, you must create an eye-catching and professional looking travel blog or website.

Therefore I am listing some beautiful and professional looking free travel blogger templates. People usually need to get some idea before planning their vacation to a new destination. You can help them by representing their required information through your travel blog. Also, it will help you gain the trust of your new clients if you need to plan a tour for them.

No matter what’s your purpose of creating a travel blog, this list contains some latest and responsive travel templates. In fact, I am creating the list of SEO friendly travel templates to take you one step forward and make your blog or website out of the box.

Related:

• How To Start A Niche Blog (And Why You Should)?.
• How to Add Font Awesome Social Icons in Blogger.

List of Free Travel Blogger Templates:

I know there are some other free lists is available with lots of templates but I found most of those are backdated with low-quality templates. Although this list will not contain a huge number of free travel blogger templates, I am ensuring you the quality. So let’s take a look.

Trendy Travel Blogger Template

DEMO DOWNLOAD

Trendy Travel is an amazing choice for travel, lifestyle or adventure blog. Also, it will be a perfect choice to create a free travel blog for both personal and professional uses. It has a simple layout with an amazing homepage slider and two responsive navigation bar. Travelers will be able to represent their experience in an organized manner by using this template.

Scoop Travel Blogger Template

DEMO DOWNLOAD

Scoop Travel is a highly professional and perfectly designed template to create an eye-catching travel blog. Some latest features and gadgets make it one of the best free travel blogger templates. Moreover, the simple layout and a highly professional homepage slider give this template a unique look. Therefore, choosing this template for building your free travel blog will surely be a clever decision.

Travelista Tour Blogger Template

DEMO DOWNLOAD

Travelista Tour is a very clean and lightweight free travel blogger template. Among many features the homepage slider, responsive nav bar, eye-catching footer and two column based homepage layout is mentionable. I personally love this template because it is technically optimized for creating a simple travel blog. This lovely template is created by “Beauty Templates”. In fact, the free version of this template is good to go but purchasing the premium version will allow you to remove the footer credit too.

Sora Travels Blogger Template

DEMO DOWNLOAD

Obviously “Sora Templates” is one of the most popular third-party blogger template provider out there. This template is one of the creations of them so there is no doubt that you can create your travel blog by using this template without any hesitation. In fact, this template is full of features and functionalities.

Every menu item contains icons beside them. Also, it contains two fully responsive menu bar, one amazing slider and some extended blogger widgets. The basic layout is simple and clean. It has no sidebars but some widgets like social follow buttons, read more buttons, recent post widget, custom popular post widgets, subscription box, custom footer etc.

Travel Plus Blogger Template

DEMO DOWNLOAD

Travel Plus is not the latest template but many travel blogger like it and using it. Actually, this simple template has a responsive design but not as attractive as above items. It contains two nav bar, one homepage slider, and a basic blog layout. In addition, you will find this template advertisement ready.

Travel Plan Blogger Template

DEMO DOWNLOAD

Travel Plan is a creation of “FlexiThemes”. This template is pretty similar to the above one. Obviously, it is responsive and SEO optimized but not recommended for creating a highly professional travel website. In my opinion, you can use this template for making a personal travel blog. Like the above one, it also contains two nav bar, one slider, and a relevant background image.

Top Travel Blogger Template

DEMO DOWNLOAD

Top Travel is another creation of “FThemes”. Actually, this simple template is suitable for making a personal travel blog. Among some important feature, the slider, responsive menu, simple layout and three column based footer is noticeable. A few days ago, it was a most popular free travel blogger template for travel agencies.

My Travel Blogger Template

DEMO DOWNLOAD

My Travel is a WordPress style blogger template which is highly suitable for travel news or travel magazine websites. It is truly a beautiful creation of “NewWpThemes”, a well known third party theme provider. In my opinion, it is one of the best free travel blogger templates for travel news magazines. It has three column based layout with a slider and some custom widgets. Also, this template is ads ready.

Easy Travel Blogger Template

DEMO DOWNLOAD

Easy Travel is another simple free travel magazine blogger template developed by “FlexiThemes”. It is almost similar to the above template. However, you will find some additional features and designs in this template. It has a fixed background image which makes this template more suitable for a travel blog.

World Travel Blogger Template

DEMO DOWNLOAD

World Travel is also known as blue beauty travel blogger template. Actually, this simple travel magazine template is created by “FThemes”. It has three column based homepage and four column based footer layout. You will find this template fully responsive, advertisement ready and SEO friendly.

I have tried to list all latest and advanced free travel blogger templates above. Obviously, you can suggest me if I have missed any latest and useful template on the above list. Also, I always appreciate getting feedback, comments, and social share. Hope this list will help you to chose your desired template.

Read More

How to add contact page in blogger

Blogger contact form is very important to give your readers the opportunity to communicate with you. Adding a contact form to your Blogger blog is not so tough. There is a Blogger Contact Form widget available in the list of Blogger’s default widgets. But a few days ago, It was pretty tough because there was no such kind of widget available out there. Today we will learn how to add a stylish Blogger contact form in a static page?

In this way, we will make a contact page for our blogger blog. Blogger’s default contact form widget is very fresh and lightweight. To make it more attractive, I will provide some beautifully designed Blogger Contact Form widget. You will be able to use those in a contact page of your blogger blog. So let’s start.

How To Add/Enable Blogger Contact Form In Blogger?

First of all, we will have to add the blogger contact form widget anywhere in our blogger blog. This will enable the functionality of the contact form. Otherwise, we will not receive emails from our contact forms. To do that, first of all:

1. Sign into your blogger account.
2. Go to the Blogger Dashboard/Overview.
3. Select Layout section from the left menu.
4. Click on the Add a Gadget (Sidebar/ Footer will be better) > More Gadgets.
5. Click on the Blue Plus Button of the Contact Form Gadget and then Save it.

You have successfully added the Blogger Contact Form Widget in your blog. Now it is time to hide this default blogger contact widget because we are going to make our stylish contact form in a static “Contact Us” page.

How To Hide Default Blogger Contact Form?

To hide this default Blogger Contact Form, Go to the “Template section and click on the Edit HTMLbutton”. Now find the style ending code : ]]></b:skin>. Paste this small CSS code just above this. Save your template and you are done. Reload your blog and you will see the default contact widget disappears.

Code :

div#ContactForm1 {
display: none !important;
}

Insert Font Awesome Icons In Blogger:

I have used some Font Awesome icons in these custom blogger contact form. So you will have to insert this style sheet into your blog. To do this:

• Go to the Template section > Click on Edit HTML > Find the ending head : </head>
• Copy the code and paste it right above the “</head>.”

Code :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

• Click on the “Save Template” button. You are done.

Note: If your template has already contained this code then you don’t have to implement this twice.

How To Add Blogger Contact Form In A Static Page?

Now we can create our static Contact Us page for blogger for applying a stylish and eye catching contact us form. For doing this, we must create a contact us page on our blog. If you already have a contact us page, you can use it, but if you don’t have, you can create it in this way.

• Go to the Pages section and click on the New page button as shown below:

• Fill up the Page Title with Contact Us/Contact. (The name of your contact page). Bring this page into HTML mode by clicking on the HTML tab.
• Now go to the Page Settings Options. Click on it. Select Readers Comments “Don’t allow, hid existing”. Click on done button. See the screenshot to become clearer:

• Now choose the Blogger Contact Form design you like most from the list below. Copy the code and Paste it in your contact page as shown above. Publish the page and see the magic.

1. Blogger Contact Form Design 1:

This is a beautiful and responsive blogger contact form. It has a simple and attractive design. Also, this form has some additional features. It has a clear button to make the text area empty with one click. It has some social buttons to notify users about social pages.

Code :

<style>
.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD06_uCRhPGZRu_t645T8JJ-st31QkhdugKXH-s715HA5hfNPcbUwupHl9XQp_wfi5zYFIyzXmbvvZLBzY1oADustZ0EjEcDXJgksH8zECuvobiKTTVbCAJdHHyjhiZuhuHI6Vpjnq54Yx/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}
.srbtn{display:inline-block;}
.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}
.cform-button:hover {background-color: #2980b9;color: #fff;}
.btn-reset:hover {background-color: red;color: #fff;}
.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}
.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}
.b-social-buttons{list-style-type:none;text-align:center;}
.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}
.b-social-buttons li a{color:#333;text-decoration:none;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}
</style>
<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br />
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div>
<h3>Our Social Sites</h3>
<ul class="b-social-buttons">
<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>
</ul></div></form></div>

Configuration:

• This form uses some font awesome icons. So, you must install the font awesome library as I have shown above.
• If you get the “https” error message while installing this widget then simply “Dismiss” this and click on the update button again because if we use https ever then all of the resources of this form will redirect automatically.
• For using social buttons, simply replace the highlighted “#” with your twitter, facebook and youtube channel URLs.

2. Blogger Contact Form Design 2:

Code :

<style> .contact-form-widget {color: #000;margin-left:auto;max-width: 100%;margin-right:auto;padding: 0px;width: 600px;} .form_name, .form_email {float:left;width:48%;padding:5px;} .form_message {padding:5px;} .contact-form-name, .contact-form-email {font-size:16px;width: 100%;height:40px;max-width: 100%;margin-bottom: 10px;padding:10px;} .contact-form-email-message {height:100px;width:100%;font-size:16px;max-width: 100%;padding:10px;margin-bottom:10px;} .contact-form-button-submit {font-size:16px;height:30px;border-color: #C1C1C1;width: 20%;background: #E3E3E3;max-width: 20%;color: #585858;margin-bottom: 10px;} .contact-form-button-submit:hover{color: #000000;border: 1px solid #FAFAFA;background: #ffffff;} </style> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="form_name"> Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form_email"> E-mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="clear: both;"> </div> <div class="form_message"> Message *: <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br /> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div>

3. Blogger Contact Form Design 3:

Code :

<style> .contact-form-widget { -moz-border-radius: 5px; -webkit-border-radius: 5px;  background-color: #eaeaea; background: -moz-linear-gradient(top, #ffffff, #eaeaea);      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,    #ffffff), color-stop(1.0, #eaeaea));      color: #444;      border: 1px solid #cacaca;      margin: 0 0 25px;      max-width: 96%;      font-size: 1.4em;      padding: 8px 10px; } .contact-form-name, .contact-form-email { width: 50%; max-width: 50%; margin-bottom: 10px; } .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } </style> <div class='widget ContactForm' id='ContactForm2'>   <div class='contact-form-widget'>     <div class='form'>       <form name='contact-form'>         <p>Name</p>         <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>         <p>E-mail *</p>         <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>         <p>Message *</p>         <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>         <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>       </form>     </div>   </div> </div>

4. Blogger Contact Form Design 4:

Code :

<style> #ContactForm2{ background:#98AFC7; } .c-form{ border:1px solid #f5f5f5; padding:0 0 20px 0; overflow:hidden; } .c-form-left{ padding: 20px; } .c-form-right{ padding: 20px; } .contact-form-widget { margin: 0 auto; padding: 10px; width: 400px; max-width: 100%; }.contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;} </style> <div class='c-form'> <div class='c-form-left'> <div class='form' style='float:left;'>  <div class='widget ContactForm' id='ContactForm2'>   <div class='contact-form-widget'>     <div class='form'>       <form name='contact-form'>         <p>Name</p>         <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>         <p>E-mail *</p>         <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>         <p>Message *</p>         <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/>         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>         <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>         <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>       </form>     </div>   </div> </div></div></div> <div class='c-form-right'> <div style='float: right;'> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdqk5fusryB5gyXfTJ-t3M9Lkn0-W6qM5xgyYtSkZn3hID-Eep5W-Ed6RF67DovRskn6mCrVZQuBN9tFzN9uhSG5dbnbL6CRNfXuh6c1zoVNf-ZCU_B-e7c0jPjszZdUHo6GzziWpZJVo/s1600/bo-contact-avatar.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdqk5fusryB5gyXfTJ-t3M9Lkn0-W6qM5xgyYtSkZn3hID-Eep5W-Ed6RF67DovRskn6mCrVZQuBN9tFzN9uhSG5dbnbL6CRNfXuh6c1zoVNf-ZCU_B-e7c0jPjszZdUHo6GzziWpZJVo/s1600/bo-contact-avatar.jpg" /></a></div> <br />Address Line 1<br />Address Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail: mail@blogornate.com     </div> </div> </div></div> <div style='clear: both;'></div>

Yellow highlighted section should be your Profile URL. Lime highlighted section should be your Image  URL. Orange highlighted section would contain your Address. Change these sections as the way you want.

5. Blogger Contact Form Design 5:

Code :

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" />  <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>

6. Blogger Contact Form Design 6:

Code :

<div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p class='text'>Name</p> <input class='name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p class='text'>E-Mail *</p> <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p class='text'>Message *</p> <textarea class='message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div> <style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold; font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;} .contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form textarea{background: #afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form input.name {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXWt2vvTmd5WMLNFCsEOOSkaoXroe6fdKa75hcx-nykw3p30YcwyaSfbqzku6ANu62jLw8i3sWPri7FUbuLcrt0B9XwTG3eSZ2Otf88klnNTTJKfYWkG-99cKRnn6tppYRui9PFGRU6kU/s1600/pro-pic.png);background-position: 11px 8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;} .form input.email {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgful1MEWARn3lqUbcIgClzXC6ieTkio5CycwL71NRJ32tcYG9Gm0wYoktWsAvnuCukpya768ZX_g-y4GoHcEPYBsNMRZplGt5CPuxgB2S-spwosWNOVoZHD_AbUCHi106Neyyq_qQYrgux/s1600/msg-box.png);background-repeat: no-repeat; padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form input.message {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFNSehJakecNpy8wJEudHRa5KCnCgZbaHjrP3joNf4fREkOLKOkAy-gkCJ6_NO4ABOcGvWiEmevMqIwSjl3vA8dq-SPG3eQY24pFt41gl1u85q2U7RH6D3owd-o6c61B3qEvWZ_dyzltE/s1600/pencil.png);background-repeat: no-repeat;background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .form input:focus, .form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3, #416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px) { .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;} </style>

7. Blogger Contact Form Design 7:

Code :

<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}
.c-form-email-message{width:95%;height:150px;line-height:18px;}
.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><div class="tb-contact-form-widget"> 
<form name="contact-form"> 
<div class="name"> 
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Your Name"/>
<label for="name">Name</label>
</div> 
<div class="email">
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="mail@example.com"/>
<label for="email">E-mail *</label>
</div> 
<div style="clear: both;"></div>
<div class="message"> 
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write something to us...">
</textarea>
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> 
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> 
</div></div></form></div>

All of these five blogger contact form designs are tested. You can use one of these contact forms in your blog. In my case, these forms are working fine. If your one is not functioning properly, then please let me know through the comment. If this is helpful for you, then please don’t forget to share this with your friend.

Read More