10 Ways To Style and Create "Read More" Links In Blogger | My Blogger Tricks

10 Ways To Style and Create "Read More" Links In Blogger | My Blogger Tricks


Shaadi.com Indian Matrimonials

Creating 'After the jump' summaries using Read More Link makes your homepage load fast and keep things organized and well managed. Till now I shared many tutorials on free "Read More" Buttons and Continue Reading Links but today we will learn to create beautiful Read More buttons without using any image at all. We will use pure CSS to make this happen. I have styled a total of 10 buttons which I hope you will find interesting to further customize. Please see a demo first:

Live Demo

This link has different names. You can call it a "Full Story" Link, "Continue" Link, "Read rest of the story" link etc. If you have no idea what a read more link is or you have not added it as yet then please read this tutorial first:

• How To Show only Post Summary in Blogger?

Applying the new style to the Read More Link

I have shared many CSS codes below which will change the look of the post summary link on your blogger blogs but first you must know who to add the CSS to your templates and Read More link.

1. Go to Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand widget Templates" Box
4. Search for this,

]]></b:skin>

   5.   And paste your selected Read More Link style code 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 these styles 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 Color Generator Tool For changing colors.

I hope you like it and if you faced any problems then don't feel shy to ask a brother. :>

Posted by Mohammad Mustafa Ahmedzai 

Free Websites For URL Submission And Site Promotion – Submit Google, Yahoo, Bing (MSN)

Shaadi.com Indian Matrimonials

1) Add your URL to Google : http://www.google.com/addurl/

2)Add Url to Yahoo! Search : http://siteexplorer.search.yahoo.com/

3)Add Url to Bing : http://www.bing.com/docs/submit.aspx

4)Add Url to Ask.com : http://about.ask.com/en/docs/about/add_search_to_site.shtml

5)Add url to Guruji.com : http://dir.guruji.com/misc/SubmitSite.php

6)Add url to Rediff.com : http://www.rediff.com/search/submit.htm

7)Add url To Dmoz : www.dmoz.org/add.html

8)Add url to Infotiger.com : http://www.infotiger.com/addurl.html

9) Add url Free Addurlfree : http://www.addurlfree.com/

10)Add url free To Addme : http://www.addme.com/

11)Add url free to Scrubtheweb : http://www.scrubtheweb.com/addurl.html

Read More: http://www.onside.in/free-websites-for-url-submission-and-site-promotion-submit-google-yahoo-bing-msn/#ixzz2GENXzcbT
Under Creative Commons License: Attribution No Derivatives
Follow us: @rmanroh on Twitter | onside.in on Facebook

Best 14 Blog Content Writing Tips

Shaadi.com Indian Matrimonials

When it comes to blog content all blogs have a few things in common. No matter what blogging niche you have, no matter what topic your write about, these blog content ideas should work for you. So, the next time you are out of ideas or preparing to post a new article, take a look at this list to find inspiration.

1. Life is short – We all need to be reminded from time to time how short life is and not to take any moment or day for granted. Sometimes we get so focused on our goals for the future or trouble by our past that we forget to live in the present. Instead of working towards the weekend and wishing our days away, we should take every day for the blessing it is and make the most of every moment. This is one of the topics that make a good blog post, however it is presented.
2. Dreams can come true – While we slave away at the day to day drudgery and feel like we never really get anything accomplished we sometimes forget that dreams do come true, or even that dreams exist. That is why blog posts on this topic are so important. It does not have to be a big dream either. Maybe you always dreamed of having a pet or visiting a historical location. Achieving dreams can be small or they can be big, but they are always inspiring and make for a great blog post.
3. Faith to get through the hard times – There are times in all our lives when we struggle. It may be the loss of a job, an unforeseen expense, or even sudden illness. It is hard to get through those time especially when you do not have faith. We all need faith that things will get better and that we will make it through. Blog posts that encourage us to look to the future and keep strong are always needed.
4. We matter – Have you ever felt small and insignificant? It is not a good feeling, is it? Well, that is one of the reasons a blog post that reminds us that every one of us is unique and special is so important. We need to be reminded that one person can make a difference in the world and in their community. It is not all about corporations or big business. Sometimes it is the little guy that plays the biggest part.
5. Back to basics – Reminding readers of commonly overlooked or forgotten basics is always a good idea. What could be basic and common knowledge for you could be a life saving tip for someone else. I remember that when I first started blogging I relied so much on those basic tips. Without them it would have taken me months of trial and error to get on the right path. Thankfully there were fellow bloggers out there that were willing to cover the essentials and help out the new bloggers of the world.
6. Unexpected twists – We all love a good story and the best stories have killer twists. Think the Matrix or The Usual Suspects. Didn’t you love it when the entire plot of the movie suddenly changed and you were forced to think about everything in a whole new way? Well, that is the value of a blog post with a twist. Do not settle for boring and predictable. Make your blog post memorable and fun to read by adding a twist to it.
7. Tell a story – We all love to feel connected to others. It is part of being human. Oftentimes, however, the internet leaves us feeling separate and alone. This is when a good story can bring us back. A good story inspires, electrifies, and creates a connection between the reader and the writer. Personal stories can help others who are going through similar experiences or who have overcome things like that in the past. Not only do stories interest the reader, but they also get people involved and commenting, which is always a good thing.
8. Take a journey – We all like stories with a beginning, a middle and an end. Though all of our stories may not be finished yet, you can still take blog readers on a journey to discovery. From growing up to getting your fist house to blogging success, the story of a journey is one that will have readers enthralled.
9. Inspire to action – The goal of any blogger is to inspire their readers to do something. It may be something as mundane as leave a comment or purchase a CD, but it may be something with far greater impact. Whatever you goal for the action is, your blog posts should inspire readers to move forward and do more than just read.
10. Make us laugh or smile – There are many benefits to laughter. It opens up your blood vessels, helps you relax, makes you lose weight, and sends endorphins racing through your body creating more pleasure. It is no wonder that people love to laugh and smile. Your blog posts should be ones that make the reader happy. I am not saying you can’t have serious posts, but you should have lightness in there too. After all, what joy is there in reading heavy stuff all the time?
11. Educate and entertain – One of the goals of a good blogger is to educate their readers. You want to give readers information that they can really use in a practical way, but you also want them to keep reading. Striking this balance between entertainment and education is hard, but a well written blog post can do it. Think about ways to freshen up old information and bring new life into subjects that might seem boring at first.
12. Little guy wins – We all know and love the story of David and Goliath. Why? Because it is the quintessential story of a little guy, weaker and smaller, defeating the big, scary and powerful giant. Stories like that inspire us to stand up to our bosses when they are doing something wrong and not live with whatever falls in our laps. The face that someone less powerful can stand up for himself is a great message that should be shared.
13. Remind us that there is more – Sometimes we forget that anything exists outside of our tiny little personal world. We get caught up in work and home and friends and do not think about the nation, world, or universe around us. Breaking that bubble should be the goal of a good blog post. You need to help people to open their eyes and understand that the world is more than just what they see. Remind them that other people exist and need help too. This is a great way to get people motivated and call them to action.
14. Reveal secrets – We all want to know something that no one else knows. It is just human nature. If you can reveal a secret or two then you will have readers flocking to your site. From small secrets like beauty tips to big secrets like what the next mobile upgrade will be, a secret is worth a lot to readers and thus is a gold mine to bloggers.

These are just a few of the blog content ideas that we all can use. No matter what kind of blog you have, you can use these ideas to make it better and get in more readers. Take a look at this list and see if you can offer readers what they are really looking for.

Author Byline: Ken Myers as an Expert Advisor on multiple household help issues to many Organizations and groups, and is a mentor for other “Mom-preneurs” seeking guidance.  He is a regular contributor of “Gonannies”.  You can get in touch with him at kmyers.ceo@gmail.com.

Read More: http://www.onside.in/14-best-blog-content-writing-tips/#ixzz2GEMGcilR
Under Creative Commons License: Attribution No Derivatives
Follow us: @rmanroh on Twitter | onside.in on Facebook
k