SEO Tips & Tricks

Awesome Stylish 404 Error Pages For Blogger

by Unknown / Sunday, March 25, 2012 / Posted in Blogger Hack, Template Hacks

404 Error or Page Not Found Error generated by Blogger when a user enters an invalid URL or 404 Error is an HTTP status code that means the page you are trying to reach on your Blog couldn't found or Page not exist in the Server.
By Default Blogger shows Error page message in a box and its not look Style.
Here I am saying about how to Customize it much better...

View Demo

Only Custom message [No Style]

If you want to show only a custom message then First Go to updated Blogger Interface
Then Go to Setting->Search Preferences

Error Message with Stylish 404 images

If you want Colorful Stylish 404 page do the following.

Go to Design->Edit HTML
Find </head> and copy the below code just above it.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>
</b:if>

Save the Template

Error Page Style 1

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpF1UToRG65za4UhxZOjdI7Y3vz4PkojtL_QVPgqLvwQ9dJU86Py7WkGfcfLmQuFW653R0FPFolo4t3Y-yxCalFtcbtn3a36BNTDe5IFFPWyZIBuo62HuZLUycaOyBldVL-DQvCXkIvo/s1600/404+error+page+1.jpg"/>

Error Page Style 2

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBKHh6tCPQ2_70V50NYtjbZJhNMX689aYYrv5HKBNqFvSjPT-3REwI6ScK-FSCVObxuZTmYFpI8eRbNx9ITjFZEkYV4JhAZMun9lYB5j4vJ60aZuS-O4lWAcRjjj72HlAiui1Q33-rQI/s1600/404+error+page+2.jpg"/>

Error Page Style 3

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYqlNf9MkCy80EQsmJhlYg5mkf2xqjdHls3rxL4p1aeknL9bU56vyzIGdQgVyerGVD6fCMDPB9LSYbsOJjLBZmZs5oaQSmCKmLCfOCgXknFODJ3UCawnOFS368wp0fiRZRd-BVagVbbI/s1600/404+error+page+4.jpg"/>

Error Page Style 4

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUNdexqBzY8NP_2uVQY-5Xb9d3YPsWdMMQ848NqkVO-_HBCf-iIprTEAHCtScGFSPeb65RnKFELXjqSdV-lw2yqZr0c2RFuTYH4fiVo2uhQFE2Frjoyf8VX4ASsQ2ZTxXWQ3ZTgmzuu8/s320/404+error+page+6.jpg"/>

Error Page Style 5

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pEIozAqDHzu2G1QxzXGKeILvShsY8qQAkXgvYM22D_ZzBzyKSFSsc8x1bURzZWMnHFa1Gc4Rlzg8x3icnNKsW04xafP9GksYqEbGKe_AVgBp8euomXS3XXU8aocpCf234ggjAj3Yy44/s1600/404+error+page+7.jpg"/>

Error Page Style 6

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z9yH2yIFLlXRrvLQrU0rCJson-Ui2wDJBB0FAQfD85_Y0tCxNe9VR22Qxl729TRrlfsydfDsQic1MzHb5wgGfiYm0AyEzuaa0HAeeV3XnQr9Nm3_H_4p95Qcsrqbxodxstge1vFfl0U/s1600/404+error+page+3.jpg"/>

Then Click Save..That all..
First thanks to Bloggerplugins.com for the custom error page code, visit here. Then i made some changes and add beautiful 404 images that i was inspired from HongKiat .

I thinks this article helped you..If any bugs of doubts don't hesitate to ask..do comment...
Like and share...

Awesome CSS3 animated Menu for blogger Blog

by Unknown / Friday, March 23, 2012 / Posted in Menus for Blogger

Prev / Next

There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.

Want to see demo??Click the link below.

View Demo

Go to Design->Page Elements [Take Layout in new template]
Click on Add gadget just below the Header

Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
You can change RED highlighted text with your Menu title and GREEN with LINK

Add Elemic Blue Menu

Add Green Menu

Add Grape Purple Menu

Add Light-Dark SkyBlue Menu

Add Tree Brown Menu

I hope you enjoyed this Menu and also except more from us.

Create your own google type search engine

by Unknown / Monday, March 19, 2012 / Posted in Other Tricks

Prev / Next

Here is a funny and interesting trick I am going to show you.Create a Google Type search engine with your Google type Logo.It can be done very easily..

Netoops Blog Search Engine check it

View Demo

Go to FunnyLogo
Select the logo type (eg: Google type,Yahoo type,Harry potter type)

Enjoy.......!Have a nice Day...

How to Disable lightbox in blogger

by Unknown / Friday, March 16, 2012 / Posted in Blogger Tips

Prev / Next

Blogger also provides lightbox for viewing images.But if you take one image,it will open and the whole pictures in the page are listed ,Sometimes it may be a good feature also a bad feature.Here is a Simple trick to disable lightbox in blogger.

Go to Settings->Formatting (as shown in figure)

You see a Option Showcase images with Lightbox select No.

That all.No longer Light box appear in your blog.

Change Older and Newer posts with Post Titles for Blogger

by Unknown / Monday, March 12, 2012 / Posted in Blogger Tricks, Style your Blog

Prev / Next

change older posts newer posts with titles

Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from YABTB blog .This hack is done by MS-potilas of YABTB blog.All credits goes to YABTB. This awesome trick done using some jquery script.

Add Jquery script

Copy and paste the below code before </body>

<br /> <!--Start post title http://netoopsblog.blogspot.com --><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0e5ZEfJK-AN6H-zHMavjeM7DtHVsPbsqJllkq3WO5WaANiayTASgDbVakiDUDOH5PKwna8J7ugcvGuMwLPpMXJooV_yybolDB_vWAJ_Ei8pIL6IJoRu1OcZx-FFab6tIEH4HJCHcc8E/s1600/1x1juice.png'/></a><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br /> </b:if><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0e5ZEfJK-AN6H-zHMavjeM7DtHVsPbsqJllkq3WO5WaANiayTASgDbVakiDUDOH5PKwna8J7ugcvGuMwLPpMXJooV_yybolDB_vWAJ_Ei8pIL6IJoRu1OcZx-FFab6tIEH4HJCHcc8E/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS code

Add the following css code before ]]></b:skin> (Add CSS code another way)

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}

Remove Threaded Comments in Blogger Easily

by Unknown / Friday, March 9, 2012 / Posted in Blogger Hack, Blogger Tricks

Prev / Next

This is a simple article explaining How to remove Blogger 's New Threaded commenting system easily.There are some problems with it,Many users report that when a user click on post link,it takes control to the bottom of the page(to the comment section).Would you think that Threaded commenting system is not Good for Blog? Then you can remove it.
I am not going to say too much about Threaded commenting System,because i hope you know about it.
Follow the instructions below carefully.

Before Editing Template,you must Backup your template(How to Backup Template?)

Go to Design-> Edit HTML
Tick on Check box Expanded Widget Templates
Find the code data:post.showThreadedComments easily using ctrl+F
You will found code snippet like this

<b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Replace it carefully with the following code [Note: You will find the above code twice,replace it twice]

<b:include data='post' name='comments'/>
          </b:if>
               <b:if cond='data:blog.pageType == "item"'>
                     <b:include data='post' name='comments'/>

        </b:if>

Save it ,

No longer Threaded commenting appear on your blog.Normal commenting will back.
Cheers..!

Add Page Peel effect with jQuery & CSS to Blogger

by Unknown / Monday, March 5, 2012 / Posted in Blogger Tricks, Style your Blog

Prev / Next

You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.

Click the link below to view demo

View Demo

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

Copy the below code inside <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Add page peel effect to blogger blog

Step 2 :

Go to Design->Edit HTML
Copy and paste the below code above </head>

Step 3:

Copy the below code inside <body> or <body ...............>

Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement

Save the Template

You are done..! If any problem persists please do comment.

Change Animated favicon to Blogger blog

by Unknown / Saturday, March 3, 2012 / Posted in Blogger Tricks, Style your Blog

Prev / Next

Changing the favicon of your blog is a simple trick.By default blogger puts the blogger orange color logo to favicon.This can change to your blog logo.
Favicon appears next to the URL or title in the browser.If you have a logo of your blog then you can simply upload to blogger.Else there are many sites providing free favicon generator.See Netoops blog favicon on the top your browser.
Follow the instructions below.

Go to Design->Page Elements
You can see a small bar with blogger icon and a link EDIT click it.

Then select your blog's logo by clicking Browse and click on Save.

Insert Animated Favicon

You can also insert Animated gif favicon.

Go to Favicon Generator
Upload your blog's logo and give scrolling text then click Generate favicon

It will generate your animated favicon,right click on the icon shows there and Save it.Then upload to root of website or upload to free image uploading sites like tinypic you will get the link to image from there.

Go to Design->Edit HTML
Copy the following inside <head>

Then click save.

If any problem with this please inform via comment.Feel free to ask.

Rss:

Top

SEO Tips & Tricks

Awesome Stylish 404 Error Pages For Blogger

Only Custom message [No Style]

Error Message with Stylish 404 images

Error Page Style 1

Error Page Style 2

Error Page Style 3

Error Page Style 4

Error Page Style 5

Error Page Style 6

Awesome CSS3 animated Menu for blogger Blog

Add Elemic Blue Menu

Add Green Menu

Add Grape Purple Menu

Add Light-Dark SkyBlue Menu

Add Tree Brown Menu

Create your own google type search engine

How to Disable lightbox in blogger

Change Older and Newer posts with Post Titles for Blogger

Add Jquery script

Add CSS code

Remove Threaded Comments in Blogger Easily

Before Editing Template,you must Backup your template(How to Backup Template?)

Add Page Peel effect with jQuery & CSS to Blogger

Add page peel effect to blogger blog

Change Animated favicon to Blogger blog

Insert Animated Favicon

Labels

Blog Archive

About