css වලින් blog එකට සුපිරි read more >> , button එකක් දාගමු

කොමද ඉතින් මගේ ආදරණිය යාලුවනේ.. මතක ඇතිනේ කලින් පොස්ටුවේදී මම කියල දුන්නා.. comment box එක ලස්සන කරගන්න css tricks එකක් ..ඔන්න දැන් මම අරගෙන එන්නේ blog එකේ "read more.." හරි ඔය "ඉතිරිය කියවන්න " හරි .. දාල තියෙන්නේ බටන් එකක් .. අන්න එකට css වලින් පොඩි බටන් එකක් දාන හැටි කියන්න..   ආයේ කියන්න දෙයක් නැහැ මාරම ගති... demo button ටික බලලම ඉන්නකෝ


DEMO HERE


දැන් ඉතින් අපි අපේ බ්ලොග් එකට මේක දාන විදිය බලමු නේද...  හරි එහෙනං

1.  Blogger dashboard > Template > Edit HTML
2. "Expand widget Templates" කියන තැනට tik එක දාන්න
3. ctrl +F ඔබලා මේ code එක හොයාගන්න

]]></b:skin>

4. දැන් මේකට උඩින් මම පහල දාල තියෙන ඔයාට අවශ්‍ය button එකේ  css code  ටික copy කරලා past කරන්න ..

5. දැන් ආයිමත් CTRL + F ඔබලා මේ පහල දාල තියෙන code එක හොයාගන්න ..

<data:post.body/>

6. ඊට පස්සේ එතනම පහලින් මේ මම hilight කරලා තියනවා වගේ code එකක් ඇති අන්න එක හොයාගන්න

<b:if cond='data:blog.pageType != "item"'> 
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More </div></a> 
</b:if>

7.ඊට පස්සේ ඔය hilight කරලා තියෙන එක මකලා මම මේ පහල දාල තියෙන එක එතනට past කරන්න .. (read more කියන එකට ඔයා කැමති "ඉතිරිය කියවන්න " වගේ එකක් දාන්න නැතිනම් ඕකම තියෙන්න දෙන්න )

<div class="sm-readmore">Read More ->></div>

දැන් ඉතින් ඔයාගේ templet එක save කරන්න ... මම අර උඩදී කිවුවේ ඔයාට කැමති බටන් එකේ css දාන්න කියල මේ පහල දාල තියෙන්නේ ඒ css code ටික ...


එකත් එළනේ එහෙනං තවත් සුපිරි පොස්ටුවකින් හම්බුවෙමු.. එතකන් බුදුසරණයි 

/*-------------------------- Narrow black Orange-------------*/ 
.sm-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; 
} 
.sm-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; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*------------Light Purple long----------------------*/ 
.sm-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; 
} 
.sm-readmore:hover{ 
color:#000800; 
border-left:50px solid #6882C7; 
border-right:2px solid #6882C7; 
border-top:2px solid #6882C7; 
border-bottom:2px solid #6882C7; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*---------------- Rectangle left border-----------*/ 
.sm-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; 
} 
.sm-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; 
}
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*-------------- Pink Left right -----------*/ 
.sm-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; 
} 
.sm-readmore:hover{ 
background:#fff; 
font:bold 11px sans-serif; 
color:#CC0099; 
border-right:2px solid #CC0099; 
border-left:2px solid #CC0099; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*------------- Brown top Bottom----------*/ 
.sm-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; 
} 
.sm-readmore:hover{ 
background:#fff; 
font:bold 11px sans-serif; 
color:#B26B00; 
border-top:2px solid #B26B00; 
border-bottom:2px solid #B26B00; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*-------------- Blue Blank-----------------*/
.sm-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; 
} 
.sm-readmore:hover{ 
background:#FFf; 
font:bold 11px sans-serif; 
color:#0080ff; 
border:3px dotted #ddd; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*------------- Red + Dark Red------------*/
.sm-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; 
} 
.sm-readmore:hover{ 
background:#FFf; 
font:bold 12px sans-serif; 
color:#FF0000; 
border:2px solid #FF0000; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*------------ White + Green -----------*/
.sm-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; 
} 
.sm-readmore:hover{ 
background:#008000; 
font:bold 11px sans-serif; 
color:#fff; 
border:2px solid #ddd; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*---------- Black --------------*/ 
.sm-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; 
} 
.sm-readmore:hover{ 
background:#fff; 
font:bold 11px sans-serif; 
color:#000800; 
border:2px solid #000800; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}

/*----------Orange One 1 ----------------*/
.sm-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; 
} 
.sm-readmore:hover{ 
background:#FFB93C; 
} 
.sm-readmore a { 
color:#fff; 
text-decoration:none; 
}
.sm-readmore a:hover { 
color:#fff; 
text-decoration:none; 
}