You Might also Like

loading...

Wednesday, July 31, 2013

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.


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(http://2.bp.blogspot.com/-Mmv5dnwsL1U/UVbyoXqigrI/AAAAAAAADvY/NcJk2PcSBjY/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 ...

Tuesday, July 30, 2013

Amazing CSS3 Multi Level DropDown Menu For Blogger

Today I'm sharing another amazing drop down menu. This amazing drop down menu has been designed by MyBloggerTricks. It's a multi level drop down menu. This menu will help the visitor easy navigation of the blog. Now I teach you how you can add this menu to your blog. Just follow my steps.

How to Insert/Add Drop Down Menu to blogger

  1. Go to Blogger Dashboard > Layout.
  2. Then Add Gadget.
  3. HTML/Javescript.
  4. Go to this link and copy the code.
  5. Paste the code in HTML/Javascript.
  6. That's it!

How to edit it

I prefer you to use HTML Editor to edit this Drop Down Menu
Read more ...

Monday, July 29, 2013

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 ...

Blogger Recent Comments Widget/Gadget


It is a Kind of Widget for Blogger that displays the recent comments of your blog in your blog's sidebar. It shows a list of last comments with the title of the post for which comment was published. This widget is very useful because it shows the popularity the status of your blog. This widget is also very helpful in increasing traffic on your blog.

How to install This Widget/Gadget

  1. Go to Blogger Dashboard > Layout.
  2. Add Gadget.
  3. HTML/Javascript.
  4. Go to this link.
  5. Change "Your Blog Name" to your URL.
  6. Save it.
That's it

Please comment if you are facing any problem.

Read more ...

Fantastic Javascript Image Slider For Blogger

Hi friends today I'm sharing fantastic Javascript slider. The slide works with JavaScript & jQuery/Flash is not required. It has a beautiful ribbon at the top left corner of  the slider, and it is termed as "What's Hot". It also contains a very beautiful and professional slice effects which slices the picture into 12 parts,these are the main features of the slider which increases its beauty. Another amazing feature is that it is customizable so that you can edit it as your wish according to the design of your blog. It is also very easy to add it to blogger.


How to add this Fantastic Slider in Blogger

  1. Go to tny.cz/e00cfdb8
  2. Copy the code.
  3. Go to Blogger Dashboard > Layout
  4. Add Gadget > HTML/Javascript
  5. Paste the code.
  6. Replace my image links with your links.
  7. That's it!

Read more ...

Friday, July 26, 2013

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 ...

About

Related Posts Plugin for WordPress, Blogger...

Like Us

Receive all updates via Facebook. Just Click the Like Button Below...

Provided By Blogger Yard