Blogger Tips and Tricks (DOC)

Document Sample
Blogger Tips and Tricks (DOC) Powered By Docstoc
					Contact us Form

    1.   Log into your blogger account
    2.   Go to Layout > Edit HTML
    3.   Back Up your template
    4.   Search for ]]></b:skin>
    5.   And finally add the code below just above ]]></b:skin>

input.mbt1 {
font:10px 'trebuchet ms',helvetica,sans-serif;
border:1px dotted #0080ff;
input.mbt1hov {
font: bold 10px 'trebuchet ms',helvetica,sans-serif;
border:1px solid;
textarea {width:100%; color:#0080ff;
font:12px 'trebuchet ms',helvetica,sans-serif;
border:1px dotted #0080ff; }
textareahov { width:100%;
Email form code

<form action="" charset="UTF-8"
enctype="multipart/form-data" method="post">

<table bg="" border="0" cellpadding="2" cellspacing="0" style="color: white;"><tbody>

<tr><td><span style="color: black; font-family: Verdana; font-size: 85%;"></span><br />

<div id="mainmsg">




<table bg="" border="0" cellpadding="2" cellspacing="0" style="color: white;"><tbody>

<tr valign="top"><td nowrap="nowrap"><span style="color: #666666; font-family: Verdana; font-size: 10px; font-
weight: bold;">Name</span></td><td><input class="mbt1" maxlength="100" name="FieldData0" size="30"
type="text" value="" /> </td></tr>
<tr valign="top"><td nowrap="nowrap"><span style="color: #666666; font-family: Verdana; font-size: 10px; font-
weight: bold;">Email</span></td><td><input class="mbt1" maxlength="100" name="FieldData1" size="30"
type="text" value="" /> </td></tr>

<tr valign="top"><td nowrap="nowrap"><span style="color: #666666; font-family: Verdana; font-size: 10px; font-
weight: bold;">Country</span></td><td><input class="mbt1" maxlength="100" name="FieldData2" size="30"
type="text" value="" /></td></tr>

<tr valign="top"><td nowrap="nowrap"><span style="color: #666666; font-family: Verdana; font-size: 10px; font-
weight: bold;">Subject</span></td><td><input class="mbt1" maxlength="100" name="FieldData4" size="60"
type="text" value="" /> </td></tr>

<tr valign="top"><td nowrap="nowrap"><span style="color: #666666; font-family: Verdana; font-size: 10px; font-
weight: bold;">Message</span></td><td><textarea cols="60" name="FieldData5"

<tr><td colspan="2"></td></tr>

<tr><td></td><td align="left"><input maxlength="100 " name="hida2" size="3" style="display: none;"
type="text" value="" /><input class="mbt1" name="Submit" onmouseout="this.className='mbt1'"
onmouseover="this.className='mbt1 mbt1hov'" type="submit" value="Submit " /> <input class="mbt1"
name="Clear" onmouseout="this.className='mbt1'" onmouseover="this.className='mbt1 mbt1hov'"
type="reset" value=" Clear " /></td></tr>

<tr><td align="center" colspan="2"></td></tr>



How to Lock the Widgets in Blogger

    1.    Go to Blogger > Design > Edit HTML
    2.    5. Backup your template
    3.    6. Search for your widget ID
    4.    7. You will find a code similar to this, <b:widget id='HTML12' locked='false' title='Subscribe Now!'
    5.    Now to LOCK the widget simply let locked to true
    6.    Save your template and Your Widget is now LOCKED.

Breadcrumb navigation is a form of navigation to our blog content, so breadcrumb navigation can help
visitors more easily to browse the blog content. Usually breadcrumb navigation looks like this:

Browse >> Home >> Tricks >> How To Add Breadcrumb Navigation

Many webmasters said, you should add breadcrumb navigation into your blog, beside can help your visitors,
Google likes blog that added breadcrumb navigation. So, why don't you start thinking to add bredcrumb
navigation into your blog now??? If you want to add breadcrumb navigation, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the Expand Widget Templates box
4. Copy the code below, and paste above ]]></b:skin>

.breadcrumbs{padding:5px 5px 5px 0;margin:0;font-size:95%;line-height:1.4em;border-bottom:4px

double #cadaef;}

=> You can change the color code here
5. Then, find <div class='post hentry uncustomized-post-template'> . Copy the code below.

<b:if cond='data:blog.homepageUrl == data:blog.url'>


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

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>


</b:if> &#187; <data:post.title/>




=> You can change the words
after that, paste above <div class='post hentry uncustomized-post-template'> .
7. Done? Save it now!

Add new Meta Description Tags to Homepage and post pages in blogger
    1.     Now you have to add some code to your Blogger Template. To do that Go to Template and Proceed
           to Edit HTML. Find <head> and immediately below it paste the following snippet.

 <b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
 <b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>

    2.   That's It you have done it.

Adding Custom 404 error page with css3
    1.   Go To > Settings > Search Preferences
    2.   Click on Edit link next to : Custom Page Not Found
    3.   Inside the box paste the following code:

<!-- MBT Default Template -->
<div class='MBT-404-box'>
 <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
 <ol style='line-height: 25px'>
  <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
  <li>Report the Problem to us by <a href=''>Clicking
Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
  <li>Go To Homepage by <a href=''>Clicking Here</a>
 <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
 <p align='center'/>
 <p align='center'><font size='5'>Page Not Found!</font></p>

     Make these customizations:
        You can edit the bolded texts with anything you like
        Replace with link of your contact page
        Replace with your homepage link

 4. Click the Save changes button and you are half way done.

  5. Now go to Template > Edit HTML

 6. Search for this ]]></b:skin>
  7. Just below it paste the following code stylsheet code:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap {
   font-size: 100%;
   margin: none;
   position: static;
   width: 100%;
.status-msg-border {
.status-msg-body {
   padding: none;
   position: static;
   text-align: inherit;
   width: 100%;
   z-index: auto;
.status-msg-wrap a {
   padding: none;
   text-decoration: inherit;
.MBT-404-box {
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  box-shadow: 5px 5px 5px #CCCCCC;

  To change the background colour of the box edit #FFFFFF

  8. Save your template

  9. Done!

Visit any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog
address to see the 404 error appearing. For example like:

What's next?

I am working on some exciting new designs for the 404 error page display and will share latest 404 templates
soon. Do let me know if you got into some trouble. Make the best out of blogger. Peace pals! :)

How to control no of posts to show on post pages
Simply add ?max-results=10

To Optimize comment links in blogger do this:
     1.      Go To Blogger > Design > Edit HTML
     2.      Backup your template
     3.      Search for the following code (Search for a similar code).:


Note: If you found a rel="nofollow" in the above code inside your blog template then simply replace it with the one
described below.

add rel='external nofollow' anywhere after the a tag. Like this:
rel='external nofollow' expr:href='data:post.createLinkUrl'

    4. Now search for this:

<a expr:href='data:comment.authorUrl'

    5. Replace it with this:

<a expr:href='data:comment.authorUrl' rel='external nofollow'

    6. Done!

To Optimize Label links in blogger do this:
     1.      Inside your template search for the following code: (Search for a similar code).

          <a expr:href='data:label.url'

   2. Replace it with this one:
<a expr:href='data:label.url' rel='tag'

   3. Done!

To Optimize Archive links in blogger do this:
Note the archive links will only appear on your blog if you add the archive widget. If you have not added the
archive post widget to your blog then you can skip this part.

    1.   Search for this code inside your template:

 <a class='post-count-link' expr:href='data:i.url'>

  2. Replace it with this:

<a rel="archives" class='post-count-link' expr:href='data:i.url'>

    2.   Finally save your template and you are all saved! :)

How Show Blogger Widget Only In Posts-Homepage-Archive Pages
Find the code given below
<b:widget id='
And paste the following which you like to show posts.

<b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>

<b:include name='quickedit'/>

Paste the followings lines
<b:if cond='data:blog.url == data:blog.homepageUrl'>        (Show only on homepage)
<b:if cond='data:blog.pageType == "item"'>          (Show only on post page)
<b:if cond='data:blog.pageType == "archive"'>               (Show only on Archive page)

Add No follow Tags To All Your Blogger Label Links

In my previous post I was sharing how to make a Showing Only Post Titles on Label Pages (read: Showing Only Post
Titles on Label Pages) for your blog, but we need to know, use the tag "rel=nofollow" on the label / category is very
    As we know, google algorithm newest panda is very concerned about the relevant content on our blogs, and
    google algorithms pandas did not like the name duplicate content blog (read: Google's Algorithm Panda Latest
    From Google). If your blog contains too many irrelevant content or duplicate content or your post quantity is less
    than 300 words and you have too many tags / category labels on your blog That makes no sense then you can be
    the next target of Google panda update. Will your traffic drop significantly.

    Statement that the use of "rel=nofollow" on the label has been much discussed by seo experts, they concluded
    that the use of "rel = nofollow" on the label is an attempt to prevent spamming blogs that might occur on our blog.

    If you're feeling confident and believe in, then please take the following steps:
    1.From Dashboard - Design - Edit HTML - dont forget to give check "Expand Widget Template".
    2. Search for this,

    <a expr:href='data:label.url' rel='tag'>

    3. Replace it with this,

    <a expr:href='data:label.url' rel='tag,nofollow'>
    You have now successfully protected your links in the post labels from panda effect. Now lets correct the Label
    Cloud Links also.
    4. Search for this,

    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><></a>

    5. Replace it with this code,

    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' rel='nofollow'><></a>

    6. And click Save Template.

    I hope this article useful to you, do not forget to give comments

    How to automatically add Alt tags to pictures in blogger
      Using Blogger? Go to Dashboard > Design > Edit HTML (else move to next step)
      Now, search for </body> code in your template (tip: press CTRL + F and paste this code)
      Paste below given code just Before </body>
    <script src='' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function() {
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    <script type='text/javascript'>
    $(document).ready(function() {
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

     Save Your Template
     That’s it...

    Show Ad sense/other Ads Only on Home page or Post pages of Blogger blog
    Show ads on Home Page only
    Change your ad code as follows

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

    Show ads on Individual Posts Page only

    Change your ad code as follows

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

    How to make Blog title appears after post title?
    Simply follow these steps,

        1.   Go To Blogger > Design > Edit HTML
        2.   Backup your template
        3.   Search for

  4. Now replace it with the code below,

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

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageName/> | <data:blog.title/></title>

Navigate to Design->Edit HTML. As usual, create a back up of your template before you make any changes to the
template. Once the back up is done, proceed to step 2.
2. Search for the following piece of code in your template.
<title><data:blog.pageName/> | <data:blog.title/></title>

3. Paste the following piece of code just below the line mentioned in step 2.
<meta expr:content='data:blog.pageName' name='description'/>

    4.   That's all folks!!! Your blog is ready to get a little more hits than before.
    5.   <meta content='Your blog description here' name='description'/>
    6.   <meta content='Your keywords here' name='keywords'/>
    7.   Done!

Site map sending via webmaster tool

Change older post with images
    1.   Go To Blogger > Layout > Edit HTML
    2.   Check the Expand Widget Templates box at top-right-corner
    3.   Search for this,

<data:newerPageTitle/>               <img src="URL-OF-PREVIOUS-BUTTON"/>

<data:olderPageTitle/>               <img src="URL-OF-NEXT-BUTTON"/>

<data:homeMsg/>                                <img src="URL-OF-HOME-BUTTON"/>

How to hide navbar
Copy and paste the code provided below (as shown in the image below) and insert it into the template, the code
can be inserted anywhere in the template.

#navbar {
height: 0px;
visibility: hidden;
display: none;
To Remove subscribe post atom remove this line

<b:include data='feedLinks' name='feedLinksBody'/>

Contact us pages

All the chorus are typed by the owner of this blog. The images are also gathered from public sources (google image

All the wallpapers are provided for promotional and informative purposes only. All the wallpapers on this blog is
used only personal not for commercial. All the content of this blog belong to their respective owners.

If you own any of the contents and want it to be removed, just contact the owner at

More wallpapers for download
Privacy policy

The privacy of our visitors to is important to us.

At, we recognize that privacy of your personal information is important. Below is
information on what types of personal information we receive and collect when you use and, and how we safeguard your information. We will never sell your personal
information to third parties.

Log Files

As with most other websites, we collect and use the data contained in log files. The information in the log files
include your IP (internet protocol) address, your ISP (internet service provider, such as AOL), the browser you used
to visit our site (such as Internet Explorer or Firefox), the time you visited our site and which pages you visited
throughout our site.

Cookies and Web Beacons

We do use cookies to store information, such as your personal preferences when you visit our site. This could
include only showing you a popup once in your visit, or the ability to login to some of our features, such as forums.

We also use third party advertisements on to support our site. Some of these advertisers
may use technology such as cookies and web beacons when they advertise on our site, which will also send these
advertisers (such as Google through the Google AdSense program) information including your IP address, your ISP ,
the browser you used to visit our site, and in some cases, whether you have Flash installed. This is generally used
for geotargeting purposes (showing New York real estate ads to someone in New York, for example) or showing
certain ads based on specific sites visited (such as showing cooking ads to someone who frequents cooking sites).

DoubleClick DART Cookies

We also may use DART cookies for ad serving through Google’s DoubleClick, which places a cookie on your
computer when you are browsing the web and visit a site using DoubleClick advertising (including some Google
AdSense advertisements). This cookie is used to serve ads specific to you and your interests (”interest based
targeting”). The ads served will be targeted based on your previous browsing history (For example, if you have
been viewing sites about visiting Las Vegas, you may see Las Vegas hotel advertisements when viewing a non-
related site, such as on a site about hockey). DART uses “non personally identifiable information”. It does NOT
track personal information about you, such as your name, email address, physical address, telephone number,
social security numbers, bank account numbers or credit card numbers. You can opt-out of this ad serving on all
sites using this advertising by visiting

You can choose to disable or selectively turn off our cookies or third-party cookies in your browser settings, or by
managing preferences in programs such as Norton Internet Security. However, this can affect how you are able to
interact with our site as well as other websites. This could include the inability to login to services or programs,
such as logging into forums or accounts.

Deleting cookies does not mean you are permanently opted out of any advertising program. Unless you have
settings that disallow cookies, the next time you visit a site running the advertisements, a new cookie will be

How Can I delete the I frame:
Go to Design >> Edit HTML >> Expand Widget Templates.

Paste this code just before the </head> tag:

<script language='javascript' type='text/javascript'>
if (top != self) {
top.location.href = location.href;

How to create links open in new window in blogger
By opening each link in new tab certainly increases the website retention time
which fools the search engine and thinks website is good that’s why people sticking to it for such a long time. This
certainly increases the search engine ranking
to do so
simply follow the following steps
1> Login to
2> click Dashboard at upper right side
3> click on design just below the name of your blog
4> click Edit html just besides the page elements at top left hand side
5> Use keyboard shortcut ctrl+F to find <head>
6> add a single line <base target='_blank' /> immediately after head tag so that it become

<base target='_blank' />

Creating anchor text
<a href=>WordPress Website Host</a>

<a href=>High quality wallpapers</a>

Sending site map to bing
Replace highlighted with your blog or site address.
LINK#1 For Posts between 1-500

LINK#2 For Posts between 5001-1000

LINK#3 For Posts between 1001-1500

Customizing Popular post widget
Add popular post widget using blogger widget section.

Add this code before]]></b:skin>

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(
SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
.popular-posts ul li a:hover {
Chang the bold url of bullets with you own url

Add this before popular post widget in html java script.

<style type="text/css" media="screen">

#PopularPosts1 {
padding:0px 0px;

#PopularPosts1 ul {
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;

#PopularPosts1 li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
overflow: hidden;
background:#fff url( repeat-x;
border:1px solid #ddd;

#PopularPosts1 li .item-title {

#PopularPosts1 li .item-title a {
margin:0px 0px;
padding:0px 0px 2px 0px;

#PopularPosts1 li img {

#PopularPosts1 li .item-snippet {
font-family:Tahoma,Arial,verdana, sans-serif;
padding:0px 0px;
margin:0px 0px;

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
  text-decoration: none;

#PopularPosts1 .spyWrapper {
  height: 100%;
  overflow: hidden;
  position: relative;

#PopularPosts1 {
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;

.tags span,
.tags a {
              -webkit-border-radius: 8px;
              -moz-border-radius: 8px;

a img {
   border: 0;

<script src="" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
<script src=""

Shared By: