One of our MyCopper bloggers recently made a blog post and had an issue with an inserted image becoming cut off because it was wider than the blog layout would allow.

http://www.mycopper.net/blogs/imweezie/2009/09/05/The-mother-of-all-hidden-objects-pictureHELP-JEFF2/

Here are several tips on how you can handle this:

1) When you place an image, scale it smaller then make the image a hyperlink to the original URL source.

I made this post as an example:  http://www.mycopper.net/blogs/Kurticus/2009/09/08/Lifes-a-Bear/ 

To do this, insert the image to your post using the Insert Image control. Select your image then drag the corner image control to scale your image smaller. With your image still selected, choose the Create Link control. Paste in the URL for the original image. You may want to select "New Window (_blank)" under the Target drop-down-list to launch the picture link in a new window.

2) Leave image large and add scroll bars.

Insert image using Insert Image or Insert Image from Editor. Do not scale.

Click on the HTML tab of the post editor and look for the IMG tag for the image that needs scroll bars. Place the <IMG /> element within a <DIV> element like this:

<DIV style="OVERFLOW-X: auto; WIDTH: 100%;"><IMG border=0 alt=burritocat.jpg src="http://www.mycopper.net/files/Kurticus/Cats/burritocat.jpg" width=960 height=730></DIV>

The style applied to the DIV element is the key. WIDTH:100% will make sure the DIV element is as wide as the parent element allows it to be. OVERFLOW-X:auto will add the horizontal scroll bar if the contents are wider than the DIV container.

I noticed the horizontal scrollbar caused a vertical scroll bar as well so in my example, I also added OVERFLOW-Y: hidden; to the style so the vertical scroll bar would not show.

See http://www.mycopper.net/blogs/Kurticus/2009/09/09/Feeling-Crispy/ for an example.

3) Try writing your blog posts using Windows Live Writer.

This tool has some nice advanced image control utilities such as the ability to place a small sized preview in the blog that links to a larger version.

This pumpkin image was dragged to the Live Writer  editor from a web page. Then the corner was dragged to scale it smaller. That’s it – Live Writer does the rest.  http://download.live.com/writer

View the blog post on Publishing with Windows Live Writer for more information on setting up and using this free tool from Microsoft.

A concern has been brought to my attention that dial-up users have limited monthly connection time and may not want to remain connected to Copper.net while drafting their blogs.

But perhaps a more pressing reason to draft blogs offline is the inactivity cutoff. For dialup users this happens after 4-minutes which goes by fast while developing thought and writing (at least for me). When you Add a Post using the online editor, there are no postbacks to refresh the page unless you remember to make frequent document saves.  Copper.net will see this as inactivity and the countdown timer starts. You may find your connection dropping while in the midst of drafting your blog and losing everything since the last save.

Well, I have a solution. You can draft your blog entries on your computer while unconnected. When you are ready to publish your blog posts, you can connect and upload your posts.

Though I’m always connected to the internet, I have been using Windows Live Writer to edit and publish my blog posts for several reasons:

• I like the idea of editing and saving post files locally then publishing when ready.
• I can maintain and post to several blogs from one interface.
• Local resources such as images are easier to insert. The Live Writer interface handles the uploading for me.
• During the beta testing phase, I may lose my post – I want a local copy to republish if this should happen.

Windows Live Writer is a free download from Microsoft and works well with MyCopper blog as well as the following blog services: Windows Live Spaces, SharePoint Blog, Blogger, WordPress, TypePad, etc.

File size is 1.08MB.

Once installed, launch the Live Writer application found in the Windows Live folder on your Windows Start menu. Follow these simple steps to set up a blog account for Writer to post to. The automatic initial setup may take you directly to step 2.

1) Choose "Add blog account..." from the Blogs menu.

2) Select "Other blog service" then click Next

3) Enter Web address for your blog, this is found by logging on to the MyCopper portal and selecting MyBlog from the main navigation menu. You will need to enter you login Username and Password for Windows Live Writer to access your blog.

Important: Select “Remember my password” unless you want to enter your login information each time you make a post.

4) Writer will attempt to connect to your blog. You will then be prompted to allow Writer to detect the theme of your blog. If you select Yes it will post a temporary post on your blog.

5) Most likely you will receive an alert that Writer could not delete the temporary post which you will need to do manually. Press OK.

6) Enter a Blog Nickname for your blog. This is used by Writer and will appear in the Blogs menu.

7) Go to MyBlog on the MyCopper portal and you should find a new blog post that looks something like this.

Click Delete.

Note: You will need to be logged in to delete a post on your blog.

More support on Windows Live Writer.

Creating Blog Posts are easy with the convenient Editor Interface. Text and images can easily generated, inserted, or copied into your post body and appearance styles can quickly be modified. No knowledge of HTML is needed to create an attractive blog post. An HTML Mode is available for those who are comfortable scripting in this language.

Just about everything you would want to do to lay out and effect the appearance of your post can be accomplished with the Editor in Design Mode using the Editor Toolbar.

Editor Toolbar:

Here is an expounded list of each of the Toolbar Features.

  Clean Microsoft Word HTML:  Pasting in text from a Microsoft Word document will convert the styles to HTML code. Auto generated code can often generate a lot of extraneous code. Clicking this button will strip away much of this extra formatting.

Before:

<H1 style="MARGIN: 24pt 0in 0pt"><FONT face=Cambria color=#365f91 size=5>ATTENTION:</FONT></H1> <P class=MsoNormal style="MARGIN: 0in 0in 10pt"><FONT face=Calibri>This is <B style="mso-bidi-font-weight: normal"><SPAN style="FONT-SIZE: 14pt; LINE-HEIGHT: 115%">HTML</SPAN></B> text <SPAN style="COLOR: red">generated</SPAN> by <B style="mso-bidi-font-weight: normal"><I style="mso-bidi-font-style: normal">MS Word.</I></B></FONT></P>

After:

ATTENTION: <BR>This is <B>HTML</B> text generated by <B><EM>MS Word.</EM></B>

  Check Spelling: As it sounds – this checks the text in your document and alerts you of misspelled words.

Cut, Copy, Paste: Use this for editing content of your post.

Note: You may receive an alert that this online feature wants to access your computer’s clipboard. For it to function properly, you need to accept this condition by clicking Allow access.

Undo, Redo: This control allows you to step backwards or forwards through changes you have made in the blog post editor.

Create Link: Creating hyperlinks in your posts are a snap with this handy editor. Select the text you would like to be a hyperlink and click the Create Link icon. You will need to enter the URL field. Title and Target are optional. Title will display a tooltip message when the link is hovered over. Target will allow you to change the window the link opens to.

Remove Link: As it sounds, this control will remove the HTML code that makes your text a link. Select the link text or place the text insertion tool within the link text and click this button. The Remove Link icon is not available until a valid link is selected.

Insert Image: Use this method if you are referencing an image on the internet using a URL. Enter the URL in the Image Source field.  Alternate Text will display if the image link becomes broken. Alignment will allow you to control how text will flow around the image. Border Thickness applies a stroke around the image. Spacing is the amount of padding between your image and the surrounding text. Dimensions allow you to change the size your image will display in your post.

Note: You can edit these settings by selecting the image and clicking the Insert Image icon.

 Insert Image from Gallery: Inserting an image by Using the Gallery allows you to upload images to the MyCopper Server. This is especially useful for image like logos that you will like to use often. Look for more on this in a later post.

Begin by Browsing and Uploading an image from your computer’s hard drive.

Insert Rule: This ads a line break graphic element to your post.

Symbols: This drop-down list provides a convenient reference to symbols or special characters not easily accessible from your keyboard.

Font Style Presets, Font, Size: To edit the appearance of your text use the style presets. Change the font or adjust the size of highlighted text by selecting one of choices in these drop-down menus.

Foreground Color, Background Color: Use these controls to change the color of your text.

  Bold, Italic, Underline, Superscript, Subscript, StrikeThrough: These controls are fairly self-evident and in keeping with most text editing controls.

Left Justify, Center Justify, Right Justify, Justify Full: Quickly adjust the justification of your selected text. This post is left justified.

Ordered List, Unordered List, Indent, Outdent: Add some formatting styles that will enhance the readability of your post.

• Add an ordered list that begins each item with an incremental number.
• Try an unordered list or bullet list that helps to define brief points of interest.
• Indents are useful for quotes or reference text – this renders as a blockquote.
• Outdents bring the indented text back to the margin – removing the blockquote tag.

Design Mode, HTML Mode : Most of your post editing will be done in Design mode. This smart interface builds the HTML that defines the styles of your post elements such as headlines, text, and images. Use the HTML mode when you want to customize or override the code generated from the editor in Design mode.

Warning: Having a working knowledge of HTML is important. Changing the HTML can break the way your post displays or can cause your post to not render correctly. HTML or Hyper Text Markup Language is the scripting language that tells the client browser how to display the page content. More on HTML tags and standards can be found at the World Wide Web Consortium. Here is a nice primer to get you started – Getting Started With HTML.

You must be a logged-in user and have set up your blog to make a post. If you have not done this yet, please read Getting Started - Setting Up Your Blog.

1) Navigate to your blog by clicking “My Blog” in the Header Navigation Menu.

2) Click on “Add Post” in the Admin menu.

3) Enter a Post Title in the text box provided.

4) Enter a URL-Friendly Name. Usually this is your title with the spaces removed. You can assign your blog a shortened name if your title is lengthy. For your convenience, you can have the URL-Friendly name automatically generated by clicking the Extract from Title button.

5) Select the Categories this blog post falls under. Assigning categories helps the viewer quickly navigate to the post content that interests them. If your Category list is empty or does not contain the appropriate Categories, you can add new Categories to the list by entering a Category in the text box and clicking the Add Category button.

Note: Selecting multiple Categories is possible by using Control+Click (PC) or Command+Click (Mac). Selected Categories will be highlighted.

Note: You can always come back and modify this list at a later time.

6) Enter a list of Tags separating each word with a comma. Tags can be keywords that are found in your post that help define the relevant content. Adding Tags will help your Tag Cloud be more effective.

7) Check the Published button when this post is ready to be made public. If this post is a draft, leave this unchecked.

8) Use the Editor Control to build your blog content. By default, the Editor is in Design mode which is a WYSISYG interface. For more specific control or customization you can edit in HTML mode.

Warning: Some experience working with HTML is needed for working in HTML mode. Breaking this code by using invalid HTML can cause your post to not render correctly.

Note: Further information on using the Editor Control can be found here [link coming soon].

9) Click the Save Post button to submit your post. You will be taken to the Home page of your blog. If the Published Checkbox was checked, you will see your newly created post in your blog.

Note: If you do not see your newly created post, chances are it remains unpublished. Navigate to the list of Unpublished Posts under the Admin menu. Select your new blog then check the Published Checkbox and click "Save Post" again.

RSS is a great way to link to blog content with a feed reader such as Microsoft Outlook, Google Reader, MyYahoo, NetNewsWire, SharpReader, or even the customizable feed panels on the MyCopper portal home page. 

Definition: RSS means “Really Simple Syndication”

Setting up Microsoft Outlook to receive RSS feeds:

1) Select menu item Tools > Account Options…

2) Select the RSS Feeds tab. Click New…

3) Enter the URL for the blog feed you want to receive. Click the Add button.

4) In the RSS Feed Options screen, the Feed Name should auto-populate with information Outlook receives when it connects to the feed. You can change the Feed Name if you desire. This will be the name of the feed folder under the Outlook directory: Mail Folders > RSS Feeds.

Click the OK button.

Setting up Google Reader to receive feeds:

1) Log in to Google Reader  with your Google account or select Create an Account. You can log in using your Gmail account if you have one.

2) Click Add a Subscription and enter the RSS feed URL in the textbox and click Add.

Note: Further help can be found at http://www.google.com/support/reader/?hl=en.

See CopperBlog article “Customizing your MyCopper Feed Panel”

Note: When adding the URL for an RSS feed, be sure you are viewing the XML document. Your browser will recognize this as a feed and display a yellow feed panel at the top of the page. MyCopper blog feeds will end with “?feed=rss2” example:http://www.mycopper.net/blogs/CopperBlog/?feed=rss2.