tag:blogger.com,1999:blog-88432670450779930282024-03-17T23:34:20.811-07:00Blog Know HowTips, Tricks and Secrets for Blogger.com BloggersThe Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.comBlogger101125tag:blogger.com,1999:blog-8843267045077993028.post-85591339417561811002015-02-20T23:00:00.000-08:002020-05-10T01:29:26.658-07:00How to Choose a Custom Blogger Template to Avoid ProblemsSo you have downloaded a custom Blogger template from the internet and now you want to customize it to the needs of your Blogger blog (Blogspot blog). Before you expend all that energy check under the hood to make sure the Blogger template isn't a lemon and that you are not going to be wasting your valuable time.<br />
<br />
Blogger has been around for some years now and has gone through many changes. Before the most recent default templates were introduced, the choice of default templates was not that great leading many developers to crank out a heap of custom templates to meet the demand of bloggers looking for a theme that matched their blog. The problem was however, that many of these Blogger themes had missing code and many had hard coded fonts, color schemes, gadgets etc requiring coding knowledge to make alterations to the template. <br/>
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf_CqFxgXz78h1eP3_g4W26p4_OvV-7vit5D2jqecZqcZo8WzkfsF9vWj7c3yrWD3DmMMlWmreCpoIgHvqZbjKwsvvkDCRLVVzcGlPwFF976eNlbb0gQHV6d1SxqQXGzKQhfWLGn4XPXQ/s1600/blogger_templates.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf_CqFxgXz78h1eP3_g4W26p4_OvV-7vit5D2jqecZqcZo8WzkfsF9vWj7c3yrWD3DmMMlWmreCpoIgHvqZbjKwsvvkDCRLVVzcGlPwFF976eNlbb0gQHV6d1SxqQXGzKQhfWLGn4XPXQ/s320/blogger_templates.jpg"></a></div>
Many of these custom templates are still around to download. Some are good, some not so good. Be aware if you use a custom template on your Blogger blog it will not perform as well as a default template and some may potentially have problems further down the track as Blogger introduces new features. In preference it is usually better to use a default template and customise it to your own specifications. In future posts I will talk a lot about how to go about this so watch this space.<br />
<br />
In the meantime if you have downloaded and installed a Blogger custom template and you want to check it out before going ahead with making changes look for these three features immediately on installation of a custom template. If any are missing there are fixes available but it does mean an edit to the template code. Also bear in mind that if gadgets like these are missing the template was probably created a few years ago and it may be better to find something more recent.<br />
<br />
<ol><li><b>Check that the Blogger quick edit wrench is working</b>. That is the crossed wrench symbol that appears next to each installed gadget in the Blogger blog sidebar, header and footer when you view your blog and are logged in. The best place to check for this on installation is in the sidebar. Each gadget will have its own wrench symbol if this feature is working properly.<br />
<br />
If you really like the template but this feature is not working please check out my instructions to fix this issue <a href="http://blogknowhow.blogspot.co.nz/2011/02/add-missing-quick-edit-wrench-blogger.html">Fix the Missing Quick Edit Wrench in Blogger</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbS2srjZVinugOeUplgseGffTyvllPqOEppWOqB8VzzcBZpo1oGFpVoX0mtIaeoH0fZmXonyggHpjgfVOoQ9cGRw3UpODVgHggkTxtt99hv3UFq8dm8CZ6Zd9DYyUQ5RNi3VvIQfow9M/s1600/blogger_quick-edit-wrench.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbS2srjZVinugOeUplgseGffTyvllPqOEppWOqB8VzzcBZpo1oGFpVoX0mtIaeoH0fZmXonyggHpjgfVOoQ9cGRw3UpODVgHggkTxtt99hv3UFq8dm8CZ6Zd9DYyUQ5RNi3VvIQfow9M/s320/blogger_quick-edit-wrench.jpg"></a></div>
</li><br />
<li><b>Check that the Blogger quick edit pencil is working.</b> The quick edit pencil is the pencil that that appears beneath the post in the post footer when you are logged in and viewing your blog. It does not display in post preview mode. It must be enabled under Configure Blog Posts (Go to layout and then click on edit on the blog post gadget). If the <a href="http://blogknowhow.blogspot.co.nz/2011/02/fix-missing-quick-edit-pencil-blogger.html">quick edit pencil feature in Blogger isn't working once you are sure it has been enabled then try this fix</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-J-KtqLhuEBryzE2pN-3cY0b2SwyuV8cSVl3t5Ucm1lwyRy3SKNSJFiGfzH44FRYHg88luD3aR32vefNtKDFR4Pcj8Q2qkszHM1vS5hhGdZZS_kqxfFRF_wJZPFLtQyTuWkcrxjyyK0/s1600/blogger_quick-edit-pencil.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-J-KtqLhuEBryzE2pN-3cY0b2SwyuV8cSVl3t5Ucm1lwyRy3SKNSJFiGfzH44FRYHg88luD3aR32vefNtKDFR4Pcj8Q2qkszHM1vS5hhGdZZS_kqxfFRF_wJZPFLtQyTuWkcrxjyyK0/s320/blogger_quick-edit-pencil.jpg"></a></div>
</li><br />
<li>Check that the Blogger default share buttons are working. These appear in the post footer at the bottom of each post. You can see these in the image above. Make sure these are enabled by going to layout and then clicking on edit blog post gadget and then ticking enable the share buttons option.<br /><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-tgKPPYlBv6ZYRyfUZF6p8d-m2JXzfPmAqJoXtOP8TOq-1K7fnr2SFzZQYICh7ZGtP6t9kjWp-_OCsWFpLj824CiJoQBb3WTpTfqlqC2qRx2IzD7mCvP_fFKlbdnTi9oKEn8TEisq1c/s1600/blogger_configure-blog-posts.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-tgKPPYlBv6ZYRyfUZF6p8d-m2JXzfPmAqJoXtOP8TOq-1K7fnr2SFzZQYICh7ZGtP6t9kjWp-_OCsWFpLj824CiJoQBb3WTpTfqlqC2qRx2IzD7mCvP_fFKlbdnTi9oKEn8TEisq1c/s320/blogger_configure-blog-posts.jpg"></a></div>
</li></ol><br /><br />
<b>Other Blogger Custom Template Checks</b><br />
Also check that slideshow or image sliders are working first before you do anything else to the template as often template creators do not give instructions about how to get these working. If you are not going to get good support from the template creator think carefully about using the template. <br /><br />
Another factor to keep in mind with custom templates for Blogger is that you may not be able to remove the links below the footer because of copyright reasons. Sometimes template authors put several of these at the bottom of the template which can be annoying.<br /><br />
In this article I have provided a few tips to help you choose a custom Blogger template and hopefully prevent you from investing time and energy in a template that has been poorly coded and may not be worth the effort to customise in the long run. <br /><br />
<a name='more'></a><strong>Related Articles</strong><br />
<a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br />
<a href="http://blogknowhow.blogspot.co.nz/2011/02/add-missing-quick-edit-wrench-blogger.html">No Quick Edit Wrench Problem in Blogger Fix</a><br />
<a href="http://blogknowhow.blogspot.co.nz/2011/02/fix-missing-quick-edit-pencil-blogger.html">No Quick Edit Pencil Problem in Blogger Solution</a><p /><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com3tag:blogger.com,1999:blog-8843267045077993028.post-88994315129658879852015-02-04T03:37:00.000-08:002020-05-10T01:30:16.597-07:00How to Change the Blog Description Font Color in BloggerThose new to Blogger often ask about <b>how to change the blog description in a Blogger blog</b>. In today's Blogger tutorial I show you how to modify your blog description using the Template Editor to change the color of the font. If you have made changes to the background color of your header you may also want to change the font color of the blog description. <br />
<br />
If you want to learn how to change the font style or change the look of the text please see my Blogger tutorial on <a href="
http://blogknowhow.blogspot.co.nz/2015/02/how-to-change-font-of-blog-description-in-blogger-header.html">how to change the font size and font style of the blog description</a>.<br />
<br />
<b>How to Change the Color of the Blog Description</b><br />
Before you start ensure you have blog description enabled on your Blogger blog. This tutorial assumes you have a default Blogger template installed on your blog. If you are using a custom template these instructions may or may not work depending on the coding of your custom Blogger template.<br />
<ol>
<li>Log on to Blogger and navigate to the dashboard of your blog</li><br />
<li>From the left hand menu select "Template"</li><br />
<li>On the Templates page under "Live On Blog" select the "Customize" Button<p />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQbzaqSe-U5Z2LKw2j97-NjBVt05ZL39DXoCd63lRFBJQTUH9mMa3fN9cKW0SBNyA-ohE-pxxY5yfTBNkH2t2YnnrDXvdmqpqyHTk3fuHqM3ElaZxnUER2PvAEurjmhuXAdYi4dkQRuc/s1600/blogger_template-page.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQbzaqSe-U5Z2LKw2j97-NjBVt05ZL39DXoCd63lRFBJQTUH9mMa3fN9cKW0SBNyA-ohE-pxxY5yfTBNkH2t2YnnrDXvdmqpqyHTk3fuHqM3ElaZxnUER2PvAEurjmhuXAdYi4dkQRuc/s320/blogger_template-page.JPG"></a></div>
</br />
</li>
<li>From the left hand menu select "Advanced" <p />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvn0HNWlZT4yalA0FhV0MJOcRHatECD7m9VSsy0MWB3a-jjS6jcvd_6RcrXMvCunk8IKx5PVzIFRLg0B3sP-kPpJ2KqQvuG8X0AUw9ijhlfUZMM2dX3UZ8ZS9xTUI5Z7od4XS0iGSGZ4c/s1600/blogger-template-designer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvn0HNWlZT4yalA0FhV0MJOcRHatECD7m9VSsy0MWB3a-jjS6jcvd_6RcrXMvCunk8IKx5PVzIFRLg0B3sP-kPpJ2KqQvuG8X0AUw9ijhlfUZMM2dX3UZ8ZS9xTUI5Z7od4XS0iGSGZ4c/s320/blogger-template-designer.jpg"></a></div><br />
</li>
<li>Click on "Blog Description" currently the 5th item in the menu<p /></li>
<li>Under "Description Color" choose a color from the suggested palette or from the drop-down menu or type in the color code if you know the hexidecimal value eg #FFFFFF for white and #000000 for black. <p />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5YQuSKdW2tQLpqtcnmxINaKJn5OV5J7aMTj-gnh0y-PVUhmKRtIdadS9Cl5uItSqdFnryJg9QffIf-_Hjm_8Zwiuaal-IXQqB9-2ra3YjR13eowIECpt177vEmYiQ8MeJcGdst8Otd8/s1600/blogger_change-blog-description-color-scheme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5YQuSKdW2tQLpqtcnmxINaKJn5OV5J7aMTj-gnh0y-PVUhmKRtIdadS9Cl5uItSqdFnryJg9QffIf-_Hjm_8Zwiuaal-IXQqB9-2ra3YjR13eowIECpt177vEmYiQ8MeJcGdst8Otd8/s320/blogger_change-blog-description-color-scheme.jpg"></a></div>
<p />
<li>Notice that the changes you make can be seen in the live view below. When you are satisfied with the color scheme you have chosen save your changes and click View Blog. Please note that you might not able to see the changes in live view mode if you are using a custom template. In this case you will need to save the changes and then click view Blog to see the applied changes.
</ol>
<p />
<strong>Related Articles</strong><br />
<a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br />
<a href="
http://blogknowhow.blogspot.co.nz/2015/02/how-to-change-font-of-blog-description-in-blogger-header.html">How to Change the Font Size and Style of the Blog Description in Blogger</a><br /><br />
<div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com0tag:blogger.com,1999:blog-8843267045077993028.post-13307778374723871362015-02-04T02:52:00.000-08:002020-05-10T01:30:46.631-07:00How to Change the Font of the Blog Description in the Blogger HeaderIn today's Blogger tutorial I show you step-by-step <b>how to change the font style and font size of the blog description</b>. The blog description is the tag line under the Blog Name that appears in the header section of your Blogger blog. If you do not yet have the blog description for your Blogger blog enabled follow these steps:
<ol><li>From your Blogger dashboard select "Settings" which is located at the bottom of the left menu
<li>Then choose "Basic"
<li>Type your blog description in the description box located below the blog name. (Make sure you choose something that describes what your blog is about)
<li>Save your changes.
<li>Choose View Blog to see the blog description you added now in your blog header.</li></ol>
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_rIMknuv5RkFdTOA5ZAYjyFmj6m9yRHUj8D0Cgmyuogj_9y1E9GKp5P5VElwI8aoWOSUsnazVsfbJ2BGVc_nZ2N-0Mkdqx14zSmOY_JuK_j3wxzGq04C8qawYP5wUubp2SY4_AnP8h0/s1600/blogger_settings-basic-blog-description.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_rIMknuv5RkFdTOA5ZAYjyFmj6m9yRHUj8D0Cgmyuogj_9y1E9GKp5P5VElwI8aoWOSUsnazVsfbJ2BGVc_nZ2N-0Mkdqx14zSmOY_JuK_j3wxzGq04C8qawYP5wUubp2SY4_AnP8h0/s320/blogger_settings-basic-blog-description.jpg"></a></div>
The main reason you might want to change the font of the default blog description is because the blog description in default Blogger templates is on the small side. Just by increasing it to 16px or even 20px will make a difference. Also you might want to customize the blog description to achieve a particular look. This tutorial will help you customize the blog description to your own individual requirements.<br /><br />
This tutorial assumes you are using a default Blogger template such as Simple or Awesome. If you are using a custom template the template code may be different, however, these instructions should still work in most cases.<br />
<br />
<b>Instructions to Change the Font Size and Style of the Blog Description</b><br />
Unfortunately, the only modification to the blog description Blogger currently allows using the Template Designer is <a href="http://blogknowhow.blogspot.co.nz/2015/02/how-to-change-color-font-style-of-blog-description-in-blogger.html">changes to the font color</a>. Changes to the font style and font size of the blog description therefore require a manual insert of a little bit of CSS code into your Blogger template. Follow these steps to change the text style and size in Blogger:<br />
<br />
<ol>
<li>Log in to Blogger and go to the dashboard of your blog. <p /></li>
<li>From the left hand menu select "Template"<p /></li>
<li>On the Templates Page select "Edit HTML" under Live Blog.<p /></li>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXg5tZ0x-y65tboRPGvM-SQK7klaa9cUjfKR-GZSzd5TTlqR6dHyEV47igJJkmQ5Gyn6BPnZGQ5DkJ0YtXc9z0vdE9bElIPLfqoz86dNPPbcQWSnDrmKdsOPtHQI2732a7G4vdIIAx6ts/s1600/blogger_template-page-edit-html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXg5tZ0x-y65tboRPGvM-SQK7klaa9cUjfKR-GZSzd5TTlqR6dHyEV47igJJkmQ5Gyn6BPnZGQ5DkJ0YtXc9z0vdE9bElIPLfqoz86dNPPbcQWSnDrmKdsOPtHQI2732a7G4vdIIAx6ts/s320/blogger_template-page-edit-html.jpg"></a></div>
<li>From the top menu select "Jump to Widget" and then "Header 1" from the drop down menu. <p /></li>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tCS9BC-iFZ7I5_D1QGHxItTfdiC7QdxW5tDhZ_n3DQQmpp0f-zL5AUjXEm-JrPHkuDZHhjTdFOixKBItXI6VxI8xmIIDmLkYX7UxMdGrTx6Y0mKWJ1I7MoGY-kacRurTN2n44e8J-kg/s1600/blogger_edit-header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tCS9BC-iFZ7I5_D1QGHxItTfdiC7QdxW5tDhZ_n3DQQmpp0f-zL5AUjXEm-JrPHkuDZHhjTdFOixKBItXI6VxI8xmIIDmLkYX7UxMdGrTx6Y0mKWJ1I7MoGY-kacRurTN2n44e8J-kg/s320/blogger_edit-header.jpg"></a></div>
<li>Find this line: <p />
<blockquote><code><b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'>...</b:widget></code></blockquote> <p /></li>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjEkiaZs5f8YWWw5N_9hdTmOvAmuaOUclq09tMFFDwJqo_FT7busUkOdq61f61Iep8rjRBnhSuadv2wNY9Pt0nnmq9TV-KEwT5ndRuSlQZ_TF_mHqWH40bsA-ROQoN8ftODycP_Z0eic/s1600/blogger_header-code-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjEkiaZs5f8YWWw5N_9hdTmOvAmuaOUclq09tMFFDwJqo_FT7busUkOdq61f61Iep8rjRBnhSuadv2wNY9Pt0nnmq9TV-KEwT5ndRuSlQZ_TF_mHqWH40bsA-ROQoN8ftODycP_Z0eic/s320/blogger_header-code-1.jpg"></a></div>
<li>Now click on the dots that appear between <b>type='Header'></b> and <b></b:widget></b> to expand the section.<p /></li>
<li>You should now see the following code<p />
<blockquote><code> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'><br />
<b:includable id='main'><br />
<b:includable id='description'>...<b:includable><br />
<b:includable id='title'><br />
</b:includable><br />
</b:widget><br />
</b:section>
</code></blockquote> <p /></li>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3XkGCiSlzGvS9Z5hz8uuAe2W_YVtrjH1XJLs0rrnRG4bxBvK-OyQzXM9gENZVScbolkL0GHmK9QthVBzixDRZ22TzRMHFezQO-87e45Vds_pC5N6cpukxipVNs0rSOtVshoz-HAqG14Q/s1600/blogger_header-code-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3XkGCiSlzGvS9Z5hz8uuAe2W_YVtrjH1XJLs0rrnRG4bxBvK-OyQzXM9gENZVScbolkL0GHmK9QthVBzixDRZ22TzRMHFezQO-87e45Vds_pC5N6cpukxipVNs0rSOtVshoz-HAqG14Q/s320/blogger_header-code-2.jpg"></a></div>
<li>Click on the dots between <b><b:includable id='description'></b> and <b></b:includable></b><p /></li>
<li>Now you will presented with this code: <br />
<blockquote><code> <b:includable id='description'><br />
<div class='descriptionwrapper'><br />
<p class='description'><span><data:description/></span></p>
</div>
</code></blockquote> <p /></li>
<li>Find this line:<br />
<blockquote><code><p class='description'><span><data:description/></span></p> </code></blockquote> <p /></li><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XZzhy11XwusZR3VYbRZ-djbOfxjdw-58fO5H_pdEHYSdtCrErVNycPMKr-OBqtd8R-9YpCk19RxdHYWZqla6u-2GH6bH5A087egpAYdoSqczJSWJLXjRdG0BileZfkj3gRo2CcCnbdg/s1600/blogger_header-code-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XZzhy11XwusZR3VYbRZ-djbOfxjdw-58fO5H_pdEHYSdtCrErVNycPMKr-OBqtd8R-9YpCk19RxdHYWZqla6u-2GH6bH5A087egpAYdoSqczJSWJLXjRdG0BileZfkj3gRo2CcCnbdg/s320/blogger_header-code-3.jpg"></a></div>
<li>Now to change the blog description to a different font eg default to verdana change the code to the following<br />
<blockquote><code> <p class='description' style='font-family: verdana;'><span><data:description/></span></p></code></blockquote> <p /></li>
<li>To change the blog description font style to italics change the code to the following<br />
<blockquote><code><p class='description' style='font-family: verdana; font-style: italic;'><span><data:description/></span></p></code></blockquote> <p /></li>
<li>To change the font style of your blog description from the default capitalized case to uppercase change the code as follows. Note for lower case use: text-transform: lowercase;<br />
<blockquote><code><p class='description' style='font-family: verdana; font-style: italic; text-transform: uppercase;'><span><data:description/></span></p></code></blockquote> <p /></li>
<li>To increase the size of the blog description font from 12px to 16px for example change the code to the following<br />
<blockquote><code><p class='description' style='font-family: verdana; font-size: 16px;'><span><data:description/></span></p></code></blockquote> <p /></li>
<li>Putting all the changes together from 11 to 14 would need the following code change<br />
<blockquote><code><p class='description' style='font-family: verdana; font-style: italic; text-transform: uppercase; font-size: 16px;'><span><data:description/></span></p></code></blockquote> </li><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3q15TSWguv-x4sv0ryeP1oHcxPiZRYW452wwFxMQEGHpLVpWy-tzfS1fQZP6CGxt4BmMdIYmk2xs7avWJwujS27Am9iNerRUEsgHT-HSlgY1EKA3JtQnav0v17gQR9CFRT68smb5U_g/s1600/blogger_header-code-4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3q15TSWguv-x4sv0ryeP1oHcxPiZRYW452wwFxMQEGHpLVpWy-tzfS1fQZP6CGxt4BmMdIYmk2xs7avWJwujS27Am9iNerRUEsgHT-HSlgY1EKA3JtQnav0v17gQR9CFRT68smb5U_g/s320/blogger_header-code-4.jpg"></a></div>
<br />
</ol>
<br />
<a name='more'></a>
<strong>Related Articles</strong><br />
<a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br />
<a href="http://blogknowhow.blogspot.co.nz/2015/02/how-to-change-color-font-style-of-blog-description-in-blogger.html">How to Change the Blog Description Font Color in Blogger</a>
<div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com1tag:blogger.com,1999:blog-8843267045077993028.post-20185128599362655912015-01-31T20:09:00.000-08:002015-02-03T18:03:46.986-08:00How to Remove the Link from a Single Image in BloggerBy default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link.<br />
<br />
If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed (using the toggle button) so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you backup before you start.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR5O7fHfu0fogmB9eT4Ulm0wkKKjGl8cvuYwUfgo0-Lj5wUKL46qcuqVKaky40Tc1_RgwUhzvZ0AQ79YqApa4CtBm5Jy9P2zxSteIsvXen18vwjjp6ycIu5GMH4G3kJIqvZkb5T0FHaHo/s1600/smile-face.jpg" height="200" width="194" /></span></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This image has had the link removed</td></tr>
</tbody></table>
<br />
<ol>
<li>Go to the Blogger Post Editor. </li>
<li>Ensure you are in Compose mode (toggle between Compose and HTML on the top left corner under your Blog name</li>
<li>Upload an image in Blogger or use an existing image. </li>
<li>Highlight the image. You will see it gives you the choice of sizes, to add a caption, remove the image etc.</li>
<li>While the image is highlighted click on Link from the menu once. This will disable the hyperlink and your image will no longer be clickable. </li>
<li>Save your changes.</li>
<li>Go to your live blog and try clicking on your image. Your image will no longer be clickable and you will no longer be able to see a larger view of the image.</li>
</ol>
<br /><ol>
</ol>
<br />
<strong>Related Articles</strong><br />
<a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br />
<a href="http://blogknowhow.blogspot.com/2010/12/remove-image-border-blogger-simple.html">How to Remove the Image Border in Blogger Template Simple</a><br />
<a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Change or Delete Image Borders in Blogger Posts</a><br />
<br /><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com0tag:blogger.com,1999:blog-8843267045077993028.post-68421483842280702872012-01-20T14:42:00.000-08:002012-01-22T04:16:09.157-08:00How to Access Old Style Templates in Blogger (Blogspot)"Can I still use the old default templates for my Blogger blog (Blogspot blog)?" is a frequent question I am asked on Blog Know How pretty often. Other people have asked me about the template I am using and how to get it. In answer to the first question as you can see older style templates do work on Blogger. And with respect to the second question the template I am using on Blog Know How is an enhanced version of the Rounders 3 Blogger template which is one of the older style default Blogger templates available from 2006 onwards. <br /><br />In today's Blogger tutorial I am going to show you <span style="font-weight:bold;">how to access the older style default Blogger templates (Blogspot templates)</span> and activate them on your Blogger blog. This tutorial is mostly written for those new to Blogger who might not realise that there are a number of default Blogger layouts released in 2006 that are still perfectly usuable. Also there may be some of you who would like to revert back to an older style Blogger template but are not sure how to find the old templates on Blogger.<br /><br /><blockquote><span style="font-weight:bold;">A Word of Warning First</span><br />At the outset I need to say that by applying an older style Blogger template to an existing blog you may lose some of the advanced design and layout features in the Blogger Template Designer. This may not be a drawback if you are happy to do a bit of tweaking and may actually be a far better alternative than downloading a free custom Blogger template that may have a host of compatibility problems with Blogger especially if it was released a while ago. There are some pretty good free custom Blogger templates out there and there are some which were thrown together and have all sorts of problems which are not easily solvable unless you know how to code in CSS. <br /><br />So please be warned that you may potentially lose some features in converting to an older Blogger template. For instance if you are using the Simple default Blogger template and already have a three column layout selected with a 2 or 3 column footer then you will find that Blogger will revert to a two column layout and place all your widgets in the sidebar if you select an older style template. You will then need to manually add the footer and the extra sidebar. See my tutorials on <a href="http://blogknowhow.blogspot.com/2009/09/add-3-column-or-4-column-blogger-footer.html">how to add a 3 or 4 column footer to Blogger</a> and <a href="">how to manually add an extra column to Blogger</a> for help with this. <br /><br />I suggest before you start that you download a full back up of your template and that you upload this to a test blog to see how it looks rather than trying it out on a live blog. However if you decide go ahead and later change your mind and want to revert back to the one of the newer Blogger templates you will need to manually shift your widgets out of the sidebar using the drag and drop feature in Page Elements</blockquote><br /><span style="font-weight:bold;">How to Access Older Style Blogger (Blogspot) Templates</span><br /><br /><span style="font-style:italic;">Note:</span> These instructions assume you are using the updated Blogger interface. If you are using the old Blogger interface (you will have a message at the top of your blog "Try the updated Blogger interface") then start at step 3.<br /><br /><ol><li>From Overview in the updated Blogger interface click on the wheel icon at the top right which will give you an array of Blogger options<br /><br /><li>Select the Older Blogger Interface from the drop down menu<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPXtgMhjSwotwqj_IPjSVie382IAE-7eKAlXllO03z8OY3iB5t-oAI9Mk1LyTw3h-Ckq1SQtjnS5D4tm8PCff1mPmnre1aL6EaP0dxYQQIyYQdRphNyFsXNNgkkxkzUEtyvfvO1AAYcw/s1600/blogger_select-old-blogger-interface.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 306px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPXtgMhjSwotwqj_IPjSVie382IAE-7eKAlXllO03z8OY3iB5t-oAI9Mk1LyTw3h-Ckq1SQtjnS5D4tm8PCff1mPmnre1aL6EaP0dxYQQIyYQdRphNyFsXNNgkkxkzUEtyvfvO1AAYcw/s320/blogger_select-old-blogger-interface.JPG" border="0" alt="Select Old Blogger Interface from Drop Down Menu in Blogger overview"id="BLOGGER_PHOTO_ID_5699857866492403122" /></a><br /><br /><li>The older style Blogger Dashboard will now be visible and displaying a list of blogs if you have more than one otherwise just the one. Click on Design from the list of links under the blog title you wish to apply the older Blogger template to.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZCdqy7Z8uKv82ZsZMjb3oyAN-dQXGaB-UOu-Uz1RfTC6RBJXJD4XsqSdmXjdmJqMDYMCKZ49UCjq_qE61HKfQXrCiaurxLOakaWemFFJxFrbGLs6gm7TYFWNFGNgLIAcN1HbBiVUmSc/s1600/blogger_select-design.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 132px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZCdqy7Z8uKv82ZsZMjb3oyAN-dQXGaB-UOu-Uz1RfTC6RBJXJD4XsqSdmXjdmJqMDYMCKZ49UCjq_qE61HKfQXrCiaurxLOakaWemFFJxFrbGLs6gm7TYFWNFGNgLIAcN1HbBiVUmSc/s320/blogger_select-design.JPG" border="0" alt="Select Design in the Old Blogger interface"id="BLOGGER_PHOTO_ID_5699859535861898098" /></a><br /><li>Click on the Edit HTML link located under the Blogger tabs menu<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDA3EqwT-W_nA86HoSBKtgbiLZqUFNzevhiW_GB78hMCvIfnLVwfJigSl49CNP95J8GLQsHUas-1-4jlpVgPmQwh7KFE1bKBcTVTo8c_zGwLPOJzrXofD8xk2Dm9Z78JRljwpTP4Aj6I/s1600/blogger_select_edit-HTML.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 81px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDA3EqwT-W_nA86HoSBKtgbiLZqUFNzevhiW_GB78hMCvIfnLVwfJigSl49CNP95J8GLQsHUas-1-4jlpVgPmQwh7KFE1bKBcTVTo8c_zGwLPOJzrXofD8xk2Dm9Z78JRljwpTP4Aj6I/s320/blogger_select_edit-HTML.JPG" border="0" alt="Select Edit HTML in Blogger"id="BLOGGER_PHOTO_ID_5699860209297828194" /></a><br /><br /><li>Once on the Edit HTML page scroll to the bottom of the page and on the left you will see a heading entitled Old Templates. Click on the Select Layout Templates from the list. Avoid the Classic templates as these date from Blogger's first inception and are really too old to be of use.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirhyBFAGp4d_G0sfRD4JcwZRaQBMfoIc50tqWu0tVc4oyKw3th4kG7vAGxK0WFmyn4SDlFzSvSyLR6xKUUvLzCWcYJ-6Sd1x-4qDzR1by_eFFD3_q_xfS58qettGuuFpwSl-naXXdbz3M/s1600/blogger_select-old-template-layout.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 262px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirhyBFAGp4d_G0sfRD4JcwZRaQBMfoIc50tqWu0tVc4oyKw3th4kG7vAGxK0WFmyn4SDlFzSvSyLR6xKUUvLzCWcYJ-6Sd1x-4qDzR1by_eFFD3_q_xfS58qettGuuFpwSl-naXXdbz3M/s320/blogger_select-old-template-layout.JPG" border="0" alt="Select old template layout from Blogger edit HTML page"id="BLOGGER_PHOTO_ID_5699861186650800466" /></a><br /><br /><li>You will now be on the older style Blogger templates page and can scroll through and select a template. Use the preview link to see how your blog looks with one of the older style templates applied. I use the Rounders 3 for Blog Know How by the way although I have adapted it to a 3 column layout. <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39P1_2yACXeub-3Bpy6-HsMCnjnhu0mu2Ruczz9P9UKzk0zHzJPIY5EYjGRRUB6JG8pcJuj85jlk0xSbovFZThzBGEUnBFH7VTuOm3Is926YobhsKQTXqwmRbZFlR1urDKiGKekuDVhM/s1600/blogger_select-rounders-3-template.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 185px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39P1_2yACXeub-3Bpy6-HsMCnjnhu0mu2Ruczz9P9UKzk0zHzJPIY5EYjGRRUB6JG8pcJuj85jlk0xSbovFZThzBGEUnBFH7VTuOm3Is926YobhsKQTXqwmRbZFlR1urDKiGKekuDVhM/s320/blogger_select-rounders-3-template.JPG" border="0" alt="Select default Blogger template from the menu"id="BLOGGER_PHOTO_ID_5699863161586823474" /></a><br /><br /><li>Once you are sure you want to change over to an older style template click on the save button to apply the older style default Blogger template to your Blogspot blog.<br /><br /><li>Click on View Blog at the right of the menus tabs to view your changes and navigate around your blog.<br /></ol><br />Today I have shown you how to change your Blogger blog over to one of the older style Blogger templates. Remember that in doing so you may sacrifice some of the advanced layout and design features available in Template Designer but it will give you the option of more template options and a time-saving alternative to having to download and try out heaps of free custom Blogger templates available on the internet only to find they don't work properly. And remember that even with free custom Blogger templates most do not work with Blogger Template Designer. Having to manually add a footer or an extra column to your Blogger blog are really minor changes if everything else is working fine.<br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com8tag:blogger.com,1999:blog-8843267045077993028.post-17554111495476609622011-02-14T04:15:00.000-08:002011-02-14T13:02:59.846-08:00How to Fix Missing Quick Edit Pencil in Blogger BlogspotIs your custom Blogger template missing its quick edit pencil at the bottom of your Blogger posts (Blogspot posts)? Don't worry. In this Blogger tutorial I discuss how to show a quick edit pencil icon beneath Blogger posts if it is missing. This is a common Blogger problem among custom Blogger templates but fortunately it only takes a couple of minutes to fix.<br /><br />This Blogger tutorial follows on from my previous Blogspot tutorial about fixing missing Blogger icons. Check out <a href="http://blogknowhow.blogspot.com/2011/02/add-missing-quick-edit-wrench-blogger.html">how to show quick edit gadget wrench in Blogger (Blogspot)</a> for help with this issue.<br /><br />In my previous Blogger tutorials I have also discussed how to fix many other common Blogger problems eg <a href="http://blogknowhow.blogspot.com/2009/04/add-missing-embedded-comments-blogger_28.html">how to fix a missing embedded comment form in Blogger</a>. Take a look at all my Blogger tutorials on <a href="http://blogknowhow.blogspot.com/search/label/Solutions%20to%20Common%20Blogger%20Problems">how to fix common Blogger problems (Blogspot problems)</a> here<br /><br /><span style="font-weight:bold;">Fix Missing Quick Edit Pencil Blogger Blogspot</span><br />The quick edit pencil is a nice Blogger feature that you would not want to be without. A click on this time saving Blogger icon gives you direct access to your Blogger posts without having to go through "Edit Posts"<br /><br />So if the free custom Blogger template you downloaded from the internet has no quick edit pencil displaying under your Blogger posts when viewing the actual published post then it can be fixed by taking the following the steps below:<br /><br /><ol><li>Login to Blogger<br /><br /></li><li>Go to your <span style="color:#558866">Design > Page Elements</span><br /><br /></li><li>Click on the <span style="color:#558866" >Blog Posts edit button</span> located in the bottom right hand corner of the widget<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUh47kaQzcrVKVWqDz116VH9LDJPBQuIZWBg8SmLbOb9jBaRY1jmKycl09_n5qjzDWj1-BeKu9Xj3d8nAlRFNSrXWbHwcQjmP09mqmHYmRi2b_AXeBg38eap-rlS7pY2UiJtnyfSp55Q/s1600/blogger_edit-blog-posts_edit-button.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 274px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUh47kaQzcrVKVWqDz116VH9LDJPBQuIZWBg8SmLbOb9jBaRY1jmKycl09_n5qjzDWj1-BeKu9Xj3d8nAlRFNSrXWbHwcQjmP09mqmHYmRi2b_AXeBg38eap-rlS7pY2UiJtnyfSp55Q/s320/blogger_edit-blog-posts_edit-button.JPG" border="0" alt="" id="BLOGGER_PHOTO_ID_5573624747650779858" /></a><br /></li><li>A Configure Blog Posts window will pop up displaying a number of different features that can be turned on and off on your blog posts.<br /><br /></li><li>Make sure that <span style="color:#558866" >Show Quick Edit</span> is checked. Tick the box and save if Show Quick Edit is not already checked<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj48T5G9jJPYNPKvnYn_JLLEVD65ae6EGsN6zPodlTU3s_7w1DZmQlrbSP6N4Hv_TDNZ_wykKFt-SlRw5ZJkvqS592hMRUJWG8bmFQhZTn7P5__3H7QgdQxcWoNUPdliLKr4ftKokJhvXM/s1600/blogger_show-quick-edting.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 308px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj48T5G9jJPYNPKvnYn_JLLEVD65ae6EGsN6zPodlTU3s_7w1DZmQlrbSP6N4Hv_TDNZ_wykKFt-SlRw5ZJkvqS592hMRUJWG8bmFQhZTn7P5__3H7QgdQxcWoNUPdliLKr4ftKokJhvXM/s320/blogger_show-quick-edting.JPG" border="0" alt="" id="BLOGGER_PHOTO_ID_5573544356778853858" /></a><br /><br /></li><li>Now navigate to an actual published post and check whether the quick edit pencil is now displaying in or around the footer of your blog post. Remember that you must be logged into Blogger to see the quick edit pencil - it is not displayed to your visitors<br /><br />If the pencil is there then that is the end of this Blogger tutorial. The pencil just needed to be enabled. So thank you for joining me today and if you have any other issues with Blogger be sure to check out my <a href="http://blogknowhow.blogspot.com/search/label/Solutions%20to%20Common%20Blogger%20Problems">how to fix common problems in Blogger tutorials</a> or take a look at the <a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">list of all the Blog Know How Blogger tutorials</a><br /><br />If the Blogger quick edit pencil is still missing it means that some important code has been omitted from your Blogger template and it will need to be added to get the quick edit pencil to show up<br /><br /></li><li>Go to <span style="color:#558866">Design > Edit HTML</span><br /><br /></li><li>Back up your template<br /><br /></li><li>Check the <span style="color:#558866">Expand Widget Templates</span> box by placing a tick in it<br /><br /></li><li>Find the following line of code by holding down the CTRL key and F at the same time:<br /><br /><blockquote><code><b:includable id='postQuickEdit' var='post'></code></blockquote><br /><br /></li><li>Check whether the following code is under it:<br /><br /><blockquote><code><span class='post-icons'><br /> <!-- email post links --><br /> <b:if cond='data:post.emailPostUrl'><br /> <span class='item-action'><br /> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><br /> <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/><br /> </a><br /> </span><br /> </b:if><br /><br /> <!-- quickedit pencil --><br /> <b:include data='post' name='postQuickEdit'/><br /> </span> </div></code><br /></blockquote><br /></li><li>If part or all of the code is missing copy and paste it above :<br /><br /><blockquote><code><!-- quickedit pencil --><br /> <b:include data='post' name='postQuickEdit'/> </code> </blockquote><br /><br /></li><li>Save changes to your Blogger template<br /><br /></li><li>Go to an individual published post page and see your new quick edit pencil displayed under your Blogger post </li></ol><br /><br /><span style="font-weight:bold;">Tips and Troubleshooting</span><br />If you want to change the Blogger quick pencil icon you can by changing the image. Simply replace the image as depicted in red with the URL address of your own image. If your image is a different size you may have to change the width and height as shown in blue for the image to display correctly<br /><br /><blockquote><code><span class='post-icons'><br /> <!-- email post links --><br /> <b:if cond='data:post.emailPostUrl'><br /> <span class='item-action'><br /> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><br /> <img alt='' class='icon-action' height='<span class="Apple-style-span">13</span>' src='<span class="Apple-style-span">http://img1.blogblog.com/img/icon18_email.gif</span>' width='<span class="Apple-style-span">18</span>'/><br /> </a><br /> </span><br /> </b:if><br /><br /> <!-- quickedit pencil --><br /> <b:include data='post' name='postQuickEdit'/><br /> </span> </div></code><br /></blockquote><br /><br /> <br />In this Blogger tutorial (Blogspot tutorial) I have shown you how to fix a missing Blogger quick edit pencil that is not showing. I have demonstrated how to enable the quick edit pencil in Blogger via Page Elements and I have provided you with the missing code in the event that the quick edit pencil code is missing from your custom Blogger template.<br /><br />Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.<br /><br /><a name='more'></a><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2011/02/add-missing-quick-edit-wrench-blogger.html">How to Show a Quick Edit Gadget Wrench in Blogger (Blogspot)</a><br /><a href="http://blogknowhow.blogspot.com/2009/04/add-missing-embedded-comments-blogger_28.html">How to Fix a Missing Embedded Comment Form in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/search/label/Solutions%20to%20Common%20Blogger%20Problems">How to Fix Common Problems in Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com36tag:blogger.com,1999:blog-8843267045077993028.post-47846197345493470892011-02-12T00:04:00.000-08:002011-02-14T13:10:03.750-08:00How to Add Missing Quick Edit Wrench to BloggerIn this Blogger tutorial (Blogspot tutorial) I show you how to add a quick edit wrench to Blogger if it is missing from a Blogger gadget. Check here to find a solution for a <a href="http://blogknowhow.blogspot.com/2011/02/fix-missing-quick-edit-pencil-blogger.html">missing quick edit pencil not showing in Blogger</a><br /><br />The quick edit feature allows you to edit a Blogger gadget directly from the blog itself rather than having to go through the Design > Page Elements screens and then finding the actual widget itself before you can edit it.<br /><br />Heaps of times I have downloaded custom Blogger templates only to find that there are lots of omissions compared to a default Blogger template. If you are using a custom Blogger template with the quick edit feature missing here is a step by step guide to insert the missing quick edit feature into your Blogger template<br /><br />The quick edit can be missing from anywhere in your Blogger template. I have chosen to use the sidebar for this tutorial but the solution works wherever the quick edit feature has been removed or never inserted in the first place.<br /><br />Tutorial Difficulty rating: <font color="red">Easy</font color><br />Time: <font color="red">Less than 5 minutes</font color><br />Suitable for all levels of Blogger expertise<br /><br /><span style="font-weight:bold;">How to Add the Quick Edit Wrench to a Blogger Gadget</span><br /><br /><ol><li>Login to Blogger<br /><br /><li>Go to <font color="#558866">Design > Edit HTML</font color><br /><br /><li>Check the <font color="#558866">Expand Widget Templates</font color> box<br /><br /><li>Using <font color="#558866">CTRL + F</font color> buttons together bring up the search box<br /><br /><li>Enter the following search term<br /><br /><blockquote></b:includable></blockquote><br /><br /><li>Scroll through your Blogger template. You will see that every instance of <font color="red"></b:includable></font color> is highlighted in yellow.<br /><br /><li>Once you come to the sidebar widgets which is the most likely place for the quick edit to be missing from look for something like the following (this will vary from template to template). This is the start of the first sidebar if you had a template with a two column sidebar<br /><br /><b:section class='sidebar' id='sidebar1' preferred='yes'><br /><br /><li>Now look at the picture below. You can see that this is the code for a Javascript/HTML widget as shown in red<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkue2TT5iG238ROZkd4-Wrvs1j7BeajVUKcF-XWjPHCQhAeDVNmvfaDhf7pqY5crnPbgUDq30Kv74sFmbrSzGA47ar1j1NYbtYuk2fzN_wiukx2HjaQQBkUf2DYWfksCqirvj0CyJohHE/s1600/blogger_fix-missing_quick-edit-feature.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 206px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkue2TT5iG238ROZkd4-Wrvs1j7BeajVUKcF-XWjPHCQhAeDVNmvfaDhf7pqY5crnPbgUDq30Kv74sFmbrSzGA47ar1j1NYbtYuk2fzN_wiukx2HjaQQBkUf2DYWfksCqirvj0CyJohHE/s320/blogger_fix-missing_quick-edit-feature.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5572706443801023202" /></a><br /><br /><li>Just identify the widget that has the missing quick edit feature and add the following line of code immediately before the </b:includable> <br /><br /><blockquote><b:include name='quickedit'/></blockquote><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaraZX1MNv0FxTWGTRgzq4DHD3xqkhhdvcdiyik2w4nuajW9P-BYdji0c5bfpbOWIrpODa1SYDEEVHrumRMhPSt42rskvLppJeU0dbpZBWnmoM1glXNfYrOYmfARsLohyphenhyphen8npPcI5pLDWU/s1600/blogger_add-missing-quick-edit.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 198px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaraZX1MNv0FxTWGTRgzq4DHD3xqkhhdvcdiyik2w4nuajW9P-BYdji0c5bfpbOWIrpODa1SYDEEVHrumRMhPSt42rskvLppJeU0dbpZBWnmoM1glXNfYrOYmfARsLohyphenhyphen8npPcI5pLDWU/s320/blogger_add-missing-quick-edit.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5572705185996367570" /></a><br /><br /><li>Use the Preview button to check your changes before committing to them<br /><br /><li>Don't forget to click on Save Template</ol><br />In this Blogger tutorial (Blogspot tutorial) you have learned how to fix a missing quick edit button often missing from custom Blogger templates. No matter where the quick edit button has been omitted (sidebar, footer, header etc) it can be added in to a Blogger template very easily so that a Blogger gadget can be edited without having to go through the Blogger design screen. <br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2011/02/fix-missing-quick-edit-pencil-blogger.html">How to Fix the Quick Edit Pencil when it is not Showing Up in Blogger Blogspot</a><br /><a href="http://blogknowhow.blogspot.com/2009/04/add-missing-embedded-comments-blogger_28.html">How to Fix a Missing Embedded Comment Form in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/search/label/Solutions%20to%20Common%20Blogger%20Problems">How to Fix Common Problems in Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com8tag:blogger.com,1999:blog-8843267045077993028.post-25542113977851931892011-01-24T04:07:00.000-08:002011-01-24T04:48:47.616-08:00How to Add Borders to a Blogger Footer BlogspotIn this Blogger tutorial I expand on my previous article about how to add a 3-4 column footer to Blogger by showing you how add border styling to the new footer. You will learn how to add a border around all of your footer columns or around only part of the footer columns. You will also learn how to add different border styles and border colors to customize your 3-4 column footer.<br /><br />If you have just landed here and need instructions on how to add a 3 or 4 column footer to your Blogger blog then please refer to <a href="http://blogknowhow.blogspot.com/2009/09/add-3-column-or-4-column-blogger-footer.html">how to add a 3 or 4 column footer to a Blogger template (Blogspot template)</a><br /><br />This is a walkthrough designed to assist bloggers with no experience of CSS styling who want to enhance their Blogger template with borders and other CSS styling. By following these examples you will gain the knowledge you need to make many types of custom changes to the borders of your new Blogger footer. For help with changing the background of your blogger footer please see my article How to Change the Background a Blogger Footer.<br /><br /><strong>How to Add Borders to the Footer of a Blogger Template</strong><br />To add lines (commonly known as borders) to a Blogger template footer we need to add some CSS styling. <br /><br />Before beginning to add borders there are 3 values to consider:<br /><br /><blockquote><ul><li>width of the border (line thickness eg 1px, 2px, 3px and so on)<br /><li>line style of the border (solid, dotted, dashed, double)<br /><li>color of the border (hex color)</ul></blockquote><br /><ol><li><strong>How to Add a Border Around the Outside of a Blogger Footer</strong><br />First we add the <em>border</em> property and then add the border style, border width and the border color values. In these following examples just by changing these values we can achieve lots of different results.<br /> <br /><ul><li><strong>To Add a Dashed Border Around the Outside of a Blogger Footer</strong><br />With the following code a dashed black line 1px thick will be added around the outside of the footer.<br /><br /><blockquote>#footer-columns {<br /><br />margin:0 auto;<br />clear:both;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border: 1px dashed #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQaFULcU8AIu8u3z5PsEp-wlkHHxxF479zkKPfuQDuW7mTFJ4TlYGZjbXkvvM39g0MKzpWEN6yTXaMMvrrvqdH4r6oOuEzQsfxRO8yQUT2RqRgq-7nX2OedJTssR0xtUvAZdyc_9eyJyo/s1600/blogger_footer_dashed-border.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 84px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQaFULcU8AIu8u3z5PsEp-wlkHHxxF479zkKPfuQDuW7mTFJ4TlYGZjbXkvvM39g0MKzpWEN6yTXaMMvrrvqdH4r6oOuEzQsfxRO8yQUT2RqRgq-7nX2OedJTssR0xtUvAZdyc_9eyJyo/s320/blogger_footer_dashed-border.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5565724215123723330" /></a><br /><li><strong>To Add a Dotted Border Around the Outside of a Blogger Footer</strong><br />By changing the dashed black line to a dotted border it is simple to get a different line style.<br /><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border: 1px dotted #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EtMU5flioCH5eGnTvVstrkJXvJ-ALnt3P_m54ZnQlqXtTpRvQ31Ss9Pz3__xMdGbZQSmcmU4URE36xj54IdHIZ1-GENSR5pnWPEGwbVuS6MHF1jCczrkMBq4ml8P9u2zLHz-dNMSKFw/s1600/blogger_footer_dotted-border.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 83px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EtMU5flioCH5eGnTvVstrkJXvJ-ALnt3P_m54ZnQlqXtTpRvQ31Ss9Pz3__xMdGbZQSmcmU4URE36xj54IdHIZ1-GENSR5pnWPEGwbVuS6MHF1jCczrkMBq4ml8P9u2zLHz-dNMSKFw/s320/blogger_footer_dotted-border.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5565724697537887890" /></a><br /><li><strong>To Add a Solid Border (Blue 3px thick) Around the Outside of a Blogger Footer</strong><br />To add extra emphasis we can change the line color and its thickness. Here I have made the line blue rather than black and thickened it from 1px to 3px.<br /><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border: 3px solid #336699;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVkEoKWgxivKReOCXaXfYuYfgR468qHn1vDmqct_S-K0cibks18RgR9EoZC-Scd-8Meq9SjJJhiLUXX2_S1TfrkZ7Fc4CItYC9tVpeYpGL91FoBu5RzUaElWxDyne1N0Cad_zJzUqbh0/s1600/blogger_footer_solid-color-border.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 86px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVkEoKWgxivKReOCXaXfYuYfgR468qHn1vDmqct_S-K0cibks18RgR9EoZC-Scd-8Meq9SjJJhiLUXX2_S1TfrkZ7Fc4CItYC9tVpeYpGL91FoBu5RzUaElWxDyne1N0Cad_zJzUqbh0/s320/blogger_footer_solid-color-border.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5565725432297328130" /></a></ul><br /><li><strong>To Add a Partial Border to a Blogger Footer</strong><br />Sometimes we might want to add a border to only one part of the footer area rather than the whole thing. Again we add the <em>border</em> property but we append it with the following values: (top, bottom, left, right) depending on where we want to place the border.<br /><br /><ul><li><strong>To Add a Solid Border to the Top of a Blogger Footer</strong><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border-top: 1px solid #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKBPssfc8EK_V1CdQFaZplumO0zGaz4B8XvMF9eDA0pFoYtsaIvc3sm1-BiKfhsxOEumZGZ4uV3vM7zwAuFUBiXwkQES3Di8RiJ0pgIyRgV3xCws3qQMGKv7NndBixuplDYHmuS-Y9fH4/s1600/blogger_footer_solid-border-top.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 82px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKBPssfc8EK_V1CdQFaZplumO0zGaz4B8XvMF9eDA0pFoYtsaIvc3sm1-BiKfhsxOEumZGZ4uV3vM7zwAuFUBiXwkQES3Di8RiJ0pgIyRgV3xCws3qQMGKv7NndBixuplDYHmuS-Y9fH4/s320/blogger_footer_solid-border-top.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5565726356451541042" /></a><br /><li><strong>To Add a Solid Border to the Bottom of a Blogger Footer</strong><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border-bottom: 1px solid #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><li><strong>To Add a Dashed Border to the Top of a Blogger Footer</strong><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border-top: 1px dashed #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><li><strong>To Add a Dotted Border to Both Top and Bottom of a Blogger Footer</strong><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border-top: 1px dotted #000000;<br />border-bottom: 1px dotted #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><li><strong>To Add a Dotted Border 4px thick to Both Top and Bottom of a Blogger Footer</strong><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border-top: 4px dotted #000000;<br />border-bottom: 4px dotted #000000;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGFdeiXSQTSCdQyoEMmyIh921RO_8nju0ykvJIVVfwP32IzLjt7k28HcxjivWRSBkBoF8IqVYjuT6Mdo2wpGjYYppYHLwccGxFXftT1ObAS3XAOSrcZdDCJDiqVp81oVOAXMqxCuR8Eo/s1600/blogger_footer_solid-dotted-4px-top-bottom.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 83px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGFdeiXSQTSCdQyoEMmyIh921RO_8nju0ykvJIVVfwP32IzLjt7k28HcxjivWRSBkBoF8IqVYjuT6Mdo2wpGjYYppYHLwccGxFXftT1ObAS3XAOSrcZdDCJDiqVp81oVOAXMqxCuR8Eo/s320/blogger_footer_solid-dotted-4px-top-bottom.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5565727708618606002" /></a><br /><li><strong>To Add a Blue Solid Border 5px thick to Both Top and Bottom of a Blogger Footer</strong><br /><blockquote>#footer-columns {<br />clear:both;<br />margin:0 auto;<br />}<br /><br />Change to:<br /><br />#footer-columns {<br /><font color="red">border-top: 5px solid #336699;<br />border-bottom: 5px solid #336699;</font color><br />clear:both;<br />margin:0 auto;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yqKDFR_LtMzI8sfoldb1V6b8uk_TRgOz_oWM9YJus6Hf3qDZBZKSgRb0THEw2cdAyq5zFAxDhrXFA_nrVMqv40bgBWFfQ_wMaPdtM5QjDGjfvqOrnW83jLbrwzrdv5Ynp56OoMor4Fs/s1600/blogger_footer_solid-5px-top-bottom.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 84px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yqKDFR_LtMzI8sfoldb1V6b8uk_TRgOz_oWM9YJus6Hf3qDZBZKSgRb0THEw2cdAyq5zFAxDhrXFA_nrVMqv40bgBWFfQ_wMaPdtM5QjDGjfvqOrnW83jLbrwzrdv5Ynp56OoMor4Fs/s320/blogger_footer_solid-5px-top-bottom.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5565727119730522594" /></a></ul></ol><br />In this Blogger tutorial (Blogspot tutorial) I have shown you how to make some simple customizations to the borders of a Blogger footer. This tutorial is intended as an extension of my earlier tutorial on adding a three or four column footer to Blogger. However it is also suitable if you are using a custom template and want to enhance the footer styling further. You have learned how to add borders to a Blogger footer and change the position, color, width and styling. <br /><br />If you want to know more about CSS styling I will be publishing further articles in the future. Look out for my next article in this series How to Add Backgrounds to a Blogger Footer.<br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/add-3-column-or-4-column-blogger-footer.html">How to Add a 3 or 4 Column Footer to a Blogger Template</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com17tag:blogger.com,1999:blog-8843267045077993028.post-82746618372840089022011-01-23T20:23:00.000-08:002011-01-24T14:08:13.828-08:00How to Add a Table to Blogger Blogspot PostThis Blogger tutorial (Blogspot tutorial) explains <span style="font-weight:bold;">how to put a table into a Blogger post. </span> You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors. <br /><br />We will start with a basic table and gradually add CSS styling to the table to improve the look and functionality until we have built the table pictured directly below. No knowledge of CSS and HTML is assumed so this Blogger tutorial is suitable for absolute blogging beginners.<br /><br /><style type="text/css">.nobrtable br { display: none }tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="3" cellspacing="0"> <caption>A Blogger Table Caption</caption><tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br />Tables are a useful way to display information particularly tabulated information. Tables are good whenever you want to align information so that it is easy to read and understand. You can add text, hyperlinks and even images to a table which makes them very useful for presenting information.<br /><br />There is no easy way to add tables in Blogger yet. Even if you are using the new editor you will note that no table button is provided. Fortunately it is easy enough to use a bit of CSS styling to spruce up a table and enter this manually into a Blogger post.<br /><br /><span style="font-weight:bold;">How to Add a Table to Blogger Posts</span><br />First you will learn how to add a simple table to Blogger. We are going to start with a table with 3 columns and 4 rows including a header row. Then I will show you step by step how to add different features to the table including how to add extra rows, a background color to the header, a border, a caption, change the size of the table, center align the table and more.<br /><br /><style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><tbody><tr> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr><td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><ol><li>In Blogger open either a new post or an existing post that you wish to add a table to<br /><br /><li>Click on the Edit HTML tab on your Blogger editor<br /><br /></li><li>Copy the following code into your Blogger post which will produce the basic table as shown above:<br /><br /><blockquote><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><tr><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr"><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /></table><br /></blockquote><br /><br /></li><li>Make changes to the table to suit your own Blogger template if necessary by changing the following:<br /><br /><blockquote><table border="<font color="blue">2</font color>" bordercolor="<font color="black">#0033FF</font color>" style="background-color:<font color="red">#99FFFF</font color>" width="<font color="orange">100%</font color>" cellpadding="3" cellspacing="3"></blockquote><br /><ul><li>Border width (blue)<br /></li><li>Border color (black)<br /></li><li>Background color (red)<br /></li><li>Table width (orange) Can be a percentage or actual width eg 500px<br /></li></ul><br /></li><li>Now we are going to fix an annoying problem in Blogger which renders too much white space above the table. We do this by adding the following styling denoted in red directly above the table tag and adding a closing </div> at the end of the table code<br /><br /><blockquote><font color="red"><style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"></font color><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><tr><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr"><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /></table><font color="red"></div></font color><br /></blockquote><br /></li><li>Let's add some further styling to our table header to improve the look of our table as denoted in red. Change the background color and color attributes to suit your own color scheme if you wish<br /><br /><style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"> <tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><blockquote><style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><tr <font color="red">style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"</font color>><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /></table><br /></blockquote><br /><br /></li><li>Now let's add another row to our table for Blogger so you can see how this is done<br /><br /><style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"> <tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><blockquote><style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><font color="red"><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr></font color><br /></table><br /></blockquote><br /><br /></li><li>In this step we are going to center the contents of our Blogger table. This can be done in several ways but we are going to take a short cut here by assigning a style to every table row<br /><br /><style type="text/css">.nobrtable br { display: none }tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;}</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"> <tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><blockquote><style type="text/css">.nobrtable br { display: none } <font color="red">tr {text-align: center;}</font color> </style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"></blockquote> <br /></li><li>Now we are going to jazz up our Blogger table by adding alternating colored rows to improve readibility and appearance. By far the easiest way to do this is to assign a class.<br /><br /><style type="text/css">.nobrtable br { display: none }tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;}</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"> <tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><blockquote><style type="text/css">.nobrtable br { display: none } tr {text-align: center;} <font color="red">tr.alt td {background-color: #eeeecc; color: black;}</font color></style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr <font color="red">class="alt"</font color>><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr <font color="red">class="alt"</font color>><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /></table><br /></blockquote> <br /><br /></li><li>It is also easy to add a caption to your Blogger table. For a caption above the table simply add the caption line as shown in red. For a caption below the table add the caption line in red and a style as shown in blue<br /><br /><style type="text/css">.nobrtable br { display: none }tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"> <caption>A Blogger Table Caption</caption><tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><blockquote><style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} <font color="blue">caption {caption-side:bottom;}</font color> </style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3"><br /><font color="red"><caption>A Blogger Table Caption</caption></font color><br /><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr class="alt"><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr class="alt"><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /></table><br /></blockquote> <br /><br /></li><li>One more important property needs to be addressed in our new Blogger table to improve the look. We can reduce the double border into a single one. The easiest way to do this is to change the cellspacing to zero as denoted in red. Or, alternatively we can apply the border collapse property to our table as shown in blue. Note: Border collapse may not be supported by all browsers particularly if the cellspacing attribute is defined also)<br /><br /><style type="text/css">.nobrtable br { display: none }tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style><br /><div class="nobrtable"><br /><br /><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="3" cellspacing="0"> <caption>A Blogger Table Caption</caption><tbody><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"> <th>Table Header</th> <th>Table Header</th> <th>Table Header</th></tr> <tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr> <tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr><tr class="alt"> <td>Table Cell</td> <td>Table Cell</td> <td>Table Cell</td> </tr></tbody></table></div><br /><br /><blockquote><style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style><br /><div class="nobrtable"><br /><table border="2" bordercolor="#0033FF" style="background-color:#99FFFF<font color="blue">; border-collapse:collapse;</font color>" width="100%" cellpadding="10" cellspacing="<font color="red">0</font color>"><br /><caption>A Blogger Table Caption</caption><br /><tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;"><br /><th>Table Header</th><br /><th>Table Header</th><br /><th>Table Header</th><br /></tr><br /><tr class="alt"><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /><tr class="alt"><br /><td>Table Cell</td><br /><td>Table Cell</td><br /><td>Table Cell</td><br /></tr><br /></table><br /></blockquote> <br /><br /></li><li>Now go ahead and add your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you add to the Blogger table can be text, hyperlinks or even an image<br /><br /></li><li>Save your changes to the Blogger table by saving and publishing your post<br /></li></ol><br />Please feel free to use this Blogger table as a template whenever you need to add a table to your Blogspot post. If you want to regularly add a table to your Blogger posts that consistently looks the same you could consider adding the table CSS styling to your Blogger template. <br /><br />In this Blogger tutorial (Blogspot tutorial) I have demonstrated how to build a complex table in HTML and CSS to insert into a Blogger post. You have learned how to manipulate a variety of table properties and attributes to create a table for Blogger that matches the color scheme of your blog and is functional and appealing. <br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2010/12/change-bullet-point-style-blogger-lists.html">How to Change the Bullet Point Style in Blogger (Blogspot)</a><br /><a href="http://blogknowhow.blogspot.com/2010/12/remove-image-border-blogger-simple.html">How to Remove Image Border in Blogger Template Simple</a> <br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Change or Delete Image Borders in Blogger Posts</a><br /><a href="http://blogknowhow.blogspot.com/2009/11/add-css-styling-blockquotes-blogger.html">How to Add CSS Styling to Blockquotes in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-or-change-background-image-blogger.html">How to Add or Change a Background Image in a Blogger Template</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com22tag:blogger.com,1999:blog-8843267045077993028.post-60361200475271666092010-12-28T17:54:00.000-08:002011-01-24T02:17:39.998-08:00Add a Comments Counter Button to Blogger BlogspotIn this Blogger tutorial (Blogspot tutorial) you will learn <strong>how to add a comments counter button to Blogger (Blogspot)</strong> to show off the number of comments each of your posts has received. <br /><br />A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx7yDSIAVio5JzYSoz7ZeMQ2MBoJtQUGYjYQFr0GO6Yk5D0NJbJEOwX9rZ4eyrUumWUXzo9D_-zrZHzmxYbHRtet0-Dyq4I7R0fIFxX0OdT2mlWADR8RaqJ71qE8A1ZgEsrRyCIpQhCQA/s1600/blogger_comment-counter-bubble.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 180px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx7yDSIAVio5JzYSoz7ZeMQ2MBoJtQUGYjYQFr0GO6Yk5D0NJbJEOwX9rZ4eyrUumWUXzo9D_-zrZHzmxYbHRtet0-Dyq4I7R0fIFxX0OdT2mlWADR8RaqJ71qE8A1ZgEsrRyCIpQhCQA/s400/blogger_comment-counter-bubble.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5556260123240610738" /></a><br />Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack.<br /><br /><blockquote>Blogger Tutorial Difficulty - <font color="red">easy to medium</font color></blockquote><br /><br /><strong>How to Add a Comments Counter Bubble to Blogger</strong><br /><font color="#558866">A Step-by-Step Walkthrough</font color><br />The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.<br /><br /><ol><li>Log in to Blogger and the blog you wish to apply these changes to<br /><br /><li>Select <font color="#558866">Design > Edit HTML</font color><br /><br /><li>Click on <font color="#558866">Download Full Template</font color> to back up your template before you make any changes<br /><br /><li>Check the <font color="#558866">Expand Widget Templates</font color> box<br /><br /><li>In the CSS Styling section of your Blogger template and just before the <font color="#558866">]]></b:skin></font color><br /><br /><blockquote>.comments-button {<br />width : 48px;<br />height : 48px;<br />background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAtKzKSu1isk_ogKXQ_AjufJKPdBZMhkA9aWct6HpXPlvKNUli1ZVovL62YABdIvpbrlPbslmPSlUG2KJcmwJeLFwt-LDPQQGF2lehA-5MmT2ZuyMB38il5UwmdhdHQ9jsaTysJljwFKE/s200/comment-counter-bubble.png) no-repeat;<br />float : right;<br />font-size : 18px;<br />margin-top : -15px;<br />margin-right : 2px;<br />text-align : center;<br />padding-top:10px;<br />}</blockquote><br /><li>Now find the following block of code using CTRL key + F<br /><br /><blockquote><b:includable id='post' var='post'><br /><div class='post hentry uncustomized-post-template'><br /><a expr:name='data:post.id'/><br /><b:if cond='data:post.title'><br /><h3 class='post-title entry-title'><br /><b:if cond='data:post.link'><br /><a expr:href='data:post.link'><data:post.title/></a></blockquote><br /><li>Copy this code block:<br /><br /><blockquote><font color="red"><b:if cond='data:post.allowComments'><br /><a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a><br /></b:if></font color></blockquote><br /><li>Insert as follows:<br /><br /><blockquote><b:includable id='post' var='post'><br /><div class='post hentry uncustomized-post-template'><br /><a expr:name='data:post.id'/><br /><b:if cond='data:post.title'><br /><h3 class='post-title entry-title'><br /><font color="red"><b:if cond='data:post.allowComments'><br /><a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a><br /></b:if></font color><br /><b:if cond='data:post.link'><br /><a expr:href='data:post.link'><data:post.title/></a></blockquote><br /><li>Save template and then view blog to admire your new comment counter badge.</ol><br /><br /><strong>Tips and Troubleshooting</strong><br /><ol><li>If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons". <br /><br /><img style="float:right;cursor:pointer; cursor:hand;width: 48px; height: 48px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCESuDqVaLeY9cdRLRXZ2N-VaHdnk7CT23nyCgCkLW-0fcwu3iXiYF3supJppw7Qb_XuiF2Z-McJQal8udJl7ND0PlzSBHjrY-TH-bxacOTkmaJ8mzuSz7MJq9gI4oQ9Hx2mnKTbgj87e/s200/comment-counter-bubble-2.png" border="transparent" alt=""id="BLOGGER_PHOTO_ID_5555927518112357826" />Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.<br /><br /><blockquote>.comments-button {<br />width : 48px;<br />height : 48px;<br />background : url(<font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCESuDqVaLeY9cdRLRXZ2N-VaHdnk7CT23nyCgCkLW-0fcwu3iXiYF3supJppw7Qb_XuiF2Z-McJQal8udJl7ND0PlzSBHjrY-TH-bxacOTkmaJ8mzuSz7MJq9gI4oQ9Hx2mnKTbgj87e/s200/comment-counter-bubble-2.png</font color>) no-repeat;<br />float : right;<br />font-size : <font color="red">14px</font color>;<br />margin-top : -15px;<br />margin-right : 2px;<br />text-align : center;<br />padding-top:10px;<br />}</blockquote><br /><br /><li>If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from <font color="#558866">float:right;</font color> to <font color="red">float:left;</font color><br /></ol><br />In today's Blogger tutorial I have covered how to add a comments counter to a Blogger blog (blogspot blog) that will appear to the right of your blog post title. A comments counter is a way to encourage visitors to comment and is a way of showing off the credibility of your blog posts. Good luck! Any comments about installing this blogger hack are most welcome.<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/06/tips-add-digg-button-blogger-blogspot.html">Tips to Add Digg Button to Blogger Blogspot</a><br /><a href="http://blogknowhow.blogspot.com/2009/07/add-twitter-followers-counter-blogger.html">Add Twitter Followers Counter to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/07/add-twitter-badge-button-to-blogger.html">Add Twitter Badge or Button to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/02/add-social-bookmarking-button-blogger.html">Add a Social Bookmarking Button to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/08/add-social-bookmark-buttons-to-blogger.html">Add Social Bookmark Buttons to Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com10tag:blogger.com,1999:blog-8843267045077993028.post-47129534345564057692010-12-27T15:15:00.000-08:002011-01-22T06:03:38.675-08:00How to Change Bullet Point Style in Blogger (Blogspot) ListsIn Part 1 of this three part series of Blogger tutorials I discuss how to change bullet point styles of lists you may want to include in Blogger posts. This first Blogger tutorial deals with unordered lists and how these can be styled using CSS in Blogger (Blogspot). The second part of these tutorials will deal with ordered lists while part 3 discusses bullet point changes you can make to your sidebar, footer and menus.<br /><br />Today you will learn how to:<br /><blockquote><ul><li>change the style of bullet points in unordered lists<br /><li>add bullet points to unordered lists if they are absent<br /><li>add an image instead of a bullet to lists in your Blogger posts</ul></blockquote><br />This tutorial is rated easy and is designed so that even Blogger newbies can make the changes they want to their Blogger template. Changing the bullet point style involves changing the CSS styling in your Blogger template (Blogspot template). Join me as I walk you through this step by step guide.<br /><br /><span style="font-weight:bold;">How to Add Bullet Points to a Blogger Post</span><br />If you are still using the old Blogger editor you will need to add bullet points manually to any unordered lists you create in Blogger posts. If you are using the new editor the work is done for you. Either way though this is the type of code that generates unordered lists:<br /><blockquote><ul><li>Create your own list markers in Blogger</li><br /><li>Create unordered lists in Blogger</li><br /><li>Create bullet points in Blogger</li><br /></ul></blockquote><br />Any text can be placed between the two <li></li> tags. Simply copy this list into a Blogger post and substitute your text for mine and you will have an unordered list.<br /><br /><span style="font-weight:bold;">Circular Bullet Points</span><br />Circular bullets (also known as markers or discs) are displayed in Blogger by default whenever unordered lists appear. This means that whenever the <ul></ul> tags are used in Blogger posts a leader dot or disc will appear before each line of text denoted by <li>. (Note I will discuss ordered lists <ol></ol> tags in part two of this tutorial).<br /><br />An unordered list in a Blogger post using the <ul></ul> tags would appear like this:<br /><ul><li>Change Bullet Point Style in Blogger<br /><li>Add Bullets to Blogger<br /><li>Changing the look of unordered lists in Blogger<br /></ul><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkIOzSIuU57tJde2Ihlezu4aIMcyAOhXkVde6hyphenhyphenDG2RQc774ybDKAUvdVykZC6t7bX6B1hFIunYgeg4NhZSyIezRIai0kYFuPIPVZjB55zzdSiXj69EXIUUW36R-Ypq5l-9lz2zjkYjU/s1600/blogger_bullets-circular-default.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 134px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkIOzSIuU57tJde2Ihlezu4aIMcyAOhXkVde6hyphenhyphenDG2RQc774ybDKAUvdVykZC6t7bX6B1hFIunYgeg4NhZSyIezRIai0kYFuPIPVZjB55zzdSiXj69EXIUUW36R-Ypq5l-9lz2zjkYjU/s320/blogger_bullets-circular-default.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547088203212652146" /></a><br />We can make lots of changes to the look of these filled discs or filled circles by changing the CSS styling in Blogger. For instance we can have squares, or we can choose to have no bullet point at all. Here's how.<br /><br /><span style="font-weight:bold;">To Add Square Bullet Points to Blogger (Blogspot)</span><br />The following code will replace the filled circle bullet points with squares instead:<br /><br /><ol><li>Login to Blogger if not already logged in<br /><br /><li>From the Dashboard go to <font color="#558866">Design >Edit HTML</font color><br /><br /><li>Back up your template<br /><br /><li>Find the posts section of your CSS stylesheet which will be before <font color="#558866">]]></b:skin></font color> tag<br /><br /><li>For the following default Blogger templates eg "Simple" add the following CSS code to the post section like this<br /><br /><blockquote>.post ul li {<br />list-style: square;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJ3xeEIYeDPVQ3cZLGtS9uBYsg6u2MrPgXae346N7DWu-eUhgNwO8ANoGFKS0LQrDukY908JTPGMOi4-tXnMFJJ7STqoXc1Dch3wZOvoWJyv7enxYMqghz3gjZlz1XkhW78POf97GCcM/s1600/blogger_bullets-square.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 141px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJ3xeEIYeDPVQ3cZLGtS9uBYsg6u2MrPgXae346N7DWu-eUhgNwO8ANoGFKS0LQrDukY908JTPGMOi4-tXnMFJJ7STqoXc1Dch3wZOvoWJyv7enxYMqghz3gjZlz1XkhW78POf97GCcM/s320/blogger_bullets-square.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547083885912171874" /></a><br /><li>Save template and view blog post to see the circular bullet points have been replaced by square ones</ol><br /><br /><span style="font-weight:bold;">To Add Circle Bullet Points to Blogger (Blogspot)</span><br />To add unfilled circle list markers or bullet points to Blogger posts do the following:<br /><br /><ol><li>Follow steps 1-4 as per square bullets<br /><br /><li>Add the following code to the posts section of the CSS stylesheet of your Blogger template by entering the following code:<br /><br /><blockquote>.post ul li {<br />list-style: circle;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3H-cRF4R2r1caUDK06spSZup_r-2CZ_ZP8w5DpljAl6cw65BSNUyKKmVcNEgH4nYA46uTOxJEiFe6gY8h4_Pp-XVQGO0J3vPHSF_8oQPggg3dYMZHqxZBmvCIVEirJJMLxyneg1tVCU/s1600/blogger_bullets-circles.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 133px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3H-cRF4R2r1caUDK06spSZup_r-2CZ_ZP8w5DpljAl6cw65BSNUyKKmVcNEgH4nYA46uTOxJEiFe6gY8h4_Pp-XVQGO0J3vPHSF_8oQPggg3dYMZHqxZBmvCIVEirJJMLxyneg1tVCU/s320/blogger_bullets-circles.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547091610015929058" /></a><br /><li>Save the changes to your template and view a blog post to see the empty circle bullet points </ol><br /><br /><span style="font-weight:bold;">How To Indent Bullet Points in Blogger</span><br />There are two ways to increase the indentation of list style markers or bullet points.<br /><br /><ol><li><span style="font-weight:bold;">Using the Inside or Outside Element</span><br />The indentation of bullet points can be varied using the "inside" element. By default the list will be "outside" unless the "inside element" is used. The following code shifts the indentation of the list further to the right. <br /><br /><blockquote>.post ul li {<br />list-style: circle inside;<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFN-jLooafEY4gpq77x8SvOUH_eTsTh3rNxFYISy3C_FmG6_c-k7Xs4HgWmhtBSyMkIqTahoU6xb7wI0OtytS0LIERvX2GgF-4dt1i_0IK9pM9Vq_W-vCdtKaTul2j544q_BkM55WwZ3k/s1600/blogger_bullets-circles-plus-inside.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 142px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFN-jLooafEY4gpq77x8SvOUH_eTsTh3rNxFYISy3C_FmG6_c-k7Xs4HgWmhtBSyMkIqTahoU6xb7wI0OtytS0LIERvX2GgF-4dt1i_0IK9pM9Vq_W-vCdtKaTul2j544q_BkM55WwZ3k/s320/blogger_bullets-circles-plus-inside.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547109496670075970" /></a><br /><br /><li><span style="font-weight:bold;">Custom Indentation CSS Styling</span><br />It is also possible to add custom indentation styling to lists. For instance here I have added a 2.5em indent using the following code to the circles example:<br /><br /><blockquote>.post ul li {<br />list-style: circle;<br /><font color="red">margin-left: 2.5em;</font color><br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQQ6QxwwmimfU1MrZ4Bs92eiId_Os-CCuwjnSI9Bsi9wEYvso3SjdB5e-1fO-yed-Ph2oY4l1q11UooQli2OmO3NrK2lhJWKn9NuN7cmFUOEvEFEP2rxvFCso0EBIx-1E8ww3Z8l6ulg/s1600/blogger_bullets-circles-plus-indentation.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 139px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQQ6QxwwmimfU1MrZ4Bs92eiId_Os-CCuwjnSI9Bsi9wEYvso3SjdB5e-1fO-yed-Ph2oY4l1q11UooQli2OmO3NrK2lhJWKn9NuN7cmFUOEvEFEP2rxvFCso0EBIx-1E8ww3Z8l6ulg/s320/blogger_bullets-circles-plus-indentation.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547117411843736674" /></a></ol><br /><br /><span style="font-weight:bold;">How To Replace Bullet Points with an Image in Blogger (Blogspot)</span> <br />Sometimes you may prefer to have an image list marker or icon instead of a bullet point. You will need to host your image somewhere such as a free image hosting service eg Flickr or Photo Bucket. Follow the steps below to replace bullet points in your Blogger posts with an image<br /><br /><ol><li>Follow steps 1-4 as per square bullets<br /><br /><li>In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:<br /><br /><blockquote>.post ul li { <br />list-style: url("http://<font color="red">URLaddressofImage</font color>.gif");<br />}</blockquote><br /><br /><li>Replace <font color="red">URLaddressofImage</font color> with the URL address of the image you have uploaded to an image hosting service. Note in most cases the file will have a .gif extension. If the extension is anything other than .gif you will need to change this too.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYvwHN42eYbq0OGhqXzv0j6HGG5rtG1-zXDD6g1WhAQas6DCMZmQQwzVGg6Z93EK3EhpxkdGfG6nwvjvz8k29DyhEGzH7ffCiDFN9WdZZvQFkhGdPFtvqU1zSHEZ8VF0SIr-mQnFXV1E/s1600/blogger_bullets-custom-image.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 138px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYvwHN42eYbq0OGhqXzv0j6HGG5rtG1-zXDD6g1WhAQas6DCMZmQQwzVGg6Z93EK3EhpxkdGfG6nwvjvz8k29DyhEGzH7ffCiDFN9WdZZvQFkhGdPFtvqU1zSHEZ8VF0SIr-mQnFXV1E/s320/blogger_bullets-custom-image.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547123322318245586" /></a><br /><li>Save the changes to your Blogger template and navigate to a post page to see your image list marker installed</ol><br /><br /><span style="font-weight:bold;">How to Remove the Bullet Points from Blogger Posts</span><br />If you are going for a minimalist look you may prefer to have no bullet points in the lists in your Blogger posts. In this case:<br /><br /><ol><li>Follow steps 1-4 as per square bullets<br /><br /><li>In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:<br /><br /><blockquote>.post ul li { <br />list-style: none; <br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJk4DveDPttqnJMWmeq_xJ8FPEfHoPr-lZegdZpSS8kHFt7lhEoYXKS-c2tUT46QpG6jmtW1RD0h2TnxewuTaLPBij6Xpmz60Zol_ZwXr3uHryx1AAXEb0WS8cnFe_7OkaX0Ya8TBo7To/s1600/blogger_bullets-set-to-none.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 140px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJk4DveDPttqnJMWmeq_xJ8FPEfHoPr-lZegdZpSS8kHFt7lhEoYXKS-c2tUT46QpG6jmtW1RD0h2TnxewuTaLPBij6Xpmz60Zol_ZwXr3uHryx1AAXEb0WS8cnFe_7OkaX0Ya8TBo7To/s320/blogger_bullets-set-to-none.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547131391313443106" /></a></ol><br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/11/add-css-styling-blockquotes-blogger.html">How to Add CSS Styling to Blockquotes in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-or-change-background-image-blogger.html">How to Add or Change a Background Image in a Blogger Template</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com9tag:blogger.com,1999:blog-8843267045077993028.post-82433266946223333802010-12-23T10:07:00.000-08:002015-02-01T20:22:23.670-08:00Remove Image Border in Default Blogger Templates Simple and Awesome IncIn this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc. <br />
<br />
<blockquote>
If you are using an older generation Blogger template or a custom template the solutions contained in this article may work for you however it is more likely that you will need to follow the methods to remove image borders outlined in my previous Blogger tutorial <a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">Change or Remove Blogger Image Borders (Part 1)</a></blockquote>
<br />
Below I explore two methods of removing or deleting image borders in the Blogger template Simple. The first method shows you how to remove the image border using Template Designer and the second method outlined describes how to remove the image border manually by changing the code.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimCZYxlWgU1Bp9lMqOXdtUIQLXDyyZMXxD3orPAQtc6_NGnvq1uwtwHbYpg5W_a1SGsYdpO-_H83srskKPLsHq_vdkkWR4DiXWhxoYHOxFRkX-NzXZe73SXWHZGQa3OI4KHGPn6u1t9k/s1600/blogger_remove-image-border-1.jpg"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimCZYxlWgU1Bp9lMqOXdtUIQLXDyyZMXxD3orPAQtc6_NGnvq1uwtwHbYpg5W_a1SGsYdpO-_H83srskKPLsHq_vdkkWR4DiXWhxoYHOxFRkX-NzXZe73SXWHZGQa3OI4KHGPn6u1t9k/s320/blogger_remove-image-border-1.jpg" id="BLOGGER_PHOTO_ID_5554055646985867954" style="cursor: hand; cursor: pointer; display: block; height: 320px; margin: 0px auto 10px; text-align: center; width: 319px;" /></a><br />
<strong>Method 1 - Use Template Designer to Remove Image Border in Blogger</strong><br />
<ol>
<li>From the Blogger Dashboard go to <span style="color: #558866;">Design > Template Designer</span><br /></li>
<li>Then select <span style="color: #558866;">Advanced > Images</span><br /></li>
<li>Under Border Color use the drop down arrow to open the color palette<br /></li>
<li>Change the setting to transparent by checking the small box on the bottom right hand side marked "transparent" <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFPj9rfsgVMHv1LUqUax5LK0R6w0JnRQCRoa_RwlXZsZn5-LNi0KkN9B0vjJyoMEejymLeH2IMhf2MENZzPjNEH1np1EB7W5CknLBJ_agG8l4wcEvGw8UQyEcuf1507zmgbSkqB3LeVvQ/s1600/blogger_remove-image-border.jpg"><img alt="How to change the image border to transparent in Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFPj9rfsgVMHv1LUqUax5LK0R6w0JnRQCRoa_RwlXZsZn5-LNi0KkN9B0vjJyoMEejymLeH2IMhf2MENZzPjNEH1np1EB7W5CknLBJ_agG8l4wcEvGw8UQyEcuf1507zmgbSkqB3LeVvQ/s320/blogger_remove-image-border.jpg" id="BLOGGER_PHOTO_ID_5554054778314076258" style="cursor: hand; cursor: pointer; display: block; height: 148px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a><br />Note: If you are using the black version of the Awesome Inc template you will need to change the Background Color to transparent too. Click on the down arrow of the color palette and select transparent.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DW92u_MlL-N9I99Npsj4xLqEGcLrSkJ1cVrunLpHsr1aMXd9fvEWj2CWZcVkUoClzByXKedfr92pVE6iupRSUAw3s0WGOlmij6ztnSoCeQceqPFLSjkU4kQD7WJeG41NCVJzSYVsE-k/s1600/blogger_remove-image-border_awesome-inc.jpg"><img alt="Remove border Awesome Inc Blogger template" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DW92u_MlL-N9I99Npsj4xLqEGcLrSkJ1cVrunLpHsr1aMXd9fvEWj2CWZcVkUoClzByXKedfr92pVE6iupRSUAw3s0WGOlmij6ztnSoCeQceqPFLSjkU4kQD7WJeG41NCVJzSYVsE-k/s320/blogger_remove-image-border_awesome-inc.jpg" id="BLOGGER_PHOTO_ID_5554278018421108642" style="cursor: hand; cursor: pointer; display: block; height: 208px; margin: 0px auto 10px; text-align: center; width: 320px;" /></a></li>
<li>Click <span style="color: #558866;">Apply to Blog</span> to save your changes to the template<br /></li>
<li>Navigate to any post page to view images in posts without the border</li>
</ol>
<br />
<br />
<strong>Method 2 - Change Template Code to Manually Remove Image Border from the New Default Blogger Templates</strong><br />
<ol>
<li>From the Blogger Dashboard go to <span style="color: #558866;">Design > Edit HTML</span><br /></li>
<li>Back up your Blogger template<br /></li>
<li>Find this line amongst the declared variables at the top of your template<br /><br /><blockquote>
<Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/></blockquote>
</li>
<li>Change to the value of the border color to <span style="color: red;">transparent</span> like so<br /><br /><blockquote>
<Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="<span style="color: red;">transparent</span>"/></blockquote>
</li>
<li>Save your changes to the template<br /></li>
<li>Navigate to any post page that has an image and see that the border around the image is no longer visible</li>
</ol>
<br />
<br />
In this Blogger tutorial (Blogspot tutorial) I have shown you how to remove or delete the border around images in Blogger posts for the newest generation of default Blogger templates Simple and Awesome Inc. I have discussed two different methods to remove the border around the images either by adjusting the settings in the Blogger Template Designer or by manually changing the code of the variable in the CSS styling section of the default Blogger template<br />
<br />
<br />
<strong>Related Articles</strong><br />
<a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br />
<a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Change or Remove Blogger Image Borders (Part 1)</a><br />
<a href="http://blogknowhow.blogspot.com/2010/12/change-blog-title-border-blogger.html">How to Change the Blog Title Border in Blogger Minima Template</a><br />
<a href="http://blogknowhow.blogspot.com/2009/11/add-css-styling-blockquotes-blogger.html">How to Add CSS Styling to Blockquotes in Blogger</a><br />
<a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br />
<a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><br />
<a href="http://blogknowhow.blogspot.com/2009/10/add-or-change-background-image-blogger.html">How to Add or Change a Background Image in a Blogger Template</a><br />
<a href="http://blogknowhow.blogspot.co.nz/2015/01/how-to-remove-link-from-single-image-in-blogger.html" target="_blank">How to Remove the Link from a Single Image in a Blogger Post</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com22tag:blogger.com,1999:blog-8843267045077993028.post-49885843488829385672010-12-06T12:18:00.000-08:002010-12-06T15:19:30.114-08:00How to Remove or Change the Blog Title Border in Blogger (Blogspot) - Minima TemplateIn this Blogger tutorial I discuss <span style="font-weight:bold;">how to change the blog title border color or remove the border in a Blogger template (Blogspot template)</span> by changing either the CSS styling of the border manually or by using the Blogger Template Designer feature. <br /><br />Lots of bloggers have updated their Blogger template to the new default series of Blogger templates for 2010. There are however many of you who are still using the default Minima template from 2006 (and there are lots of good reasons to do so) so this tutorial is for you and anyone else who is using a custom Blogger template based on Minima. <br /><br />You will learn how to change the border styling around the blog title to suit your individual requirements. You can either change the border color or remove the border altogether. If you want to remove the border around images in Blogger posts (Blogspot posts) then please refer to my Blogger tutorial <a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Change or Remove the Border Image in Blogger Posts</a><br /><br /><span style="font-weight:bold;">Remove or Change the Blog Title Border in Blogger (Blogspot)</span></li><br />There are two simple ways to remove the border around the blog title in Blogger. We are going to hide the border rather than actually remove the code that creates it by making the border color transparent. I will also show you how to change the border color.<br /><br />Method 1 discusses how to do this using the Blogger Template Designer while Method 2 describes how to change the blog title border manually by changing the code.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgqfzYGj_OHu6lxoOBR3GyQxSh0h_ud9tVNhT7t4nlPcsnohKjlEn6ce9l8FcxQLRUtkx1OTP8IU2HPPkJxumthDXUv_RYjZ84Xvp2F4rMKTBtURVjNnRnLbFMH6GhIzDBHdxY-0JMB0/s1600/blogger_blog-title-border.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgqfzYGj_OHu6lxoOBR3GyQxSh0h_ud9tVNhT7t4nlPcsnohKjlEn6ce9l8FcxQLRUtkx1OTP8IU2HPPkJxumthDXUv_RYjZ84Xvp2F4rMKTBtURVjNnRnLbFMH6GhIzDBHdxY-0JMB0/s320/blogger_blog-title-border.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547671238584777106" /></a><br /><br /><span style="font-weight:bold;">Method 1 - Using Blogger Template Designer</span><br /><ol><li>Log in to Blogger<br /><li>From the Dashboard go to <font color="558866">Design > Template Designer</font color><br /><li>Go to <font color="558866">Templates > Advanced > Border Color</font color><br /> <br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3Rjlohia2Y2HLp8xVFMtFkOqEvagQfoFurThr6xiFyb2y_Y48nKHObDu3BSOQlzC5bCSbQnGNHpWW8cdA3Iy-exeQBcl06aEni6P2PoJ-fBFFOYezD3wcLUwYvd58-qjNrbda5kUVRA/s1600/blogger_remove-blog-title-border.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 172px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3Rjlohia2Y2HLp8xVFMtFkOqEvagQfoFurThr6xiFyb2y_Y48nKHObDu3BSOQlzC5bCSbQnGNHpWW8cdA3Iy-exeQBcl06aEni6P2PoJ-fBFFOYezD3wcLUwYvd58-qjNrbda5kUVRA/s320/blogger_remove-blog-title-border.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547677757066765442" /></a><br /><li>Choose the down arrow color picker to activate the color palette window<br /><li>Choose <font color="558866">transparent</font color> which is below the color palette to remove the border around the blog title completely. You now will see the blog title border disappear. Or choose a new color from the color palette to change the color<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuv8Jp2aTpgS1O5aMApuUR0Edy0a-MWSJL8v_hSXBetLAmuPXpNL2yJaDnBvZub_gJFkf_W7eV2xwbXRTrmpvMnKBpQAOZGIF124oGdzY5zeVQCshZDGCzAgGZ68d7z9VmS2VwAYQxpfo/s1600/blogger_remove-blog-title-border1.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 174px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuv8Jp2aTpgS1O5aMApuUR0Edy0a-MWSJL8v_hSXBetLAmuPXpNL2yJaDnBvZub_gJFkf_W7eV2xwbXRTrmpvMnKBpQAOZGIF124oGdzY5zeVQCshZDGCzAgGZ68d7z9VmS2VwAYQxpfo/s320/blogger_remove-blog-title-border1.JPG" border="0" alt="Remove Blog Title Border in Blogger"id="BLOGGER_PHOTO_ID_5547678991054850178" /></a><center>Remove Blog Title Border</center><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2m8WzW1ySVFThP4zIGhnr1hr7OMEjkzuRwu2H83mNdHZI__ls3zroC7TwVywjU3xvkiZwNbG5Ed6gPI0TFq40Gljzy9qu6c-O131U5VafBd8mqoHs4ldojFuyVpDIlUauR_ghY7i4fa4/s1600/blogger_change-border-title-color.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 176px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2m8WzW1ySVFThP4zIGhnr1hr7OMEjkzuRwu2H83mNdHZI__ls3zroC7TwVywjU3xvkiZwNbG5Ed6gPI0TFq40Gljzy9qu6c-O131U5VafBd8mqoHs4ldojFuyVpDIlUauR_ghY7i4fa4/s320/blogger_change-border-title-color.JPG" border="0" alt="Change Blog Title Border Color in Blogger"id="BLOGGER_PHOTO_ID_5547700393986053282" /></a><center>Change Blog Title Border Color</center><br /><li>Click on <font color="558866">Apply to Blog</font color> to save your changes</ol><br /><br /><span style="font-weight:bold;">Method 2</span><br />If the Blogger Template Designer is not working on your template for some reason you can tweak the code in your template to remove the border around the blog title<br /><br /><ol><li>Log in to Blogger<br /><li>From the Dashboard go to <font color="558866">Design > Edit HTML</font color><br /><li>Back up your Blogger template<br /><li>Find the border color variable which will be near the top of the template code<br /> <br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjegG819RFOdUwoXOiWfkahj2zOYfAH2_vSHvR-7yG-nOqjdnWzuWuD4b4BUdvwcxd8iv8DFW9jUo42KKkvEh3JHCMgzqxM80JduqtvDYhXJ_6cE8A36kB44kpxlZ2eLreKr3mhRifWiL4/s1600/blogger_border-color.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 102px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjegG819RFOdUwoXOiWfkahj2zOYfAH2_vSHvR-7yG-nOqjdnWzuWuD4b4BUdvwcxd8iv8DFW9jUo42KKkvEh3JHCMgzqxM80JduqtvDYhXJ_6cE8A36kB44kpxlZ2eLreKr3mhRifWiL4/s320/blogger_border-color.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5547671755422382050" /></a><br /><li>Change the border color value to <font color="red">transparent</font color> to remove the border altogether so that your code now looks like this:<br /><br /><blockquote><Variable name="bordercolor" description="Border Color"<br /> type="color" default="#ccc" value="transparent"></blockquote><br /><br />or change the value to a color of your choice eg<br /><br /><blockquote><Variable name="bordercolor" description="Border Color"<br /> type="color" default="#ccc" value="#ff7f00"></blockquote><br /><li>Save your template and view your blog to see that the border around the blog title has been removed or changed color<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKDJdls5M3RV5LTUf90cfn4iqfGDoPyxjldRNqSwInx1E-KmI4qW05LK4VxPz2HGIJjgBOPCw1t2b0rabJnSK-GDtyROoqpda2agTmka3VPkF5JgReaNfQgl6lJnRy4PrMWsCLd5LxoQ/s1600/blogger_blog-title-borderless.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 113px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKDJdls5M3RV5LTUf90cfn4iqfGDoPyxjldRNqSwInx1E-KmI4qW05LK4VxPz2HGIJjgBOPCw1t2b0rabJnSK-GDtyROoqpda2agTmka3VPkF5JgReaNfQgl6lJnRy4PrMWsCLd5LxoQ/s320/blogger_blog-title-borderless.JPG" border="0" alt="Remove Blog Title Border CSS Styling in Blogger"id="BLOGGER_PHOTO_ID_5547674568860604242" /></a></ol><br /><br /><span style="font-weight:bold;">Tips and Troubleshooting</span><br />Below are some tips to help you further customize the blog title border width. You can either remove the inner border, thicken the outer border or thicken both borders around the blog title in Blogger.<br /><br /><ol><li>To change the width of the border around the blog title in Minima change the following:<br /><br />#header { <br /> margin: 5px;<br /> border: 1px solid $bordercolor;<br /> text-align: center;<br /> color:$pagetitlecolor;<br />}<br /><br />to<br /><br />#header { <br /> margin: 5px;<br /> <font color="red">border: 10px solid $bordercolor;</font color><br /> text-align: center;<br /> color:$pagetitlecolor;<br />}<br /><br />This code increases the border width from 1px to 10px<br /><br /><li>To remove the inner border around the blog title in Minima change the code to the following:<br /><br />#header { <br /> margin: 5px;<br /> <font color="red">border: 10px solid $bordercolor; (remove this line)</font color><br /> text-align: center;<br /> color:$pagetitlecolor;<br />}<br /><br /><li>To increase the width of the outer border around the blog title in Minima change this code<br /><br />#header-wrapper {<br /> width:660px;<br /> margin:0 auto 10px;<br /> <font color="red">border:10px solid $bordercolor;</font color><br /> }<br /></ol><br /><br />In this Blogger tutorial you have learned two methods to change the color of the border around a blog title in Blogger blog (Blogspot blog). I have also shown you how to increase the size of the border width. This tutorial applies particularly to the default Blogger template Minima but also is relevant for any blogger using a custom Blogger template based on Minima. Good luck!<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/11/add-css-styling-blockquotes-blogger.html">How to Add CSS Styling to Blockquotes in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-or-change-background-image-blogger.html">How to Add or Change a Background Image in a Blogger Template</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com6tag:blogger.com,1999:blog-8843267045077993028.post-23888899812716699772010-11-21T19:22:00.000-08:002010-11-30T05:20:06.844-08:00How to Highlight Author Comments in Blogger PostsIn this Blogger tutorial I will show you <span style="font-weight:bold;">how to highlight the author comments section of your Blogger template (Blogspot template)</span> using CSS styling. <br /><br /><font color="#558866">Benefits of Adding CSS Styling to Author Comments</font color><br />If you are using a default Blogger template chances are it is difficult to differentiate between comments made by visitors and comments made by you, the blog author. If you only have a few comments per post that may not be enough of an issue for you. If however, you have some posts with lots of comments you may need to make your remarks stand out from those of your visitors. We can do that by adding CSS styling to highlight your author comments.<br /><br /><font color="#558866">What Will I Learn in This Tutorial?</font color><br />In this Blogger tutorial you will learn how to easily add some highlighting to your comments so that they will never get lost in the crowd again. This requires a small amount of tweaking to your Blogger template which is not difficult to do if care is taken. The image below shows one example of what can be achieved using this Blogger hack and some CSS styling.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQP35rA6OUXqEnm86FGdqYNTvPxf-POGueOH452vumSw-t9p7h0qa2v0mf4M8r55URBVzDq0_JK3YWwUYwAI1KeWXwA_bGGcVip3g9f_ktIjfEJYCm-14snu7NDnIuCL0CABblnqSzY0/s1600/blogger_author-comments.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 152px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQP35rA6OUXqEnm86FGdqYNTvPxf-POGueOH452vumSw-t9p7h0qa2v0mf4M8r55URBVzDq0_JK3YWwUYwAI1KeWXwA_bGGcVip3g9f_ktIjfEJYCm-14snu7NDnIuCL0CABblnqSzY0/s320/blogger_author-comments.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5542238199691398738" /></a><br /><br /><font color="#558866">Will This Blogger Hack Work on My Template?</font color><br />I have tested this Blogger hack on both the old generation of Blogger templates (Minima and Sand Dollar) and the latest generation of default Blogger templates eg Simple. It will also work on custom templates as the comments code is likely to be very similar. <br /><br />If you are using a custom Blogger template and run into difficulty you can also try this <a href="#altmethodcomments">alternative method to highlight author comments in Blogger posts</a><br /><br /><font color="#558866"><span style="font-weight:bold;">How to Add CSS Styling to Author Comments in a Blogger Post</span></font color><br />The following instructions will highlight author comments in the comments section of a Blogger post. The code creates a shaded box around the comments made by the blog author. These changes will not affect the CSS the styling of any of the other comments made. <br /><br /><span style="font-weight:bold;">Instructions to Add CSS Highlighting to Author Comments in Blogger</span><br /><br /><ol><li>Login to Blogger<br /><br /><li>From the Dashboard go to <font color="#558866">Design > Edit HTML</font color><br /><br /><li>Back up your template by downloading it to your computer<br /><br /><li>Check the <font color="#558866">Expand Widget Templates</font color> checkbox on the top righthand side <br /><br /><li>Use CTRL + F by entering the following into the search box<br /><br /><blockquote><dd class='comment-body'></blockquote><br /><li>Immediately above this line paste the following code:<br /><br /><blockquote><b:if cond='data:comment.author == data:post.author'><br /><dd class='comment-body-author'><br /><p><data:comment.body/></p><br /></dd><br /><b:else/></blockquote><br /><li>Now look for this code block <br /><br /><blockquote><dd class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /></dd><br /></blockquote><br />and paste <font color="red"></b:if></font color> immediately after it.<br /><br /><li>Your code will now look like this:<br /><br /><blockquote><div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'><br /> <dl expr:class='data:post.avatarIndentClass' id='comments-block'><br /> <b:loop values='data:post.comments' var='comment'><br /> <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'><br /> <b:if cond='data:comment.favicon'><br /> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /> </b:if><br /> <a expr:name='data:comment.anchorName'/><br /> <b:if cond='data:blog.enabledCommentProfileImages'><br /> <data:comment.authorAvatarImage/><br /> </b:if><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/><br /> </b:if><br /> <data:commentPostedByMsg/><br /> </dt><br /><br /><font color="red"><br /><b:if cond='data:comment.author == data:post.author'><br /><dd class='comment-body-author'><br /><p><data:comment.body/></p><br /></dd><br /><b:else/></font color><br /><br /> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'><br /> <b:if cond='data:comment.isDeleted'><br /> <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br /> <p><br /> <data:comment.body/><br /> </p><br /> </b:if><br /> </dd><br /><br /><font color="red"></b:if></font color><br /><br /></dd><br /> <dd class='comment-footer'><br /> <span class='comment-timestamp'><br /> <a expr:href='data:comment.url' title='comment permalink'><br /> <data:comment.timestamp/><br /> </a><br /> <b:include data='comment' name='commentDeleteIcon'/><br /> </span><br /> </dd><br /> </b:loop><br /> </dl><br /> </div><br /></blockquote><br /><li>Now using CTRL + F again find this line <font color="red"> ]]></b:skin></font color> <br /><br /><li>Paste the following immediately before <font color="red"> ]]></b:skin></font color><br /><br /><blockquote>.comment-body-author {<br />background: #f5deb3;<br />border: 2px solid #de7008;<br />padding: 5px;<br />}</blockquote><br /><li>Save your template changes<br /><br /><li>Click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments.</ol><br /><br /><font color="#558866"><a name="altmethodcomments"><span style="font-weight:bold;">Alternative Method to Add Highlighting to Author Comments in Blogger</span></a></font color><br />The following method will also add highlighting to author comments in Blogger and can be used if you have difficulty with the first method. It does however involve changing some code rather than just adding some so this is not as desirable in terms of future proofing your template for Blogger updates. <br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIuqxuMj7-QguGPy2UoSvvgtHTAo6I-vsHKQTT0fvhyoFuSHqPCTPEc7UtlnNBPtry0OVFqQgGE4SdbEsDABR7128KWV6vbdwIIGISuvkphOH3RiEzSVM6JO2jFMrmsJAxC2OTmV7hsk/s1600/blogger_author-comments-styling.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 236px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIuqxuMj7-QguGPy2UoSvvgtHTAo6I-vsHKQTT0fvhyoFuSHqPCTPEc7UtlnNBPtry0OVFqQgGE4SdbEsDABR7128KWV6vbdwIIGISuvkphOH3RiEzSVM6JO2jFMrmsJAxC2OTmV7hsk/s320/blogger_author-comments-styling.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5542256339999558642" /></a><br /><br /><ol><li>Login to Blogger<br /><br /><li>From the Dashboard go to <font color="#558866">Design > Edit HTML</font color><br /><br /><li>Back up your template by downloading it to your computer<br /><br /><li>Check the <font color="#558866">Expand Widget Templates</font color> checkbox on the top righthand side <br /><br /><li>Find the following section of code by using CTRL + F and entering <font color="red"><data:comment.body/></font color> into the search box<br /><br /><blockquote><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /><b:include data='comment' name='commentDeleteIcon'/><br /></b:if></blockquote><br /><li>Replace with the following code after <span class='deleted-comment'> and before </b:if> as shown in red:<br /><br /><blockquote><span class='deleted-comment'><br /><font color="red"><!--Highlight Author Comments Start--><br /><b:if cond='data:comment.author == data:post.author'><br /><p class='comment-body-author'><data:comment.body/></p><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /><!--Highlight Author Comments End--></font color><br /></b:if></blockquote><br /><li>Use CTRL + F to find <font color="red"> ]]></b:skin></font color> that closes the CSS styling section<br /><br /><li>Paste the following code immediately above <font color="red"> ]]></b:skin></font color> <br /><br /><blockquote>p.comment-body-author {<br />background: #eeeecc;<br />border: 2px solid #335577;<br />padding: 5px;<br />color:#558866;<br />}</blockquote><br /><li>Save your template<br /><br /><li>Click on View Blog and navigate to a post that you have commented on to see the that your comments will now be highlighted</ol><br /><br />In this Blogger tutorial you have learned two different methods to add CSS styling to highlight the author comments in your Blogger posts. Obviously there is still some work to do on your part to adjust the colors in the CSS styling to match the color scheme of your blog. Good luck!<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/02/embed-comment-form-in-your-blogger.html">Embedding a Comment Form Below Each Post</a><br /><a href="http://blogknowhow.blogspot.com/2009/04/get-more-comments-on-your-blogger-blog.html">How to Get More Comments on Your Blogger Blog</a><br /><a href="http://blogknowhow.blogspot.com/2009/04/add-missing-embedded-comments-blogger_28.html">Add Missing Embedded Comment Form to Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com6tag:blogger.com,1999:blog-8843267045077993028.post-56052303846221682892010-11-20T06:53:00.000-08:002010-11-30T05:18:36.917-08:00How to Add Internal Links Within Blogger PostsIn the Blogger tutorial I discuss <span style="font-weight:bold;">how to add internal links within your Blogger posts (Blogspot posts) </span>to point to either another section within the same post or to another post. <br /><br />There are lots of times when you may want to direct a reader to a different part of your Blogger post depending on what their needs and interests are. Or you might want to alert the visitor to something significant in a related post. In this article I will show how to make use of internal links both within posts and in Blogger generally.<br /><br />Why bother with internal linking you may be wondering? Well the answer is to improve SEO. Blogs with a good internal linking structure will fare better than blogs that don't link posts. Plus you will be creating an aid to navigation for your reader. On longer posts jumps links to different sections within your post or to other posts mean readers can quickly find the information they are looking for.<br /><br /><a href="#withinposts">How to Create Internal Links To Sections Within the Same Blogger Posts</a><br /><br /><a href="#withinblogger">How to Create Internal Links To Sections Within Different Blogger Posts</a><br /><br /><a name="withinposts"><span style="font-weight:bold;">How to Create Internal Links To Sections Within the Same Blogger Post</span></a><br />Consider the above links. Click on them. Each jump the reader to a different part of this article. This type of internal linking is common practice in website building and can be equally applied to blogs to assist with navigation.<br /><br />How did I create these links? The answer is that I used simple html that anyone can learn in a few minutes. Here are the steps I used to create these links.<br /><br /><ol><li>Log in to Blogger<br /><br /><li>Go to Posting > New Post or Edit Post and either create a new article or edit an existing one. <br /><br /><li>Within the article find a place where you want to add some jump links. This will be early on in the article as it will help the reader figure out what information is significant to them and how to get there quickly<br /><br /><li>Switch to the Edit HTML mode rather than compose mode so you can see the code you are inserting into your post<br /><br /><li>Create a couple of headings that will be your links to material further down in your Blogger article. Note you can also just jump to a word but for the purposes of this demonstration and clarity I am going to use headings. When creating this post I used the following headings:<br /><br /><blockquote>How to Create Internal Links To Sections Within the Same Blogger Post<br />How to Create Internal Links To Sections Within Different Blogger Posts</blockquote><br /><li>Add links to your headings like so:<br /><br /><blockquote><font color="red"><a href="#withinposts"></font color>How to Create Internal Links To Sections Within the Same Blogger Post</a><br /><br /><font color="red"><a href="#withinblogger"></font color>How to Create Internal Links To Sections Within Different Blogger Posts</a></blockquote><br /><ul><li>The <font color="red">href</font color> attribute and closing <font color="red"></a></font color> element is the same structure you use for other links in your blog<br /><br /><li>Each identifier is preceded by a hash mark (#). The <font color="red">#</font color> tells the visitor's browser to look for a section within your post<br /><br /><li>Each link identifier needs its own unique identifier and needs to be enclosed in inverted commas. Use a name that reflects the link you are creating if possible as it will make it easier to identify on a page with a lot of internal jump links. <br /></ul><br /><li>Now go to the first point in your post where you want to jump the reader to. This will be the start of some new idea, section or logical split in the information.<br /><br /><li>At this point create your anchor text by first adding your heading and then enclosing your heading with this anchor structure. <br /><br /><blockquote><font color="red"><a name="identifier"></font color>a heading<font color="red"></a></font color><br /></blockquote><br /><ul><li>Note the use of the <font color="red">name</font color> attribute at the beginning and the <font color="red"></a></font color> element at the end<br /><br /><li>Each link identifier needs to be enclosed in inverted commas. Make sure to match up the correct identifier with the one created in step 6</ul><br /><br />Using this anchoring structure our first anchor becomes:<br /><br /><blockquote><font color="red"><a name="withinposts"></font color>How to Create Internal Links To Sections Within the Same Blogger Post<font color="red"></a></font color><br /></blockquote><br />Substitute your own link identifier and headings<br /><br /><li>Now move on to the next point you want to link to and create the second anchor. In this example we use the same structure but change the identifier <br /><br /><blockquote><font color="red"><a name="withinblogger"></font color>How to Create Internal Links To Sections Within Different Blogger Posts<font color="red"></a></font color></blockquote><br />Again substitute your own link identifier and headings to suit your article<br /><br /><li>Save and Publish as normal and you will see your links are live and will jump the reader to different parts of the post</ol><br /><br /><a name="withinblogger"><span style="font-weight:bold;">How to Create Internal Links To Sections Within Different Blogger Posts</span></a><br />Now you know how to create links to sections within Blogger posts let's look at how to create internal links within different Blogger posts.<br /><br />Most of you will be able to create a link to another post in Blogger using the posts editor. You just highlight the text you want and click on the figure eight icon and Blogger creates the link for you. Which is great most of the time. <br /><br />However what if we want to direct the visitor to a particular section of a different post? When you create an internal link it will take the viewer to the top of the page but what if you want them to see something near the end of the article? Well using an internal link similar to what we did to create internal links within the post we can.<br /><br />Say I want to take my reader to a particular post in this case <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html">Blogger SEO Tips and Tricks</a>. How would I go about it?<br /><br /><ol><li>I create the link as usual by copying the article URL address from the browser address bar and using the post editor to add the link. The Blogger post editor uses this structure:<br /><br /><blockquote><a href="URLaddress">linkname</a></blockquote><br />So the Blogger editor would create the following link:<br /><br /><blockquote><a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html">Blogger SEO Tips and Tricks</a></blockquote><br />The link would appear like this in a browser:<br /><br /><a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html">Blogger SEO Tips and Tricks</a><br /> <br /><li>Now I want to direct my visitors to the section about creating breadcrumb navigation so I add a section name using the following structure:<br /><br /><blockquote><a href="URLaddress<font color="red">#identifier</font color>">linkname</a></blockquote><br />Thus my link would look like this in the Edit HTML section of my post editor<br /><br /><blockquote><a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html<font color="red">#breadcrumb</font color>">Blogger SEO Tips and Tricks</a></blockquote><br />Note the link seen in a browser remains the same<br /><br /><li>If you want your link to open in a new browser window add the following to your link:<br /><br /><blockquote><a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html#breadcrumb" <font color="red">target="_blank"</font color>>Blogger SEO Tips and Tricks</a></blockquote><br /><li>Now I need to go to the post I am linking to and add the anchor. So in the post SEO Tips and Tricks I would use the following structure to link to the section about how to add breadcrumbs:<br /><br /><blockquote><a name="identifier">a heading</a><br /></blockquote><br />So the section about breadcrumbs in the Blogger SEO Tips and Tricks article is now enclosed by the following:<br /><br /><blockquote><a name="breadcrumb">Add Breadcrumb Navigation to your Blogger Blog</a></blockquote><br /> <br />If you now click on the link below you will see that your browser open a new window and take you directly to the section about adding a breadcrumb to your blog.<br /><br /><a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html#breadcrumb" target="_blank">Blogger SEO Tips and Tricks</a><br /><br /><li>Save your changes and publish your article as normal</li><br /></ol><br />In this Blogger tutorial you have learned how to add internal links to a particular section of a post from both within the same Blogger post and within a different post. By adding internal links you will help your visitors to find their away your blog more easily and access information quickly. You will also be adding to your blog's SEO by linking related posts.<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html" target="_blank">Blogger SEO Tips and Tricks</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com22tag:blogger.com,1999:blog-8843267045077993028.post-30861181503177506812010-11-19T08:39:00.000-08:002010-11-19T18:53:06.968-08:00How to Add a Flickr Slideshow Gadget to BloggerIn today's Blogger tutorial I am going to show you how to add a Flickr Slideshow (Flickr Photostream) to a Blogger blog (Blogspot blog). This Blogger tutorial is suited to beginners and newbies to Blogger and contains step by step instructions to create your Flickr slideshow.<br /><br />This Blogger slideshow tutorial covers the steps to insert a slideshow widget (slideshow gadget) in the sidebar or footer of Blogger and display a set of images uploaded to Flickr. Note the maximum number of images displayed in the slideshow is 20. <br /> <br />There are several different methods to add a Flickr slideshow to Blogger. Which method you use is largely dependent on your own individual requirements. I cover two different methods in the tutorial.<br /><br /><a href="#method1">Method 1</a> - Add a Flickr Slideshow Gadget to Blogger - Photos in photostream are not organized into sets <br /><br /><a href="#method2">Method 2</a> - Add a Flickr Slideshow Gadget to Blogger to display images that are organized in a set<br /><br /><br /><a name="method1"><span style="font-weight:bold;"><font color="#558866">Method 1 - Add a Flickr Photostream to Slideshow Gadget in Blogger</font color></span></a><br /><br />If you will only ever add one slideshow to Blogger from Flickr and don't want to bother with sets use this method to quickly and easily add your Flickr slideshow to Blogger:<br /><br /><ol><li>Go to Flickr and find your Photostream link. On your home page when logged into Flickr you will see Your Photostream at the top left under the Flickr salutation<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9lrI59LLFgNN5DLkGULh9_-2WExKwtTqxY2dZmAhg_TW6MWMLt2m8wCsruzsRnROEFV-FB3DV-OG-1ZbQP0304Kq0vA015HH3QZp5B9HE94BoWjP4WmCeT_tWwvYysQejygJHNuvpV4/s1600/flickr-photostream.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9lrI59LLFgNN5DLkGULh9_-2WExKwtTqxY2dZmAhg_TW6MWMLt2m8wCsruzsRnROEFV-FB3DV-OG-1ZbQP0304Kq0vA015HH3QZp5B9HE94BoWjP4WmCeT_tWwvYysQejygJHNuvpV4/s320/flickr-photostream.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5541440099944827282" /></a><br /><li>Click on the Your Photostream link and copy the photostream id from your browser address bar. <br /><br /><blockquote>http://www.flickr.com/photos/<font color="red">27647187@N07</font color>/</blockquote>It will look something like this. Copy the identifier eg 27647187@N07<br /><br /><li>In Blogger go to Design > Page Elements<br /><br /><li>Select Add Gadget from the sidebar or footer depending on where you want to place your Flickr slideshow<br /><br /><li>Choose Slideshow from widgets in the Basics list <br /><br /><li>Choose a title for your slideshow or leave blank<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDd2yR2UltAZaH-wCy5RgL-bE5HI8WhBVjLY1Qs5fSls5qb7C-PXDmlo3AHUka09-cWHsGsLTUupEn599g6DvLADgihVpMzj6MM2M_3qtrYbnng7XbHReiYXraEaylNI1BlyrBOKHJjec/s1600/blogger_add-slideshow-gadget.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 207px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDd2yR2UltAZaH-wCy5RgL-bE5HI8WhBVjLY1Qs5fSls5qb7C-PXDmlo3AHUka09-cWHsGsLTUupEn599g6DvLADgihVpMzj6MM2M_3qtrYbnng7XbHReiYXraEaylNI1BlyrBOKHJjec/s320/blogger_add-slideshow-gadget.JPG" border="0" alt="How to Add a Slideshow to Blogger"id="BLOGGER_PHOTO_ID_5541436711645197826" /></a><br /><li>Under Source use the drop down menu to select Flickr<br /><br /><li>Under Option select User<br /><br /><li>Under Username enter you Flickr Photostream id eg 27647187@N07. <br /><br />Note:If you have entered your Flickr Photostream id correctly you will be able to see a preview of your slideshow. <br /><br /><li>Click on Save and then View Blog to see your new Flickr slideshow in action on your Blogger blog<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTqC4RhT_1Tdgu79X37z6nzhJH8g6jz_cHtJKcJVxjrWgw_0YGVXipUVoi5DYzjqXxQ6Dmk2lKnn5-TiATCP6Lm_pLgcRaf1OHKOR5B3u5m8x4mgI_Uk5x6iGa1qkX-jmPzVqlFbVh_w/s1600/blogger_add-flickr-slideshow.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 310px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTqC4RhT_1Tdgu79X37z6nzhJH8g6jz_cHtJKcJVxjrWgw_0YGVXipUVoi5DYzjqXxQ6Dmk2lKnn5-TiATCP6Lm_pLgcRaf1OHKOR5B3u5m8x4mgI_Uk5x6iGa1qkX-jmPzVqlFbVh_w/s320/blogger_add-flickr-slideshow.JPG" border="0" alt="How to Add a Flickr Slideshow Gadget to Blogger"id="BLOGGER_PHOTO_ID_5541437027305059794" /></a></ol><br /><br /><a name="method2"><span style="font-weight:bold;"><font color="#558866">Method 2 - Add a Flickr Photostream Set to a Slideshow Gadget in Blogger</font color></span></a><br /><br />If you use sets in Flickr to organize your photos and images you will need to use a slightly different method to install a Flickr slideshow into Blogger.<br /><br /><ol><li>Log on to Flickr<br /><br /><li>Upload your photos and create sets to organize your photos if desired <br /><br /><li>Go to view your sets in Flickr and select the set you wish to use for your Blogger slideshow<br /><br /><li>In your browser window you will see a URL address similar to the following:<br /><br /><blockquote>http://www.flickr.com/photos/27647187@N07/sets/72157624508265319/</blockquote><br /><li>There are two important parts to this address that you need to note because we will be using these to create our slideshow:<br /><br /><ul><li>Your photostream - designated by something similar to 27647187@N07<br /><br /><li>The id of the set - designated by something similar to 72157624508265319</ul><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqABtXS_-LassSlSUzK-V0M7fSttEeA8q2n6QmRT1iREwnAViGCNBmeNHX89qyTRm8F3PVgCS2fdzysfKpnfFaT3hftaGchnAadpFDXs38sgz39nvMUge3A92wZOaMd9VAIuPTzt6OlI/s1600/flickr_photostream_sets.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 266px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqABtXS_-LassSlSUzK-V0M7fSttEeA8q2n6QmRT1iREwnAViGCNBmeNHX89qyTRm8F3PVgCS2fdzysfKpnfFaT3hftaGchnAadpFDXs38sgz39nvMUge3A92wZOaMd9VAIuPTzt6OlI/s320/flickr_photostream_sets.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5541443411055326930" /></a><br /><li>In a different browser window log on to Blogger if not already logged in<br /><br /><li>Go to Design > Page Elements<br /><br /><li>Select Add Gadget from the sidebar or footer depending on where you want to place your Flickr slideshow<br /><br /><li>Choose Slideshow from the list of Basics Widgets <br /><br /><li>Click on the blue plus sign to the right of the Slideshow gadget to activate and configure your Blogger Flickr Slideshow<br /><br /><li>Choose a title for your slideshow or leave blank<br /><br /><li>Under Source use the drop down menu to select Other (Note do not select Flickr if you are using a set as this will not work - see Method 1) <br /><br /><li>In the Feed URL section enter the following feed:<br /><br /><blockquote>http://api.flickr.com/services/feeds/photoset.gne?set=<font color="red">72157624508265319</font color>&nsid=<font color="red">27647187@N07</font color>&lang=en-us&format=rss_200 </blockquote><br /><li>Substitute your photostream id (this will unique to your Flickr account)<br /><br /><li>Substitute the id of the set of images you wish to display<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTHLHnDgWNOVWVYoAyptgZecvziCkj4uNTXwUMox9B8depnGnGC0MBDSBUFTSkoU4a2cdl7OD9xn7yXqtOJ1lcrjOuSS_b_xmyW_QYHIwmUU1wW-5p-0wJju1vKkW9Klt-xWusGmlJHA/s1600/blogger_add-flickr-slideshow-from-set.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 310px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTHLHnDgWNOVWVYoAyptgZecvziCkj4uNTXwUMox9B8depnGnGC0MBDSBUFTSkoU4a2cdl7OD9xn7yXqtOJ1lcrjOuSS_b_xmyW_QYHIwmUU1wW-5p-0wJju1vKkW9Klt-xWusGmlJHA/s320/blogger_add-flickr-slideshow-from-set.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5541445980663308594" /></a><br /><li>Leave the speed of the slideshow at medium unless you specifically need it to be faster or slower<br /><br /><li>Click on Save <br /><br /><li>Click on the View Blog link to admire your new Flickr slideshow</ol><br /><br />In today's Blogger tutorial you have learned two different methods to add a Flickr slideshow to Blogger. Both methods use the Blogger Slideshow Gadget but the difference between them is that method 2 shows you how to use a selected part of your Flickr photostream to create a Blogger slideshow for your blog instead of your whole Flickr photostream. Hope you have lots of fun with this Blogger slideshow gadget. Enjoy!<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com0tag:blogger.com,1999:blog-8843267045077993028.post-72513847809167919592009-11-30T00:39:00.000-08:002009-12-01T04:47:00.039-08:00Add Your Blogger Blog to FacebookIn today's Blogger tutorial I will show how to add your Blogger blog (Blogspot blog) to Facebook so that your updated content can be read right from your Facebook profile. Importing your Blogger blog into Facebook will only take you a few minutes to set up but will likely produce quite a few extra readers. <br /><br />By importing your blog into Facebook your Blogger posts become available to all your Facebook friends and family. Everytime you post new articles to your Blogger blog they will automatically appear on your Wall in Facebook and in your friends News Feeds. It is also possible to remove any content that you do not wish to be displayed which may be handy for some. <br /><br /><strong>Advantages of Importing Your Blog into Facebook</strong><br /><ul><li>Increase your web presence<br /><li>Enjoy added interest in your blog articles and new readers<br /><li>No need to replicate your blog articles or content on Facebook</ul><br /><strong>Disadvantages of Importing Your Blog into Facebook</strong><br /><ul><li>If you blog for profit think carefully about importing your Blogger blog into Facebook as you are likely to experience a drop off in traffic and a reduction in revenue earnings as fewer people will visit your actual blog. One possible way around this is to set your blog's RSS feed to show summaries only that way ensuring that anyone interested will need to visit your blog to read the whole article.</ul><br /><strong>How to Import or Add Your Blogger Blog to Facebook</strong><br /><ol><li>Login to Facebook or Sign up to <a href="http://facebook.com">Facebook</a> if you are not already a member<br /><br /><li>From your Facebook profile page go to <em>Settings > Application Settings</em> which you will find in the top right hand corner<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmbRj00zVP77hi60I6gzwE5mAGeN859DegV7OHd_ooPozejlOlua25kA41P0YQ_wnCPFP5vG3jxBARkkp269AAkRzQJ2BOXJT_JpDPZmkw1fw7pwk2rlWbBz-DTRNrsdn7xjWYo4vwnw/s1600/facebook_settings-application-settings.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 131px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmbRj00zVP77hi60I6gzwE5mAGeN859DegV7OHd_ooPozejlOlua25kA41P0YQ_wnCPFP5vG3jxBARkkp269AAkRzQJ2BOXJT_JpDPZmkw1fw7pwk2rlWbBz-DTRNrsdn7xjWYo4vwnw/s320/facebook_settings-application-settings.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5410111178565754482" /></a><br /><li>Select <em>Notes</em> from the list of applications displayed on the page<br /><br /><li>Click on <em>Import a Blog</em> in the right sidebar<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uBkaU8YnyUJdyi77aXxjBUr4p6q7Tc87sX_ARAOtMlb9D2U2X8NWodADkR1FLCZb95Ze4ZCnhi93rXcU1PD6NdPdBoZV9AMsi52kTbsG1Q7iQv7d1VdwRhP9OKxZ0O5KhkXdd2NlVHE/s1600/facebook_add-notes.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 147px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uBkaU8YnyUJdyi77aXxjBUr4p6q7Tc87sX_ARAOtMlb9D2U2X8NWodADkR1FLCZb95Ze4ZCnhi93rXcU1PD6NdPdBoZV9AMsi52kTbsG1Q7iQv7d1VdwRhP9OKxZ0O5KhkXdd2NlVHE/s320/facebook_add-notes.jpg" border="0" alt="Facebook - Add Notes Screen (Settings, Applications Settings, Notes)"id="BLOGGER_PHOTO_ID_5410088818130217938" /></a><br /><li>Enter the URL address of your blog <br /><br /><blockquote><font color:"red">either website URL:<br /></font color> http://blogknowhow.blogspot.com <br /><br /><font color:"red">or your Blogger feed:</font color> http://blogknowhow.blogspot.com/feeds/posts/default?alt=rss<br />Please note it is not necessary to add the feed of your blog as Facebook will autodetect this</blockquote><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeD_dSdlRS-PzYGoZTfzLtU7hAo-uKQRViS22132MRBti23L2Y1w-141QmRAr6nNx3_z22Vi4u0oYpzIbmkYd8FknhE3PW0p-OFnH4BZahU33oei5a0uMnkaAljAQscicQP0XSaENEvqg/s1600/facebook_import-a-blog.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 218px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeD_dSdlRS-PzYGoZTfzLtU7hAo-uKQRViS22132MRBti23L2Y1w-141QmRAr6nNx3_z22Vi4u0oYpzIbmkYd8FknhE3PW0p-OFnH4BZahU33oei5a0uMnkaAljAQscicQP0XSaENEvqg/s320/facebook_import-a-blog.jpg" border="0" alt="Facebook - Import a Blog Screen"id="BLOGGER_PHOTO_ID_5410091479479391618" /></a><br /><li>You will need to tick the box below this to confirm that the content is not illegal or obscene and that you have the right to permit Facebook to reproduce the content of your blog. Any problems click <em>Cancel</em> and reenter your blog URL address<br /><br /><li>Click <em>Start Importing</em><br /><br /><li>Facebook will now import your feed and you will be taken to a preview screen to make sure the content matches your blog. If it does go ahead and confirm the import by clicking on the <em>Confirm Import</em> button<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRvoZdLQ8Y9QD5gE-X1bJHbRRX1CJvrN4y7nIv9ydmvLosnCT6ghA23QXuQx2AeA4QjQwRxf7zFFh1NTj_ixu8g6JUk9TUCJtZdHos6HTDFQdLYSCHhpfjc5tlurd57Fb2gpsxUeoXLc/s1600/facebook_preview-import-blog-screen.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 163px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRvoZdLQ8Y9QD5gE-X1bJHbRRX1CJvrN4y7nIv9ydmvLosnCT6ghA23QXuQx2AeA4QjQwRxf7zFFh1NTj_ixu8g6JUk9TUCJtZdHos6HTDFQdLYSCHhpfjc5tlurd57Fb2gpsxUeoXLc/s320/facebook_preview-import-blog-screen.jpg" border="0" alt="Facebook - Preview Screen for import a blog showing latest content"id="BLOGGER_PHOTO_ID_5410098643475343906" /></a><br /><br /><li>Go to your Wall in Facebook to check that your Blogger posts are now available to all your Facebook friends and family. <br /><br /></ol><br /><strong>Tips and Troubleshooting</strong><br /><ul><li>If your Blogger blog is members only the blog import will fail as Facebook will be unable to detect your blog's feed<br /><br /><li>To remove a blog post from your Wall in Facebook click on the Remove button on the righthand side<br /><br /><li>If your images are not displaying (there seems to be a bit of a glitch with this) then you may need to try importing your blog using Networked Blogs<br /></ul><br /><br />In this Blogger tutorial I have discussed how to import your Blogger blog into your Facebook profile. I have also pointed out some advantages and disadvantages of adding your Blogger blog to your Facebook profile. I will be talking some more about importing blogs into Facebook in the future which is likely to be of interest to those with multiple Blogger blogs.<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com16tag:blogger.com,1999:blog-8843267045077993028.post-88970214907642556242009-11-02T00:09:00.000-08:002010-12-31T17:02:03.325-08:00Add Profile Images to Blogger CommentsToday I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded comments section of your blog even if you are using a custom template.<br /><br />About a month ago Blogger announced that it was enabling profile images (profile avatars) in the embedded comments section on Blogger (Blogspot) as part of its 10th birthday feature series. The new profile image feature which has been available on other commenting options has now been extended to the embedded comments option. This is good news if you are using a default template as you will now see a small avatar next to your visitors comments and your own avatar if you have uploaded a profile image. <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnKKT-nc_XJq4bjcH-Hsq_cFEf1ycKW4cDcKUjwALzAeU9htleAD9gkeJlk7-GcWKgyMydvSiQTSN4_K0o_6_4FFlDaxvVOJHFRzBo10_rjOdpbrmaS9-xb9h9TnnA8ppK9LvqUCgS8o/s1600-h/blogger_profile-images-shown-in-comments.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 281px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnKKT-nc_XJq4bjcH-Hsq_cFEf1ycKW4cDcKUjwALzAeU9htleAD9gkeJlk7-GcWKgyMydvSiQTSN4_K0o_6_4FFlDaxvVOJHFRzBo10_rjOdpbrmaS9-xb9h9TnnA8ppK9LvqUCgS8o/s320/blogger_profile-images-shown-in-comments.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5399664343222679746" /></a><br /><br /><strong>Default Blogger Templates - Enabling Profile Images </strong><br />Profile images work on default Blogger templates and have been automatically enabled by Blogger. If you are using a default Blogger template with embedded comments enabled and have recent comments on a post you will see a profile image to the left of visitor comments (provided they have uploaded one that is). Your profile avatar will also display when you respond to visitor comments again provided you have uploaded one. (To upload your profile photo click on Add Photo at the Dashboard). If profile images are not displayed enable them by going to <strong>Settings > Comments </strong>and checking the <em>Yes</em> radio button at the bottom of the page which says <em>Profile Images Enabled</em>.<br /><br /><strong>Custom Blogger Templates - Enabling Profile Images </strong><br />If you are using a custom template you may still be able to see profile images in your embedded comments section. Check out <strong>Settings > Comments </strong> to make sure Profile Images are enabled. If you can't see profile images you can still add this feature by tweaking your Blogger template. Follow the instructions below to have Blogger display profile images in the embedded comments section of your custom Blogger template.<br /><br /><strong>Add Profile Images to Comments Section of a Custom Blogger Template</strong><br />If you are using a custom Blogger template you can use the following method to add profile images to the embedded comments section of your Blogger template.<br /><br /><ol><li>Login to Blogger if not already logged in<br /><br /><li>Go to <font color="#558866">Design > Edit HTML</font color><br /><br /><li>Back up your Blogger template as a precaution by downloading the full template to your computer<br /><br /><li><font color="#558866">Expand Widget Templates</font color> by checking the box on the right hand side<br /><br /><li>Find the following line in your Blogger template by using CTRL + F:<br /><br /><blockquote><pre><dl id='comments-block'></pre></blockquote><br /><li>Change the above line to the following:<br /><br /><blockquote><pre><dl expr:class='data:post.avatarIndentClass' id='comments-block'></pre></blockquote><br /><li>Scroll down a few lines and find the following line in your Blogger template:<br /><br /><blockquote><pre><a expr:name='data:comment.anchorName'/></pre></blockquote><br /><li>Directly before the above line paste the following code block:<br /><br /><blockquote><pre><b:if cond='data:comment.favicon'><br /><img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/><br /></b:if><br /><a expr:name='data:comment.anchorName'/><br /><b:if cond='data:blog.enabledCommentProfileImages'><br /><data:comment.authorAvatarImage/><br /></b:if></pre></blockquote><br /><li>Click <font color="#558866">Save Template</font color><br /><br /><li>Click View Blog and navigate to a page with commenting to see avatars next to comments in the embedded comments area<br /></ol><br /><br /><strong>Tips and Troubleshooting</strong><br /><ul><li>If you have added the author commenting highlight hack to your Blogger template there will be 2 instances of the code at Step 7 to change<br /><br /><li>If your template does not have the code mentioned in Step 5 and Step 6 check that dl has not be replaced by div. In this case leave the div as is and replace the rest of the code in the line.<br /><br /><li>Blogger has only enabled profile images for Blogger and Google profiles so if your visitors comment using identities such as "Anonymous" or "Name/URL" their image profile will not be displayed. If OpenID, AIM or other identities are used these favicons will be displayed instead.<br /><br /><li>Profile avatars load last so they will not prevent visitors viewing your content if you have a lot of comments on some pages</ul><br /><br />In today's Blogger tutorial (Blogspot tutorial) you have learned how to enable profile images in the embedded comments section in Blogger. If you are using a default Blogger template this can be achieved by enabling profile avatars in your Blogger template. If you are using a third party custom template I have shown you a Blogger hack that will display profile images next to comments on your blog. As always I am interested in how you get on with this tweak. Good luck!<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/04/add-missing-embedded-comments-blogger_28.html">Add Missing Embedded Comments Section to a Blogger Template</a><br /><a href="http://http://blogknowhow.blogspot.com/2009/02/embed-comment-form-in-your-blogger.html">Embed Comments Form in a Blogger Template</a><br /><a href="http://blogknowhow.blogspot.com/2009/04/get-more-comments-on-your-blogger-blog.html">How to Get More Comments on a Blogger Blog</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com13tag:blogger.com,1999:blog-8843267045077993028.post-57787718128872224652009-11-01T12:14:00.000-08:002009-11-02T14:46:11.776-08:00Add CSS Styling to Blockquotes in a Blogger TemplateToday I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling to blockquotes in a Blogger template. Other articles I have already published on the subject of CSS styling include: <br /><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-or-change-background-image-blogger.html">How to Add or Change a Background Image in a Blogger Template</a>.<br /> <br />Today's tutorial on Blogger blockquotes will be useful if you are using a default Blogger template or a third party custom template. It will show you how to change your blockquote area in the following ways:<br /><br /><ul><li>Add a background color to the blockquote<br /><li>Add a border around the background of the blockquote<br /><li>Add or change the color of the blockquote text<br /><li>Add or change padding around the text<br /><li>Add or change the margin<br /><li>Add a background image</ul><br />Blogger beginners you can relax as I have written this Blogger tutorial with you in mind. I will walk you through the steps of styling the blockquote section and you will see that it is not as daunting as it first appears. This Blogger tutorial assumes no knowledge of CSS styling. I have rated the difficulty level as easy to medium because it does involve making adjustments to your Blogger template.<br /><br /><strong>How to Change the Blockquote Section of a Blogger Template</strong><br /><br />First of all let's take a look at the CSS Styling for the blockquote section of a default Minima Blogger template. <br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em; <br />}<br /><br />.post blockquote {<br /> margin:1em 20px;<br /> }<br /><br />.post blockquote p {<br /> margin:.75em 0;<br /> }</blockquote><br />As you can see the blockquotes area of this Minima template has minimal styling. Apart from line height and margin indentation there has been no additional code added to improve the look of the template. <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6FuJg5ISjw6HmMd_5X5NGLjD75XqblTDFLBEbskWmMr0j1u4xc9E0Rn9auSArv5oW6A42FBeMAnZ1IwAGmGGttsY6_mQLp1NCKpXtKK0_KN5lejiqdUc96Iucb7AbLPVZjF2HibVHY8/s1600-h/blockquotes-no-styling.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 318px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6FuJg5ISjw6HmMd_5X5NGLjD75XqblTDFLBEbskWmMr0j1u4xc9E0Rn9auSArv5oW6A42FBeMAnZ1IwAGmGGttsY6_mQLp1NCKpXtKK0_KN5lejiqdUc96Iucb7AbLPVZjF2HibVHY8/s320/blockquotes-no-styling.jpg" border="0" alt="Minima Blockquotes No Extra CSS Styling"id="BLOGGER_PHOTO_ID_5399526883091184114" /></a><br />Let's go ahead and give the blockquotes in your Blogger posts some styling. I will use the Minima template to show you but you can do the same for another default template or custom template. As always back up your Blogger template by downloading it to your computer before you begin to make any changes.<br /><br /><ol><li>CSS Styling to Add a Background Color to Blockquotes <br />Adding a background color to the blockquote area can be achieved in 1 of 2 ways. <br /><br /><ol><li>One way is to enter the hex color directly into the styling as I have done below. This code will add a light grey background to the blockquote area.<br /> <br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> <font color="red">background-color: #cccccc;</font color><br />}</blockquote><br /><li>Another way to add a background color using CSS styling for the blockquote area is to make use of the variable names already set up. The border color is light grey #cccccc by default in a Minima template. The advantage of this option is that if you decide to change the border color under Layout > Fonts and Colors the blockquote color will automatically change to the new color too.<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> <font color="red">background-color: $bordercolor;</font color><br />}</blockquote><br />If you wanted the background color to be the same as the blog title color rather than the border color you would write this instead<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> <font color="red">background-color: $titlecolor;</font color><br />}</blockquote></ol><br /><li><strong>CSS Styling to Add a Border Around Blockquotes</strong><br />You have your background in place now let's add a narrow border around the background to add some more definition. The following will add a 1px solid border around the outside of your blockquote area in your Blogger posts.<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> background-color: #cccccc;<br /> <font color="red">border: 1px solid #cc6600;</font color><br />}</blockquote><br />or if using variables<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> background-color: $bordercolor;<br /> <font color="red">border: 1px solid $titlecolor;</font color><br />}</blockquote><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqAiml9I4vit2bZGa5yMl9TRkH8FI9gB_Qf-jhbwriGaw21q1-psEw4xZUsn3JuV0lfnCNWh3HacdBIxlBtrwxuOhxcy8dVjp0E3AmxmCOlA9YuNpCP1zSNrKv-daV75q1q6-HUXLdH4/s1600-h/blockquotes-some-styling.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 313px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqAiml9I4vit2bZGa5yMl9TRkH8FI9gB_Qf-jhbwriGaw21q1-psEw4xZUsn3JuV0lfnCNWh3HacdBIxlBtrwxuOhxcy8dVjp0E3AmxmCOlA9YuNpCP1zSNrKv-daV75q1q6-HUXLdH4/s320/blockquotes-some-styling.jpg" border="0" alt="Blockquotes With a Background and Background Border"id="BLOGGER_PHOTO_ID_5399528932929979218" /></a><br /><li><strong>CSS Styling to Add Padding Around Blockquotes</strong><br />Now if we were to leave the styling at this point one of the problems would be that the text would butt up against the background which is not a good look. To create some space between the text and the background edge all the way around we use CSS styling to add some padding like this:<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> background-color: #cccccc;<br /> border: 1px solid #cc6600;<br /> <font color="red">padding: 20 px;</font color><br />}</blockquote><br />or if using variables<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> background-color: $bordercolor;<br /> border: 1px solid $titlecolor;<br /> <font color="red">padding: 20 px;</font color><br />}</blockquote><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcWK3R8IQZcAKolhsKM0wFQVywYBg5Kkie625EWVWzAtkX3QS_Zs20StO6xip6KNNgUDpUkC8bACIYwNy31_h6tWOmqXWXQkJ0F4KSU-sm1JOVLu7O2Er4UEyZ8PkP0N5KdemI-Vsrwo/s1600-h/blockquotes-with-padding.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 283px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcWK3R8IQZcAKolhsKM0wFQVywYBg5Kkie625EWVWzAtkX3QS_Zs20StO6xip6KNNgUDpUkC8bACIYwNy31_h6tWOmqXWXQkJ0F4KSU-sm1JOVLu7O2Er4UEyZ8PkP0N5KdemI-Vsrwo/s320/blockquotes-with-padding.jpg" border="0" alt="Blockquotes With a Background, Background Border and Padding"id="BLOGGER_PHOTO_ID_5399530199831176098" /></a><br /><li><strong>CSS Styling to Add or Change the Text Color of Blockquotes</strong><br />If you want to accent your blockquote area in your posts one effective way to do this is to make the blockquote text color a different color from the text color of your pages. We do this by picking a color and adding the following line to the code:<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> background-color: #cccccc;<br /> border: 1px solid #cc6600;<br /> padding: 20 px;<br /> <font color="red">color: #cc6600</font color><br />}</blockquote><br />or if using variables<br /><br /><blockquote>.post-body blockquote {<br /> line-height:1.3em;<br /> background-color: $bordercolor;<br /> border: 1px solid $titlecolor;<br /> padding: 20 px;<br /> <font color="red">color: $titlecolor;</font color><br />}</blockquote><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgik1SkcThsx6q8cesVckqrgSqGGMf279jR6CjaMEqq_oC-al3imt-PRm1Vx7YmcTqIVD1BIT5AdTLbTl44YKhyW74eDIUpUIsLYVBL7u75Nfp7opOkfUJKsEf9PRRueGrqU7-wSdvfN7E/s1600-h/blockquotes-with-styling.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 286px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgik1SkcThsx6q8cesVckqrgSqGGMf279jR6CjaMEqq_oC-al3imt-PRm1Vx7YmcTqIVD1BIT5AdTLbTl44YKhyW74eDIUpUIsLYVBL7u75Nfp7opOkfUJKsEf9PRRueGrqU7-wSdvfN7E/s320/blockquotes-with-styling.jpg" border="0" alt="Blockquotes With a Background, Background Border, Padding and Change of Text Color"id="BLOGGER_PHOTO_ID_5399531263489182850" /></a><br /></ol><br /><strong>Tips and Troubleshooting</strong><br />If you want to add further modifications to the blockquotes area of your Blogger template here are several other possibilities.<br /><br /><ol><li><strong>CSS Styling To Change the Margin of Blockquotes</strong> <br />You can increase the margin from 1em to 1.5em by changing the margin line to<br /><blockquote>margin: 1.5em 20px;</blockquote><br /><li><strong>CSS Styling to Add a Background Image to Blockquotes</strong><br />You can have your own image as a background in your blockquotes area of your posts by adding this line:<br /><br /><blockquote>background: url(http://URL of your image.jpg);</blockquote></ol><br />In today's Blogger tutorial (Blogspot tutorial) you have learned how to add CSS styling to the blockquotes area of your Blogger posts. I have shown you how to add a background, a background border, change the text color, add padding, change the margin and add a background image to the blockquotes code block. If you have a moment please let me know how you got on customizing your own Blogger template. Any questions please ask.<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-or-change-background-image-blogger.html">How to Add or Change a Background Image in a Blogger Template</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com4tag:blogger.com,1999:blog-8843267045077993028.post-20205866084661996562009-10-26T22:15:00.000-07:002009-11-02T14:49:14.157-08:00Add or Change Background Image of a Blogger TemplateIn today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template. <br /><br />I have chosen to write this article not because there aren't any how to articles already on the net but because they assume quite a bit of knowledge. I have taken a different tack with this post in that I assume you are an absolute beginner with no knowledge of Blogger templates. <br /><br />For this reason I have provided some sample backgrounds for you to play around with. By just cutting and pasting these images you can see first hand how dramatically adding a different background to your Blogger template can change it. You will see that replacing your background image with these images isn't that difficult and hopefully it will give the confidence to branch out further and change the background of your Blogger template to suit your own needs. All that is needed is to insert a small snippet of code into the CSS styling section of your Blogger template and hey presto your Blogger template will take on a whole new look.<br /><br /><strong>How to Change the Color of a Blogger Background (Default Templates)</strong><br />If you are using a default Blogger template then you already have the option to change the background color to your own taste by going to <em>Layout > Fonts and Colors</em>. Some third party custom Blogger templates have this option too but by no means all. For instructions on changing the background color of custom templates see tips and troubleshooting below. <br /><br /><strong>How to Add a Background Image to a Blogger Template</strong><br /><ol><li>Log in to Blogger if not already logged in<br /><br /><li>Go to Layout > Edit HTML<br /><br /><li>Back up your Blogger template as a precaution by downloading the full template to your computer<br /><br /><li>Find the following line in your Blogger template<br /><br /><blockquote>body {</blockquote><br /><li>Add the following line directly after this line <br /><blockquote>background-image: url(<font color="red">URL address of your image</font color>);</blockquote><br />Your block of code will now look like this:<br /><br /><blockquote>body {<br /> background-image: url(<font color="red">URL address of your image</font color>);<br /> (existing code in this block)<br />}</blockquote><br /><li>Now replace the code in red for the URL address of your image. Choose an image from the selection below to practise with or use your own image. Note if using your own image make sure you read the tips and troubleshooting section below.<br /><br /><img style="cursor:pointer; cursor:hand;width: 120px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2q4FuC0S4bPaROk3Si7h4KLEY5rs6E_xbNhyoDFpMJ1pWmYwff3IvRWOWN6si7UGPGtfIx8Bs3PqahnwejIg4nkjP04S7UsWwJDcxijmhEUjjVIVKebrh4w4x108ekrbg1bGi14xPE8/s320/background_047.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397190235305846418" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2q4FuC0S4bPaROk3Si7h4KLEY5rs6E_xbNhyoDFpMJ1pWmYwff3IvRWOWN6si7UGPGtfIx8Bs3PqahnwejIg4nkjP04S7UsWwJDcxijmhEUjjVIVKebrh4w4x108ekrbg1bGi14xPE8/s320/background_047.gif</font color><br /><br /><img style="cursor:pointer; cursor:hand;width: 120px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5dmWLoIqPih9KAGsVlSRsBatSw39ncVz48PgUfT1C3r4VI-Sn5UtLG-iC6qULgKNXmlBo2NfdQfFMQtWz6fckxMgGfmG9rRopuprOSDUvH8l2i_KC5NgBExO5eeiCG4efd6hoOeXZMU/s320/background_104.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397184127312313282" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5dmWLoIqPih9KAGsVlSRsBatSw39ncVz48PgUfT1C3r4VI-Sn5UtLG-iC6qULgKNXmlBo2NfdQfFMQtWz6fckxMgGfmG9rRopuprOSDUvH8l2i_KC5NgBExO5eeiCG4efd6hoOeXZMU/s320/background_104.gif</font color><br /><br /><img style="cursor:pointer; cursor:hand;width: 120px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2Nb-dBQ6C_Yvs8gzgHv_rRzes7iuBCgRPSSzZIF_DuANKILIu-KAxtYe3hD3IFpjeD76Ei9bb-DeZsb_52-UP6_1MWU3re2zNcNtvNz6a0F-NlZXC4AG76SGNg6WKHNBvHSQg8cRENM/s320/background_126.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397185866369964418" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2Nb-dBQ6C_Yvs8gzgHv_rRzes7iuBCgRPSSzZIF_DuANKILIu-KAxtYe3hD3IFpjeD76Ei9bb-DeZsb_52-UP6_1MWU3re2zNcNtvNz6a0F-NlZXC4AG76SGNg6WKHNBvHSQg8cRENM/s320/background_126.gif</font color><br /><br /><img style="cursor:pointer; cursor:hand;width: 120px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtmAaGXuMZIa5GS2H6yRMwwyEIOb-HBp6Ly4F47c2Cu6S38MBeucJFKriUxfDHKgwrGQhdIBQUjnvnYsqEfB6sDmsDFRXCcckqquJTbFcfNIxPzJMvZFiOzWt96LVZsJ6_ZYp63XD8Ps/s320/background_073.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397186820460844194" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtmAaGXuMZIa5GS2H6yRMwwyEIOb-HBp6Ly4F47c2Cu6S38MBeucJFKriUxfDHKgwrGQhdIBQUjnvnYsqEfB6sDmsDFRXCcckqquJTbFcfNIxPzJMvZFiOzWt96LVZsJ6_ZYp63XD8Ps/s320/background_073.gif</font color><br /><br /><img style="cursor:pointer; cursor:hand;width: 120px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAs8BOjOaWKV1rHweq29iv7IRHgGrJZoq1ry6_idL9TsOBqf9OpmEAl0fuqJvykpZJPaysc0MuGpXMNYALN5lW1ID_IErn8K6rpWkCz_2IkZ5V-a1nuuBfxvyHmrldrphZBADzymGeV2I/s320/background_083.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397186735243281714" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAs8BOjOaWKV1rHweq29iv7IRHgGrJZoq1ry6_idL9TsOBqf9OpmEAl0fuqJvykpZJPaysc0MuGpXMNYALN5lW1ID_IErn8K6rpWkCz_2IkZ5V-a1nuuBfxvyHmrldrphZBADzymGeV2I/s320/background_083.gif</font color><br /><br /><strong>Green Paws Background</strong><br /><img style="cursor:pointer; cursor:hand;width: 192px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDRGyc-6Ez-u_XtEiLlYpA4PELBQHO-_5xz7WzTlekmTJs9JVm-whanG5Ci_nO3j3TTkvyQ5iY-n97GEiflV2jUcmRCDUnetPVIQHzAZwkm6_3RZOpzu_SujVAtgzc3DCHD0eDQmHiOk/s320/green-paws.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397185227694779074" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDRGyc-6Ez-u_XtEiLlYpA4PELBQHO-_5xz7WzTlekmTJs9JVm-whanG5Ci_nO3j3TTkvyQ5iY-n97GEiflV2jUcmRCDUnetPVIQHzAZwkm6_3RZOpzu_SujVAtgzc3DCHD0eDQmHiOk/s320/green-paws.gif</font color><br /><br /><strong>Musical Notes Background</strong><br /><img style="cursor:pointer; cursor:hand;width: 192px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX34iSoCvPabycFw3NAnjDqaq-1cEtcxyDjSln0ueU4BsajdQuZwfg5uMmHU2QRFVeDFrPooZmduIIPGT3oVSFZ0JptYEG1VkT8cvLKu3n4x7htFO7DchM2dqG1pkoKhSsYLXYbbWXKLY/s320/melody.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5397190580826168786" /><br /><font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX34iSoCvPabycFw3NAnjDqaq-1cEtcxyDjSln0ueU4BsajdQuZwfg5uMmHU2QRFVeDFrPooZmduIIPGT3oVSFZ0JptYEG1VkT8cvLKu3n4x7htFO7DchM2dqG1pkoKhSsYLXYbbWXKLY/s320/melody.gif</font color><br /><br /><li>Use the Preview button to see the effect of these different backgrounds on your template. It will help you get an idea of the kind of possibilities out there. <br /><br /><li>You are welcome to use one of the above Blogger backgrounds as they are all free to use without any restriction. If you decide to use one of these simply click on Save Template and you are in business. Alternatively go ahead and find your own background image on the net and follow the instructions below to insert it into your Blogger template.</ol><br /><strong>Tips and Troubleshooting</strong><br /><br /><ul><li><strong>To Add Your Own Image to a Blogger Template</strong><br />There are huge number of backgrounds on the net that are suitable for Blogger. Search under <em>free website backgrounds</em> in your favorite search engine to find these. <br /><br />Simply download your preferred background and save to an image service like <a href="http://photobucket.com/" target="_blank">Photobucket</a>, <a href="http://flickr.com/" target="_blank">Flickr</a>. <br /><br />Make sure the file format is either a .jpg, .gif or .png and that its size does not exceed 100kbs. As a rule of thumb an image size of around 30kb or less is about right if loading time speed is not to be compromised. Larger images can be resized quickly by using an online resizing service such as <a href="http://www.shrinkpictures.com/" target="_blank">Shrink Pictures</a>. <br /><br />Follow the instructions above to change the URL to that of your image.<br /><br /><li><strong>To Change the Background Color of Your Custom Blogger Template</strong><br />If there is no option to change the background color of your Blogger template in <em>Layout > Fonts and Colors</em> you can still change the color manually.<br /><br /><ol><li>Follow steps 1 to 4 as above<br /><br /><li>Find the line beginning with :<br /><br /><blockquote>background-color: #</blockquote><br /><li>The hex color will be different for each template. We will change the color only<br /><br /><blockquote>background-color: #<font color="red">change hex color code to your chosen color</font color>;</blockquote><br /><li>Replace <font color="red">the existing hex color code</font color> with the value of your chosen hex color. <a href="http://html-color-codes.com/" target="_blank">List of web safe hex colors</a>. For example insert the following code to change the background color to:<br /><br /><strong>Denim Blue</strong><br /><blockquote>background-color: #<font color="red">336699</font color>;</blockquote><br /><strong>Black</strong><br /><blockquote>background-color: #<font color="red">000000</font color>;</blockquote><br /><strong>White</strong><br /><blockquote>background-color: #<font color="red">ffffff</font color>;</blockquote><br /><li>Use the Preview button to see the effect of each color before you save it.<br /><br /><li>Once you are satisfied go ahead and click on Save Template</ol></ul><br />Today's Blogger tutorial (Blogspot tutorial) aimed at Blogger beginners continues the series on CSS styling for Blogger. You have learned how to add the background image to your Blogger template or change the existing background image. To help you gain confidence in changing the background image I have provided some sample images for you to practise with. Also in this Blogger tutorial you have learned how to change the color of your Blogger background if you prefer a plain solid background color rather than a background image. As always if you strike any problems implementing the tips in this tutorial please let me know.<br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/add-post-divider-between-blogger-posts.html">How to Add a Divider Between Blogger Posts</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com6tag:blogger.com,1999:blog-8843267045077993028.post-82579039374621279452009-10-16T02:40:00.000-07:002009-11-02T14:46:11.778-08:00Add a Post Divider Between Blogger PostsIn today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create. <br /><br />This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv8nNm0VpwvJysghxR7efaXsEfadWji9RPrrnC_ZzOKFCJHvJkk5VO0eGl_5vrYRhdJEcRqFREFLkd4HFd49InEfa9xzNO4Wq6pMc_fxdwTnRx-tgRMsHP7MibRR6oL2nj1pJ-jaXGuUk/s1600-h/blogger_add-post-divider.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 202px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv8nNm0VpwvJysghxR7efaXsEfadWji9RPrrnC_ZzOKFCJHvJkk5VO0eGl_5vrYRhdJEcRqFREFLkd4HFd49InEfa9xzNO4Wq6pMc_fxdwTnRx-tgRMsHP7MibRR6oL2nj1pJ-jaXGuUk/s320/blogger_add-post-divider.JPG" border="0" alt="How to add a post divider between posts in Blogger"id="BLOGGER_PHOTO_ID_5393160675335624194" /></a><br />By way of example I will use a divider that I downloaded from the internet free by searching for <em>free divider graphics</em>. Here are some sample dividers you can use to get started:<br /><br /><center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL-6aLsvzEDR9VKhoZiuQ7OM5ziFDm8Scs7cNN2x7ZL5mY219rUAM-tB6PaIrMYaBFKFTAiw6SbFcqPsmAPpg-vFAoChOVN38tab-Ic6xeoYP-TVI0xbMyjyIXTXc4-uv4puc2NcmEL9I/s1600-h/ribbon.gif"><img style="cursor:pointer; cursor:hand;width: 320px; height: 6px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL-6aLsvzEDR9VKhoZiuQ7OM5ziFDm8Scs7cNN2x7ZL5mY219rUAM-tB6PaIrMYaBFKFTAiw6SbFcqPsmAPpg-vFAoChOVN38tab-Ic6xeoYP-TVI0xbMyjyIXTXc4-uv4puc2NcmEL9I/s320/ribbon.gif" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_5393164373869034898" /></a><br /><strong>URL address:</strong><br />https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0icfjkH1ytPfsOuVta9fGy8ruK8792q5ww3WMLLVAOgY7vW7kj7faHUlnBQLgltgZAaj_ccKhYXwCHEYqJhyphenhyphensEzPSv7jEsQ7bjYx50WUZGs9xIxDV8oOLo3oDBV0QWZn-eL6tSeEvcg/s400/ribbon.gif<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGYMJHfsZPzAywTI_AjnLnlYceTGT4o80l3TaZMitpt-RVDN_wqltVhb3YgHYaJXqqJFfMI6xDpxTNKyi2nPD8pkGChhKUj-73qcJykrhJ7rFpODyaaYA64YTYhO_Mz6bRUnLc4ngqz4/s1600-h/bar1.gif"><img style="cursor:pointer; cursor:hand;width: 320px; height: 13px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGYMJHfsZPzAywTI_AjnLnlYceTGT4o80l3TaZMitpt-RVDN_wqltVhb3YgHYaJXqqJFfMI6xDpxTNKyi2nPD8pkGChhKUj-73qcJykrhJ7rFpODyaaYA64YTYhO_Mz6bRUnLc4ngqz4/s320/bar1.gif" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_5393166039642854066" /></a><br /><strong>URL address:</strong><br />https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_hejEcgAo5naB6wW-2gGD4Ex9GtJi1T4PaXHO7GUbhMlHhGxxfPz7pq1aCOJITjf2JVMSF3lC4xXUiumbyiutIrJcqisQ8zzFtFSeqEyIwesa8Mh-aFnE0GayjNfdv64f8mliZ_TYvqw/s400/bar1.gif<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWCXnJw0jrdHgGaGSHTkmiziX3ZgYLQKeVdT9m9bIcXLIvr9_i4EoJakjV5LiQxoDXmM_VMmI3xnF3-92zRZx4glrEfvHhnVgcSyr3JducDI4t-wpBLOvmpT3aR9oXXlCNUZtMuSgAY0/s1600-h/barbsmpl.jpg"><img style="cursor:pointer; cursor:hand;width: 320px; height: 24px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWCXnJw0jrdHgGaGSHTkmiziX3ZgYLQKeVdT9m9bIcXLIvr9_i4EoJakjV5LiQxoDXmM_VMmI3xnF3-92zRZx4glrEfvHhnVgcSyr3JducDI4t-wpBLOvmpT3aR9oXXlCNUZtMuSgAY0/s320/barbsmpl.jpg" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_5393166478885200354" /></a><br /><strong>URL address:</strong><br />https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVmOE9V0fNx4o70tklaOa8exaVHZ16HeHInLJKY29b1Gpl4H1qHDawqKw_5QPyEcvgGkacySiW4jOWDCtQl6jiGv93GsZ1zchkSGdQMkdKKEpEUJlkWyDJ0Ef1qmRYYlYO394119v2cA/s400/barbsmpl.jpg<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeF19x7GOCeg1VrbNJ442N2IcudIsKFHVoQGcvZYGFbcvcttJof-PUm6xBI3qMxksfx99cvJfqG1Dh4EjjSgfQVMSNcKgfHHKE3vZt1wjK35zoXGoWL0MW4q44jhfutV9m7rqLgporrfM/s1600-h/bar47.gif"><img style="cursor:pointer; cursor:hand;width: 320px; height: 4px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeF19x7GOCeg1VrbNJ442N2IcudIsKFHVoQGcvZYGFbcvcttJof-PUm6xBI3qMxksfx99cvJfqG1Dh4EjjSgfQVMSNcKgfHHKE3vZt1wjK35zoXGoWL0MW4q44jhfutV9m7rqLgporrfM/s320/bar47.gif" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_5393166948114902674" /></a><br /><strong>URL address:</strong><br />https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYegENYuO7JQ1dH4MZkTmPxbjih_AEOmxG6BEbxhE-0AV5NzVv2HBCZj8ZHsieNQQJAq7MoLw5QzrR6w9J7_4WyB3hOj7VpmsLJlYviqTCWwLnp_9phx7cV599e3TS7H9Eg1L9TB2BGI/s400/bar47.gif</center><br /><br /><strong>How to Add a Divider Between Posts in Blogger</strong><br /><br /><ol><li>Login to Blogger if not already logged in<br /><br /><li>From the Dashboard navigate to <strong>Layout > Edit HTML</strong><br /><br /><li><strong>Back up</strong> your Blogger template as a precaution by downloading it to your computer<br /><br /><li>Find the following line of code in your template:<br /><br /><blockquote>.post {<br /><br />You are likely to have something like this in your template already:<br /><br />.post {<br /> margin:.5em 0 1.5em;<br /> border-bottom:1px dotted $bordercolor;<br /> padding-bottom:1.5em;<br /> }</blockquote><br /><li><strong>Paste</strong> the following lines of code to this block making sure you paste them before the closing curly bracket:<br /><br /><blockquote>background: url(<font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0icfjkH1ytPfsOuVta9fGy8ruK8792q5ww3WMLLVAOgY7vW7kj7faHUlnBQLgltgZAaj_ccKhYXwCHEYqJhyphenhyphensEzPSv7jEsQ7bjYx50WUZGs9xIxDV8oOLo3oDBV0QWZn-eL6tSeEvcg/s400/ribbon.gif</font color>);<br />background-repeat: no-repeat;<br />background-position: bottom center;<br />margin:.5em 0 1.5em;<br />padding-bottom:1.5em;</blockquote><br /><li>If any lines are duplicated remove them. <br /><br /><li><strong>Remove</strong> any line beginning with: border-bottom: eg<br /><br /><blockquote>border-bottom:1px dotted $bordercolor;</blockquote><br /><li>You will now have a block of code which looks like this plus any extra lines from the existing code in this block:<br /><br /><blockquote>.post {<br />background: url(<font color="red">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0icfjkH1ytPfsOuVta9fGy8ruK8792q5ww3WMLLVAOgY7vW7kj7faHUlnBQLgltgZAaj_ccKhYXwCHEYqJhyphenhyphensEzPSv7jEsQ7bjYx50WUZGs9xIxDV8oOLo3oDBV0QWZn-eL6tSeEvcg/s400/ribbon.gif</font color>);<br />background-repeat: no-repeat;<br />background-position: bottom center;<br />margin:.5em 0 1.5em;<br />padding-bottom:1.5em;<br />} </blockquote><br /><li>Click on <strong>Save Template</strong> to save your changes<br /><br /><li>Click on <strong>View Blog</strong> to see your new post divider between posts<br /></ol><br /><strong>Tips and Troubleshooting</strong><br /><ul><li>To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use. <br /><br /><li>To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image<br /><br /><li>To increase the padding around the divider change the following line of code:<br /><br /><blockquote>padding-bottom:1.5em;<br /><br />to<br /><br />padding-bottom:2.5em;</blockquote></ul><br />In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.<br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/blogger-image-borders-change-remove.html">How to Add, Delete or Remove Blogger Image Borders</a><br /><a href="http://blogknowhow.blogspot.com/2009/10/how-to-align-and-justify-blogger-posts.html">How to Align and Justify Posts in Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com14tag:blogger.com,1999:blog-8843267045077993028.post-37551986888370138262009-10-11T03:04:00.000-07:002009-10-11T03:15:09.777-07:00Add a Twitter Profile Widget to BloggerIf you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to show your Twitter updates on Blogger is to add a Twitter profile widget to the sidebar of your blog. This widget is quite a bit more fancy than the current Twitter Updates Widget available through Blogger which I showed you how to insert into your blog in my recent article <a href="http://blogknowhow.blogspot.com/2009/09/add-twitter-updates-widget-to-blogger.html">Add a Twitter Updates Widget to Blogger</a>. On the minus side the widget may slow your blog down so test it out first if fast loading time is crucial to you.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRex5kxMWnVl7-tgaPqhyphenhyphenqSxc3OSCJ7dU0phs79IsyIMDMmefmJZRK-MNZS4KFSfbbRCp5M4kYgNicE3AqDcPnECZKw9H9ECZIzzSu2OfwLEj_ojo7AktMb2PYz1jFQc_FHvkj2w0fEZQ/s1600-h/twitter_profile-widget.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 221px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRex5kxMWnVl7-tgaPqhyphenhyphenqSxc3OSCJ7dU0phs79IsyIMDMmefmJZRK-MNZS4KFSfbbRCp5M4kYgNicE3AqDcPnECZKw9H9ECZIzzSu2OfwLEj_ojo7AktMb2PYz1jFQc_FHvkj2w0fEZQ/s320/twitter_profile-widget.JPG" border="0" alt="Twitter Profile Widget - how to insert into Blogger"id="BLOGGER_PHOTO_ID_5391281553862056658" /></a><br /><strong>How to Insert a Twitter Profile Widget into Blogger</strong><br /><ol><li>Go to <a href="http://twitter.com/goodies/widgets">Twitter Widgets</a> and sign in<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFcF4ZOywvxhqbhqH5AA9ip1OXJX1XmVxTN-8tKfLMEn1ww-FJPUxZTEYLerUtq-MxnwQXLrOJcU0GvcJv3OvXUySBccS0MFV4jIFNFjfJMOlQpJFVAqiG6UpXY565yIdCDGKQUqBWTLyl/s1600-h/twitter_widgets.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 187px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFcF4ZOywvxhqbhqH5AA9ip1OXJX1XmVxTN-8tKfLMEn1ww-FJPUxZTEYLerUtq-MxnwQXLrOJcU0GvcJv3OvXUySBccS0MFV4jIFNFjfJMOlQpJFVAqiG6UpXY565yIdCDGKQUqBWTLyl/s320/twitter_widgets.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5391172839446609218" /></a><br /><li>Choose <em>Profile Widget</em> and you will be taken to a default profile widget page where you can customize your Twitter widget according to your needs.<br /><br /><li>Choose <em>Settings</em> and make sure that your username is correct<br /><br /><li>Choose <em>Appearance</em> and make any custom color changes you need to so that the widget will blend into your blog. At the very least you will need to change the shell background and the links colors to suit your blog<br /><br /><li>Choose <em>Dimensions</em> and change the sizing of the widget if it is too large to fit into your Blogger sidebar. The default setting is 250x300<br /><br /><li>Click on <em>Test Your Settings</em> to ensure your new widget looks the way you want it to<br /><br /><li>Click the <em>Finish and Grab</em> Code button<br /><br /><li>Copy the code by right click the mouse in the code box and choosing <em>Select All</em>. Right click again and choose <em>Copy</em><br /><br /><li>Sign in to Blogger. From the Dashboard go to <em>Layout | Page Elements</em><br /><br /><li>In the sidebar choose <em>Add a Gadget</em> and then a <em>HTML/Javascript</em> widget<br /><br /><li><em>Paste</em> the Twitter code into the gadget content box and click <em>Save</em><br /><br /><li>Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on <em>View Blog</em> to admire it<br /></ol><br />In this Blogger tutorial I have showed you how to add a Twitter Profile Widget to the sidebar of your Blogger blog (Blogspot blog). This Twitter widget will encourage your blog readers to visit your Twitter Profile and with luck you may get some new Twitter followers out of it.<br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/add-twitter-updates-widget-to-blogger.html">Add a Twitter Updates Widget to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/07/add-twitter-badge-button-to-blogger.html">Add Twitter Button or Twitter Badge to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/07/add-twitter-followers-counter-blogger.html">Add Twitter Followers Counter to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/02/add-social-bookmarking-button-blogger.html">Add a Social Bookmarking Button to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/08/add-social-bookmark-buttons-to-blogger.html">Add Social Bookmark Buttons to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/08/free-social-bookmark-buttons-blogger.html">Best Free Social Bookmark Icon Sets for Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com5tag:blogger.com,1999:blog-8843267045077993028.post-59697525810673627292009-10-10T02:18:00.000-07:002009-10-10T02:24:00.608-07:00Add a Simple Drop Down Menu to BloggerIn today's Blogger tutorial I show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog (Blogspot blog). If you want to add lots of links to your Blogger blog but are worried about the amount of space this will take up on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of a drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list. <br /><br /><strong>How to Add a Drop Down Menu Widget to Blogger</strong><br />Adding a drop down menu to Blogger is well within the capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:<br /><center><br/><select onchange="javascript:window.open(this.options[this.selectedIndex].value,'_blank');"><option value="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html"/>- Blog Know How Tutorials -<option value="http://blogknowhow.blogspot.com/2009/07/add-twitter-badge-button-to-blogger.html"/>Twitter Badge or Button<option value="http://blogknowhow.blogspot.com/2009/10/add-twitter-retweet-button-to-blogger.html"/>Twitter Retweet Button<option value="http://blogknowhow.blogspot.com/2009/09/add-twitter-updates-widget-to-blogger.html"/>Twitter Updates Widget</select></center><br /><br /><ol><li>Log in to Blogger if not already logged in<br /><br /><li>Navigate from the Dashboard to <em>Layout > Page Elements</em>.<br /><br /><li>Click on <em>Add a Gadget</em> in the sidebar or other location if you wish<br /><br /><li>Select a <em>HTML/JavaScript</em> gadget from the list of gadgets<br /><br /><li>Paste the following code into the content box of the widget:<br /><br /><blockquote><form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'<font color="red">_blank</font color>')"<br />size=1 name=menu><br /><option><font color="red">- Your Menu Title -</font color></option><br /><br /><!-- Change the following links to your own --><br /><br /><option value="<font color="red">http://URL of link1</font color>"><font color="red">Link 1</font color></option><br /><option value="<font color="red">http://URL of link2</font color>"><font color="red">Link 2</font color></option><br /><option value="<font color="red">http://URL of link3</font color>"><font color="red">Link 3</font color></option><br /><option value="<font color="red">http://URL of link4</font color>"><font color="red">Link 4</font color></option><br /><option value="<font color="red">http://URL of link5</font color>"><font color="red">Link 5</font color></option><br /><br /><option value="http://blogknowhow.blogspot.com">Blog Know How</option><br /></select></form></blockquote><br /><li>Replace <font color="red">_blank</font color> as follows:<br /><br /><ul><li>To have a new window open leave the same<br /><br /><li>To have the new page appear in the same window replace <font color="red">_self</font color></ul><br /><br /><li>Replace <font color="red">- Your Menu Title -</font color> with a title of your own<br /><br /><li>For each instance of the option values highlighted in red substitute your own links and link names. For example:<br /><br /><option value="<font color="red">http://blogknowhow.blogspot.com</font color>"><font color="red">Blog Know How</font color></option><br /><br /><li>Click Save<br /><br /><li>Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes<br /><br /><li>Click View Blog to admire the new drop down menu in the sidebar of your blog<br /></ol><br />In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger blog (Blogspot blog). This widget is ideal for reducing clutter on your Blogger sidebar and excellent for displaying long lists of links such as labels in a convenient, neat and space saving way. A drop down menu gadget is easily installed from the Layout > Page Elements page and can be customized to your own specifications. Any problems with this Blogger tweak please let me know. Enjoy!<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/05/add-breadcrumb-navigation-blogger.html">Add Breadcrumb Navigation to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/03/add-horizontal-links-menu-to-blogger.html">Add Horizontal Links Menu Navigation to Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com6tag:blogger.com,1999:blog-8843267045077993028.post-6013956190183401242009-10-09T16:56:00.001-07:002010-12-31T15:42:28.121-08:00Blogger Read More Links in Posts with Jump Breaks FeatureIn this Blogger tutorial you will learn <strong>how to insert jump breaks into your Blogger posts (Blogspot posts)</strong> as an aid to quick navigation for your visitors. Jump Breaks in Blogger provide an easy way to show only a snippet of your whole post on the home page of your blog with a read more link below it for the rest of the story.<br /><br />I have already written about a Blogger expandable post summaries hack which provides a read more feature for a Blogger blog homepage. For most Blogger webpublishers (Blogspot webpublishers) this hack is no longer necessary because Blogger as part of its 10th birthday celebration introduced a new feature called Jump Breaks. I cover several methods to insert jump breaks depending on whether you are using a Blogger default template or a customized Blogger template.<br /><br />The advantage of adding jump breaks to your Blogger posts is that your readers can quickly and easily skim your most recent posts for what interests them rather than having to scroll through a whole bunch of long articles. This is definitely a big help for those of us like me who often write articles longer than 500 words. If your posts are short and sweet you may find that adding this read more feature is unnecessary however you can still apply it when you do have a longer post. Below is an example post which illustrates the Jump Break feature in action.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXyRpzMbxkzk-wV6XoaNo3pXpiD7Y8qEXlDx-2HFp3zG4E9jxcjOzH8y1uKRYs9yoBYisEskdTvuiCvhe_kpug4k5ljkZWhxstmYnUz6hXu6KunupZLk0OIsc8s4fQgja0XUvcgFNzPg/s1600-h/blogger_post-showing-read-more-feature.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 188px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXyRpzMbxkzk-wV6XoaNo3pXpiD7Y8qEXlDx-2HFp3zG4E9jxcjOzH8y1uKRYs9yoBYisEskdTvuiCvhe_kpug4k5ljkZWhxstmYnUz6hXu6KunupZLk0OIsc8s4fQgja0XUvcgFNzPg/s320/blogger_post-showing-read-more-feature.JPG" border="0" alt="Example post showing Blogger new jump breaks read more feature"id="BLOGGER_PHOTO_ID_5390811100090487650" /></a><br /><strong>How to Insert Jump Breaks (Read More Links) in Blogger</strong><br />It is easy to insert a Jump Break into your Blogger posts (Blogspot posts) at any point of your choosing.<br /><br />There are two methods of inserting the Jump Breaks in Blogger. Which method you choose depends on which post editor you are using. If you are not sure which editor you are using check this out by going to <em>Settings > Basic</em> and scrolling to the bottom of the page. Under <em>Global Settings</em> you will see a radio button next to old editor or updated editor.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVrDvcbqS4pmo_T9cA8a3_JITz5PpCQ6nbdaKW_w4LuE6k6a-Jt3g5x4F6Wb9W1bG1mcxIdN9kgU1Z0eWWzidfl1vdtFDjya91xau6kYcTbdQu2Ewh9BUUj2wC_gyt28qiypt9jc0Gt8/s1600-h/blogger_select-editor.JPG"><img id="BLOGGER_PHOTO_ID_5390644828826475170" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; TEXT-ALIGN: center" alt="Select Blogger editor from Settings, Basic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVrDvcbqS4pmo_T9cA8a3_JITz5PpCQ6nbdaKW_w4LuE6k6a-Jt3g5x4F6Wb9W1bG1mcxIdN9kgU1Z0eWWzidfl1vdtFDjya91xau6kYcTbdQu2Ewh9BUUj2wC_gyt28qiypt9jc0Gt8/s400/blogger_select-editor.JPG" border="0" /></a><br /><ol><li><strong>Method 1<br />Insert Jump Breaks - New Blogger Post Editor Only</strong><br />In order to use this method you need to be using the updated editor in Blogger or have Blogger in Draft enabled.<br /><br /><ul><li>When creating a new post in the Blogger Post Editor position the cursor in the editor at the point you wish the Jump Break to be inserted<br /><br /><li>Click on the <font color="#558866">insert Jump Break icon</font color> (currently the last option on the menu)</ul><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8O4J6aKlX4LEqdszZAJ_Z_RkEEhiC78SSReubwRS2u5-sq5AAoohHa2A7zrqMWVa61L9CXG0vkbotowcGYBP5H1Qgt_BsVotakogKaLnnGRFYtKAFPWbjXXldMya8_HbUs0MORW1k0vk/s1600-h/readmore.png" imageanchor="1"><img style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; TEXT-ALIGN: center" alt="Click on the Jump Break Icon to insert a jump break into a Blogger post" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8O4J6aKlX4LEqdszZAJ_Z_RkEEhiC78SSReubwRS2u5-sq5AAoohHa2A7zrqMWVa61L9CXG0vkbotowcGYBP5H1Qgt_BsVotakogKaLnnGRFYtKAFPWbjXXldMya8_HbUs0MORW1k0vk/s400/readmore.png" border="0" /></a><br /><ul><li>A jagged dividing line will appear to mark the insertion point</ul><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7IiAsrD5y9SP169Ua9ISfHXkHPtcS2cQbMlj1j-BsHGyr0_2_AukSZgIxOTY3BKlsk8FBxUbpOMsy4FpG4FAPI72mXKB5ScVllW5et73xhHL_Byv7xUx12ghDT4Oq8LrIgHeNRnDEJk/s1600-h/blogger_jump-break-insertion.JPG"><img id="BLOGGER_PHOTO_ID_5390780034063199490" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; TEXT-ALIGN: center" alt="A divider line indicates where the jump break will occur" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7IiAsrD5y9SP169Ua9ISfHXkHPtcS2cQbMlj1j-BsHGyr0_2_AukSZgIxOTY3BKlsk8FBxUbpOMsy4FpG4FAPI72mXKB5ScVllW5et73xhHL_Byv7xUx12ghDT4Oq8LrIgHeNRnDEJk/s400/blogger_jump-break-insertion.JPG" border="0" /></a><br /><ul><li>Publish your post as normal</ul><br /><br /><li><strong>Method 2<br />Insert Jump Breaks - Old Blogger Post Editor Only</strong><br />If you are using the old post editor rather than the new post editor you can still insert jump breaks into your Blogger posts.<br /><br /><ul><li>When creating a new post in the Blogger Post Editor make sure you are in the <font color="#558866">Edit HTML mode</font color> rather than compose mode<br /><br /><li>Insert the following code at the point where you want to break the Jump Break to occur:<br /><br /><blockquote><!-- more --></blockquote><br /><li>Publish post as normal</li></ul></ol><br /><strong>Tips and Troubleshooting</strong><br /><ol><li><strong>To Add Jump Breaks to New Posts Automatically</strong><br />To save time it is possible to automatically add Jump Breaks to posts with the following method: <br /><br /><ul><li>Go to <font color="#558866">Settings > Formatting</font color> and scroll to the bottom of the page<br /><br /><li>Under Post Template paste <!-- more --> into the box and save. The next time you create a new post the <!-- more --> will automatically appear. Make sure you are in the Edit HTML mode to see <!-- more --> appear.</li></ul><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NgPIMChfAFD-XBIicVdL9dfYrL0uTV7y1H05eN1jHZ9zDpW47onySSZUAZeu2DM6BGIOM-_qTcU1KyHQBNMXdVX1uVhvAEcBx3RWApWY_UsOHIPdi6a98-lP0bAREBL6NGDIrBtrNG4/s1600-h/blogger_formatting-post-template.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 106px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NgPIMChfAFD-XBIicVdL9dfYrL0uTV7y1H05eN1jHZ9zDpW47onySSZUAZeu2DM6BGIOM-_qTcU1KyHQBNMXdVX1uVhvAEcBx3RWApWY_UsOHIPdi6a98-lP0bAREBL6NGDIrBtrNG4/s320/blogger_formatting-post-template.JPG" border="0" alt="Add the code to your Post Template in Settings | Formatting to automate Jump Breaks"id="BLOGGER_PHOTO_ID_5390805251864477298" /></a><br /><li><strong>To Change the <em>Read More</em> Text</strong><br />If you want to change the <em>Read More</em> text for something like <em>Read Full Story</em> or <em>Continue Reading</em> you can easily do this by:<br /><br /><ul><li>Go to <font color="#558866">Design > Page Elements</font color><br /><br /><li>Edit the <font color="#558866">Blog Posts widget</font color><br /><br /><li>Change the post page link text (<em>Read More</em> text) which appears at the top of the page to your preferred text and save</ul><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakjfrswddYkoHzoDgJmh5aEOUeoYb7tLdqJMI8aISPCaeia7mQUp9VMOg612CC8CLodBxtoLituAQxkQcc3_z8m7ynHdioBlnvszUMRgZ8BOmlfktTQcGArAT-CezEQ7xK7nQrHx6JT8/s1600-h/pagepagelinktext.png" imageanchor="1"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px;" alt="Jump breaks page link text can be changed via Blogger Layout Page Elements Edit Blog Posts" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakjfrswddYkoHzoDgJmh5aEOUeoYb7tLdqJMI8aISPCaeia7mQUp9VMOg612CC8CLodBxtoLituAQxkQcc3_z8m7ynHdioBlnvszUMRgZ8BOmlfktTQcGArAT-CezEQ7xK7nQrHx6JT8/s400/pagepagelinktext.png" border="0" /></a><br /><li><strong>To Manually Add Jump Breaks to Blogger For Users of Customized Templates</strong><br />If you are using highly a customized template or have customized your Blog Posts widget you may experience a problem in getting the Blogger Jump Break feature to work. In this event you can edit your Blogger template to enable Jump Breaks. <br /><br /><ul><li>As a precaution <font color="#558866">back up your template</font color> by downloading full template to your own computer<br /><br /><li>Tick the <font color="#558866">Expand Widget Templates</font color> checkbox<br /><br /><li>Using CTRL + F find the following line of code:<br /><br /><blockquote><data:post.body/></blockquote> <br /><li>Directly below this line insert the following code into your Blogger template:<br /><br /><blockquote><b:if cond='data:post.hasJumpLink'><br /><div class='jump-link'><br /><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a><br /></div><br /></b:if></blockquote> </li></ul></li></ol><br />In this tutorial you have learned how to create expandable post summaries using the new Blogger feature Jump Breaks. You now have the option to easily insert Jump Breaks into your Blogger posts so that longer posts appear with only an introduction followed by a <em>Read More</em> link. <br /><br />I have shown you 2 methods to insert the Jump Breaks and <em>Read More</em> links into your Blogger posts depending on whether you are using the new or old post editor features. I have also given you some tips to make sure you get the most out of the Blogger Jump Break feature including what to do if the Jump Breaks feature does not work with your customized Blogger template. As always I would welcome your feedback about your experiences with the expandable post summaries Blogger feature (Blogspot feature) or any other feature you may be having an issue with.<br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://buzz.blogger.com/2009/09/you-might-as-well-jump.html">Blogger Buzz - You Might as well Jump!</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com11tag:blogger.com,1999:blog-8843267045077993028.post-86413647250805726712009-10-05T00:07:00.001-07:002010-12-29T16:18:06.454-08:00Add Twitter Retweet Button to BloggerDid you know that Twitter can help drive traffic to your Blogspot blog? In today's Blogger tutorial I show you how to add a free Twitter Retweet button to your Blogger posts. Adding a Tweetmeme Twitter Retweet button to Blogger will help promote your blog on Twitter in 2 ways: one by attracting new Twitter followers and two by increasing the direct traffic to your blog from Twitter.<br /><br /><blockquote>Forget the preamble and take me straight to the <a href="#insert-button">instructions to insert the Retweet button</a> into Blogger</blockquote><br /><strong>What is Twitter and How Does it Work?</strong><br />Twitter is currently the fastest growing free social networking site. Essentially, Twitter users micro blog about what they are doing or what others are doing by posting tweets of around 140 characters to Twitter. When Twitter members read these tweets and like what they read they can become followers much in the same way that your readers can choose to follow your blog.<br /><br />Twitter is great news for bloggers because it can be used as a vehicle to promote blogs. Blogger can easily be linked with Twitter services so that every time a post is made to Blogger a short message with a link is posted on Twitter. As every follower is notified that you have tweeted, a blog publisher can gain lots of exposure for their blog with very little effort. <br /><br />Once you add Tweetmeme retweets to the mix the spread compounds because not only do you have followers hearing about your tweet but the followers of followers. So say one of your followers retweets your post all that person's followers hear about it too and pretty soon a tweet plus your retweets can popularize a post to the point that it spreads so widely that it goes viral. <br /><br /><strong>Advantages of a Twitter Retweet Button</strong><br />A Tweet/Retweet button looks similar to and behaves like an <a href="http://blogknowhow.blogspot.com/2009/06/tips-add-digg-button-blogger-blogspot.html">integrated Digg button</a> but it counts retweets rather than diggs. A Retweet button counts reposts of a tweet so that readers can see at a glance how popular your article is on Twitter. Another benefit of the Retweet button is that it allows your blog readers to retweet your post so that their followers hear about your post too. <br /><br /><strong><a name="insert-button">How to Add a Twitter Retweet Button to a Blogger Blog (Blogspot Blog)</a></strong><br />The following instructions will place a Tweetmeme Retweet button into all of your blog posts.<br /> <br /><ol><li>Login to Blogger if not already logged in<br /><br /><li>From the Dashboard navigate to Layout > Edit HTML<br /><br /><li>Check the Expand Widget Templates button<br /><br /><li>Back up your Blogger template by clicking on Download Full Template as a precaution <br /><br /><li>Using CTRL + F find the following code:<br /><br /><blockquote><div class='post-header-line-1'/></blockquote> <br /><li>Directly after the above line paste the following code depending on which Retweet button and position you prefer:<br /><br /><ul><strong>Large Retweet Button - Right Aligned</strong><br /><img style="cursor:pointer; cursor:hand;width: 58px; height: 69px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBTEfe9k-zYP5Anlw1fkGWeGUUPIOL9gSZZ3zg8aKOoumcNBV638HXEi6atR9TeGIkXNNb-AxswFiRzhbs4Z1SbXQncHyOxgFz9EAVu30n5TvmDS9ct7JYffO5zFGLU9B0cSDDR8yvVs/s320/retweet-button-large.JPG" border="0" alt="Retweet Button"id="BLOGGER_PHOTO_ID_5389076163761279138" /><div style="width: 300px; height: 90px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"><pre><div style="float:right;padding:4px;"><br /><script type="text/javascript"><br />tweetmeme_url = '<data:post.url/>'; <br />tweetmeme_source = '<font color="red">your_twitter_user_name</font color>';<br /></script><br /><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><br /></script> </div></pre></div><br /><br /><li><strong>Large Retweet Button - Left Aligned</strong><br /><img style="cursor:pointer; cursor:hand;width: 58px; height: 69px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBTEfe9k-zYP5Anlw1fkGWeGUUPIOL9gSZZ3zg8aKOoumcNBV638HXEi6atR9TeGIkXNNb-AxswFiRzhbs4Z1SbXQncHyOxgFz9EAVu30n5TvmDS9ct7JYffO5zFGLU9B0cSDDR8yvVs/s320/retweet-button-large.JPG" border="0" alt="Retweet Button"id="BLOGGER_PHOTO_ID_5389076163761279138" /><div style="width: 300px; height: 90px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"><pre><div style="float:left;padding:4px;"><br /><script type="text/javascript"><br />tweetmeme_url = '<data:post.url/>'; <br />tweetmeme_source = '<font color="red">your_twitter_user_name</font color>';<br /></script><br /><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><br /></script> </div></pre></div><br /><br /><li><strong>Compact Retweet Button - Right Aligned</strong><br /><img style="cursor:pointer; cursor:hand;width: 80px; height: 26px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH33GDAilNvrjr546Fz409TuyB4Jp7CeLtFFC7hdoLok-73wGBFga7Wq68NQEAhzfLfHCT3ExDn8xYSUgW4tJ8ALVvXdpJQH4NY9Qs-hXvmBxHNtrwA1RBOx4YzAriBdfZTNCghFsl6sU/s320/retweet-button-compact.JPG" border="0" alt="Retweet Compact Button - How to add to Blogger"id="BLOGGER_PHOTO_ID_5389085142191474178" /><div style="width: 300px; height: 90px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"><pre><div style="float:right;padding:4px;"><br /><script type="text/javascript"><br />tweetmeme_style = 'compact'; <br />tweetmeme_url = '<data:post.url/>'; <br />tweetmeme_source = '<font color="red">your_twitter_user_name</font color>';<br /></script><br /><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><br /></script> </div></pre></div><br /><br /><li><strong>Compact Retweet Button - Left Aligned</strong><br /><img style="cursor:pointer; cursor:hand;width: 80px; height: 26px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH33GDAilNvrjr546Fz409TuyB4Jp7CeLtFFC7hdoLok-73wGBFga7Wq68NQEAhzfLfHCT3ExDn8xYSUgW4tJ8ALVvXdpJQH4NY9Qs-hXvmBxHNtrwA1RBOx4YzAriBdfZTNCghFsl6sU/s320/retweet-button-compact.JPG" border="0" alt="Retweet Compact Button - How to add to Blogger"id="BLOGGER_PHOTO_ID_5389085142191474178" /><div style="width: 300px; height: 90px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"><pre><div style="float:left;padding:4px;"><br /><script type="text/javascript"><br />tweetmeme_style = 'compact'; <br />tweetmeme_url = '<data:post.url/>'; <br />tweetmeme_source = '<font color="red">your_twitter_user_name</font color>';<br /></script><br /><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><br /></script> </div></pre></div><br /></ul><br /><li>Change <font color="red">your_twitter_user_name</font color> for your actual Twitter username. For instance I would enter <em>BlogWizz</em><br /><br /><li>Click on Save Template<br /><br /><li>Click on View blog to admire your Tweetmeme Retweet button in your Blogger posts</ol><br /><strong>Tips and Troubleshooting</strong><br /><ul><li><strong>To Add Retweet Button Below Blogger Post</strong><br />If you want the button to appear at the bottom of Blogger posts instead of just below the post title locate the first instance of the following code and then paste the code for your chosen button immediately after this line: (don't forget to change your Twitter username as in Step 7)<br /><br /><blockquote><pre><data:post.body/></pre></blockquote><br /><li><strong>To Have the Retweet Button Appear on Post Pages Only in Blogger</strong><br />If you want the button to only appear on the post pages and not the home page you will need to enclose the button code in an <em>if statement</em>. See below for an example of what the full code would look like with this extra code. <br /><br /><blockquote><pre><b:if cond='data:blog.pageType == "item"'><br /></b:if></pre></blockquote><br />Thus the full code for a right-aligned large Retweet button which only appears on the individual post pages and not the home page would be:<br /><br /><blockquote><pre><b:if cond='data:blog.pageType == "item"'><br /><div style="float:right;padding:4px;"><br /><script type="text/javascript"><br />tweetmeme_url = '<data:post.url/>'; <br />tweetmeme_source = '<font color="red">your_twitter_user_name</font color>';<br /></script><br /><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><br /></script> </div><br /></b:if></pre></blockquote></ul><br />In this tutorial you have learned how to add a Tweetmeme Retweet Button to your Blogger posts. The Retweet button will encourage your blog readers to retweet your content on Twitter thereby increasing your blog traffic. I have provided the code for both a large and compact button with the option of left or right alignment. The button appears just below the post title and counts the number of retweets of your Blogger post. I have also included details of how to add the Tweetmeme Retweet button to the foot of your Blogger blog and how to add the button to post pages only.<br /><br /><br /><strong>Related Articles</strong><br /><a href="http://blogknowhow.blogspot.com/2009/03/blogknowhow-list-of-blogger-tutorials.html">List of Blog Know How Tutorials for Blogger Blogs</a><br /><a href="http://blogknowhow.blogspot.com/2009/06/tips-add-digg-button-blogger-blogspot.html">Tips to Add a Digg Button to Blogger Blogspot</a><br /><a href="http://blogknowhow.blogspot.com/2009/09/add-twitter-updates-widget-to-blogger.html">Add a Twitter Updates Widget to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/07/add-twitter-badge-button-to-blogger.html">Add Twitter Button or Twitter Badge to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/07/add-twitter-followers-counter-blogger.html">Add Twitter Followers Counter to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/02/add-social-bookmarking-button-blogger.html">Add a Social Bookmarking Button to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/08/add-social-bookmark-buttons-to-blogger.html">Add Social Bookmark Buttons to Blogger</a><br /><a href="http://blogknowhow.blogspot.com/2009/08/free-social-bookmark-buttons-blogger.html">Best Free Social Bookmark Icon Sets for Blogger</a><div class="blogger-post-footer"><p>Copyright Blog Know How 2009.
Please do not reproduce any material contained in this blog without the express permission of Blog Know How</p></div>The Whizzhttp://www.blogger.com/profile/11640609198263053315noreply@blogger.com16