How to Add Custom 404 Error Page in Blogger By Wide Info Blog

There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed about - Blogger’s fresh new Dashboard & Colors - November 2016.  Today we are discussing how can we add a custom 404 error page in blogger.

What is 404 Error :  The HTTP 404 Not Found Error means that the webpage you were trying to reach could not be found on the server. It is a Client-side Error which means that either the page has been removed or moved, and the URL was not changed accordingly, or that you typed in the URL incorrectly.

Normally, when any post or URL is not found on the blog. It shows "Sorry, the page you were looking for in this blog does not exist." But we can customize it, here are the steps:

Step - 1. Login into your blogger account & select the blog to which you want to add custom 404 error page. Now, Go to "Settings"> Search Preferences > Custom Page Not Found  as shown below.

Step - 2.  Now Copy the code given below & paste into the field you edit in above step. Now, save your settings & enjoy!!!

Code :   

---

<center><h2>Sorry, this page could not be found</h2>

<p style="color: red;">Try the search box below to find what you're looking for.</p>

<form id="searchThis" action="/search" style="display: inline; margin: 20px auto;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" />

<br/><br/>

<h2 style = "text-align: center;">Or</h2>

<br/>

Go to Home Page <a href="http://www.ABC.com"><b>Click Here</b></a>

<br/><br/>

</form></center>

---

Note :  Change  ABC  with your blog or site URL. Share this blog with your friends.

Read More »

Blogger’s fresh new Dashboard & Colors - November 2016 By Wide Info Blog

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. 

Blogger is a free way to share your ideas with the world. It's very easy & simple to create a blog with a beautiful template - which is free. Now Blogger has recently launched the fresh new Dashboard & Colors. New Dashboard is very beautiful & simple to use. Here's the first look of the new dashboard.

What's new in blogger (Nov 2016 Update)  :   

• Now, whenever you open Blogger, you’ll be taken right to your blog with the most recent post, putting you one click or tap closer to drafting something new.
• Blogger has also updated header bar, making it consistent with what you’ll find in other Google products.
• Blogger has also adjusted Blogger’s colors to make things easier to see.
• Admin's profile pic near publish button.
• There may be more changes, which you will learn from your blog while creating a new post.

Read More »

How to Backup your Blogger template - By Wide Info Blog

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - Auto Read More with thumbnails for Blogger. Today, we are going to discuss - How to Backup your Blogger template. Here are the steps for doing the same.

Step - 1.  Login into your blogger account & select the blog whose backup is to be taken.

Step - 2.  Click on the "Template" tab and now, click on the Backup / Restore button as shown below.

Step - 3. Now, click on the "Download template" button as shown below.

Your template will be saved in .xml format. You may keep this safe & may use to upload or restore for next time.

Read More »

Auto Read More with thumbnails for Blogger - By Wide Info Blog

This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - Create a Custom Static Home Page in Blogger. Today, we are going to discuss about auto read more or post expert with thumbnails in blogger.

Steps for adding Auto Read More with thumbnails in Blogger. Before you start, backup your blogger template first.

Step - 1. Login into your blogger account & select the blog to which you want to add Auto Read More option. Now, click on "Edit HTML" under "Template" tab. Search for </head> using ctrl+F & paste the following code just before / above  </head>  as shown below.

Code 1 :

<script type='text/javascript'>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

img_thumb_height = 160;

img_thumb_width = 180;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

 .readmore a {text-decoration: none; }

</style>

</b:if>

</b:if>

Now Save your template & proceed to the step - 2.

Step - 2. Now again search for <data:post.body/> code in your template. Now, replace this <data:post.body/> with the code given below.

Note :  When you will search <data:post.body/>, you will find this more than once but you need to stop at second. If doesn't work, try replacing third one  -  as shown below.

Code 2 :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Now Save your template & enjoy. :)

Note :   In code 1, you will see some parameters like  490, 400, 160 & 180. They are the summary & post image's  height, width. You can change them according to your requirement.

Read More »

Create a Custom Static Home Page in Blogger - By Wide Info Blog

This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - Adding Meta Description & Keywords to Blogger. Today,  we will discuss - How to Add a Custom Home Page in blogger. Here are the steps for doing the same.

Step - 1.  Login into your blogger account & select the blog to which you want to add a custom Home Page instead of latest post page.

Step - 2. Now, click on the "Pages" tab & create a new page. Customize your page according to your Home Page requirement. This new page is going to be your Blogger Home Page as shown below.

Now Give Suitable title to your page & publish as shown below.

After publishing the page, click on "view" . Your page will open in a new tab as shown below.

Copy URL of your page. It will be like -   http://sample.blogspot.in/p/my-new-page_5.html

Step - 3.  Now. go to "Search preferences" tab under "Settings". There you will see "Custom Redirects". Click On Edit button as shown below.

In the "From" box, enter only a forward slash symbol "/". In the "To" box, paste the URL of your page - only the last URL of the page starting from "/p".    Suppose your page complete URL is - http://sample.blogspot.in/p/my-new-page_5.html

then you will copy highlighted part of the URL only as shown below. Now, save your settings & you are done.

Read More »