Archive for July, 2012

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

, , , , , ,

2 Comments

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