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.
- In blogger dashboard, Go to Design / Edit HTML.
- Click "Expand Widget Template".
- Download full template before making any changes in it (More).
- Search for following piece of code in BT.
]]></b:skin>
- 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.
- Search for following piece of code in blogger template.
<data:post.jumpText/>
- 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
- In Template, search the following piece of code.
#blog-pager-newer-link
{
/* Some CSS Code */
}
- 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 */
- Search for following piece of code.
#blog-pager-older-link
{
/* Some CSS Code */
}
- 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);
}
- Now search for following code.
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
- 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;
}
- 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
