{"id":38,"date":"2024-04-23T04:37:00","date_gmt":"2024-04-23T09:37:00","guid":{"rendered":"http:\/\/theedublogger.edublogs.org\/2008\/01\/24\/enhancing-your-blog-by-customizing-widgets-using-html\/"},"modified":"2024-06-05T18:32:09","modified_gmt":"2024-06-05T23:32:09","slug":"photo","status":"publish","type":"post","link":"https:\/\/www.theedublogger.com\/photo\/","title":{"rendered":"How To Add Your Photo to Your Blog Side Bar"},"content":{"rendered":"<p>This is the next post in our <a href=\"https:\/\/www.theedublogger.com\/tag\/blog-makeover\/\">&#8220;blog makeover&#8221;<\/a> series that provides an excellent opportunity to respond to a reader&#8217;s suggestion to include an image using HTML in a page or sidebar.<\/p>\n<p>It is recommended you read the previous post on <a href=\"https:\/\/www.theedublogger.com\/2008\/01\/19\/getting-more-out-of-widgets\/\">Getting more out of Widgets<\/a> prior to reading this post.<\/p>\n<p>Basic knowledge of HTML provides greater ability for customizing text widgets. It means you can embed photos in your sidebar, link to pages on your blog or other websites, write text using bold and italics, for example.<\/p>\n<h3>What is HTML?<\/h3>\n<p>HTML is a bit like <a href=\"https:\/\/www.theedublogger.com\/about\/want-automatic-notification\/\" target=\"_blank\" rel=\"noopener\">RSS<\/a>, for bloggers there is no need to fully understand it but helpful if we learn the basics of how to use.<\/p>\n<p>HTML is short for &#8220;Hyper Text Markup Language&#8221; and a language used to tell a browser how to organise the layout of a web page it has downloaded from the net &#8211; e.g. it influences if text is bold, italics, a heading, bullet points, etc.<\/p>\n<p>When you write a post or page inside your blog dashboard you don&#8217;t worry about HTML because the Visual Editor does it for you. If you switch to the Code Editor from the editor options menu, it shows the HTML code instead.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19198\" src=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/code-editor.png\" alt=\"Editing HTML\" width=\"800\" height=\"439\" srcset=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/code-editor.png 1438w, https:\/\/www.theedublogger.com\/files\/2008\/01\/code-editor-250x137.png 250w, https:\/\/www.theedublogger.com\/files\/2008\/01\/code-editor-1080x593.png 1080w, https:\/\/www.theedublogger.com\/files\/2008\/01\/code-editor-768x421.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Basic knowledge of HTML is really helpful for tasks like customizing widgets and writing comments on blogs.<\/p>\n<h3><strong>Examples of HTML used to highlight text include: <\/strong><\/h3>\n<ul>\n<li><strong>&lt;strong&gt; tag makes text strong<\/strong> e.g. I &lt;strong&gt;really like&lt;\/strong&gt; this idea produces:&nbsp;I <strong>really<\/strong> <strong>like<\/strong> this idea.<\/li>\n<li><strong>&lt;em&gt; emphasizes text<\/strong> e.g. I &lt;em&gt;really like&lt;\/em&gt; this idea produces<span style=\"color: #000080;\"><b>:<\/b><\/span>&nbsp;I <em>really like<\/em> this idea.<\/li>\n<\/ul>\n<p>Notice you must use the &lt; and &gt; symbols around the HTML Tags and the tag is closed using a &#8216;\/&#8217; (slash) in front of the tag keyword e.g. &lt;\/strong&gt;<\/p>\n<h3><strong><span style=\"color: #000000;\">Here&#8217;s how you can use HTML to add an image to your blog sidebar<\/span><\/strong><\/h3>\n<p>Uisng the Code Editor to add an image to a page or sidebar is a simple matter of enclosing the image URL in an img tag, much like the examples above. The only difference is that you do not need a closing tag for the image HTML.<\/p>\n<p>For example, &lt;img src=&#8221;https:\/\/www.theedublogger.com\/files\/2008\/01\/question.jpg&#8221; alt=&#8221;question mark&#8221; \/&gt;<br \/>\n<strong><span style=\"color: #003366;\"> produces<\/span><\/strong><img decoding=\"async\" src=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/question.jpg\" alt=\"question mark\"><\/p>\n<h3>Final Thought<\/h3>\n<p>As <a href=\"http:\/\/dogtrax.edublogs.org\/\" target=\"_blank\" rel=\"noopener\">Kevin<\/a> <a href=\"https:\/\/www.theedublogger.com\/2008\/01\/22\/tips-for-doing-a-blog-makeover\/#comment-67\" target=\"_blank\" rel=\"noopener\">pointed out<\/a>:<\/p>\n<blockquote><p>if you doing a blog makover, make sure you write a post to invite your readers to comment on your changes. Readers who read your post via RSS won&#8217;t be aware of the change because everything will look the same in their feed reader.<\/p><\/blockquote>\n<p>Remember to pop past <a href=\"http:\/\/larryferlazzo.edublogs.org\/2008\/01\/21\/super-duper-blog-makeover\/\">Larry Ferlazzo&#8217;s Website of The Day blog<\/a> and give him feedback on his makeover!<\/p>\n<p>It does take time to get used to using HTML; <strong>the key with technologies is willingness to experiment.<\/strong> As you become experienced with using HTML you will recognise opportunities that can be enhanced with it&#8217;s use.<\/p>\n<p>Other posts in our &#8220;blog makeover&#8221; series include:<\/p>\n<ul>\n<li><a title=\"Permanent Link to Tips For Doing A Blog Makeover\" href=\"..\/2008\/01\/22\/tips-for-doing-a-blog-makeover\/\" rel=\"bookmark\">Tips For Doing A Blog Makeover<\/a><\/li>\n<li><a title=\"Permanent Link to Creating Hyperlinks Using HTML\" href=\"..\/2008\/01\/28\/creating-hyperlinks-using-html\/\" rel=\"bookmark\">Creating Hyperlinks Using HTML<\/a><\/li>\n<li><a title=\"Permanent Link to What To Consider When Choosing Your Blog Theme\" href=\"..\/2008\/07\/15\/what-to-consider-when-choosing-your-blog-theme\/\" rel=\"bookmark\">What To Consider When Choosing Your Blog Theme<\/a><\/li>\n<\/ul>\n<p>If you are enjoying reading this blog, please consider <a title=\"Subscribe to my feed\" href=\"http:\/\/feeds.feedburner.com\/TheEdublogger\" rel=\"alternate\"><img decoding=\"async\" src=\"http:\/\/www.feedburner.com\/fb\/images\/pub\/feed-icon32x32.png\" alt=\"\"><\/a><a title=\"Subscribe to my feed\" href=\"http:\/\/feeds.feedburner.com\/TheEdublogger\" rel=\"alternate\">Subscribing For Free!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the next post in our &#8220;blog makeover&#8221; series that provides an excellent opportunity to respond to a reader&#8217;s suggestion to include an image using HTML in a page or sidebar. It is recommended you read the previous post on Getting more out of Widgets prior to reading this post. Basic knowledge of HTML&#8230;<\/p>\n","protected":false},"author":10863191,"featured_media":19215,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[236850,236334],"tags":[51362,28317,19517],"coauthors":[210693800],"class_list":["post-38","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-growing-blog-readership","category-tips-for-better-blogging","tag-blog-makeover","tag-html","tag-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/users\/10863191"}],"replies":[{"embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":3,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":19216,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts\/38\/revisions\/19216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/media\/19215"}],"wp:attachment":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/tags?post=38"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/coauthors?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}