How to Add / Remove Date, Time and Author Profile from Blogger Post

How to Add / Remove Date, Time and Author Profile from Blogger Post

As we all know that the blogger platform do provides many features to customize your blog, almost entirely. Some of their features allow to enable or disable date, time, social share buttons, reactions and even author profile on your blogger posts.


The best about this is you can anytime change the settings whether you want this options to show or not. To do this you don’t need to have any kind of coding knowledge to hide date time and author profile because blogger already has a build in drag and drop feature to apply all those settings.

Here in this tutorial, we will show you how to insert or delete date, time & author box on your blog articles.

Adding & removing date and time on blogger

1. Login to your blogger account, click on layout page and hit edit on blog posts gadget.


2. Now you will see tons of options to customize your blog post. Click date and time box to appear in your post, but if you don’t want then leave it as unchecked (blank).


3. Below the ticker box, you’ll see that it shows the live demo of how it will actually look on your blog. You can even arrange these options according to your choice.


4. Once you’re done with the settings, click save.

Enabling and disabling author profile below your blogger post

You need to follow the same above process to enable or disable author profile below your blog post.

1. Go to layout and click edit on blog posts widget.

2. Click show author profile below posts button, and hit save.



Congratulations! You’ve successfully added or removed author profile below your blog post. If you want to add about author profile gadget in the sidebar or in the footer of your blog then read this guide.


Conclusion
Its the only way to hide or insert date, time and the author profile gadget within your blog posts. You can also remove or allow labels (also known as categories in Blogspot) on your blogger articles. Once you are done with those settings, click ‘save arrangements’ and preview your blog whether its working or not.

Getting error while customizing Blog posts Gadget? Let me know in the comment box below and also subscribe to our newsletter to receive latest posts, deals directly to your mailbox.

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.

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!