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.

10 Best Social Media Share Buttons and Widgets for Blog

10 Best Social Media Share Buttons and Widgets for Blog

Responsive social media sharing buttons and widgets are the best ways to gain more traffic and popularity on your blog.

social media share icon


These floating social media icons allow readers or visitors to share instantly the content they like or recommend on blogs and websites. That’s why it is one of the best ways to promote your blog contents on social networking sites.

Here in this tutorial, I will provide you the HTML codes for the social media sharing icons and the direct widgets for your blog.

10 Best Responsive Social Media Sharing Buttons and Widgets

Here is the list of top 10 social media posts sharing icons and widgets for Blogger and WordPress users in 2018.

1. Shareaholic buttons

social share


These floating share buttons are fully responsive, can be hidden and customized according to your need from Shareaholic website. Even I’ve been using it for a long time and still satisfied.

Below is the direct HTML codes for the share widget and it’s available for all blogging platforms.


<script type="text/javascript" data-cfasync="false"


src="//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js" data-


shr-siteid="f417d883abcaf6dc851b60f9ba20c7c6" async="async">


</script>

2. ShareThis icons

sharing icons


These buttons are fully animated, responsive and perfect works on any blog or website. If you want to customize this widget according to your choice then visit ShareThis website, sign up, create the share widget and directly integrate with your website.


<script src="//platform-


api.sharethis.com/js/sharethis.js#property=5b0ba4accbc3900011ee2c2


1&product=sticky-share-buttons"></script>

3. Addthis Share Widget

social sharing widget


Addthis allows to create free share and follow us widgets according to your preference, for your blog. You can copy and paste the below codes on your site to directly to enable this widget or you can visit Addthis website and perform further customization as you need and directly connect it to your blogging platform.


<script type="text/javascript"


src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-


57c47301182937e7"></script>

4. AddToAny Buttons

addtoany share icons


AddToAny floating share buttons are available in horizontal and vertical at fixed positions and are easily customizable for mobile and desktop devices. This widget is absolutely free and can be implemented on every blogging sites.


<div class="a2a_kit a2a_kit_size_32 a2a_floating_style


a2a_vertical_style" style="left:0px; top:150px;">


<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>


<a class="a2a_button_pinterest"></a>


<a class="a2a_dd" href="https://www.addtoany.com/share"></a>


</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>

In case, you want this gadget to appear on the right side:


<div class="a2a_kit a2a_kit_size_32 a2a_floating_style


a2a_vertical_style" style="left:0px; top:150px;">


<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>


<a class="a2a_button_pinterest"></a>


<a class="a2a_dd" href="https://www.addtoany.com/share"></a>


</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>

5. GetSiteControl icons

social media icons


GetSiteControl is another popular social networking share buttons provider websites, that allow users to create custom, animated, and responsive share buttons.

In order to install this gadget on your site, you can copy the HTML codes and insert on your site or directly go through the GetSirteControl website, customize the widgets and publish on your blogging platform.


<script>
(function (w,i,d,g,e,t,s) {w[d] = w[d]||[];t= i.createElement(g);


t.async=1;t.src=e;s=i.getElementsByTagName(g)


[0];s.parentNode.insertBefore(t, s);


})(window, document,


'_gscq','script','//widgets.getsitecontrol.com/139196/script.js');


</script>

6. Kiwi Social share plugin for WordPress

Social share plugin


Kiwi is a popular social sharing plugin available only for WordPress users. It is an excellent tool that allows creating hover icons, animated buttons like, flip, grow, border, slide, simple, super fast and even display share counts, etc for free.

8. MashShare social media sharing plugin for WordPress

social media sharing plugin

MashShare is a free professional and highly customizable social media plugin. They use external scripts for their social buttons to save loading times. It also supports accelerated mobile pages (Amp), has a Short URL integration and provides per default a large total share counter.


You can watch this video for the installation procedure, made by Karinah.




9. Social Sharing Icons by UltimatelySocial
The UltimatelySocial lets you add share icons for RSS, Email, and 200+ other social media platforms, or upload custom icons of your choice in your WordPress Blog.

social networking icons


With this plugin, you can make your social media icons ‘float’ or ‘sticky’, add counts, Allow visitors to subscribe to your blog by Email, make your icons animate and more features.

10. Feed Them Social plugin for WordPress

social media sharing


Feed Them Social is a very popular plugin for creating Social Feeds of any or all your family, friends, yourself, or businesses. They allow adding as many social feeds as you need and display social feeds on any post, page, or sidebar, according to your preference.

VIEW THE DEMOdownload Feed Them Social plugin

Conclusion
These top 10 social media share widgets and plugins are widely used in Blogger, WordPress and other blogging platforms. If you are using Blogger, then copy the above-given codes and paste it into the HTML/JavaScript widget of your blog. Read:

In case, you are using WordPress, then download any social share plugin, install, and activate the plugin on your WP blog.

After adding one of these attractive social sharing icons on your blog, your beloved readers will be easily able to share the contents they like or prefer, on social networking sites.

Have you been using one of these social sharing icons on your blog? Let me know in the comment box below, and if found content useful, then share it with your friends, colleagues, and family members.

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.

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.
10 New Stylish Custom 404 Error Pages for your Blog

10 New Stylish Custom 404 Error Pages for your Blog

You can always make your invalid page look more attractive and professional by using the custom 404 error pages from your blogger account.

An error page is just a page that displays when a user tries to browse the page that doesn’t resemble to exist anymore, the link may be removed or broken, or it has never existed.

In our last article, We have learned how to insert an error page to your blog. Here’s the guide:


Today in this post, I will reveal you the 10 best custom error pages that you can use on your site for free.


Note: All of the error pages are created by Me, so none of these images are copyrighted. All of these are free for you so provide us a credit link in return (if you can)! thanks… enjoy.

10 New Stylish Custom 404 Error Pages 2018

Here is the list of 10 New Stylish Custom 404 Error Pages for your Blog.

1. Simple text error page 

text error page
<b:includable id='status-message'>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<h1 class='errornum'>404</h1>
<h2 class='error'>Page Not Found!</h2>
<p>Sorry, the page you were looking for in this blog does not exist.</p>
<p>Go To Homepage by Button Below</p>
<class='fa fa-hand-o-down'/>
<div class='clear'/>
<a class='homepage' href='/'>Home Page</a>
</div>
</b:if>
<data:blog.pageName/>
</div>
<b:else/>

2. Car accident error page

stylish error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-mMXe3M1C9dw/WmN6SaC4BwI/AAAAAAAAAKw/M22cCsCK6fM-
xdqmuw8VcOPwQGaUN012wCEwYBhgL/s1600/error%2Bpage3.png"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0" data-original-height="1600" data-original-width="1132"
height="640" src="https://3.bp.blogspot.com/-
mMXe3M1C9dw/WmN6SaC4BwI/AAAAAAAAAKw/M22cCsCK6fM-
xdqmuw8VcOPwQGaUN012wCEwYBhgL/s640/error%2Bpage3.png" width="450" /></a></div>

3. The red colored error page

danger error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-eESnhdQzoAQ/WmN6VUtDkcI/AAAAAAAAAK0/xkeZS-uOj-
EHCW1VaSG8iIr2PnUR1ig4QCEwYBhgL/s1600/error%2Bpage2.png"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0" data-original-height="1600" data-original-width="1132"
height="640" src="https://2.bp.blogspot.com/-eESnhdQzoAQ/WmN6VUtDkcI/AAAAAAAAAK0/xkeZS-uOj-
EHCW1VaSG8iIr2PnUR1ig4QCEwYBhgL/s640/error%2Bpage2.png" width="450" /></a></div>
4. Stylish bird error page

error page demo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-w8-r8ewFBbY/WmIk4a_tWjI/AAAAAAAACcs/BqRwAA28wW4VKJ4GF7ktr0KyMq
zOlmnXwCLcBGAs/s1600/error%2Bpage%2B%25281%2529.png"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0" data-original-height="1600" data-original-width="1132"
height="640" src="https://4.bp.blogspot.com/-w8-
r8ewFBbY/WmIk4a_tWjI/AAAAAAAACcs/BqRwAA28wW4VKJ4GF7ktr0KyMq
zOlmnXwCLcBGAs/s640/error%2Bpage%2B%25281%2529.png"
width="452" /></a></div>
5. Red monkey error page

monkey error page
<div class= "separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-8v8S5ZMnhAk/WmREUma4PVI/AAAAAA
AAALg/lC_W0NU-vJETCp3b32D41wN-YQ2WaMgawCEwYBhgL/s1600/error%2Bpage5.png" imageanchor="1"
style="margin-left: 1em; margin-right: 1em;"><img border="0" data-
original-height="1600" data-original-width="1132" height="640"
src="https://3.bp.blogspot.com/-8v8S5ZMnhAk/WmREUma4PVI/AAAAAA
AAALg/lC_W0NU-vJETCp3b32D41wN-
YQ2WaMgawCEwYBhgL/s640/error%2Bpage5.png" width="450" /></a>
</div>

6. Broken robot error page

robot error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-loShs7WJ-dE/WmREWm6MT7I/AAAAAAAAAMA/
5VGKfSBccxIg0L0RIAOZIgX7BAB35z8tACEwYBhgL/s1600/error%2Bpage9.png" imageanchor="1" style="margin-left: 1em; margin-right:
1em;"><img border="0" data-original-height="1600" data-original-width="1132"
height="640" src="https://1.bp.blogspot.com/-loShs7WJ-dE/WmREWm6MT7I/AAAAAAAAAMA/
5VGKfSBccxIg0L0RIAOZIgX7BAB35z8tACEwYBhgL/s640/error%2Bpage9.png" width="450" /></a></div>

7. Girl holding Error board

404 error
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-itXIuNlHe6U/WmREWcIVA9I/AAAAAAAAAL8/ajXUOsSH29spVV
LcS_lHaosdmKaXDAFYwCEwYBhgL/s1600/error%2Bpage8.png" imageanchor="1" style="margin-left:
1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width
="1132" height="640" src="https://4.bp.blogspot.com/-itXIuNlHe6U/WmREWcIVA9I/AAAAAAAAAL8/
ajXUOsSH29spVVLcS_lHaosdmKaXDAFYwCEwYBhgL/s640/error%2Bpage8.png" width="450" /></a></div>

8. Boy crying error page

kid crying error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-815BqniofDE/WmREUN3DdKI/AAAAAAAAAL0/
hI10ba4z21oHb_RxYfjvcmelw4Xs5s7NACEwYBhgL/s1600/error%2Bpage10.png" imageanchor="1"
style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height
="1600" data-original-width="1132" height="640"
src="https://3.bp.blogspot.com/-815BqniofDE/WmREUN3DdKI/AAAAAAAAAL0/hI10b
a4z21oHb_RxYfjvcmelw4Xs5s7NACEwYBhgL/s640/error%2Bpage10.png" width="450" /></a></div>

9. Sad Panda error page

emoji error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-kcVDjTqJPC0/WmREV3WmVRI/AAAAAAAAAL4/
Nman_uICHLAZ5JN8rTBunI6Nu_Xc0kYugCEwYBhgL/s1600/error%2Bpage6.png" imageanchor
="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original
-height="1600" data-original-width="1132" height="640" src="https://3.bp.blogspot.com/-
kcVDjTqJPC0/WmREV3WmVRI/AAAAAAAAAL4/Nman_uICHLAZ5JN8rTBunI6Nu_Xc0kYugCEwYBhgL/
s640/error%2Bpage6.png" width="450" /></a></div>

10. A red crap error page

page not found
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-p63uDIzeOtU/WmREUKgTxQI/AAAAAAAAALw/
z9soT9bHxnUCjoslhovKrz4Sz7M8S_C2gCEwYBhgL/s1600/error%2Bpage4.png" imageanchor=
"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height
="1600" data-original-width="1132" height="640" src="https://1.bp.blogspot.com/-
p63uDIzeOtU/WmREUKgTxQI/AAAAAAAAALw/z9soT9bHxnUCjoslhovKrz4Sz7M8S_C2gCEwYBhgL/
s640/error%2Bpage4.png" width="450" /></a></div>

Conclusion
These are the 10 best 404 error pages for your new blog. All you need to do is download anyone from above pages and apply it to your site. The setting up a custom error page for a blog is given at the beginning of this post.

If you’re finding any difficulties while adding error page to your blog! Let me know in the comment box below.