Adding Images To Your Blog Post

1,977 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,977
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Adding Images To Your Blog Post

  1. 1. A Student’s Guide to Adding Images to New or Existing Blog Posts<br />Adding Images to Your Blog Post<br />Presented by<br />Michelle Krummel<br />
  2. 2. Editing your post<br />First, log in to your account using your username and password.<br />Log In<br />
  3. 3. Editing your post<br />First, log in to your account using your username and password.<br />Then go to your dashboard.<br />Control Panel will take you to your dashboard<br />
  4. 4. Editing your post<br />First, log in to your account using your username and password.<br />Then go to your dashboard.<br />Click on Posts.<br />Click on Posts<br />
  5. 5. Editing your post<br />First, log in to your account using your username and password.<br />Then go to your dashboard.<br />Click on Posts.<br />Then click Edit. Note that you are only able to edit posts that you have authored. These will appear in blue.<br />Click on Edit<br />
  6. 6. Adding an image<br />Insert your cursor to where you want to place the image.<br />Insert cursor where you want image<br />
  7. 7. Adding an image<br />Insert your cursor to where you want to place the image.<br />Click the Add an Image icon.<br />Add an Image<br />
  8. 8. Adding an image<br />You can add an image from one of three sources:<br /><ul><li>From your computer
  9. 9. From URL
  10. 10. From Media Library</li></ul>Image source<br />
  11. 11. From your computer<br />Add an image from your computer if you have a copy of the image saved on your computer or on a removable storage device.<br />Click Browse and locate the file on your computer. Then click Upload.<br />From Computer<br />
  12. 12. From URL<br />Add an image from a URL if you want to link directly to the image from an Internet site, without having to upload a copy of the image to the server.<br />Paste the URL into the box labeled Image URL. The other fields may be left blank.<br />Click Insert into Post.<br />From URL<br />
  13. 13. From URL<br />Find the image you wish to link. Right-click on the image and select Copy Image Location. This will paste the image URL onto your clipboard.<br />Copy Image Location<br />
  14. 14. From URL<br />Paste the URL into the box labeled Image URL.<br />Then click Insert into Post.<br />Paste URL<br />Insert into Post<br />
  15. 15. From Media Library<br />Add an image from the Media Library if you have previously uploaded an image to the blog’s Media Library.<br />Click Show to select the image.<br />From Media Library<br />Show<br />
  16. 16. From Media Library<br />Add an image from the Media Library if you have previously uploaded an image to the blog’s Media Library.<br />Click Show to select the image.<br />Then Insert into Post.<br />Insert into Post<br />
  17. 17. Adding an image<br />If the edit box is too small, you can resize it by dragging the lower right-hand corner down.<br />Drag corner here to resize edit box<br />
  18. 18. Adding an image<br />If the edit box is too small, you can resize it by dragging the lower right-hand corner down.<br />Drag corner here to resize edit box<br />
  19. 19. Adding an image<br />Or click the Fullscreen Mode icon to view your workspace in full view.<br />Full screen editor<br />
  20. 20. Adding an image<br />Click the Fullscreen Mode icon to return to exit full screen mode.<br />Full screen editor<br />
  21. 21. Resizing an image<br />Click on the image and drag any of the handles to resize the image.<br />Drag handles to resize image<br />
  22. 22. Resizing an image<br />Click on the image and drag any of the handles to resize the image.<br />Drag handles to resize image<br />
  23. 23. Resizing an image<br />Or left-click the image and then click the Edit Image icon that appears in the upper left-hand corner.<br />Click image, then click Edit Image icon<br />
  24. 24. Editing an image<br />You can rescale the image and edit the title, caption, and link URL for the image.<br />Or choose Advanced Settings for more options.<br />
  25. 25. Editing an image<br />Under Advanced Settings you can enter the desired image size and add a border to the image.<br />
  26. 26. Editing an image<br />You can also enter the HTML editor and adjust the image properties directly in the HTML code.<br />HTML Editor<br />
  27. 27. Crediting your image source<br />Always remember to credit the source of any image that is copyright protected.<br />Add photo credit<br />
  28. 28. Crediting your image source<br />Always remember to credit the source of any image that is copyright protected.<br />If you’re using a Flickr! image, scroll down to view the copyright information under Additional Information. Follow the link to read the copyright information.<br />Copyright Info<br />
  29. 29. Crediting your image source<br />Hover your mouse in the Attribution section and a box with HTML code will appear.<br />Copy the code. We will paste this into the blog post to credit the author.<br />Photo credit code<br />
  30. 30. Crediting your image source<br />Do not paste the code here (in the Visual Editor). If you do, your readers will see the code, not the link. <br />You must use the HTML editor to insert HTML code.<br />Visual/HTML Editors<br />
  31. 31. Crediting your image source<br />Pastethe code here (in the HTML Editor). Then return to the Visual Editor to see how it will appear to your readers.<br />Visual/HTML Editors<br />Paste code here<br />
  32. 32. Crediting your image source<br />It would look better to have the link on the same line as the words, “Photo credit.” <br />It would also look better to reduce the size of the text, to set it apart from the rest of the text in the article.<br />
  33. 33. Crediting your image source<br />It would look better to have the link on the same line as the words, “Photo credit.” <br />Use the backspace key to delete the line break.<br />
  34. 34. Crediting your image source<br />It would also look better to reduce the size of the text, to set it apart from the rest of the text in the article.<br />Highlight the line of text you want to resize.<br />
  35. 35. Crediting your image source<br />It would also look better to reduce the size of the text, to set it apart from the rest of the text in the article.<br />Highlight the line of text you want to resize.<br />Click the icon Show/Hide the Kitchen Sink to have access to more editing options.<br />Click icon for more options<br />
  36. 36. Crediting your image source<br />Use the pull down menu to format the text.<br />Choose Heading 6 for the photo credit. <br />Format Text<br />
  37. 37. Crediting your image source<br />Now the text is set apart from the rest of the article.<br />
  38. 38. Previewing your changes<br />We are ready to Preview Changes.<br />Preview Changes<br />
  39. 39. Previewing your changes<br />We are ready to Preview Changes.<br />Then return to the Edit Post page to save your changes.<br />Return to Edit Post<br />
  40. 40. Publishing your changes<br />Update Post to publish your changes to the Blog and make them visible to your reader.<br />Update Post<br />
  41. 41. Publishing your changes<br />All done!<br />
  42. 42. CREDITS:<br />Presentation created by Michelle Krummel<br />http://mrskrummel.com<br />michellekrummel@gmail.com<br />

×