Live Writer for WordPress Blog Post, Pages and also Sidebar

Microsoft Windows Live Writer is the unsurpassed blogging editor. For WordPress blogs it handles pages as easily as normal posts. Live Writer can also be used to generate the HTML code needed for use in setting up sidebar features.

sidebarThis article explains the technique and procedure for doing so. Here is an image of a sidebar with multiple features, a map, some images and text with hyperlinks. Things that are easily inserted with Live Writer into posts. It works just as easily for use with the WordPress sidebar Text Widget. There are a few peculiarities that have to be carefully observed.

WordPress Text Widgets are used for arbitrary text or HTML. It is the HTML handling that makes them so powerful as most anything can be shown.

Live Writer can be used in its normal graphical interface, wysiwyg (what-you-see-is-what-you-get) to set up the HTML code.

Most sidebars are on the order of 250 pixels wide, it will help if you know the exact size of your sidebar. In Live Writer ignore the margins as they will be for your main area and not the sidebar. Since material in the sidebar will look best when centered, that is what you should use in preparation.

The main caution concerns images. They must be sourced from the web. Since you will not publish this post, Live Writer will not upload the images. So you need to upload all images manually before you set up the sidebar HTML.

Prepare your images

Prepare your images in the exact size that you want them to appear and upload them to the WordPress Media Library. This is a drag-and-drop procedure so it is quite fast and straightforward.

Obtain the file URL for each image. Be sure to get the file URL and not the permalink. See the illustrations below. It might help to just copy the ULRs and paste them into Notepad so they are handy when you are ready to use them.

LW-html-01

LW-html-02

Create the sidebar HTML

Open Live Writer to a blank post – you can name the post anything, but something like “sidebar 1” might be descriptive enough. You will not upload this post, only save it on the local PC.

Sidebar-setup-02Enter the text normally, center the text. When you need an image use Insert > From the web … Enter the image file URL.

Continue and build your sidebar.

Sidebar-setup-01

Note in the illustration above that the social media icons are not centered. If you want images beside each other set the Alignment to Left. Space them with the right or left margin setting so that the sum of the margins and image horizontal dimensions adds up to the width of the sidebar.

Inserting a map

Things get a little tricky when you insert a map. Live Writer lets you size the map image so you can fit it to the sidebar. However, that image is locally generated and stored. It is not uploaded to WordPress, since you will not publish this working post. So you must do a screen capture, clip out the map image, upload it to the WordPress Media Library just like any other image. But, and this is important, you can’t change the generated code to reference that image. Live Writer will overwrite it on every operation. You will need to make the change later.

When you are finished with the setup, click the Source tab (lower left). Select all the source text and copy it. You can store it on Notepad – a good place to make the correction for any map image.

Sidebar-setup-04

In the illustration here the code is selected in the Source view of Live Writer on the right and inserted into the Text Widget in the WordPress dashboard on the left. If you have no corrections to make to the code this is the quick and easy way. If you need to make a correction for a map image here are some additional notes.

Making the image reference correction for a map

Sidebar-setup-05Live Writer will generate an image of the map. The reference in the code needs to be changed to a file URL from the Library.

Find the reference in the code. Look for the section that contains the words “map picture”. Find the text <img src=. Replace everything in the quotes that follow with the file URL. In the illustration the reference generated by Live Writer is partially highlighted. It begins with a dollar sign, $.

Once the correction is made just save the Widget text and take a look at your blog.

Hope all goes well for you!

.:.

© 2012 Ludwig Keck

, , , , , , ,

5 Comments

Don’t get spammed by flattery

Spammers love blogs and have been a plague for a long time. Sadly, parasites will always be with us. Lately there seem to be more that try to get posted by using flattery.

It used to be that spammers just tried to comment with long lists of links to junk sites. The machinery of the blog providers has pretty much eliminated those spam comments. Flattering comments with just one or two links are easy to spot. Here are some (edited) examples:

This submit actually made my day. You can’t imagine just how much time I had spent for this info! Thank you! my blog … [link to junk site]

Hey very nice blog! My blog: … [link to junk site]

I do not even know hоw I endеd up hеrе, but I thоught this post was greаt. I don’t know who you are but certainly you are going to a famous blogger if you aren’t already ;) Cheers! my blog post … [link to junk site]

Hey There. That is an extremely neatly written article. I will make sure to bookmark it and return to read extra of your useful info. Thanks for the post. I will certainly return. my web site: … [link to junk site]

Well, you are not likely to fall for these. As much as we all like praise, these overly-flowery comments are not likely to get approved and published as comments. Do not approve a flattering comment that is not truly responsive to the post on which it is submitted.

Some spammers have started to automatically include your post title in their comment in hopes of getting it approved as a comment. Here is one:

Thanks for finally talking about > “Long Shadows” < Liked it! my page … [link to junk site]

Even parasites are not totally stupid, so the latest trick is to not include any links. The default settings on most blogs require comment approval before publishing unless the comment writer was previously approved. And therein lies a potential for getting tons of unexpected spam comments to get through. The spammer just needs to get one comment approved and it is open sailing thereafter. Don’t let that happen to you! Here is an obvious one from that class:

Just desire to say your article is as astounding. The clearness to your
publish is simply spectacular and i can suppose you’re knowledgeable in this subject. Well with your permission let me to grab your RSS feed to keep updated with impending post. Thank you one million and please continue the rewarding work.

But some may be quite short and easily mistaken for actual praise. You don’t want to reject a real reader of your blog, so the best strategy is to set your blog to require approval of all comments by you.

In WordPress the setting is under SettingsDiscussion as shown in this illustration:

image

Blogger settings are under SettingsPosts and comments

image

Consider letting anyone comment, but require approval for all comments. Enjoy the occasional flattery, they may be worth a chuckle, but make sure that they do not result in a headache!

.:.

© 2012 Ludwig Keck

, , , ,

2 Comments

Outwit an obscuring theme background in Live Writer

Windows Live Writer is the unsurpassed blogging editor for its effective WYSIWYG (what-you-see-is-what-you-get) editing environment. Great strides have been made by the blogging service providers in creating themes, designs or templates with headers and backgrounds. Some of these features confuse Live Writer and do not appear in the editor as they look in the finished blog. This may be just a bother, but with some designs these features can obscure the typing in Live Writer.

The WordPress theme and custom header used with this blog is a good example. Here is how the Live Writer editor window looks with the freshly downloaded theme (Blog Account tab > Update theme).

WLW-130228-03

The post title entry box is partially obscured by the header image as is part of the main text area. This is particularly troublesome when the image is the same color as the text – you can’t read your own writing!

Here is another example, this time the background image in the actual blog is overlaid with a semitransparent text area. Live Write is confused by this and it shows the background in its full glory. Seeing the entered text is difficult.

WLW-130228-09

If you are bothered by such a situation, here is my work-around solution.

When the blog theme is downloaded from the blog site the header and background images are placed along with other material into a folder named “blogtemplates”. The trick is to modify these images so they will not be bothersome when used by Live Writer. My solution is to just draw a white or light gray box in the appropriate location. With that done the Live Writer window looks like this:

WLW-130228-15

WLW-130228-16

Now the Live Writer edit window is completely useful and preparing a post is fast, easy, and convenient. The modified local image files will not affect the blog, you see these images only in Live Writer.

WLW-130228-17Now for the details.

The first step is to locate the folder “blogtemplates”. The easiest way is to open Windows Explorer (File Explorer in Windows 8). Then click Local Disk under Computer in the navigation pane (If you renamed your main dirve look for that name. It is usually your C: drive). In the search box enter blogtemplates. The folder will be found in C:\User\yourname\AppData\Roaming\Windows Live Writer. Of course, you can step through the folders and get there that way.

Now it gets a bit interesting. Computers are completely tasteless when it comes to naming folders. If you have more than one blog, as I do, you will see a weirdly named folder for each blog. Of course, there is no indication as to which belongs to what. You can look through the folders to find the header or background image, you will recognize it more easily if you set the file listing display to large icons. An easier way is to download the theme for the blog of interest, the folder will then have the current date and time as the Date modified. (See below.)

There will be two subfolders in the the blog template folder. It is the second subfolder that contains the offending images (at least on the computers I tried it on it was always the second folder.)

WLW-130228-01a

You can load the header or background image into Paint and there draw a light-colored rectangle over the area where text entry will take place. My approach was to get the correct width by doing a screen capture of the open blog in a browser and then clipping out a bit of the text area and pasting it to the appropriate location in Paint.

WLW-130228-11

Note of caution: Both subfolders in the theme folder in blogtemplates will have the header and background images. If you make the changes in the wrong one, you will not see the correction in Live Writer. I have not explored the reason for two subfolders and how the contents is used. If you mess up royally just update the theme to get new files downloaded and start over.

Good luck!

.:.

© 2012 Ludwig Keck

, , , , , ,

Leave a comment

Live Writer Tutorial Series

Technogran presents a well done series of tutorials over on Technogran’s Tittle Tattle. Even if you are an expert with Live Writer these post are worth your while.

Blogging with Windows Live Writer 2011. 1.Let’s begin!

Blogging with Windows Live Writer. 2. Writing your post.

Blogging with Windows Live Writer 2011. 3. Let’s insert something!

Blogging with Windows Live Writer 2011. 4. Inserting Everything bar the kitchen sink.

Blogging with Windows Live Writer 2011. 5. A closer look at photos.

Blogging with Windows Live Writer 6. Handling your blog account.

Blogging with Windows Live Writer. 7. Handling those files!

Blogging with Windows Live Writer 8. Categories, tags and dates.

.:.

© 2012 Ludwig Keck

LiveWriter-credit-360

, , , , , , , , , , , , , , , , , , , , , , , , ,

1 Comment

Sourcing SkyDrive photos may fail

SkyDrive has made recent changes (August 2012) that may cause sourced images to not show.

Especially for my “boilerplate” at the bottom of posts, I source little images from a SkyDrive album called “Utilities”. Prior to August 1, 2012, the sharing of this folder was set to “People with a view link” and worked perfectly across my various blogs. image

Then all my links on the bottom suddenly no longer showed the little pictures, my links at the bottom looked like this:

image

The links worked fine, of course the readers had no clue unless they moved the pointer to the image placeholders.

Changing the sharing setting to Everyone restored the images to operational status.

If you notice that your SkyDrive sourced images no longer show up in your posts, check the Sharing setting.

imageClick Sharing to display the settings, click Share folder.  In the next dialog click Get a link. Click the Make public button.

You can ignore the public share URL provided.

Continue to source images as before:

Click the image, in the information pane on the right click View original. Then copy the URL from the browser address bar (Ctrl+C).

This does mean that your sourced images have to be public, and when people get into your SkyDrive they can see the pictures. It also means that Microsoft is more careful with the access controls, and that is really a good thing.

.:.

© 2012 Ludwig Keck

LiveWriter-credit-360

, , , , ,

Leave a comment

Making and using your own boilerplate

Boilerplate (Wikipedia: Boilerplate (text)) any text that is or can be reused in new contexts or applications without being changed much from the original. …

Windows_Live_Writer_logo-2For blog posts some repeating text, especially with graphics and hyperlinks, can be very useful to provide credits, references and links to other sites or pages. For posts here, I use such “boilerplate” to provide links to my home site and to my Twitter, Facebook and Google+ pages. Here, then, a quick tutorial on making and using boilerplate.

There are a number of plugins for Windows Live Writer that make inserting boilerplate very easy. I use Text Template Plugin for Windows Live Writer by Greg Duncan. Plugins can be be found on the Windows Live Plug-ins site (trust it is still there by the time you read this).

Creating the boilerplate

1. First, of course, you decide what the boilerplate should say, look like, and do. For this quick tutorial I will use my “created with Live Writer” slug (once more Wikipedia: Slug (typesetting)). Write down the text and make a sketch of any graphics and list any links.

2. If your boilerplate is to include an image, you must first create the image. I used Paint to prepare the text with the graphics. Here is what it looked like (frame added for illustrating the graphic). My original image was 1287 by 180 pixels. As you can see, it contains text and an image of the Windows Live Writer logo.

LiveWriter-credit

3. Scale the image to the actual size that it should be in use and save it as a JPG file. Mine is 360 x 50 pixels.LiveWriter-credit-360

4. Upload the image, or images, to a site so you can use the graphic repeatedly without having to upload it each time. The easiest way is to insert the graphics into a post in Windows Live Writer. Set the Size to Original and  the Link to option to No link so WLW will upload only one copy. Upload the post as a draft to your blog.

5. Now you have stored the image or images in an accessible online site.

If you are using WordPress, find your image by going to your WordPress Dashboard > Media > Library. Find the graphic, click Edit. Copy the File URL. That is the web address for the graphic that you will re-use again and again.

If you are using Blogger your graphic will be in your Picasa Web Albums. Click Show All Albums, find the album titled Windows Live Writer – your newly added graphics should be at the end. Click the graphic to show it it large on a page, right-click the image and click Copy image URL (this may be different depending on your browser). Now the URL is on your clipboard, save it for later use (I use NotePad for this).

6. Set the boilerplate in a new Windows Live Writer post. Type the text and insert the graphics with Insert > Picture > From the web. Use the URL for the graphics. Insert any hyperlinks. Make all the positioning adjustments so the boilerplate looks just as you want it.

7. Click the Source tab in the lower left of the Live Writer window. Copy the source code. This is what you will need. I pasted mine into NotePad and saved the file. You can reuse this saved code from this file or you can install it in a plugin. If you wish to use a plugin, read the next section, otherwise just skip over it.

Prepare for reuse with a plugin

image1. If you want to make it easy on yourself, install a Live Writer plugin. Click the blue tab > Options > Plug-ins. Live Writer makes this easy by even providing a link to the plugins download site.

2. Go to the plugins download page, install a plugin you like. I found Text Template in the Other content insertion section. 

3. As they used to say in school, the remainder is left to the student as an exercise. Since the details vary, depending on which plugin you choose, I will not go through the installation and setup procedure. You will find your way easily enough.

Reusing your boilerplate

When you come to the place in a post where the boilerplate should appear you can insert the code form the saved file or install it using the plugin.

Directly install saved code

  1. Open the saved code file.
  2. Copy all the code – select all > copy with Ctrl+C.
  3. Click the Source tab in Live Writer. Scan down to the end. Paste the code (Ctrl+V).
  4. Click the Edit tab. Your boilerplate will be there in all its glory.

Install with Plugin

  1. Click the Insert tab.
  2. Click the plugin. Select the slug. Click OK (This may vary depending on the chosen plugin).
  3. Your boilerplate will be there in all its glory.

Now, wasn’t that easy? Actually, you will find it easier to do and faster than you might think. Go do it!

Take a moment to admire my boilerplate here. It consists of some text and several graphics with hyperlinks. Go ahead, give me a thrill by trying the links.

.:.

© 2012 Ludwig Keck

LiveWriter-credit-360

, , , , , ,

Leave a comment

Give credit to your blogging tool

This post created with Windows Live Writer

Show that you are using the best, easiest blogging tool, Windows Live Writer, at the end of every post. Give others a link to get their own copy of the greatest blogging tool out there!

You are welcome to copy the image that I am using at the bottom of this post.

Below is my code for my WLW credit line. You are welcome to use this as is. It grabs the image from my site. That’s OK I will keep it there. Of course, you are welcome to upload an image of your own to your file store.

Here is what the code looks like. Do not copy and paste this, as some of the characters will get mangled:

<p><a title=”Windows Live Writer” href=”http://windows.microsoft.com/en-US/windows-live/essentials-other-programs”><img style=”background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px” title=”Windows Live Writer – download your own copy” border=”0″ alt=”LiveWriter-credit-360″ src=”http://ludwigkeck.files.wordpress.com/2012/07/livewriter-credit-360.jpg” width=”360″ height=”50″></a></p>

LiveWriter-credit-360

.:.

© 2012 Ludwig Keck

, , ,

Leave a comment

Follow

Get every new post delivered to your Inbox.

Join 62 other followers