Customize Blogger Template With Google Button

Google, no need to explain the function and working of this website. Google secure an amazing Alexa rank of 1. It presents an attractive look to their readers by its design. So I look through the Google code very carefully which make me ready to share some new tricks which relates to read more button in Google style and homepage navigation in Google style. We uses simple CSS property to produce this article. So lets make our blog to look more professional with Google. 

How To Change Blogger Button With Google Style

Change Read More Button With Google Style

To change the appearance of read more in relative to Google button perform the following operation in your blogger template.

Demo

1. In blogger dashboard, Go to Design /  Edit HTML.
2. Click "Expand Widget Template".
3. Download full template before making any changes in it (More).
4. Search for following piece of code in BT.

]]></b:skin>

5. Paste the following code just above it.

/* Code By http://internetricks4u.blogspot.in */
.jump-link
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
    float:left;
}

.jump-link a, .jump-link a:link, .jump-link a:Active
     {  text-decoration:none;
         color: #444444;
      }

.jump-link:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }
/* Code By http://internetricks4u.blogspot.in */

Note: Make Following Changes

• left; specifies the left alignment of read more element whereas right specifies the right; alignment of  read more element. You can choose any one of the alignment which you suites.
• To change the read more text, make the following changes.

1. Search for following piece of code in blogger template.

<data:post.jumpText/>

3. Replace above code with a text that you want to display in place of default read more text. for ex.

New Read More Text

Change Blogger Page Navigation With Google Style

1. In Template, search the following piece of code.

#blog-pager-newer-link
    {
    /* Some CSS Code */
    }

2. Replace this code with the below code.

#blog-pager-newer-link
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
     float: $startSide;

     margin-left:2%;
}

#blog-pager-newer-link a, #blog-pager-newer-link a:link, #blog-pager-newer-link a:Active
     {  text-decoration:none;
         color: #444444;
      }

#blog-pager-newer-link:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }
 /* Code By http://internetricks4u.blogspot.in */

3. Search for following piece of code.

#blog-pager-older-link
  {
   /* Some CSS Code */
  }

4. Replace this code from the code given below.

#blog-pager-older-link
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
      float: $endSide;

  margin-right:2%;
}

#blog-pager-older-link a, #blog-pager-older-link a:link, #blog-pager-older-link a:Active
     {  text-decoration:none;
         color: #444444;
      }

#blog-pager-older-link:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }
#navigation
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
    margin-left:auto;
    margin-right:auto;
}

#navigation a, #navigation a:link, #navigation a:Active
     {  text-decoration:none;
         color: #444444;
      }

#navigation:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }

5. Now search for following code.

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

6. Replace this code from the code given below.

<span id='navigation'><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></span>

Note:-

In some new template you may get difficulty in finding the code given in step 1 and step 3. Sometime in place of these code you may also find the code below.

.blog-pager-older-link, .home-link, .blog-pager-newer-link 
  {
  background-color: $(content.background.color);
  padding: 5px;
  }

1. Then replace the above code with the code given below.

#blog-pager-newer-link
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
     float: $startSide;

     margin-left:2%;
}

#blog-pager-newer-link a, #blog-pager-newer-link a:link, #blog-pager-newer-link a:Active
     {  text-decoration:none;
         color: #444444;
      }

#blog-pager-newer-link:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }
 /* Code By http://internetricks4u.blogspot.in */
#blog-pager-older-link
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
      float: $endSide;

  margin-right:2%;
}

#blog-pager-older-link a, #blog-pager-older-link a:link, #blog-pager-older-link a:Active
     {  text-decoration:none;
         color: #444444;
      }

#blog-pager-older-link:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }
#navigation
   {
    -moz-user-select: none;
    border-radius: 2px 2px 2px 2px;
    cursor:pointer;
    display: inline-block;  /* Code By http://internetricks4u.blogspot.in */
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
    text-decoration: none !important;
    font: bold 11px/27px Arial,sans-serif !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444444 !important;
    font-size: 11px;
    background-color: #F5F5F5;
    margin-left:auto;
    margin-right:auto;
}

#navigation a, #navigation a:link, #navigation a:Active
     {  text-decoration:none;
         color: #444444;
      }

#navigation:hover
   {  border:1px solid #C7C7C7;
   box-shadow: 0px 1px 1px #E5E5E5;
    text-decoration:none;
     color: #444444;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
   }

By applying all these code to the template, your read more and page navigation options reflect the property of Google which looks awesome.

More Article From The Same Author

• Tricks To Modify Blogger Threaded Comment
• A Complete Sharing Widget With jQuery Effect

Auto Read More with thumbnail for Blogger/Blogspot Posts

This hack will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage.
Automatic read more for blogger posts can be done by inputting some code into your blog templates.

How to install Automatic Read More Hack for Blogger

There are two options you can choose from:

1. Auto readmore for all the posts:

Step 1. Find (CRTL + F) this code:

<data:post.body/>

Step 2. And replace with this:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Read more only for older posts (your latest post will appear normal):

Find (CTRL + F) and replace <data:post.body/> with:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Settings:

A. If you want the thumbnail to appear on the left:

Step 1. Find (CTRL + F) the following piece of code:

]]></b:skin>

Step 2. Just above it, paste this code:

.post-thumbnail{float:left;margin-right:20px}

B. If you want the thumbnail to appear on the right,

Paste above ]]></b:skin> this code:

.post-thumbnail{float:right;margin-left:20px}

Click Preview and if it works, click Save Template.

That's it, enjoy!