Putting text and a picture side-by-side in blog posts

This article is about lining up text and pictures side-by-side in your posts - and about how to add a "break" so that some text goes beside a picture and some goes underneath it.

The post editor's picture menu:

When you have put a picture into a post  in Blogger, (either using the Insert-picture option on the toolbar, or by adding the HTML for it some other way), the Post Editor gives you options for picture size, and for aligning the picture to the left, right or centre. 

You cab see these options by clicking on the picture.  This opens a "mini-menu" under the picture, like this:

This one mini-menu has options for:

Size	Options are small, medium, large, extra-large, and original-size
Alignment:	Options are left, right and centre (default is center)
Caption:	Add caption, and Remove
Properties:	Where you can add the hover-title and alternative-text for the picture
Remove:	Taking the photo totally out of the post

The alignment options:

When you first add a picture, the alignment is set to "center".

Choosing Left or Right moves puts the picture to the far side of the post and, if the picture isn't as wide as the window it's being displayed in, the text that was after the picture fills up the space on the other side - like this:

Stopping all the text from flowing around the picture:

Often bloggers want to have pictures left or right aligned, and to have some words showing beside the picture.

But they also want to control what text is shown beside the picture, and what text doesn't start until underneath it.   Many people spend a long time putting extra lines into their posts, so that the text and pictures are set up in a way that's "just right" - and then they're disappointed when they publish the post and their hard work is all lost, because the screen is wider and more text fits into the area beside the picture.

Luckily, this is very easy to do, by editing editing the HTML behind the post:.

1    Put some place-holder or "marker text" exactly where you want the flowing-text to stop.

Use text like BREAK HERE  or  XXXXX  - in short, any words that won't be anywhere else in the post.

I've made it bold and with a yellow background to make it show up in the picture - but I don't recommend that you do this, because it makes it harder to find and replace exactly the correct text later on.


2  Choose the HTML option (top left of the post-editor screen.


3  Find the place-holder text
(hint:  use your browser's search function - in Firefox, it's Edit > Find)


4  Replace the place-holder text with this code:

<div class="separator" style="clear: both;"> </div>

(The important thing about this code is that it re-sets the previous float instructions, which may have been to the left or two the right., by saying clear: both;)


5  Choose the Compose tab  (to get back to the regular post-editor screen).  The text after where the marker text was is now underneath the picture - and it will be there when you publish the post, too, no matter what size of screen your reader has.

Troubleshooting

Aligning more than one picture

The approach described here if you are only working with one picture.   But if you have two or more pictures, instead of letting the text flow it is best to put some of it into a <div> statement that is positioned to sit beside the pictures.

See putting several pictures alongside each other for details about this approach.

Extra blank lines:

At the bottom-left of the post-editor, there is a link for Post-Options.  Clicking this opens an options panel, where you can choose what effect line-breaks (ie pressing the "enter" key) have.   I always put it on "Use <br /> tags", so that I can put extra empty lines into the HTML to make it easier to read.   If it's on "Press Enter for line breaks", then each extra line put into the HTML will also show up in the Compose-mode view, and in the final post.

---

Related Articles:

Stopping pictures on your blog from being "clickable"

Getting the HTML code to put a picture into your blog

Putting pictures side-by-side in your blog

Telling Google about the pictures in your blog

Inserting a picture into a blog post

Getting a list of people who have asked (via Feedburner) to have your blog-posts emailed to them

This article shows how to get a list of the people who have subscribed to receive the items in a Feedburner feed in their email.  It's written for Blogger users, but applies to anyone who uses Feedburner.

Overview:

Adapted from Rei-artur, original Jak
 CC-BY-SA-3.0-2.5-2.0-1.0
(http://creativecommons.org/licenses/by-sa/3.0)],
via Wikimedia Commons

Previously, I've explained how to set up a feed with Feedburner, and that for your feed to be useful you need to give people a way to subscribe to it.   The options for subscribing to your feed include using RSS feed-reader software (eg Google Reader) or, if you provide the option, subscribing via email.  And Google has now provided the Follow-by-email gadget which makes it even easier for you to add the email subscription option.

Some bloggers prefer people to subscribe by email, because this gives them access to the list of email addresses of their subscribers - making it possible for them to send messages to subscribers separately from posting to the blog.

Getting a list of subscribers-by-email is easy, but you do need to have software that can open a Comma Separated Values (CSV) file to see the list - Microsoft Excel is a tool that lots of people use, but there are many others.

---

Warning:  
I have not investigated if there are any Feedburner Terms and Conditions about what you may or may not do with the list of subscribers.  I expect that there are some - it's up to you to make sure that anything you do with the extracted list meets these rules.

---

How to see your list of email subscribers:

Log in to Feedburner, using the Google account that owns the feed.

Click on the name of the feed you are interested in:  this opens the Feed Stats Dashboard in the Analyse tab.

Click on Subscribers from the menu on the left

Scroll down to the Email Subscription Services area

Click on Feedburner Email Subscriptions

Click on Manage your Email Subscriber List

Click on Export - CSV

The download starts:  depending on how your machine is set up you will probably be asked what you want to do with the file (mine opens it in Excel)

---

Related Articles: 



How to set up a feed with Feedburner.

Subscribering using RSS feed-reader software

The follow-by-email gadget, and easy way to offer email subscriptions

Subscribe to a blog via email.

Providing a give-away for subscribers, using Feedburner

Applying copyright protection to your blog.

Adding a "share this to LinkedIn" option to your blog

This article is about putting a "professional share" button onto your blog, to let viewers share a post on LinkedIn.  Although it's written for Google Blogger users, most of the information applies to any website that wants to encourage visitors to promote the site on LinkedIn.

Blogger and LinkedIn - a strange combination?

LinkedIn is a professional social networking site:  it's like Facebook for people's working lives, and it is a place where they can interact with current and former colleagues, peers, counterparts from other companies, and other professional (rather rather than personal) connections.

If your blog isn't related to your job, then LinkedIn may not seem relevant.

But chances are that your hobby is of professional interest for some of your readers.   Giving them the opportunity to share your content to LinkedIn may be valuable for you (promoting your blog) and them (growing their credibility by sharing good information with their associates).


"The art of the professional share" - LinkedIn's share buttons

LinkedIn now offers official sharing buttons.

Even if you don't have a LinkedIn account yourself, you can go to their Publishers page, and get the code for a sharing button.   Currently they have options for:

• Vertical button with count
• Horizontal button with count
• Button without a count (looks the same horizontal or vertical)

There is also an optional field where you can enter the URL to be shared:  this could be useful if you want to give readers to opportunity to promote a different page or website from your blog.

The code that LinkedIn provide is simple, and you can install it just the same way that you install any social-networking sharing button onto your blog.


What your viewers see:

When one of your viewers clicks on the "Share to linked in" button, they are shown a new window (even if they already have LinkedIn open in another tab).

If they're not currently logged in, they are asked to log in or to join if they don't already have an account.   (For a while, LinkedIn was exclusive:  you could only join if you were invited by a member.  those days are long-gone.)

Once they are logged in, the window looks like this:

The LinkedIn user can choose:

To edit the details of the shared item:
They can change the title (which defaults to the title from the window where the link was clicked), and also add some supporting text.

Which picture to show with the shared item:
Like Facebook, LinkedIn pulls the various options from your blog-screen, both the post and also the sidebars.   The << and >> buttons let the user move between the possible pictures.  The option for "no picture", is under Edit.  Some people may miss this, and think that the picture is compulsory, so you should make sure that there's always at least one good picture available on your posts.

Whether to post the shared item as:

• An update.  This is the LinkedIn version of sharing to the wall.  It can include a comment, and whether to send the update on to Twitter (if the person has a linked account) and who the update should be visible to (anyone or connections only).

• A message to a LinkedIn Group that they are a member of:  in this case, they need to enter a subject and a message, to go with the link.

• Individual messages to existing contacts, or even to people (email addresses) that they aren't connected to.   This option includes a check-box for whether or not recipients can see each other's email addresses.

Your reader can choose one or more of these options.   When they have entered the details, pressing Share sends updates and message as specified.   Then the user must choose between to continuing to Share the item (ie setting different options), going to view it themselves, or closing the window.

---

Related Articles: 


Installing any social-networking sharing button onto your blog.

Linking your blog to the social networks

Using Feedflare to add social tools to your RSS feed

Adding a Tweet button to your blog

Tools for applying copyright protection to your blog

Putting "Share this on WHATEVER" button(s) into your blog

This article shows you how to put "share this on XX" (ie any of  Facebook, Twitter, LinkedIn, or any  other social networking sites ) buttons etc into your Blogger blog, including having individual buttons inside post.
 

Overview:

Previously, I've described the different ways of linking your blog and the social networks.

And I've described options for sharing-to-Facebook so that readers can share your posts on their wall (etc).

This article is about the options for putting share-buttons from any of the social networks onto your blog.    (fyi, the Facebook article describes why I think you should only every use official share gadgets provided by the site that you want to share with - though I have softened this attitude a little since ShareThis and AddThis started re-directing people to the social-networking site concerned before asking for a password).

So far, I've found five options:

• Option 1:  Sharing button as a gadget
• Option 2:  Sharing button in the post footer
• Option 3:  Sharing buttons in a floating button-bar 
• Option 4:  Sharing button in the post header
• Option 5:  Sharing button (looking like) it's inside the top of the post.

Option 1:   Sharing button as a Gadget

To add a share-button as a gadget (ie in your sidebar, header or footer):

1  Go to the social networking site, choose the options you want and copy the code they provide

2  Follow the instructions in Option 1 of Putting HTML code from a third party into your blog.


Issues and Disadvantages:
If you put the Share button into a gadget, what will (usually) be shared is your blog overall, not the specific post that is being read.

The 3rd party code article also has instructions for putting code inside a post, and for putting code into your template.   You can put share-button code into individual posts if you want, although this would make it very difficult to change the button options later on.


Option 2:  In the Post-footer

This (or Option 4) is currently my preferred option, because it lets your viewers share the post they are reading at the moment, no matter whether the screen they are reading is showing one post or lots.

However you do need to accept the disadvantages of editing your template.

To set it up:

1  Go to the social networking site, choose the options you want and copy the code they provide

2  In Blogger

1. Choose
   In post-Sept-2011-Blogger (ie the old fnterface):     Layout > Blog Posts (edit)
   In pre-Sept-2011-Blogger (ie the old fnterface):   Design > Page Elements > Blog Posts (edit).
   
2. Look at the footer (the area below posts which you can drag items to). 
   Pick one of the footer lines (ie 1, 2, or 3) to put the share-button (s) on.
   Make sure there is nothing else on that line.   Remember which line number it is.  Cancel from editing Blog Posts.
3. Choose
   In post-Sept-2011-Blogger (ie the old fnterface):   Template > Edit HTML > Proceed
   In pre-Sept-2011-Blogger (ie the old fnterface):   Design > Edit HTML. 
   
4. Download a full copy of your template, and put it somewhere safe.
5. Tick the  Expand Widget Templates check box.
6. Find this code (where N is the number you remembered in step 2):

   <div class='post-footer-line post-footer-line-N'/>

7. Paste the code from the social networking site immediately underneath that line.
8. Click Preview, to check that the code is correct and your blog looks the way you expect.  Correct any problems.
9. When you are happy, choose Save Template.
10. It at all possible, test the sharing button, so you are certain you are happy with how it works.    It's best to make sure you are signed out of the social networking site before you do this.
    
    (This may mean that you put some entries about the blog on your own LinkedIn or Facebook status, since those systems don't let you have test accounts.  If your blog is a hobby not related to your profession, then it's a judgement call about whether to do this with LinkedIn, or whether you just take the risk that the button isn't working properly.)

Option 3:  In a floating gadget bar

This is a popular option, because it lets viewers share the post they are reading, not just the whole blog, although I've had issues with the bar appearing at strange places on some sites.

Blogger Sentral has written an excellent description of how to implement it:  See his instructions for installing buttons in a floating gadget-bar.


Option 4:  In the Post-header

This is very similar to Option 2 (in the post-footer), except that step 6 becomes:

Find this code :

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

And paste the sharing button code immediately after it.


Option 5:  Sharing button "inside" the top of the post.

Note this isn't "inside" the post at all - it's actually immediately to the right (or left) of it, as shown in the picture.   But to your readers, it looks like it's inside.   Follow these steps:

1. Choose
   In post-Sept-2011-Blogger (ie the old fnterface):   Template > Edit HTML > Proceed
   In pre-Sept-2011-Blogger (ie the old fnterface):    Design > Edit HTML. 
   
2. Download a full copy of your template, and put it somewhere safe.
3. Tick the  Expand Widget Templates check box.
4. Find this code 

         <data:post.body/>

5. Add this code immediately before it:
   

   <!-- START OF SOCIAL SHARE BUTTONS ...  -->
   
   <div style='float: right;'>
   
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   
   <div style='padding:3px 0px 8px 2em;'>
   CODE FROM SOCIAL NETWORK GOES HERE ...
   </div>

   
   

   <div style='padding:3px 0px 8px 2em;'>

   CODE FROM SOCIAL NETWORK GOES HERE ...

   </div>

   
   

    <div style='padding:3px 0px 3px 2em;'>

   CODE FROM SOCIAL NETWORK GOES HERE ...

   </div>
   
   </b:if>
   </div>
   
   <!-- END OF SOCIAL SHARE BUTTONS ...  -->
   
   

   You can customise this:
   
   If you want the buttons at the left of your post instead of the right, change     <div style='float: right;'>    to     <div style='float: left;'>
   
   Also experiment with the amount of space around each button:   notice that each "button holder" has  this in its "div" statement:      style='padding: Tpx Rpx Bpx Lem;
   
   This controls the amount of space at the Top, Right, Bottom and Left of the button.  
   
   In the example above, I've put zero space on the right (since the templates other margins do this), 2 em's of space (roughly two characters of the font used) between the post and the buttons, 8 pixels between buttons, and 3 pixels at the top of the top one, and bottom of the bottom one.
   
   Also, some things to note about the code:
   
   There is a <div> </div> pair around the outside - this is important, because it controls the button "section" and puts at the right (or left) of your post.
   
   The buttons are only put on posts, not on Pages.   If you want to change this, remove the
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   and    </b:if>     pair. 
6. Paste the code from the social networking site in the places shown - you can add more <div> ... </div> blocks for it if you want more share-buttons, I've just shown two to get you started.
7. As with any template editing click Preview to check that the code is correct and your blog looks the way you expect.  Correct any problems.
8. When you are happy, choose Save Template.
9. It at all possible, test the sharing buttons, so you are certain you are happy with how they work. 

---

Related Articles: 



Putting HTML code from a third party into your blog

Advantages and disadvantages of editing your template

Ways of linking your blog and the social networks

Options for sharing-to-Facebook.

Get your posts right before you publish them to your RSS feed

This article is about the relationship between your RSS feed and the Publish button, and ways of using Blogger to reduce the chances of readers seeing something that you didn't want to publish yet.

Your RSS feed and the Publish button

I've previously described why RSS is important for bloggers who care about building an audience.

But it's also important to realise that:

• Some of your RSS subscribers only see the first version of each post that you publish, not the most recently edited one.

• Even if you delete a post from your blog shortly after publishing it, the published version is still in your RSS feed and will be seen by people who read it.
  (I've heard that some feed-aggregator / reader tools do delete items, however some eg Google Reader, don't.)

Personally, I took a long time to understand the consequences of this:  When I started blogging, I Published early-and-often while I was writing each post, so I could see what it "felt" like.   (The Preview button, because it shows you the "look" but not the latest content, and editing the content was important to me.)  This meant that subscribers saw very early, drafty versions of my posts, so many of them decided to unsubscribe pretty quickly.

Even after I understood, I still occasionally hit Publish by accident.   And my writing wasn't good, because I find it hard to proof-read properly in the post-editor.

So far I've found two ways of using Blogger that can address this problem.

Option 1: Turn the blog-feed off, except when you publish the final version

Posts are only sent out in your blog's feed if the feed is turned on.  So every time you want to work on a post:

• Turn the feed off (Settings > Site Feed > Allow Blog Feeds = None)
• Work on your post, Publishing it as you like
• Save the Post as Draft (so it's status is back to draft again)
• Turn the feed on (Settings > Site Feed > Allow Blog Feeds = anything except None)

Or you could keep Allow Blog Feeds = None, turn it on every time you publish a post for the first time, and turn it off again afterwards.

This is particularly good approach if you have a lot of email subscribers via Feedburner - because that tool is currently (Dec 2010) sending out an update every time a post is published or updated, instead of just for every "new" publication (ie one that changes the post-status from Draft to Published).

However it's very manual, and there's always a risk that you might forget to turn the feed on or off at the right moment.

Option 2: Prepare posts in a separate blog

This is my preferred approach, and now there are at least three different "blogs" for each blog I that run:

• The blog  (what IT professionals call "production")
• A documentation blog, where I keep my notes about how it's put together
• A pre-publication blog, when I keep posts that are being worked on.

The blog itself is set to public (or restricted to a limited audience if that's appropriate).  The others are set to:

• Private   (Settings > Permissions > Blog readers = Only Blog Authors) 
• Not listed (Settings > Basic > Add your blog to our listings = No)
• Not indexed (Settings > Basic > Let search engines find your blog = No)
• Not listed on my Blogger Profile (Dashboard > Edit Blogger Profile > Select blogs to display)

At various times, if I'm preparing for template changes or adding new features, I may also have test-blogs.  These are always set to Private too.

When I'm preparing a post, I work on it in the "pre-production" blog, and can Publish it as many times as I like.  Then when it's complete, I simply copy the post from the pre-prod blog to the real one, and publish it once.  

A big benefit is that if I get an idea about a potential post, I can just go to the pre-publication blog and make a very quick note about it:  the writing and research quality doesn't matter, because I'm the only person who sees it.

The one thing I need to do is to always check and re-check the blog I'm about to post in, every time I hit "Publish":  the day after I first released this post was the first time in ages that I accidentally published a draft post to this blog (subscribers will have seen it come through the feel) .... very embarrassing indeed!  

Have you found other ways to avoid problems like this?  

I'd love to hear about what works for you.

---

Related Articles:



Copying a post from one blog to another.

Why RSS is important for bloggers who care about building an audience

Using Feedburner to manage email subscribers

Restricting who can see your blog

Understanding Google Accounts

Planning changes to your blog in private - using a test blog

Telling Google, and visually-impaired people, about the pictures in your blog

This article is about why and how to attach keywords and related text to the pictures in your blog posts.  This is helpful for both search engine optimisation (SEO), and for making your blog accessible to people who use screen-reader software.

Pictures and your blog

Blogger has a set of tools for putting pictures into your blog, including several options for putting images into posts or gadgets. 

In most cases, the other content in each post provides enough information for Google's indexing tools to know what the post is aobut.

But if your blog mainly has photos, your posts may not have enough key words to get properly indexed.  And even if the image-indexing tools do some auto recognition, a description of a picture written by a human being  will almost always be better.

Also, if your blog-viewers may include visually impaired people or others who use screen-reader software, you need to think about how well your content will work for them:  if you put key information inside images but not in the text, then they won't be able to get this information in any way.

These two good reasons for adding "alternate text" to your pictures - and there may be more.

What's even better is that Blogger now has a tool for to make it easy to fix this.

How to add captions and alt-text to your pictures

Add the picture to your Post.

In Compose mode, float your most over the picture.   This will show the picture-editing-toolbar, like this:

Choose the Properties option.

This opens a dialog box where you can enter

• A title - this is shown when a visitor hovers their mouse over the picture
• Alt text - this is kept in the background, and only displayed to people who (for whatever reason) cannot see the picture.

What your readers will see

People who read your blog on line, either with a standard browser or an RSS feed reader, won't see anything different, until they hover over the photo.   When they hover, they will see the text you put into the Title field.


People who read your blog in their email (because you've offered a subscribe-by-email option) may see the alt text instead of the picture, depending on what setting they have in their email system.


People who use screen reader software will have the text that you added read out to them in the usual way that their software works.

And most importantly, search engines will see the text you added, and hopefully the will use it in indexing your post.

Other Alternatives:

Picasa and Picasa-web-albums captions can be included in slideshows (provided you don't use the Blogger gadget), but aren't included with individual pictures. 

And the Post and Pages editor also has an Add Caption option on the photo toolbar, although I only recommend using  if you're comfortable editing HTML, because it puts the picture into a table, and so to move it inside the post you need to edit the code, not just drag-and-drop it.

---

Related Articles:

Tools for putting pictures into your blog

Addingng a Picasa slideshow to your blog

Tools for applying copyright protection to your blog

Why RSS/Subscribe to Posts is important for your blog.

Adding a subscribe-by-email option to your blog

Encourage new subscribers by enabling Feedburner's FeedCount button

This article is about how to add the FeedCount icon, which shows viewers how many subscribers your FeedBurner feed has, and lets them subscribe themselves.   The information is targeted at Blogger users, but most of it applies to anyone who uses Feedburner.

What is a FeedCount icon:

Previously I've explained how to create a Feedburner feed for your blog and how to add a Subscribe to my feed icon, and how to use Feedburner to provide an email subscription option.

Feedburner also provides another tool that you can use to let people sign up for your blog.  This is the FeedCount icon, which shows the number of people who are currently subscribed to your RSS feed.

This is useful because of the "social proof" that it provides:  people are more likely to sign up for something once they see that other people have also signed up.

How to add a FeedCount icon to you blog:

Log in to Feedburner, using the Google account that owns the feed.

Click on the name of the feed you want to provide a subscription tool for.

Choose the Publicize tab.

Choose the FeedCount option, from the left navigation bar.

Set the options for your button:

• Static or animated (I recommend static, because things that flick unnecessarily are annoying)
• Font colour for the background
• Font color for the text

At the bottom of the screen, click the Activate button.

Either

• Copy the HTML that is shown, and add it to your blog in the same way that you would add any other 3rd party HTML,

OR

• Choose Blogger from the drop down list beside "use as a widget in", and click Go. 
  
  This takes you to a Blogger screen where you can choose which blog you want to add the gadget to (if your current login has more than one), and what title to use for it. 
  
  When this is done, click Add Widget. 
  
  This takes you to the Design > Layout tab, where you can drag-and-drop the widget to wherever you want it.  

Note:  if you want to re-generate the button at a later time with different colour or style options, just choose the options and click Save (which is at the bottom of the screen where Activate was originally).

What your readers see:

Your readers will see an item, wherever you put it, that looks like this:

It shows a count of the current number of subscribers to your Feedburner feed.

When someone clicks on it, they are taken to a screen where they choose which feed-reader software they want to use to subscribe to your site.

---

Related Articles:

How to create a Feedburner feed for your blog

Using Feedburner to give your blog a Subscribe by Email option

Adding 3rd party HTML to your blog

Why RSS / Subscribe to Posts is important to your blog

Displaying a gadget only on the home page

FeedFlare lets you add social tools to your Feedburner feeds