Blogger Read More Links in Posts with Jump Breaks Feature

In this Blogger tutorial you will learn how to insert jump breaks into your Blogger posts (Blogspot posts) as an aid to quick navigation for your visitors. Jump Breaks in Blogger provide an easy way to show only a snippet of your whole post on the home page of your blog with a read more link below it for the rest of the story.

I have already written about a Blogger expandable post summaries hack which provides a read more feature for a Blogger blog homepage. For most Blogger webpublishers (Blogspot webpublishers) this hack is no longer necessary because Blogger as part of its 10th birthday celebration introduced a new feature called Jump Breaks. I cover several methods to insert jump breaks depending on whether you are using a Blogger default template or a customized Blogger template.

The advantage of adding jump breaks to your Blogger posts is that your readers can quickly and easily skim your most recent posts for what interests them rather than having to scroll through a whole bunch of long articles. This is definitely a big help for those of us like me who often write articles longer than 500 words. If your posts are short and sweet you may find that adding this read more feature is unnecessary however you can still apply it when you do have a longer post. Below is an example post which illustrates the Jump Break feature in action.


How to Insert Jump Breaks (Read More Links) in Blogger
It is easy to insert a Jump Break into your Blogger posts (Blogspot posts) at any point of your choosing.

There are two methods of inserting the Jump Breaks in Blogger. Which method you choose depends on which post editor you are using. If you are not sure which editor you are using check this out by going to Settings > Basic and scrolling to the bottom of the page. Under Global Settings you will see a radio button next to old editor or updated editor.

1. Method 1
   Insert Jump Breaks - New Blogger Post Editor Only
   In order to use this method you need to be using the updated editor in Blogger or have Blogger in Draft enabled.
   
   
   • When creating a new post in the Blogger Post Editor position the cursor in the editor at the point you wish the Jump Break to be inserted
     
     
   • Click on the insert Jump Break icon (currently the last option on the menu)
   
   
   
   • A jagged dividing line will appear to mark the insertion point
   
   
   
   • Publish your post as normal
   
   
   
2. Method 2
   Insert Jump Breaks - Old Blogger Post Editor Only
   If you are using the old post editor rather than the new post editor you can still insert jump breaks into your Blogger posts.
   
   
   • When creating a new post in the Blogger Post Editor make sure you are in the Edit HTML mode rather than compose mode
     
     
   • Insert the following code at the point where you want to break the Jump Break to occur:
     
     

     <!-- more -->

     
     
   • Publish post as normal

Tips and Troubleshooting

1. To Add Jump Breaks to New Posts Automatically
   To save time it is possible to automatically add Jump Breaks to posts with the following method:
   
   
   • Go to Settings > Formatting and scroll to the bottom of the page
     
     
   • Under Post Template paste <!-- more --> into the box and save. The next time you create a new post the <!-- more --> will automatically appear. Make sure you are in the Edit HTML mode to see <!-- more --> appear.
   
   
   
2. To Change the Read More Text
   If you want to change the Read More text for something like Read Full Story or Continue Reading you can easily do this by:
   
   
   • Go to Design > Page Elements
     
     
   • Edit the Blog Posts widget
     
     
   • Change the post page link text (Read More text) which appears at the top of the page to your preferred text and save
   
   
   
3. To Manually Add Jump Breaks to Blogger For Users of Customized Templates
   If you are using highly a customized template or have customized your Blog Posts widget you may experience a problem in getting the Blogger Jump Break feature to work. In this event you can edit your Blogger template to enable Jump Breaks.
   
   
   • As a precaution back up your template by downloading full template to your own computer
     
     
   • Tick the Expand Widget Templates checkbox
     
     
   • Using CTRL + F find the following line of code:
     
     

     <data:post.body/>

     
     
   • Directly below this line insert the following code into your Blogger template:
     
     

     <b:if cond='data:post.hasJumpLink'>
     <div class='jump-link'>
     <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
     </div>
     </b:if>

In this tutorial you have learned how to create expandable post summaries using the new Blogger feature Jump Breaks. You now have the option to easily insert Jump Breaks into your Blogger posts so that longer posts appear with only an introduction followed by a Read More link.

I have shown you 2 methods to insert the Jump Breaks and Read More links into your Blogger posts depending on whether you are using the new or old post editor features. I have also given you some tips to make sure you get the most out of the Blogger Jump Break feature including what to do if the Jump Breaks feature does not work with your customized Blogger template. As always I would welcome your feedback about your experiences with the expandable post summaries Blogger feature (Blogspot feature) or any other feature you may be having an issue with.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Buzz - You Might as well Jump!

Add Twitter Retweet Button to Blogger

Did you know that Twitter can help drive traffic to your Blogspot blog? In today's Blogger tutorial I show you how to add a free Twitter Retweet button to your Blogger posts. Adding a Tweetmeme Twitter Retweet button to Blogger will help promote your blog on Twitter in 2 ways: one by attracting new Twitter followers and two by increasing the direct traffic to your blog from Twitter.

Forget the preamble and take me straight to the instructions to insert the Retweet button into Blogger

What is Twitter and How Does it Work?
Twitter is currently the fastest growing free social networking site. Essentially, Twitter users micro blog about what they are doing or what others are doing by posting tweets of around 140 characters to Twitter. When Twitter members read these tweets and like what they read they can become followers much in the same way that your readers can choose to follow your blog.

Twitter is great news for bloggers because it can be used as a vehicle to promote blogs. Blogger can easily be linked with Twitter services so that every time a post is made to Blogger a short message with a link is posted on Twitter. As every follower is notified that you have tweeted, a blog publisher can gain lots of exposure for their blog with very little effort.

Once you add Tweetmeme retweets to the mix the spread compounds because not only do you have followers hearing about your tweet but the followers of followers. So say one of your followers retweets your post all that person's followers hear about it too and pretty soon a tweet plus your retweets can popularize a post to the point that it spreads so widely that it goes viral.

Advantages of a Twitter Retweet Button
A Tweet/Retweet button looks similar to and behaves like an integrated Digg button but it counts retweets rather than diggs. A Retweet button counts reposts of a tweet so that readers can see at a glance how popular your article is on Twitter. Another benefit of the Retweet button is that it allows your blog readers to retweet your post so that their followers hear about your post too.

How to Add a Twitter Retweet Button to a Blogger Blog (Blogspot Blog)
The following instructions will place a Tweetmeme Retweet button into all of your blog posts.

1. Login to Blogger if not already logged in
   
   
2. From the Dashboard navigate to Layout > Edit HTML
   
   
3. Check the Expand Widget Templates button
   
   
4. Back up your Blogger template by clicking on Download Full Template as a precaution
   
   
5. Using CTRL + F find the following code:
   
   

   <div class='post-header-line-1'/>

   
   
6. Directly after the above line paste the following code depending on which Retweet button and position you prefer:
   
   
   Large Retweet Button - Right Aligned
   

   <div style="float:right;padding:4px;">
   <script type="text/javascript">
   tweetmeme_url = '<data:post.url/>'; 
   tweetmeme_source = 'your_twitter_user_name';
   </script>
   <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
   </script> </div>

   
   
   
   • Large Retweet Button - Left Aligned
     

     <div style="float:left;padding:4px;">
     <script type="text/javascript">
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

     
     
     
   • Compact Retweet Button - Right Aligned
     

     <div style="float:right;padding:4px;">
     <script type="text/javascript">
     tweetmeme_style = 'compact'; 
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

     
     
     
   • Compact Retweet Button - Left Aligned
     

     <div style="float:left;padding:4px;">
     <script type="text/javascript">
     tweetmeme_style = 'compact'; 
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

     
     
   
   
7. Change your_twitter_user_name for your actual Twitter username. For instance I would enter BlogWizz
   
   
8. Click on Save Template
   
   
9. Click on View blog to admire your Tweetmeme Retweet button in your Blogger posts

Tips and Troubleshooting

• To Add Retweet Button Below Blogger Post
  If you want the button to appear at the bottom of Blogger posts instead of just below the post title locate the first instance of the following code and then paste the code for your chosen button immediately after this line: (don't forget to change your Twitter username as in Step 7)
  
  

  <data:post.body/>

  
  
• To Have the Retweet Button Appear on Post Pages Only in Blogger
  If you want the button to only appear on the post pages and not the home page you will need to enclose the button code in an if statement. See below for an example of what the full code would look like with this extra code.
  
  

  <b:if cond='data:blog.pageType == "item"'>
  </b:if>

  
  Thus the full code for a right-aligned large Retweet button which only appears on the individual post pages and not the home page would be:
  
  

  <b:if cond='data:blog.pageType == "item"'>
  <div style="float:right;padding:4px;">
  <script type="text/javascript">
  tweetmeme_url = '<data:post.url/>'; 
  tweetmeme_source = 'your_twitter_user_name';
  </script>
  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
  </script> </div>
  </b:if>

In this tutorial you have learned how to add a Tweetmeme Retweet Button to your Blogger posts. The Retweet button will encourage your blog readers to retweet your content on Twitter thereby increasing your blog traffic. I have provided the code for both a large and compact button with the option of left or right alignment. The button appears just below the post title and counts the number of retweets of your Blogger post. I have also included details of how to add the Tweetmeme Retweet button to the foot of your Blogger blog and how to add the button to post pages only.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Tips to Add a Digg Button to Blogger Blogspot
Add a Twitter Updates Widget to Blogger
Add Twitter Button or Twitter Badge to Blogger
Add Twitter Followers Counter to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger
Best Free Social Bookmark Icon Sets for Blogger

How to Align and Justify Blogger Posts

This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt with how to add or remove image borders in Blogger today I show you how to align and justify Blogger posts.

Skill Level: Beginner

Rating: Easy

Time: 1 Minute

Many of the questions that my readers ask me are about how to customize various features of their Blogger template (Blogspot template). Over the coming weeks I will be focusing on some simple CSS styling tricks and tips to help you get more out of your Blogger template. Much can be achieved by learning a little about CSS. So before you rush off to download a custom Blogger template consider customizing your existing Blogger template.

This tutorial is part of a series of articles that I will publishing over the coming weeks about customizing your Blogger template using CSS styling. I will be targeting beginner bloggers and newbies to Blogger as well as more seasoned bloggers so if you want to spice up your Blogger template please read along.

How to Justify Blogger Posts (Blogspot Posts) Using CSS
It is easy to change the text alignment of your Blogger posts with the addition of one extra line in the CSS styling section of your Blogger template (Blogspot template). By default the alignment is set to left align so that the text aligns to the left while the right edge is ragged. You can also have right alignment where the text aligns to the right and the left edge is ragged.

Another not so common option is to justify the text so that both left and right edges are straight. Users of MS Word and other word processing programs will be familiar with justify as an alignment choice. Justify stretches out the text so that each line has an equal width similar to what you will find in newspapers and magazines. I have found justifying my Blogger posts to be a useful feature on several of my blogs and thought some of you might to. Below are instructions on how to justify your Blogger posts so that all your blog's articles are justified but first take a look at the difference in presentation of these 2 blog posts just by justifying the alignment of the text. Makes a big difference don't you think?

1. Before you start check how text is currently aligned on your Blogger posts. If it is left aligned you will be able to follow this trick to justify it. If it is already justified no need to go any further.
   
   
2. Login to Blogger if not already logged in
   
   
3. From the Dashboard click the Layout link for your blog and then click on Edit HTML
   
   
4. Back up your template by downloading it in full as a precaution
   
   
5. Use CTRL + F to find the code block beginning with .post in the CSS styling section of your Blogger template. As templates will differ greatly there are no hard and fast rules about what styling will be in this block. Here is a typical code block taken from the default Minima Blogger template
   
   

   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   }

   
   
6. Add the following line to the code block before the end brace (the end curly bracket)
   
   

   text-align:justify;
   
   so that your code now looks like:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   text-align:justify;
   }

   
   
7. Click on Save Template
   
   
8. Click View Blog to see the alignment of all your posts has now changed to justified
   

Tips and Troubleshooting

1. If your Blogger template justifies posts and you would like to left align them find the code beginning with .post in your Blogger template and add the following line to the block:
   
   

   text-align:left;
   
   so that your code now looks like:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   text-align:left;
   }

   
   
2. If you want the posts right aligned you would substitute the word right for left.

In this tutorial you have learned how to justify your Blogger posts to create a straight rather than ragged margin edge. By using this tip to add one line of code to your Blogger template you can enhance the look of your Blogger posts. This tweak only takes a minute but can markedly improve the presentation of your Blogger posts. Please keep reading along for more CSS tips and tweaks in the coming weeks.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders