How Create a custom 404 Error Page in Blogger

Hi Friends Today I'm sharing how to create a custom 404 error page. It is kind of page which appeared when a visitor click on a broken link. Now a days 404 error page is very important for blogger SEO. It helps to increase traffic on your blog. by following my steps you can create a beautiful 404 error page very easily.

Demo

How to Create a 404 Error page

Step 1.

Go to Blogger Dashboard > Settings > Search Preference.

Step 2.
Copy and paste the code below.

<div class='EBT-404-box'>
<p style='line-height: 30px'>
<strong>
<font color='#ff0000' size='6'>Oops!</font>
<font size='4' color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits.
</font>
</strong>
</p>
<br/><br/><br/>
<p align='center'>
<font color='#a32b33' style='font-size: 150px'>
<strong>404</strong>
</font>
</p>
<p>&#160;</p>
<p align='center'/>
<p align='center'>
<font size='5'>Page Not Found!</font>
</p>
 <p style='line-height: 30px'>
<strong>
<font color='#666666'>
Kindly do one of the followings:
</font>
</strong>
</p>
<ol style='line-height: 25px'>
<li><a href='javascript:history.go(-1)'>&#171; Go Back</a></li>
<li>Go To Homepage by <a href='http://ebloggertechniques.blogspot.com/'>Clicking Here</a></li>
<li>Report the Problem to us by <a href='http://ebloggertechniques.blogspot.com/p/contact.html'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em></li>
<li>Use the below search to find what you need.<br/></li>
</ol>
<center>
<div id="tvb-searchbox">
<form id="tvb-searchform" action="/search" 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...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
</center>
</div>

Now change the following:
Replace ebloggertechniques.blogspot.com to your blog URL.
Replace ebloggertechniques.blogspot.com/p/contact.html to your contact page.

Step 3.
Go to your Template.

Step 4.
Backup your Template.

Step 5.
Edit HTML.

Step 6.
Find ]]></b:skin> in your Template.

Step 7.
Just Below ]]></b:skin> Add the following code.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#blog-pager {
text-align: center;
display:none;
}
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 98%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 98%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
.TVB-404-box {
background:#FFFFFF;
width:98%;
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
}
#tvb-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXH1qE_rhh3wSqaN8EzApJCFYeuXol1FuehO4_J37XwxBEu9JSI7_S5PmbtuWZ5a_yJtoofTZ2ti-wZhRLbEZpqOEiVszHjAPevlC7oOsyRACt_v-HR1Ul5DbIU7IEt9vIg83ddxTxola/s1600/searchbox_tvb.png) no-repeat scroll center center transparent;
width:307px;
height:50px;
disaply:block;
}
form#tvb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tvb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tvb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
</b:if>

Read more ...

How to create a blog for free

How to Create a Blog

Blogger is a free blog hosting service by Google that provides you to create your blog for free of cost without any charges. Blogger is the best tool for beginners. So today I'll teach you how to create your own blog on blogger. You must follow my steps.

Step 1.

Go to Blogger.com.

Step 2.

If you have a Google Account you can Sign in with your account. If you don't have a google account then click sign up as shown in the picture below.

Step 3. Now you are log on to your Blogger Dashboard, click 'New Blog' to create a new blog as shown below.

Step 4. Enter your blog name and available URL.

Step 5. Select a Template which you want to use on your blog. I recommend you to use Simple Template.

Step 6. Click 'Create Blog' button.

That's it your blog has been created. Start posting regularly and Earn Money Online.

Read more ...

How to Change the Position of Sidebar/Main Wrapper Blogger

Today I'm sharing simple CSS trick which can change the whole layout of your blog. This trick is for those who want to change the positions of their blog's sidebar or main wrapper. You can apply this trick very easily by finding and editing in your template. But before you start don't forgot to backup your template before you edit your template. To change your sidebar/Main Wrapper Follow the steps given below.

Changing the Position of Sidebar or Main Wrapper

Step 1 .
Go to Blogger Dashboard > Template

Step 2.
Click Backup/Restore and download your templates

Step 3.
Now Find Below code or similar code

#main-wrapper { 
float: left; 
width: 600px; 
margin: 0; 
padding: 0; 
}

change the following:

float: left to float: right

Now you have to transfer your your blog Main Wrapper from right to left
Find the code in your template i-e given below:

#sidebar-wrapper {
float: right;
width: 320px;
margin: 0;
padding: 0 20px 10px;
display: inline;
}

Again Change the Following:
float: right to float: left.

Save your template and that's it!
If you are facing any problem please comment below.

Read more ...

Remove Blogger Attribution Widget Remove Powered By Blogger

Hi my friends this post will help you how to remove attribution gadget 'Powerd by Blogger'

The attribution gadget is at the footer of a blog and shows "Powered by Blogger". It is locked by default by google so you have to unlock it ,Because it is locked by the blogger.If you want to unlock it you can follow my steps that are given below.

How to Remove Attribution Gadget on Blogger

Goto Blogger Dashboard > Template > Edit Html

Always Backup Your Template by using backup/restore to avoid errors

Now click 'Edit HTML'

Now click 'Jump to Widget' and select 'Attribution1'

Now change Locked = true to Locked = False

Then go to layout and click edit on Attribution Widget.

That's it!
If you are still facing any problem please comment below.

Read more ...