How to Start and Run a Successful Web Design Business

How to Start and Run a Successful Web Design Business

Do you wish to start up a web design business? It is a great idea. However, this isn’t easy. You require possessing the best of design skills and a well-constructed plan. Running a business successfully demands your sincere efforts.

start run web designing business


Most designers and freelance web programmers want to start something of their own once they gain enough experience and attain skills to handle projects individually. They prefer starting a web designing company.

Although a good idea, the venture demands a smart blend of strategic intelligence, solicitous and skilled efforts, and drives to convert dreams into reality. If you are seriously planning to start your own web designing business, can refer to the below-given tips for a perfect start and seamless running of your web design business.

Realize Strengths and WeaknessesYour strengths will let you choose main services you would be offering. On the other hand, the weaknesses will let you avoid time and energy wastage on the things that can be easily handled by handled by others. Start by understanding the tasks you hold expertise in and those you would like to hire specialists for.
Understand your Target MarketA business owner can never succeed without understanding his target market. Offering people what you sell is not a great idea. You should try to know what your potential clients are looking for.

This will help you to customize your services as per their specific needs. In earlier days, the basic requirement was just to have a website. However, today it is about having an innovative, informative, mobile responsive, and search engine friendly website.
Maintain Clarity about OfferingsIt is very important to have very clear thought related to your offerings. As soon as you gain the detailed understanding of your market, it is time for your offerings. The more clarity you have about your offerings, greater the chances of success. Take the following points into consideration when finalizing your services:

  • International delivery of services or local clients.
  • Preference of payment (in one go/hourly/daily).
  • DIY management of client relationships or hiring an expert.

Attractive and Informative WebsiteIf it is about taking the business forward and making it a huge success online, you must get an attractive website design. Since you own a website business, you need to set an example for your clients. After all, people would be hiring you for designing websites. They will definitely notice the design of your own website to have an idea about the quality.


So focus on designing an attractive website to that reflects your business in the best light. Make sure you build a responsive, super-fast and highly engaging so that viewers do not have to face problems with browsing process. The website should also have clear and easy navigation combined with relevant content. Being immensely and incredibly good will help you get work.
Social MediaThe present age revolves around the various popular social media platforms. If you want success in business, you need to be super active on Social Media. The approach of these platforms is much more than establishing social connections among individuals.

In fact, it has emerged as a brilliant way to promote businesses and even drive potential traffic to websites. It will also attract potential customers and help you create an effective network of people sharing similar niche. Hence, it is crucial to understand the significance of social media platforms and how you can use them for maximizing business profits.
Credibility is CrucialShopping around for website development and designing services is no child’s play. There are a number of factors clients consider prior to making a final decision. One of the most important of all is the expertise of professionals involved in the task.

In short, they won’t settle for anybody less than experts. Hence, it really works to display your credibility to the world. Make sure you state all details related to education, requisite certifications, and work experiences on the profile. This will let people find a reason to rely on you and services offered. Also, try to boost online credibility by posting visual content relevant to your area of expertise and updating yourself with the newest trends in the industry.

Conclusion
At last, we would like to remind you that this is a period of tough competition so you would need to keep patience, no matter how difficulty you face in the beginning. Once you have achieved your place in the market, the victory will come in your way on its own.
Stylish Custom About Author Bio Widget for Blogger

Stylish Custom About Author Bio Widget for Blogger

Author widget is the most essential gadget that every blog must have one. This author profile gadget allows site visitors to know the person behind a blog or website.

Custom about  author widget


Unlike, other blogging platforms, blogger already have an official author profile widget, which can be used to display your BlogSpot profile or Google+ profile. Both of these profiles are good, but not better, because it has the old classic style look and has not been upgraded since Google launched blogger.

Even I was using the classic style on my blog for a long time. But, soon enough, I realized that it did not attract my visitors. So, I removed the official profile gadget and replaced it with my own custom author profile. Here’s how it looks like:

about author blogger gadget


This profile bio widget can be used in every blog on blogger platform, and the best part about this is that creating this gadget is quite easy, no third-party codes integration at all. It is super fast loading and mobile friendly too.

The basic requirement for getting started is nothing much, but a profile picture or your blog logo is enough.

How to Add Stylish Custom Author Profile Gadget in Blogger

Below is the full tutorial for adding the custom profile widget in blogger. Just follow my footsteps:
1. Login to your Blogger account, click on Pages and press on “New Page”.

Profile Gadget in Blogger


2. Now, write anything or whatever text you want to show on your profile. For your ease, I have written a few author profile lines. Just copy and paste the piece of text on the blank page.


The goal of "your Blog name" is to provide you high-quality, relevant and the most accurate based contents, tools, "write your own categories, i.e, How-to tutorials on Blogging, SEO, Make money Online, social media, WordPress, Blogger, YouTube and more. Read About Us page to know more about us.

3. Click on the upload image icon and upload your profile picture or blog logo. After uploading the image, click on it and set it in the smaller size.

author bio Gadget


4. Add any hyperlinks, bold, italic, underline, or change font colors and font style, if you want. For example, you can insert contact us page link, or about us page link in the texts. 5. Click on “Save”, and press on the “HTML” Mode.

Adding profile bio gadget Blogger

6. Now, you need to insert animated social media follow us icons right after the description. Copy the following codes and paste it on your site after the description and change the blue color texts with your actual URL.


<div id='socialfontawesome'>

<a href='
your Facebook
Profile or Page URL goes here' rel='nofollow' target='_blank' title='Facebook'><span style='color: #037dd3'><i class='fa fa-facebook-official'></i></span></a>


<a href='
your Twitter Profile URL goes here' rel='nofollow' target='_blank' title='Twitter'><span style='color: #03b5e1'><i class='fa fa-twitter-square'></i></span></a>


<a href=
'your LinkedIn Profile URL goes here' rel='nofollow' target='_blank' title='linkedin'><span style='color: #027aa1'><i class='fa fa-linkedin'></i></span></a>


<a href=
'your Google+ Profile URL goes here' rel='nofollow' target='_blank' title='Google Plus'><span style='color:#ef4343'><i class='fa fa-google-plus-square'></i></span></a>


<a href=
'your Pinterest Profile URL goes here' rel='nofollow' target='_blank' title='Pinterest'><span style='color:#ba0120'><i class='fa fa-pinterest-square'></i></span></a>


</div>

7. Press on the “Compose” tab, and again click on the “HTML” mode and copy all the HTML Codes and close the page.

Add about author in Blogger


8. Now we need to paste the copied codes into the HTML/JavaScript widget on your blog. Go to “Layout” Page, click on “Add a Gadget” in the footer area and choose the “HTML/JavaScript Gadget”.

inserting Profile widget in Blogger

9. Paste the piece of code that we copied earlier, and press on the “Save” button.

Addi author Profile bio Gadget

Congrats! You have successfully inserted the custom author profile widget in blogger, without any third-party code integration.
Conclusion
This about author widget is fully mobile-friendly and super fast loading because it does not contain any Script or any external codes.
In this gadget, you can also change the image border style according to your choice, like you want the rounded border or square border image and customize the description according to your need and it contains follow us buttons, so your visitors will easily able to find your profile on Social Media with a single click.

Thank you for reading this article, if you like it then please share this content with your friends, family, and colleagues.

How to Find Widget ID in Blogger

How to Find Widget ID in Blogger

In blogger, there are different widgets are available and each of them has a unique ID or we can say as a name to easily identify them.

find widget id blogger


With that ID, we can easily locate any widget in the template code area or we can also the ID to find any specific widget to customize with CSS design.

Finding a widget ID has always been easier. Now, before I begin this tutorial, I want to clarify that, “those build-in blogger widgets do not contain numbers, instead they carry their widget names only”.

For example, if you add a popular gadget twice on your blog, then the first gadget ID will be “PopularPosts1” and the second ID will be “PopularPosts2″.

blogger widget id


But in case of HTML/Javascript widget, it will number only. it’s like HTML1, HTML2, HTML3.

Here in this tutorial, we will highlight two different ways to find out the widget ID you are looking for.

So, let’s get started…

Finding Widget ID in blogger

Here for explanation purpose, I will be finding the HTML/JavaScript widget.

Read: Blogger Widgets: How to Add Html Codes in Blogger

1. Login to your blogger dashboard and go to the Layout page.

Widget ID in blogger


2. Select the HTML/JavaScript widget and click edit.

Finding Widget


3. Now, a popup widget configuration window will appear. Move at the end of that URL and you will see something like this: “widgetid=HTML6”, that’s the unique widget ID we are looking for.

Find Widget ID blogger


Super easy, right? Just select any other widget instead of selecting HTML/ JavaScript widget and perform the remaining steps.

Below, I have highlighted another simple way to find widget ID directly from your template.

Finding widget ID from Blogger Template

1. In your dashboard, go the Theme section and backup your template first and then and click on the “Edit HTML” button.

Finding widget theme


2. In the HTML code editor, click on “Jump to Widget” section, and you will see the list of widgets ID available on your blog.

Finding widgets


3. Now click on the widget you want to see, let’s say it “HTML1”. click on them and then you will be redirected to the widget source code.

widget id in theme

Conclusion
Now you can easily find out any blogger widgets ID on your blog by following anyone method given above. Just copy the code after “widget=”, that’s the unique identification code.

If you’re satisfied with the article then show us your love by following us on Social Media to receive interesting upcoming articles.

10 Incredible tips to Improve your New Blog Design

10 Incredible tips to Improve your New Blog Design

Designing your site is the second task of creating a stunning blog. Designing a blog is a very vital factor in the growth of your site, it may help you provide good user experience to your viewers.

blog design tips blogger


I have seen many bloggers don’t customize their blogs properly, and as a result, they start losing traffic. Think as a user point of view, if you visit a blog and you see that the site has quality posts but the site is poorly designed and it’s not even mobile-friendly, which will take lots of time to load properly.

Then, what will you do?

You will instantly hit the back button, and start searching for other sites and I’m sure that you will visit that site again.
So, that’s why proper customization is necessary for every site to leave an everlasting impression towards the visitors.

For example, if you visit a popular site like Neil Patel, then you will see that his site is so attractive and professionally designed only for his viewers. So, we have to implement the same tactics in our blogs.

Why designing a blog is necessary?

The design structure of your site is the first point to impress the visitors, it’s the first factor that helps a user to decide whether he/she should stay on the site or not. You don’t have insert different widgets or overwrite the template HTML codes to design your blog. Instead, have a simple clean design.
According to me, “A simply designed site contains very fewer widgets arranged in a proper way”.

Just make sure every widgets or plugin should have a purpose on your site. If the gadgets don’t have any goal then why to keep them? remove them right away. A stylish blog can:

  • Attract new visitors
  • Grow your E-mail or Newsletter followers
  • decrease the bounce rate of your blog
  • Provide proper navigation system
  • Turn visitors into customers
  • Get more exposure
  • Increase Alexa rankings
  • Easily get approval for Adsense

There are a lot more it can do for you and for your visitors as well.

10 Incredible Blog tips to Design a Blog

Below I have listed 10 tactics to improve your blog design and make it like professionals.

1.Create easy to read site contents

Creating easy to read articles should be your main aim to provide a best user-friendly contents.

The post you create should be written in a proper format with essential headings, the paragraph should be short not too lengthy, add bulletins for points, images and videos in the appropriate area. These things must be implemented properly to provide best easy understandable posts to visitors.

2. Keep your homepage clean and updated
You should always keep your homepage clean with useful gadgets in appropriate areas and make sure that everything is up to date. Always remember, too much design and customization can ruin your blog’s user experience and as a result, visitors will stop visiting your site. So, to prevent this issue, you need to have fewer widgets on your homepage except for essential ones with a simple easy to navigate design so that visitors may easily go through all of your contents.

3. Provide proper navigation system

The navigation system on your blog should be properly arranged. The visitors must be able to go through all of your posts and pages to get the information they are looking for.

blog website design


For example, you can add a categories section, popular and recent posts gadgets, labels and a search bar. Apart from it, you can also insert a drop-down navigation menu for easy navigation.

4. Stay mobile friendly

I think you already know that around 100% of Internet users, almost 65% of users browse the Internet through mobile devices.

So, I don’t need to explain to you why you must stay mobile friendly, right?


To stay mobile-friendly, you need to use mobile friendly themes for your blogs. You can also consider using AMP pages for your site to provide the best contents for mobile users only.

5. Remove unnecessary gadgets

Unnecessary gadgets make your blog load slower and sometimes not reachable, so why not to remove them. Every widget on your site must have a goal! If they don’t have a goal, then why to keep them.


So, deleting the useless gadgets is actually a good practice to improve your site.

6. Arrange gadgets in a proper way

The gadgets on your blog should be properly arranged in a systematic format. It should be like the picture below.


Instead, you can check my blog, I have arranged all the gadgets in a proper way to provide a good structure for a web page.

7. Reveal yourself

You should always reveal yourself towards visitors to let them know that you are the creator or author of a particular site.

It’s actually a good practice to build trust among your and visitors. With your bio, the visitors will be able to know that you are the source of a particular content and all the post you are creating is absolutely legit.

To expose yourself, you have to create an about us page and author gadgets. Here’s the guide for adding author widget to blogger.


You can also consider adding author bio box below all of your articles to let readers know about you instantly.
8. Practice using less pop-up widgets

Excessive use of popup widgets will make your visitors go away from your site because they are sticky and very annoying! So, try to keep limited popup gadgets as you can.

For example, you can use Newsletter or promotional popup’s only, not more than that. In case you are using popout ads, keep only 1 per blog for better user experience.


9. Stop using copyrighted materials

If you are using Google Images for your blog posts or if you are copy pasting others blog contents on your posts, then let me warn you! You are doing a big mistake, because of these things you can get into serious trouble.

So, you must never use copyrighted materials on your blogs. In case, you’ve already done it, then remove it right away to stay in legal and next time make sure that you are not going to use copyrighted items at all.

10. Add essential pages for legal use

Legal pages are very significant part of a blog or website and plays a vital role in legal & copyrighted use.

These type of pages can help you in case of any legal, copyrighted and fraud issues. All of these pages are called by different names, such as Disclaimer, Privacy Page, Terms of Use, Terms & Conditions, etc.


Although, Disclaimer and Privacy Policy pages are most essential among all.


Conclusion
Above 10 blueprints will surely help you out to design an eye-catchy SEO friendly blog that looks good. Just apply the given tactics properly without makes mistakes and stay away from slow loading gadgets or plugins, stick with the fast loading ones.


Atlast, have you been using other tactics to design your blog? Feel free to share your suggestions in the comment box below!

How Do I Add a Drop-down Navigation Menu in Blogger

How Do I Add a Drop-down Navigation Menu in Blogger

Drop down navigation menu is a very significant part of a blog that helps visitors navigate your blog more easily.

drop down navigation menu bar


In WordPress, you can easily add drop down menu using their drag-drop feature. But when it comes to Blogger, inserting a drop-down navigation menu bar can be little tricky!

To do that we might have to take the help of HTML and CSS codes.

So, here in this tutorial, I will show you the easiest way to create a drop-down menu and drop-down sub-menu on your blog.

Why do I Add a Drop-down Menu?

As I told you above, creating drop-menu is the best way to let your visitors navigate your site more efficiently.

For example, many peoples don’t like to scroll down on any blog to find what he/she want to seek. Instead, they will be happy if they can navigate your blog from the menu bar, which will save their time.

You can also prefer a search box so that they could search directly what they are looking for. Here’s the guide for the custom search box.


Adding Drop-Down Navigation Menu to Blogger

To add a navigation menu, we need to insert the piece of codes to HTML/JavaScript widget.


1.Login to your blogger account and go to ‘Layout’ Section and then Click on ‘Add a Gadget’ button, and then a popup window will come out.

Adding navigation menu to Blogspot


2. Find the Gadget called ‘HTML/ JavaScript widget’ and click on it.

Add navigation menu to Blogger


3. Copy paste the Navigation Menu Codes in the box, give a ‘title’ and ‘save’ the gadget.

z

Now, again hit ‘Save Arrangements’ to save your work & you’re done!

HTML Codes for Horizontal Navigation Menu

This is a responsive navigation menu with a background color white and grey hover color. You can change the color anytime according to your blog’s primary color.

If you want to see, a preview of the menu bar, then simply visit my blog because I use the same navigation menu that I’m sharing here.

<!doctype html>

<style>
body {margin:0;}

.topnav {
overflow: hidden;
background-color: #fff;
}

.topnav a {
float: left;
display: block;
color: #262323;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}

}
</style>

<div class="topnav" id="myTopnav">
<a href="
#">Home</a>
<a href="
#">Disclaimer</a>
<a href="
#">Privacy Policy</a>
<a href="
#">Sitemap</a>
<a href="
#">About Us</a>
<a href="
#">Contact Us</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

</div>
</!doctype>
Customization
Change the blue colored “#” sign with your actual page URLs and the red color codes for the title of that page.

HTML Codes for Sub Drop-down Navigation Menu

In order to insert drop-down navigation bar, you need to apply 2 methods.
In the first method you need to add HTML codes into your blank JavaScript widget as I’ve shown above, and in the 2nd method, we need to add the CSS codes in your template manually.

So, let’s do it.

Method1: Adding Navigation Menu HTML Codes to Blogger Widget

<ul id="Navigation_Menu">
<li><a href="#">Home</a></li>
<li><a href="#">SEO</a></li>
<li>
Learn Blogging
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">WlordPress</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</li>
<li>
How-To
<ul>
<li><a href="#">Android</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li><a href="#">Social Media</a></li>
<li><a href="#">YouTube</a></li>
</ul>

Method2: Adding Navigation Menu CSS Codes to Blogger Template

1. Go to your ‘Theme’ section and hit the ‘Customize’ button.

Adding CSS Codes to Blogger


2. Click ‘Advanced’ tab, scroll down and hit the ‘Add CSS’ button.

Adding CSS Codes to Blogspot


3. Now copy and paste the below codes in that blank box and ‘Apply to Blog’ button.

inserting CSS Codes to Blogger

.tabs-inner .widget ul#Navigation_Menu {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#Navigation_Menu li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* background colour of the main menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#Navigation_Menu li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#Navigation_Menu li:hover {
background: #555; /* background colour when you roll over a menu title */
color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#Navigation_Menu li:hover a {
background: transparent;
color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#Navigation_Menu li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#Navigation_Menu li ul li {
background: #2a2a; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
ul#Navigation_Menu li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#Navigation_Menu li ul li:hover {
background: #7676; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#Navigation_Menu li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

Congratulations! You’ve successfully added the navigation menu on your site.

Conclusion 
By performing above 2 easy ways you can easily implement the drop-down navigation menu bar to your blog.

Just make sure, that you copy paste the exact codes I’ve shown here. If you miss even a single character then it may end up with an error, so be careful with that.

At last, If you’re getting any error while adding the navigation menu codes in Blogger, then let me know in the comment box below!

How to Install Disqus Comment Box on Blogger

How to Install Disqus Comment Box on Blogger

Adding Disqus comment box to your blog on blogger is really easy and can be helpful for your visitors to comment on your site.

Install Disqus on Blogger


We all know that blogger platform does provide a built-in comment box for bloggers, to let the visitors comment on their posts. But I think you have probably noticed that it doesn’t allow to leave a comment using your social media account, nor it looks beautiful or professional.

But, luckily Disqus comment box provides more features than blogger for free to customize your comment box and you can also let your visitors comment on your blog using their social networking accounts.

So here in this tutorial, I will show you how to integrate Disqus comment box with your blog on blogger.

Why use Disqus comment box on Blogger?


The reasons for using Disqus is quite many. Unlike other comments system, Disqus not only allows to comment anonymously or using social media accounts and data will be saved in Disqus portfolio but not in blogger. Here are some of its features:
  • It allows commenting on Disqus with Social Networking Sites
  • Easily subscribe to any blog posts or topics
  • It looks very professional and attractive
  • It allows Rich media commenting, such as adding images and videos in the comment
  • It automatically adapts your site’s design and you can also set it to your own desire.
  • Disqus supports all devices from desktop to mobile, including Google AMP pages and supports 70 languages and counting.
  • It automatically detects and removes spam comments before it lands on your site.
The best part about Disqus is its free and can be used on any blogging platform. The integration process is very faster and can be applied to your blog in the next 5 minutes.

Before I begin this tutorial, I want to let you know that there 2 ways you can install Disqus on your blog.

  1. Using the Disqus widget.
  2. By adding Disqus codes manually to your template.

So, I will show you both the methods one by one to help you select the easiest method for you.

Adding Disqus Comment box to Blogger

1. Go to the official Disqus website and click on ‘GET STARTED’ to register a new account.

Add Disqus to Blogger


2. Now you will get 4 options to open a new account. Either you can use social networking accounts or you can use your Gmail address. It will better if you use your Gmail account instead. Enter your NAME, EMAIL ADDRESS, PASSWORD and click ‘SIGN UP’.

Adding Disqus to Blogspot


3. After signed up, you will be asked to choose whether you comment on other websites or you want to add it to your blog. So, click on ‘I WANT TO INSTALL DISQUS ON MY SITE’.

Adding Disqus to Blogger platform

4. Enter your website name and select your blog category (your niche) and hit ‘CREATE SITE’.

Adding Disqus comment to Blogger

5. Now you will be redirected to the pricing page, select the basic free plan and hit ‘SUBSCRIBE NOW’.

Adding Disqus comments to Blogspot

6. Now you need to select your blogging platform, Choose ‘BLOGGER’ as your platform.

Inserting Disqus to Blogger


7. You are being redirected to the installing process. Hit on ‘CONFIGURE’ button.

Adding Disqus system to Blogger


8. Now select ‘APPEARANCE’, enter your blog URL, write DESCRIPTION and click ‘COMPLETE SETUP’.

Adding Disqus comment Blogger


Congratulations, you finished installing Disqus! Now click ‘Dismiss Setup’ and you will be redirected to the Admin area.

Disqus installed on blogger platform

Installing Disqus Through HTML Codes

If the above first method didn’t work out for you, then you can try out the second method by adding HTML codes manually to your template. The HTML process is classified into 2 categories. First, you need to add a gadget manually and then you need to override your theme codes.


For your comfort, I’ve arranged the method in 2 simple ways.

Adding Disqus Gadget to Blogger
First of all, you need to create a Disqus widget using the HTML gadget. Here’s the guide:


1. Go to your Blogger Layout page and hit Add a gadget in the sidebar.

Adding Disqus Gadget Blogger


2. In the Add, a Gadget popup, scroll down and click the HTML/Javascript gadget.

Adding Disqus Gadget to Blogspot


3. Enter Disqus as the title name and the below codes in the content and click save the widget.

<<!-- Disqus comments gadget -->>
Add Disqus Gadget to Blogger


The next step will be to add the Disqus code to your template.

Adding Disqus Code to Your Blogger Template
1. On your Blogger dashboard, go to Theme section, backup your blog template and hit Edit HTML.

Adding Disqus to Blog Template

2. Click on the text area, and enter (ctrl+F) on open the search box and then search for the below term.

<b:widget id='HTML2' locked='false' title='Disqus' type='HTML'>
3. Change that line to add mobile=’yes’ to make Disqus mobile-friendly. It will look like this when you’re done:
<b:widget id='HTML2' locked='false' mobile='yes' title='Disqus' type='HTML'>
4. Below that find and DELETE the following code right before the closing tag. The section you’re deleting should look like this:

Adding Disqus to Blogger theme
<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>
5. Once it deleted the next part will be to insert a new code in replacement of the previous one. Just before the closing of </b:widget-settings> tag, add the following codes:

inserting Disqus to Blogger Template
<b:includable id='main'>
<script type='text/javascript'>
var disqus_shortname = &#39;EXAMPLE&#39;;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
}

var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#comments {display:none;}
</style>

<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();

</script>
</b:if>
<style type='text/css'>
.post-comment-link { visibility: hidden; }
</style>

<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();

</script>
</b:includable>
Just make sure to replace “EXAMPLE” with your forum short name and be sure to leave ‘&#39;’ in front of your short name and ‘&#39;;’ after it.

After applying all the codes, click on save the template.

Importing old blogger comments to Disqus

1. Login to Disqus and go to Admin section.

2. Click on Community and hit Import.

Importing  comments to Disqus


3. Now select Blogger and click on one-time import and then Sync new comments.

Importing blog comment to Disqus

4. Now you will be asked to sign in with your blogger associated Gmail address, and then a new window will appear to let you select the blog you’d like to keep synchronized with Disqus. Click on your blog.

Import blogger comments to Disqus


Congratulations! You have successfully imported your blogger comment to Disqus.

Comments imported to disqus

Conclusion

After adding Disqus to your blog, you can easily customize comments theme color, moderation, etc. from Admin area. If the first process doesn’t work on your blog then you can try the second rule.

Getting errors while adding Disqus Comment system to your blog? Let me know in the comment box below.