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 »

Adding Meta Description & Keywords to Blogger - 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. Previously we have discussed - Show Post title before Blog title in Blogger.

Here are the steps for adding meta description & keywords to blogger.

Step - 1. Login into your blogger account & select the blog to which you want to add meta description & keywords.

Step - 2. Now, go to "Template" tab & click "Edit HTML" as shown below

Step - 3. Now search for <head> in the template using ctrl+F, & paste the following code right after <head> as shown below.

<meta content='Your Blog Description' name='description'/>

<meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>

Replace :: 

Your Blog Description                  :: by your blog description

Keyword1,Keyword2,Keyword3 :: by your blog keywords

Now save your template & enjoy. For latest blogs keep visiting - WideInfoBlog. If you like, please share it with your friends.

Read More »

How to Use NVL, Decode & to_char in Jasper Reports - By Wide Info Blog

This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - How to Add QR Code in Jasper Reports. Today we are going to discuss about NVL, Decode & to_char in Jasper Reports.

NVL Function :: NVL function is basically used to replace "null" by our own keywords like - NA, Not Available in Jasper Reports.

Syntax::  NVL(CUSTOMER_NAME, 'NA') as CUSTOMER_NAME,   

CUSTOMER_NAME  is the column name on which NVL function is applied. If this column will be blank or null the 'NA' will be displayed in place of null or blank in results. we can also change 'NA' to as per our requirement.

Decode Function ::  Decode Function is used to decode the flags used in the database. Suppose we have used 

N = NO

Y = YES

But default results will show only N & Y, which may be difficult to understand for others. So, we use the decode function like-

Syntax ::  decode(VERIFICATION_REQUIRED, 'N', 'NO', 'Y', 'YES')VERIFICATION_REQUIRED

VERIFICATION_REQUIRED is the Column name to be decoded.  Here 'N' is decoded to 'NO' & 'Y' is decoded to 'YES'.

TO_CHAR Function :: This function is basically used to decode date in Jasper Reports. default format of date in jasper reports is like --  1/16/15 12:00 AM

So to avoid this we use the to_char function.

Syntax ::  to_char(FILE_DATE, 'DD-MON-YYYY')FILE_DATE

FILE_DATE = column name

DD-MON-YYYY =  Date format (10 - DEC - 2015)

or we can use

DD-MM-YYYY  =  Date format (10 - 12 - 2015)

Read More »

Show Post title before Blog title in Blogger - By Wide Indo 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. Previously we have discussed - How to Add a Custom Post Template in Blogger.

Show Post title before Blog title in Blogger :  

Step - 1. Login into your blogger account & select the blog to which you want to apply this. After login under "Template", click "Edit HTML" as shown below.

Step - 2. Now Search -   <title><data:blog.pageTitle/></title>  using ctrl+F in template & replace this code with the following code. Now save your template & enjoy.

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

<title><data:blog.pageName/> | <data:blog.title/></title>

<b:else/>

<title><data:blog.pageTitle/></title>

</b:if>

Note :  Backup your template before you apply changes.  Keep visiting Wide Info Blog for latest blogs. Comment, Like & share with your friends.

Read More »

How to Add QR Code in Jasper Reports - By Wide Info Blog

How to Add QR Code in Jasper Reports - By Wide Info Blog. To Add a QR Code, we need two jars - ZXing’s Core and JavaSE jars in the classpath in iReport (Jasper). Download Jars = Click Here, & save on your PC. Here are the steps for adding QR code in Jasper reports:

Step - 1.  Open iReport Designer & add two jars - ZXing’s Core and JavaSE jars in the classpath - (Jasper Report >> Tools >> Options >> Classpath). Now click on "add jar" & select the jar location from your PC as shown below.

Step - 2. Now add image  to your report with following settings:- 

Expression Class:  java.awt.Image     (as shown below)

Image Expression : 

  com.google.zxing.client.j2se.MatrixToImageWriter.toBufferedImage(

     new com.google.zxing.qrcode.QRCodeWriter().encode(

         $F{CONTENT_TO_ENCODE},

         com.google.zxing.BarcodeFormat.QR_CODE, 300, 300))

Now Copy & paste above code in Image Expression. Where $F{CONTENT_TO_ENCODE} is the field that you want in your QR code.

Read More »

HTML Documents / HTML Headings / HTML Paragraphs / HTML Links / HTML Images

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

HTML Headings : HTML headings are defined with <h1> to <h6> tags as per the requirements.

<h1> is the most important heading or we can say the Biggest heading. If we want to use the biggest heading we have to use <h1>.

<h6> is the least important heading or we can say the Smallest heading. If we want to use the smallest heading we have to use <h6>.

Try it Yourself >>

HTML Paragraphs :  We write HTML paragraphs with <p> tag. Here 'p' defines the "paragraph". So, where ever we need a paragraph, we must use this tag.

HTML Links :  HTML links are defined with <a> tag.  Example : 

<a href="http://www.wideinfoblog.com">This is an HTML link</a>

HTML Images : We can add images to any HTML document with the help of HTML <img> tag. An Example is given below.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJOh3oFAtX1IPFyY2v1TXrfssE70qjQhvZcGAhG1wJBOqCVpwjZjGsgUZfH2takOOgFhT3W9xaCgQNKcSUQGfpCtJjmID5mrN9mPzYyXLS3Jb67MJamlyOJDk4RE4ASdZ_c6GwHDlDtg7/s1600/HTML.png" alt="HTML Image Example" width="250" height="142">

Try it Yourself >>

Here we can also set the Height & Width of the image as shown in the above example.

Read More »

Creating an Example of a Small HTML Document

Friends here I am writing an example of a small HTML document. Learning HTML is very easy. Keep visiting Wide Info Blog. Try this on your own system. Previously we have discussed about the basic introduction & history of HTML.

<!DOCTYPE html>

<html>

<head>

<title> Page Title </title>

</head>

<body>

<h1>  My First Heading  </h1>

<p>  My first paragraph.  </p>

</body>

</html>

Try it Yourself >>

<!DOCTYPE html>    : This defines that the document is HTML.

<html>  </html>     : Text between these tags is HTML.

<head>  </head>    : Gives information about the document.

<title>  </title>      : Used for the title of the document.

<body>  </body>    :  Used for visible page contents.

<h1>  </h1>           :  Used for Heading.

<p>  </p>               : Used for Paragraph.

Now, Open Notepad in your system. Copy & paste the above HTML code in notepad. Now save this page with extension .htm & your file is saved as shown below.

Next step is to open your saved file with any of the browsers installed on your system. You will see your first HTML page as shown below.

Read More »

How to Add a Custom Post Template in Blogger - 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. Previously we have discussed - How to Enable HTTPS on Blogger / Blogspot - By Wide Info Blog.

Steps for Adding a Custom Post Template

Step - 1. Login into your blogger account & select the blog to which you want to add a custom post template.

Step - 2. Now, Open your blog's "Settings", under settings, click on "Posts, comments and sharing settings". Now you will see  "Post Template" option on the second number as shown below.

Step - 3. Now Click on "Add" , now you can write the content you want in your all new posts as shown below.

Step - 4. Now save your settings & when you  will click on new post - you will see the default contents that you have added. Here you can also add simple HTML, Tables & Images as per requirement.

Keep reading new blog @ www.wideinfoblog.com

Read More »

How to Enable HTTPS on Blogger / Blogspot - 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. Previously we have discussed - Display Latest Posts from a Specific Label in Blogger. 

Steps for enabling HTTPS on Blogger / Blogspot

Step - 1. Login into your blogger account & select the blog to which you want to enable HTTPS on blogger / Blogspot.

Step - 2. Now click on "Settings" tab & under settings in "basic". Now you will see "HTTPS Redirect" click on the option in front of this & select "Yes". as shown below.

Step - 3. Now save your settings & you are done. Open your blog & see - HTTPS is enabled. 

NOTE :  HTTPS is not available for a custom domain. Friends keep learning & sharing. Visit WideInfoBlog for latest blogs.

Read More »

Display Latest Posts from a Specific Label in Blogger - 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. Previously we have discussed - How to Blink Text / Link. 

Now, Steps for Displaying Latest posts from a specific label in blogger.

Step - 1. Login into your blogger account to which you want to Display Latest Posts from a Specific Label.

Step - 2. Now, Go to "Layout" Tab & click "Add a Gadget" where you want to add as shown below. Now add "HTML / JavaScript", copy & paste the following code.

Code : 

<script type="text/javascript">

function recentpostslist(json) {

 document.write('<ul>');

 for (var i = 0; i < json.feed.entry.length; i++)

 {

    for (var j = 0; j < json.feed.entry[i].link.length; j++) {

      if (json.feed.entry[i].link[j].rel == 'alternate') {

        break;

      }

    }

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs

var entryTitle = json.feed.entry[i].title.$t;

var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

 document.write(item);

 }

 document.write('</ul>');

 }

</script>

<script src="http://www.MY-DOMAIN.com/feeds/posts/summary/-/Placement Papers?max-results=2&alt=json-in-script&callback=recentpostslist" style="float:right;font:bold 10px Arial;padding:5px 0;"></script>

Note  :  replace 

• MY-DOMAIN   by your blog url
• results=2, by results=5  or more (No. Of Posts)
• Placement Papers   - by your label Name

For latest blogs, keep visiting wide info blog. Keep learning & sharing. Any Question ?? . Ask in Comments.

Read More »

How to Blink Text / Link in Blogger - 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. Previously we have discussed - How to backup Blogger posts & Restore from Backup - Part 2. Now We will discuss - How to Blink Text / Link in Blogger.

Steps for Blinking Text / Link in Blogger

Step - 1. Login into your blog & select the blog to which you want to add Blinking text / link.

Step - 2. Add the following CSS to your blog,  See - How to Add Custom CSS to Blogger as shown below.

.blink {

  animation: blinker 1s linear infinite;

}

@keyframes blinker {

  50% { opacity: 0.0; }

}

Step - 3.  Now Go to "Layout" & click on the "Add a Gadget" tab & select "HTML & JavaScript" Now paste the following tag into Gadget & click Save as shown below.

<span class="blink">Wide Info Blog</span> 

You can customise the text according to requirements. 

Note: If you want to blink some url or link use this tag 

<span class="blink"><a href="http://www.wideinfoblog.com" target = "_top">Wide Info Blog</a></span>

Keep learning & sharing this post with your friends. if you have any question, ask in comments.  This blog publishes all tutorials, tips & tricks about blogger. Keep visiting Wide Info Blog.

Read More »