5. And paste your selected [a href="#readmore"]Read More Link style code[/a] just above it.
6. Next search for this,
<data:post.body/>
7. Just below it you will find the read more link code similar to this one,
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">Read More ->></div></a>
</b:if>
If you are using a read more link button then the code will look something like this,
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a>
</b:if>
In both the cases, simply replace the highlighted code with this,
class="MBT-readmore"
8. Save your template and you are done!
Ten "Read More" Link Styles
Now select one of [a name="readmore"]these styles[/a] for step#5
Style#1:
/*-------------------------- Narrow black Orange-------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#EB7F17;
margin:5px 0;
border-left:400px dashed #474747;
border-right:2px solid #474747;
border-top:2px solid #474747;
border-bottom:2px solid #474747;
padding:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#EB7F17;
color:#fff;
border-left:400px dashed #474747;
border-right:2px solid #EB7F17;
border-top:2px solid #EB7F17;
border-bottom:2px solid #EB7F17;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#2:
/*------------Light Purple long----------------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#6882C7;
margin:5px 0;
border-left:400px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
padding:1px 5px 1px 1px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
color:#000800;
border-left:50px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#3:
/*---------------- Rectangle left border-----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;border-right:2px solid #009999;
border-left:10px solid #009999;
border-bottom:2px solid #009999;
border-top:2px solid #009999;padding:5px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;border-right:2px dotted #009999;
border-left:10px solid #006B6B;
border-bottom:2px dotted #009999;
border-top:2px dotted #009999;
}.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#4:
/*-------------- Pink Left right -----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#FE80DF;
margin:5px 0;
float:right;
border-right:2px solid #FE80DF;
border-left:2px solid #FE80DF;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#5:
/*------------- Brown top Bottom----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#B26B00;
margin:5px 0;
float:right;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#6:
/*-------------- Blue Blank-----------------*/.MBT-readmore{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#7:
/*------------- Red + Dark Red------------*/
.MBT-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#8:
/*------------ White + Green -----------*/
.MBT-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#9:
/*---------- Black --------------*/
.MBT-readmore{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Style#10:
/*----------Orange One 1 ----------------*/.MBT-readmore{
background:#EB7F17;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFB93C;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}
Customization:
You can easily make changes to the colors and style by understanding this general guide.
- Edit .MBT-readmore To Change background, border and font colors in Active mode
- Edit .MBT-readmore:hover To Change background, border and font colors when a user hovers mouse cursor on the button
- Edit .MBT-readmore a To change the link color
- Edit .MBT-readmore a:hover To change the link color on mouse hover
You can use the [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank"]Color Generator Tool[/a] For changing colors.
I hope you like it and if you faced any problems then don't feel shy to ask a brother. :>
0 comments :
Post a Comment