The following CSS can be used to display the links in beautiful square blocks with a mouseover effect.
The link is, can be a number or a title that represents the link.
1. Once you login at Blooger, please go to the "Layout" and then click EDIT HTML
2. Backup your first template, and then copy the code below and add the above code </ head>
3. After that store the template.
4. For the code below, you can install the <body> ....</ body>, but can also through the Page Elements, by pressing the Add a gadget that you like.
<div id="pagin">
<a class="sel">1</a><a href="....">2</a><a href="......">3</a>
</div>
Signs "....." filled with the address of the link that you want
You can also set the number of links that you want to add the code :
<a href="......">4</a>
<a href="......">5</a>
You can play with the styles to customize it to match your requirement.
The link is, can be a number or a title that represents the link.
1. Once you login at Blooger, please go to the "Layout" and then click EDIT HTML
2. Backup your first template, and then copy the code below and add the above code </ head>
<title>CSS used in Pagination</title>
<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
3. After that store the template.
4. For the code below, you can install the <body> ....</ body>, but can also through the Page Elements, by pressing the Add a gadget that you like.
<div id="pagin">
<a class="sel">1</a><a href="....">2</a><a href="......">3</a>
</div>
Signs "....." filled with the address of the link that you want
You can also set the number of links that you want to add the code :
<a href="......">4</a>
<a href="......">5</a>
You can play with the styles to customize it to match your requirement.
0 Comments:
Post a Comment