Putting text and pictures 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:

Many 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.

There is a very easy way  to control this.  You just need to edit the HTML that is behind the post.  Luckily, this is very easy to do:

1  Put some place-holder or "marker text" where you want the flowing-text to stop.
(eg BREAK HERE  or  XXXXX  - use some 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 or top right of the post-editor screen, depending on which version of blogger you are using).

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>

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:

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.

Editor versions:

The pictures and instructions in this article are based on Blogger's "updated" post editor, not the old one.  The technique will work in the old editor too, but things may look a little different.

---

Related Articles:

Stopping pictures on your blog from being "clickable"

Getting the HTML code to put a picture into your blog

Putting HTML from elsewhere into your blog

Telling Google about the pictures in your blog

Inserting a picture into a blog post

Applying hover-text to pictures

Tools for applying copyright protection to your blog

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.