How to Create a Custom 404 Error Page for your New Blog

How to Create a Custom 404 Error Page for your New Blog

The steps for adding custom 404 error page is quite easy on blogger. It can be very helpful for your visitors to let them know that they have visited an invalid page on your site.

Custom 404 error page

In simple, If your visitors visit a wrong link to your blog, then this 404 page will appear in that case.

Today in this tutorial I will show you easy tracks to insert a 404 error page to your blog.

Why Do I Use Custom Error Page?

If you have a new blog, then normally it will show a blank page instead of an error page. But if you add a custom error page instead, then they will clearly know that they have visited a wrong page and it will also help them navigate your blog properly.


Note: If you are using custom theme then it may contain an error page. So, make sure there’s none before implementing the procedure.

For example, take a look at this picture:

Custom error page blogger

In this photo, you can see that it’s saying, “Sorry, the page you were looking in this blog does not exist”. This simple note can help your visitors know that they’ve visited an error page and they can go back to try a different page.

Steps for adding a custom error page in blogger

1. Open your blogger dashboard, hit Settings and Search Preference. Now under Errors & Redirection, click Edit in custom page not found an option.

adding custom error page to blogger

2. Copy the below codes and paste in the blank box and hit save changes button.

adding error page in blogspot

Congratulations! You’ve added a custom error page to your site. Now, if you want to check whether the page is working correctly or not then follow these footsteps:

In the URL bar, enter your site URL then add ‘/’ sign and type 1234.HTML. For example, https://example.blogspot.com/1234.html

In case you’re using custom domain: http://www.example.com/1234.html

Now, if the error page is appearing then it’s working correctly, but if it’s not. Then, copy & paste the same code I provided.

404 Error Page HTML Codes

1. Simple text error page

Custom 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. Stylish 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>
3. Simple horizontal error page

404 error page
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-LXUlX0S3K1g/WmIqrhXQ8nI/AAAAAAAACdE/FBiDpM4uFK0CB8I_C2CotDv
nZ7GelFCRwCLcBGAs/s1600/error%2B%25281%2529.png"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0" data-original-height="315" data-original-width="560"
height="360" src="https://4.bp.blogspot.com/-
LXUlX0S3K1g/WmIqrhXQ8nI/AAAAAAAACdE/FBiDpM4uFK0CB8I_C2CotDv
nZ7GelFCRwCLcBGAs/s640/error%2B%25281%2529.png" width="640"
/></a></div>
For more free custom 404 error pages, check out this post.

Conclusion

By using above method, you will be able to employ design error page on your site within few minutes. Just, make sure the error page is working correctly or else it will end up with a blank page.

Have you applied the above procedure to insert a custom 404 error page to your site? Let me know the consequences into the comment box below and you find this post useful, then share this page with your friends and collaborators.

How to: Add Link Button to Blogger Posts using HTML Codes

How to: Add Link Button to Blogger Posts using HTML Codes

If you provide downloadable resources or files to your blog posts, then adding a clickable link button will be a good practice to let your users easily download any files from your blog.

how to add link button to blogger post


In blogger, creating an anchor text or clickable link in your blog post is easy, but inserting a custom link button is difficult. To add a button to your blog post, you need put some HTML codes in the HTML editor mode of your blog post.

In this tutorial, I will show you how to add a link button to blogger posts in the next 5 minutes. So, let’s get started.

Why do I add a link button to blogger post?

Adding a link button to your blog post can be a little tricky if you are new to blogging. A link button will help your visitors to easily download any file using a simple download button; all you need is the piece of HTML codes. Once you implement the codes, the download button will automatically appear in your blog post.

There are many benefits of using a button to your blog, below are some of them:

  • A button can help your visitors to easily download any files from your blog.
  • This button can be used for showing demo, preview, etc. on your blog.
  • It looks more professional than an anchor text.
  • This button will make your navigation easier & save time.

How to Add Link Button to your Blogger post

1. Login to your blogger dashboard and click on “New Post”.

Add Link Button to your Blogger


2. Click on “HTML mode” in the top of your left side.

Add Link Button to your Blogger post


3. Copy the below “codes” and paste it into the new post.

insert Link Button to your Blogger post


4. Now click “publish” & review your post and you’re done!

Add Custom Stylish Link Button to Blogger Post

Below is the list of 5 stylish link buttons HTML codes.

1. Clickable link button


<form>
<input type="button" value="
Link button 1" onclick="window.location.href='your link goes here'" /></form>

2. Rounded corner button

<form>
<input onclick="window.location.href='
your link goes here'" style="-moz-box-shadow: 6px 6px 5px #999; -webkit-box-shadow: 6px 6px 5px #999; background: #21bded;
border-radius: 10px; border: 1px solid #999;
box-shadow: 6px 6px 5px; color: black; cursor: pointer;
font-size: 100%; font-weight: bold; padding: 10px; width: 150px;
" type="button" value="
Link button 2" /></form>

3.Light blue hover button

<style>
input.MyButton {
width: 160px;
padding:15px;
cursor: pointer;
font-weight: bold;
font-size: 100%;
background: #2f8fc6;
color: #fff;
border: 1px solid #122e66;
border-radius: 10px;
-moz-box-shadow:: 6px 6px 5px #999;
-webkit-box-shadow:: 6px 6px 5px #999;
box-shadow:: 6px 6px 5px #999;
}
input.MyButton:hover {
color: #ffffff;
background: #244f8b;
border: 1px solid #fff;
}
</style>

<form>
<input class="MyButton" type="button" value="
Link button 3" onclick="window.location.href='your link goes here'" />
</form>

4. Simple blue color button

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<style>
.w3-button {width:250px;}
</style>
</span></span><br />
<div class="w3-container">
<div style="text-align: center;">
<a class="w3-btn w3-blue" href="
your link goes here" target="_blank">Link button 4</a></span></span></div></div>

Customization:

  • Replace the blue code with the text that you want people to see. Such as; download, demo, preview, etc.
  • Replace the yellow code with the actual URL that you want, peoples to visit.
Congratulation! You have successfully added a simple button to your blogger post.


Note: Above 5 button codes are created by Hyperlink Code and w3schools. If you need more information about HTML buttons, visit these two sites.

Conclusion
These clickable link buttons will help your audience to easily download any files from your blog in seconds. All you need to do is install above custom stylish buttons to your blog post and you are ready to go!

Getting error while adding codes to your blog post? Let me know in the comment box below.

How to Add Sitemap Page to Blogger Using HTML Codes

How to Add Sitemap Page to Blogger Using HTML Codes

In blogger, sitemap page is not available by default, but you can manually add the sitemap page to your blog page using simple HTML codes.

Adding sitemap page to blogger


A sitemap page is also known as Table of Contents or Index page, this page will help your audience to easily navigate your blog.

I think you might notice that every professional blogger does have a sitemap page on their site (including me). It represents your professionalism towards your audience and it will also help your readers to easily navigate your blog. In other words, it’s one of the must-have web pages on every blog.

Today in this tutorial I will show you how to add a sitemap page to your blogger blog in the next 5 minutes.

How do I create sitemap page for blogger?

As I told you above, blogger doesn’t have sitemap page by default, but you can add one manually. To add the sitemap page in your blog, you need to apply external HTML codes to your blogger page.

Once you implement the code, the sitemap page will automatically appear in your blogger pages section.

How to Add Sitemap Page to Blogger

1. Login to your blogger dashboard and click on “Pages”.

Adding Sitemap Page to Blogger


2. Add a “New Page” and click in HTML mode on the left side below the title bar.

Adding Sitemap Page to Blogspot


3. Write a “title” and paste the “HTML codes”, click save.

Add Sitemap Page to Blogger blog

Simple Sitemap Page with Post Published Dates


Note: This HTML code is created by JH Wilson in GiftHub. So, the credit of this code goes to him.

<div><script src="https://cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js" type="text/javascript">
</script><br />
<script src="
your url goes here/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive">
</script><br /></div>

Configuration: Replace the Yellow color with your actual blog URL.

Sitemap Page using Labels for Blogger

Note: This HTML code is created by Howbloggerz Blog. So, the credit goes to him.

<script type='text/javascript'>

var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;

function bloggersitemap(a) {
function b() {
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h];
var e = n.title.$t;
var m = n.published.$t.substring(0, 10);
var j;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "alternate") {
j = n.link[g].href;
break
}
}
var o = "";
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "enclosure") {
o = n.link[g].href;
break
}
}
var c = "";
if ("category" in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(";");
if (f != -1) {
c = c.substring(0, f)
}
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
postPublished[ii] = o;
if (h < 10) {
postRecent[ii] = true
} else {
postRecent[ii] = false
}
ii = ii + 1
}
}
}
}
}
b();
sortBy = "titledesc";
sortPosts(sortBy);
sortlabel();
displayToc();
}

function sortPosts(d) {
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postPublished[e];
postPublished[e] = postPublished[g];
postPublished[g] = f;
var f = postRecent[e];
postRecent[e] = postRecent[g];
postRecent[g] = f
}
for (var b = 0; b < postTitle.length - 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == "titleasc") {
if (postTitle[b] > postTitle[a]) {
c(b, a)
}
}
if (d == "titledesc") {
if (postTitle[b] < postTitle[a]) {
c(b, a)
}
}
if (d == "dateoldest") {
if (postDate[b] > postDate[a]) {
c(b, a)
}
}
if (d == "datenewest") {
if (postDate[b] < postDate[a]) {
c(b, a)
}
}
if (d == "orderlabel") {
if (postLabels[b] > postLabels[a]) {
c(b, a)
}
}
}
}
}

function sortlabel() {
sortBy = "orderlabel";
sortPosts(sortBy);
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
do {
a = a + 1
} while (postLabels[a] == temp1);
b = a;
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}

function sortPosts2(d, c) {
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postPublished[f];
postPublished[f] = postPublished[h];
postPublished[h] = g;
var g = postRecent[f];
postRecent[f] = postRecent[h];
postRecent[h] = g
}
for (var b = d; b < c - 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a)
}
}
}
}



function displayToc() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
document.write("");
document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
firsti = a;
do {
document.write("<p>");
document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
if (postRecent[a] == true) {
document.write(' - <strong><span>New!</span></strong>')
}
document.write("</a></p>");
a = a + 1
} while (postLabels[a] == temp1);
b = a;
document.write("</div></div>");
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}

</script>

<script src="
Your Blog url goes here/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

ConfigurationReplace the yellow color with your blog URL.

Conclusion

By applying above HTML codes to your blog, you can easily show a simple designed sitemap page or table of content page to your audience to let them easily navigate your blog.

If the code is not working on your blog? Let me know in the comment box below!
6 Best Stylish Animated Custom Search Box Gadget for blogger

6 Best Stylish Animated Custom Search Box Gadget for blogger

A search box is the basic but most required part of any blog or website. A search box widget can help your readers to navigate right through your blog more effectively.

Stylish Custom Search Box widget for blogger


Usually, the search box on blogger comes along with your template, or you can manually add a simple search box widget from your layout page.

In this post, I will show how to add stylish & animated custom search box gadget to your blog using free HTML codes. But before we proceed, I want you to know why a search box is a necessary part of any webpage.

  • A search box will help your readers to easily navigate your blog.
  • It will save lots of time & efforts by providing you accurate search results for your given keywords.
  • It will help your blog to look more professional.
  • Show custom or animated search box to impress your audience.

There more benefits of using the search widget on your blog. Below I will show you step by step guide for adding a search box gadget o your blog for free.

How to Add Simple Search Gadget to Blogger?

1. Login to your blogger account and open your Layout Page.

2. Click on Add a Gadget.

3. Now click on Blog Search Widget, write a title and click save.

Now, save the arrangement and preview your blog & you’re done!

Custom Animated Search Box Gadget for Blogger

Below are the HTML codes for custom animated search box for Blogspot bloggers.


1. A white color simple animated search box

simple animated search box
<style> 
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>

<form>
<input type="text" name="search" placeholder="Search..">
</form>
2. Half Black color animated search box

Black color animated search box
<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]
{background:url(https://2.bp.blogspot.com/-
xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-
serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-
transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px
solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

Stylish Custom Search Box Gadget for Blogger

Just having a Search Bar on your blog is not enough, it should be matched with your theme color and look professional. Below are some stylish designed mobile-friendly search box CSS codes.

1. Dark black color corner rounded search box

black color corner rounded search box
<style type="text/css">
#nbc-searchbox{background:url(https://4.bp.blogspot.com/-xDMUT_7p820/Ue7AMp2_XZI/AAAAAAAAAho/N2xwuQ1GU1I/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>
2. Simple green button search box

Simple green button search box for blogger
<div class='search-box'>
<style>
#search-area {
background: #ffffff url('https://3.bp.blogspot.com/-MwrrIYVDUVw/VLNoaSyTJ5I/AAAAAAAADqc/K3j7KYlQ2oQ/s1600/search-input-bg.png') no-repeat;
height: 52px;
}
#search_field {
margin-top: 8px;
margin-left: 12px;
outline: 0;
border: 0;
padding: 2px 0;
height: 38px;
float: left;
width: calc(100% - 70px);
width: -moz-calc(100% - 70px);
}
#search_submit {
background: #ffffff url('https://4.bp.blogspot.com/-M9mjb64M91U/VLNoaZCwJuI/AAAAAAAADqY/oQUKnb-SbD4/s1600/search-input-btn.png') no-repeat -1px -1px;
background-size: 56px 40px;
border: 0;
width: 58px;
height: 38px;
margin-top: 8px;
float:right;
}
#search_submit:active, #search_submit:focus {
border: 0;
outline:0;
}
</style>
<div id="search-area">
<form expr:action="/search" method="get">
<input autocomplete="off" type="text" name="q" placeholder="Search..." id="search_field"/>
<input type="submit" id="search_submit" value=""/>
</form>
</div>
3. Stylish grey color search box with hover button

Stylish search box with hover button
<style>
#searchbox {
background: #d8d8d8;
border: 4px solid #e8e8e8;
padding: 20px 10px;
width: 250px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
</div>
4. Simple white color, fast loading search box

Simple fast loading search box
<center>
<style>
#search {
border: 1px solid #BDBDBD;
background: white url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat;
text-align: left;
padding: 8px 24px 6px 6px;
width: 75%;
height: 18px; mouse:pointer:
}
#search #s {
background: none;
color: #BDBDBD;
font-family: verdana;
font-size: 11px;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
</style>
<div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>
<br/><br/>
</center>
How to Add Stylish Search Box Widget to Blogger
If you don’t know how to add HTML codes to blog, read this guide:

• Blogger Widgets: How to Add Html Codes in Blogger

1. Login to your Blogger account, go to Layout > tap on the ‘Add a gadget’ link on the right side.

2. Select HTML/JavaScript from the pop-up window > paste the code inside the empty box.

4. Click Save & you are done!

Conclusion
By performing above easy steps, you can easily add stylish, animated, fancy custom search box widget to your blog for free.

Getting error while saving the codes? Let me know in the comment box below!
How to Add Back to Top Widget to your Blog on Blogger

How to Add Back to Top Widget to your Blog on Blogger

Adding a floating back to top button to your blogger blog can be very helpful for your readers to easily scroll your blog from bottom to top while reading articles.

how to add back to top buttton to blogger blog


Especially, when you write lengthy articles on your blog, this back to top widget will help your readers to easily scroll up while reading a lengthy blog post.

There are several reasons why you should consider using this scroll widget to your blog.

  • This widget will help your readers to easily scroll your blog from top to bottom.
  • It will help to easily scroll your blog by saving time.
  • This tool will help you increase user experience.

How Back to Top Button Works?

After adding back to up gadget codes to your blog, this Scroll button will automatically appear in your window once a user scrolls your blog. This button will appear in all of your blog posts.

This tool is user-friendly so it won’t slow down your blog! All you need is the piece of gadget code.

In this tutorial, I will show you how to insert back to top button to blogger using text and picture in minutes.

How to Add Back to Top Button to Blogger?


This code will show a text top on the button. This button will start appearing once you scroll the page.

1. Go to your blogger layout page & tap on Add a new Gadget.

Adding Back to Top Button to Blogger


2. Select the HTML/JavaScript widget and open the gadget.

Add Back to Top Button to Blogger
<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color:
#539dcc;
color: white;
cursor: pointer;
height: 50px;
width: 50px;
border-radius:50%;
font-weight: bold;
}
#myBtn:hover {
background-color:#999;
}
</style>
<button onclick="topFunction()" id="myBtn" title="
Back to top">top</button>

<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

3. Copy this piece of code & paste in the HTML gadget.

Adding Back to Top widget to Blogger step3


4. Save the widget & you’re done!

You can easily customize this tool according to your blog design. To change the background color, replace the yellow code with your theme’s hex color code.

To change the button name replace the blue name with the actual name you want to use.

How to Insert Back to Top Button to Blogger blog?


This code will show an image on the button. Click on the button to scroll up easily!

1. Copy the below codes and paste it to HTML gadget in your layout page.

<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;">
<a href='#Top' title='Gp to Top'><img src='
https://2.bp.blogspot.com/-bckH_lGion4/WgvXnThUB3I/
AAAAAAAAAJo/J8x5SFfrnCEiG2x9mylndEO7ras6E0kqwCLcBGAs/
s1600/up%2Bimage%2B3.png
' /></a></div>

To use the image on back to top button, you need to paste the above HTML codes into an HTML gadget. Once you’re done, this button will automatically appear on your blog. If you don’t know how to add HTML codes to blogger gadget, read this guide.

• Blogger Widgets: How to Add Html Codes in Blogger

Now if you wish to change the image in the button, replace the red codes with another src attribution link. Here are some of the images you can use instead:



https://1.bp.blogspot.com/--zM-
H6FiC0o/WgvXneVfeSI/AAAAAAAAAJg/Ot1p2h-_g1MC2jfxCy-
OYklrcR3TcOuQgCLcBGAs/s1600/up%2Bimage%2B4.png
https://1.bp.blogspot.com/-LNmL4LSVevU/WgvXo8Yh3zI/AAAAAAAAAJs/Z35VcE7K9Twqegv5AAL40E
_jEZMeoAcswCLcBGAs/s1600/up%2Bimage%2B5.png
https://3.bp.blogspot.com/-fLK530y4o3E/WgvXnTbAAQI/AAAAAAAAAJk/lcRx6DT4aYMLhjBmlWPXXtaU
w6bII4kLQCLcBGAs/s1600/up%2Bimage%2B1.png
https://2.bp.blogspot.com/-LKWPZhI-gJI/WgvXpJA40UI/AAAAAAAAAJw/Jivbd2wqt6IDcd8SYfp-
vITIDf_18KBVQCLcBGAs/s1600/up%2Bimage2.png
https://2.bp.blogspot.com/-bckH_lGion4/WgvXnThUB3I/AAAAAAAAAJo/J8x5SFfrnCEiG2x9mylndEO7ra
s6E0kqwCLcBGAs/s1600/up%2Bimage%2B3.png

Conclusion

By performing the above 2 ways you can easily add floating scroll back to top button to your blog on blogger. All you have to do is copy the above codes and paste it into an HTML/JavaScript gadget box. This back to top widget will automatically appear on your blog once the user starts scrolling your site.

Getting error while adding the back to top button to your blog? Let me know in the comment box below. Thanks.
How to Create Custom Contact Form (Contact Us Page) for Bloggers

How to Create Custom Contact Form (Contact Us Page) for Bloggers

A contact us form or contact us page is a must-have widget for every professional blogger and website owners.

custom contact form for blogger wordpress


A contact form allows you to engage and interact with your customer or readers more quickly. Adding a contact form to your blog is really easy and simple.

There are many websites that offer custom contact us form generator tool for bloggers. All you have to do is, visit their website, customize & generate the HTML code of the form and paste it to your site and you’re done!

Why Do I Use Contact Form?

The contact form allows your website or blog visitors to easily contact you by entering their email address, name and the message they want to convey. These contact form will help your users in many ways.

  • They can easily clear all of their doubts.
  • They can easily contact you for any business purpose.
  • Having a contact form increases their trust.
  • This process can save lots of time for you & your visitors.
  • It helps to increase engagement between you and your readers.
  • Show your professionalism and make your site user-friendly.

These are some of the reasons for having a beautifully designed contact form on your site.

How to Add Simple Contact Widget to Blogger?

Do you know that blogpost site does provide a contact gadget for your blog? To add it to your site, follow the below steps:

1. Go to Layout page on your blogger dashboard and Click on add a gadget.

adding simple contact widget to blogger

2. Now go to more gadgets and add the contact form.

Adding contact widget to blogger


3. Add a title and click save.

Adding simple contact gadget to blogger

How to Add Contact Us Form to WordPress?


Note: If you are using the free version of WordPress.com site, you cannot install other plugins to your site. To add a plugin you need to upgrade your plan.

In WordPress, you will get free contact form with Jetpack plugin, but if you don’t like that old classic form, you can easily replace it with a beautifully designed contact form.

All you have to do is install a contact plugin to your site & you’re done! To add a contact plugin to your site, perform below steps:

1. Visit your WordPress dashboard & click on Plugins, and search for WP forms.

Adding contact us form to wordpress


2. Open the form plugin, click install and activate it & you’re done! Now customize your form & add it to your pages to let others see your contact form.

Add contact us form to wordpress
How to Add Custom Contact Form to Blogger?

To add a custom designed contact form on your blog, follow simple below steps:

1. Visit 123 contact form and sign up with their basic free plan using your Gmail account ( you can also sign up via your Facebook account).

Adding custom contact form to blogger


2. After verifying your email ID, go to My forms page and click on Create your first form.

Add custom contact form to blogger

3. Now in the new form page, tap on contact & lead form and customize your form using their drag & drop feature.

Adding contact form to blogger


4. Once you’re done customizing your form, click on publish form and choose your blogging platform, where you want this form to appear. Tap on Blogger and copy the JavaScript code.

Add stylish contact form to blogger


5. Visit the blogger dashboard and click on the Layout page.

6. Tap on Add a gadget & select HTML/JavaScript widget.

7. Add a title, paste the copied code & click save.

If you don’t how to add HTML codes to blogger widget, read my below post.

• Blogger Widgets: The Killer Guide for Adding HTML Codes to Blogger

How to Add Custom Contact Form to your Blogger Page?

Adding the contact form to your page is very simple. Copy the above contact form code & paste it to your Blog page & you’re done! To add the codes to your blog, perform below steps:

1. Copy the above contact form code and visit your blogger dashboard.

2. Click pages & tap on add new page.

3. Add a title (Contact me or us) and click on HTML mode & paste the copied codes, click publish.

Adding contact form to blogger page

Conclusion
By performing the above steps, you can easily add Custom Contact us form to your blog. Having a simple contact form on your blog will help you provide a better user experience to your visitors to easily let them contact you from your blog.

Like this tutorial? Share it with your friends & family members.