Adding a separator line between your posts

<b>This article shows how to put a horizontal separator line between posts in your blog, using either HTML's line command, or CSS rules.  It also has suggestions about ways of formatting these lines using different colours and line-styles.</b> <br /><b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxd7wl0pz3dsBJZZL9Uplhlr1EFXnMVSbsBPlQvJLj8RA1O8V1a-u9rZFN3T9IqHzoM551a-OOB6_NLjbnwLPAa_FhTdTWWaQT62efC9Ar4us2juAzE0XDGoYgWHDDIh9vx65kqD-L8QsN/s363/lines-between-posts-pages-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxd7wl0pz3dsBJZZL9Uplhlr1EFXnMVSbsBPlQvJLj8RA1O8V1a-u9rZFN3T9IqHzoM551a-OOB6_NLjbnwLPAa_FhTdTWWaQT62efC9Ar4us2juAzE0XDGoYgWHDDIh9vx65kqD-L8QsN/s320/lines-between-posts-pages-blogger.png" width="320" /></a></div><br />There are at least four approaches to choose from if you want to put a divider between your posts in Blogger.  These days, I prefer the CSS-rule approach, because it's so easy and flexible.  But I've shown details of a few other methods too:<br /><ul><li><b>Manually</b> add a horizontal line command to each post</li><li>Use the <b>post-footer colour block</b> as a line (in Designer templates only)</li><li>Add the HTML command for a line to the main section of your <b>template</b>, in one of the post-footers </li><li>Add a top or bottom-border to the <b>CSS rule</b> that formats the body of your posts.</li></ul>The following sections give more detail about each option, including how to apply them to your blog, and their advantages and disadvantages.<br /><br /><br /><h2>Manually add a line to each post</h2>When you are editing a post, you can put a horizontal line anywhere in the contents.<br /><br />In the post-editor:<br /><br /><ul><li>If  Post options > Compose Settings is set to  Interpret typed HTML, then you can just type <hr />, and Blogger will place a line like this in your post.</li></ul><br /><br /><ul><li>If  Post options > Compose Settings is set to  Show HTML literally, then you need to switch to the HTML tab before you type <hr />.</li></ul><br /><br /><b>Disadvantage: </b>If your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items will be underneath any line that you add manually to a post.<br /><br /><br /><h2>Designer Theme - post footer colour</h2>If your blog has a designer theme (ref, <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">What sort of theme have I got</a>), then the <b>Theme Designer > Advanced </b>tab may have an option for setting the <b>background colour of the post-footer</b> (depending on which theme you are using).<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl0UCacyUeJd35mGRwzUAPMEDZp2yhoceaPDBvC6qsPFa2fex2T-Ij_EXyEdRgwRIobfXXzwvUg7fAKmhUnFL-wpjzEvzvKZozQIz9ETj39VB4aVkj1Sny61RjRsQrEtXVhei0NUwm3I7k/s1600/4+-+designer+template+approach.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl0UCacyUeJd35mGRwzUAPMEDZp2yhoceaPDBvC6qsPFa2fex2T-Ij_EXyEdRgwRIobfXXzwvUg7fAKmhUnFL-wpjzEvzvKZozQIz9ETj39VB4aVkj1Sny61RjRsQrEtXVhei0NUwm3I7k/s400/4+-+designer+template+approach.PNG" width="400" /></a></div><br /><br />If you use a dark colour (or have a dark background and use a light color), this makes the post-footer look like a line.<br /><br /><b>Disadvantage:  </b>The "line" might be a bit thicker than you like.   And if your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items are shown right inside the footer line.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjRBE4Ssx2MNviUqBfXj7k8Ba8C0jNkjl-j6c4G4Hv2DU_NNcH4wMn9Hm4LdFW3t5qgKOpqFr-YqC30TR1-V5fKwv7pTLX8Jh0wd7cgaHf1p7EJUKZuxzBMUtT-TWqKT-Xwj3PGzXhmtR/s1600/5+-+how+the+DT+approach+looks.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjRBE4Ssx2MNviUqBfXj7k8Ba8C0jNkjl-j6c4G4Hv2DU_NNcH4wMn9Hm4LdFW3t5qgKOpqFr-YqC30TR1-V5fKwv7pTLX8Jh0wd7cgaHf1p7EJUKZuxzBMUtT-TWqKT-Xwj3PGzXhmtR/s400/5+-+how+the+DT+approach+looks.PNG" width="400" /></a></div><br /><br /><br /><h2>Add a line-command to your theme</h2>If you don't like the other two approaches, you can change your theme to add a horizontal line.  To do this:<br /><br />Edit your blog's theme <a href="https://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">in the usual way</a>.<br /><br />Most themes have three footer lines:  what is in each one depends on the theme, and how you have arranged the items in the <b>Layout > Blog Posts</b> editor.  Look at the theme for code like this:<br /><blockquote><i>       <div class='<b>post-footer-line post-footer-line-2</b>'><span class='post-labels'></i><br /><i>        <b:if cond='data:post.labels'></i><br /><i>          <data:postLabelsLabel/></i><br /><i>          <b:loop values='data:post.labels' var='label'></i><br /><i>            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></i><br /><i>          </b:loop></i><br /><i>        </b:if></i><br /><i>      </span> </div></i></blockquote>OR <br /><blockquote><i> <div class='<b>post-footer-line post-footer-line-3</b>'/></i><br /><i>    </div> </i></blockquote><br />Add the <hr /> command to which ever of the footer-lines you want it in, for example<br /><blockquote><i> <div class='post-footer-line post-footer-line-3'/><br /><b><hr /></b></i><br /><i>    </div> </i></blockquote><br /><b>Advantage:  </b>you can easily place the divider line anywhere you want it, relative to the other items in your post-footer. <br /><b><br /></b><br /><b>Disadvantage:</b>  you need to modify your theme, and this does have <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">some risks</a>.  And it does use the <hr /> tag which some people (CSS purists) suggest is not a good idea.<br /><br /><br /><br /><h2>Enhancements to the basic <hr /> command</h2>There are lots of ways you can modify the <hr / > code.   For example<br /><br /><hr style="text-align: left;" /> -  to left-align it<br /><br /><hr style="color: red;" /> -  to change the colour <br /><hr style="width: 50%;" /> -  to make it narrower<br /><br />See w3c.schools<a href="http://www.w3schools.com/tags/tag_hr.asp" target="_blank"> <hr /> tag</a> for more information.  <br /><br /><br /><br /><h2>Add a border to the CSS rule that formats your posts</h2><div style="background-color: #4c1130; color: white;"><b><span style="font-size: x-large;"></span></b></div>The cascading-style-sheet rules in your theme control most aspects of how your blog looks.   They can be a very powerful way to control how your blog looks - and give a quick way to add a line between your posts.<br /><br /><h3>What to do</h3>If you have a designer template, then the quick way to make this change is to <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">add a CSS rule to your theme</a>.  The rule code to add is:<br /><blockquote style="background-color: #ead1dc;">.post-body<br />{ <br />border-bottom:1px dotted #666666; <br />}</blockquote><br />or this one if you want the border at the top of each post:<br /><blockquote style="background-color: #ead1dc;">.post-body<br />{ <br />border-top:1px dotted #666666; <br />}</blockquote><br /><h3>Making more complex changes</h3>The CSS rule that controls how the "body" of your posts look is .post-body.   To make changes to it:<br /><br />1 Edit your theme in the usual way.<br /><br />3 <b>Look for .post-body</b> in the rules section . It will look something like this, but  the exact lines and values may be different:<br /><blockquote style="background-color: #ead1dc;">.post-body { <br />margin-top: 0;<br />margin-$endSide: 2px;<br />margin-bottom: 0;<br />margin-$startSide: 3px;<br />}</blockquote> 4  If you <b>can</b> find a .post-body rule, then add this line, just before the } character.<br /><blockquote style="background-color: #ead1dc;">border-bottom:1px dotted #666666;</blockquote>5    If you <b>cannot</b> find a  .post-body statement in the rules section of your template, then you need to <b>add it</b>.<br /><br />Put it somewhere:<br /><blockquote><b>After</b>    <b:skin><![CDATA[/*<br /><br /><b>Before</b>  ]]></b:skin> </blockquote><br />But not in the middle of any other rules: look at how the rest of that section of your template is laid out for clues.<br /><br />The statement to add is something like the following, though you may want to try out different values for parts of it.:<br /><blockquote style="background-color: #ead1dc;">.post-body {<br />border-bottom:1px dotted #666666;<br />margin-top: 0;<br />margin-$endSide: 2px;<br />margin-bottom: 0;<br />margin-$startSide: 3px;<br />padding-top:10px;<br />margin-top:20px;<br />} </blockquote><span style="font-size: large;"><b><br /></b></span><br /><h3>Alternative formats</h3>The #666666 means draw the line in black - you may like to use a different colour, or use the word "solid" instead of "dotted" to make a firmer looking line.<br /><br />As an alternative, you can say border-top:1px dotted #666666; - this puts a line at the top of the body of each post, just underneath the title.<br /><br /><hr /><br /><h2>Related Articles</h2><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">What sort of theme have I got</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Disadvantages of editing your blog's theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rules to your theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/centering-post-title-or-page-title-in.html">Centering the Post-title or Page-title</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Putting HTML from elsewhere into your blog.</a>

Adding a separator line between your posts

This article shows how to put a horizontal separator line between posts in your blog, using either HTML's line command, or CSS rules.  I...

Read more »

Lining up the first post and the sidebar

<b>In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and the sidebar are not aligned.  This article explains how to adjust the gap, and so remove the problem</b><b>.</b><br /><b><br /></b> <b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-URJV_8Kkdj62s3msX_lI61FTSKfPcW_cNVB7uqDayYGk3nAoKB8B6iqFYOp6PoI4_5nJcs3X7ZPOYIjObmyeySgcxyhtsfZpUAEgUwNITjMRSn_LD002c3AQUJX3MHYRbkK0MyC15yw/s1600/gap-between-header-and-post-heading-layout-reduction-mind-the-gap.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-URJV_8Kkdj62s3msX_lI61FTSKfPcW_cNVB7uqDayYGk3nAoKB8B6iqFYOp6PoI4_5nJcs3X7ZPOYIjObmyeySgcxyhtsfZpUAEgUwNITjMRSn_LD002c3AQUJX3MHYRbkK0MyC15yw/s320/gap-between-header-and-post-heading-layout-reduction-mind-the-gap.png" width="320" /></a></div>In the <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/what-template-does-your-blog-use-quick.html">themes that Blogger provides</a>, as well as all third-party themes, the amount of space between elements on the screen is not accidental:   designers put a <b><i>lot</i></b> of effort into working out what spacing will look good, and then finding ways to put CSS code into the template so that the spacing they want is shown in any browser software that Blogger supports.<br /><br />But there are times when you may want to change this spacing, and this is easy to do, provided you are willing to accept the <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">disadvantages of editing your theme</a>, and if  you can work out exactly which part of the template code to change.<br /><br /><br /><h2>The pre-Header gap</h2>A pet-hate of mine is the blank space above the first post in many Designer themes, which looks strange unless you put something else in to the space.  In the example below, there is an <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/setting-up-adsense-on-your-blog.html">AdSense</a> link-unit in the area highlighted in red, just to fill in the empty space:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3r91rg9aMbdEW3qBYr9zctIDHi-A3qZv7LX0snwvAESaW7DxwbeMf5uORNtSiLq26gVN9v3oJ2aLn-XLvshYDe5Kg-fY5xZslCrABFDD27Lirf7R3JWEJhSgVJ-HlCoc5YGOF_42KP9J/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img al="picture of blog screen with a big empty gap above the first post header" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3r91rg9aMbdEW3qBYr9zctIDHi-A3qZv7LX0snwvAESaW7DxwbeMf5uORNtSiLq26gVN9v3oJ2aLn-XLvshYDe5Kg-fY5xZslCrABFDD27Lirf7R3JWEJhSgVJ-HlCoc5YGOF_42KP9J/" width="90%"></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div><br /><br /><h2>How to change the gap above the post header in Designer themes</h2>1  <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html"><b>Edit</b> your theme</a>  in the usual way.<br /><br />2  <b>Find</b> this code<br /><blockquote style="background-color: #ead1dc;"><span class="Apple-style-span">h3.post-title, .comments h4 {<br />  font: $(post.title.font);<br />  <b>margin: .75em 0 0</b>;<br />}</span></blockquote>The exact numbers used in your template may be different:  the key thing is to find the CSS command that is putting a margin above the post header.  In the template that I took this example from (Simple), it's the "0.75em" - which puts 75% of the space of a the post-header characters as a blank space above the header.<br /><br /><br />3   <b>Change the <i>first</i> margin value to get the result you want</b><br />How much to change it by depends on your template, but in some cases I've used 0 successfully.<br /><br /><b>What the numbers mean</b><br />In CSS, when a margin statement has three numbers beside it, they refer to the<br /><ul><li>top, </li><li>left-and-right, </li><li>bottom </li></ul>margins respectively.   So if you want to do something else to the post-header, eg indent it, this is the place to make changes<br /><br /><br />4   Click <b>Preview</b> to see what the blog will look like - keep doing this until you get the right setting.<br /><br /><br />5   When you are happy with the spacing, click <b>Save Theme</b> to apply the changes to your blog.   (Or Clear Edits if you cannot get it right and need to stop trying).<br /><br /><br />Note:  If you make a big change to your theme, it's a good idea to check out out in at least one version of the other browsers that your readers use - usually means current versions of Internet Explorer, Firefox and Chrome.   But it may depend on your niche - a tool like <a href="http://blogger-hints-and-tips.blogspot.com/2011/02/setting-up-google-analytics-for-your.html">Google Analytics</a> will give you some statistics about what browsers, and screen sizes, your visitors have.<br /><br />Also, it is possible to make this change by just <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">installing a new CSS rule</a> for h3.post-title into your blog - because the latest one found is always the one used, and because the template designer's Add CSS function puts the rules you add after the othr rules.   I don't recommend it here, though, because working with the original rule makes it easier to see the effect of making changes to any of the values in the area.<br /><br /><br /><h2>Other affected spacing</h2>If you have more than one post per page, then this change will also reduce the amount of space between the bottom of one post and the header of the next one.   Depending on your theme, you want want to add a little more space into the margin statement in the <b><i>bottom</i></b> of the post-footer, eg<br /><blockquote style="background-color: #ead1dc;"><span class="Apple-style-span">.post-footer {<br />  margin: 20px -2px <b><i>20</i></b>;<br />  padding: 5px 10px;<br />}</span></blockquote><br />If you display comments in your blog, you also need to check the impact on comments, because the original command applied to h4 items in comments as well.<br /><br />If you are making a lot of changes, you may want to <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">make a test blog</a>, and <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">plan your changes in private</a> before applying them to your main blog.<br /><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2011/02/setting-up-google-analytics-for-your.html">Setting up Google Analytics to get statistics about for your visitors</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rule to your blog's theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Advantages and disadvantages of editing your theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">How to edit your blogger theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/what-template-does-your-blog-use-quick.html">Who did your blogger theme come from - the quick way of finding out</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">Making a test-blog for template changes</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">Planning changes to your blog in private</a>

Lining up the first post and the sidebar

In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and ...

Read more »

How to centre-align the sharing-icons from AddThis in Blogger

<b>This article shows how to get and then centre-align the row of sharing items that you can get from AddThis (and it's likely that a similar technique applies to sharing buttons from other services like ShareThis, too).</b> <br /><b><br /></b><b><br /></b><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6-IM7wePSrZU9h0l5alnMbsUQ6tlzHMOk6IkzHQUhn4i4qVknQpClQtYdP0folfijk0gEm9dwhHv6wJvv7_NajCXsysL77EjibCho0VECntRqdkRgQ7mCoVYF5FEVtllDmugZ4qLVuBF/s800-Ic42/how-to-centre-all-this-social-sharing-buttons-in-blog.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6-IM7wePSrZU9h0l5alnMbsUQ6tlzHMOk6IkzHQUhn4i4qVknQpClQtYdP0folfijk0gEm9dwhHv6wJvv7_NajCXsysL77EjibCho0VECntRqdkRgQ7mCoVYF5FEVtllDmugZ4qLVuBF/s800-Ic42/how-to-centre-all-this-social-sharing-buttons-in-blog.png" width="320" /></a></div>If you think that Blogger's own social sharing buttons a just a bit too small and difficult position, then you may decide to use a service like AddThis to generate buttons that are more elegant all round.<br /><br />Signing up with AddThis is easy: just log in to your Blogger account, and in a separate tab open up AddThis.com. Choose Create Account, and then Continue with Google. This links your Google account and your AddThis account, and is the easiest approach - but there are other options too, like creating your account with your Facebook or Twitter accounts, or even just signing up the old fashioned way with your email address.<br /><br />Once you have signed up and chosen a plan (personally I just the free "Basic" plan), you need to actually install the AddThis buttons on your site. To do this:<br /><ul><li>Select one or more sets of sharing buttons (from the options available to your account type),</li><li>Choose the settings which apply to that set of buttons</li><li>Choose Activate (button in the bottom right corner of the setting screen), and</li><li>Install the code that AddThis gave you into your blog.</li></ul><br />Installing the code that AddThis gave you is pretty much like <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">installing any other piece of code</a>.   Typically the code you have to install has two parts:<br /><br />For the piece that says:<br /><blockquote class="tr_bq"><b class="widget-code-stepnumber" data-reactid=".c.0.0.1.1.2.1.0.0" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Step 1: </b><span data-reactid=".c.0.0.1.1.2.1.0.1" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #666666; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;"></span><span data-reactid=".c.0.0.1.1.2.1.0.2" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #666666; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Add the following code to the <body> of your website.</span></blockquote>Search for "<body"  (note:  no closing angle-bracket because some templates have extra instructions in there), and then put the code from AddThis after the angle bracket that goes with the <body<br /><br /><br />For the piece that says:<br /><blockquote class="tr_bq"><b class="widget-code-stepnumber" data-reactid=".c.0.0.1.1.2.2.0.0" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Step 2: </b><span data-reactid=".c.0.0.1.1.2.2.0.1" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #666666; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Paste this code into whichever page you would like this tool to show up.</span></blockquote>Find the location in your template that you would like the gadget (eg an HTM gadget, or inside the post statement itself - read more about the options), and copy and paste the relevant code from AddThis.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUx4NVcXHXdwPWTiGToaYibevYJA4Hy7h4fJvqSXd1IAzoglA0wIh9WMNGLgxN5mHRclbu1-FTsk83kw6cF47pIe9GfkhojYnLYk6SnIwcp6I-ZGXmQKzuXiLRLvgeYYRBCKLCiEHgcPNa/s720-Ic42/html-to-put-add-this-into-blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUx4NVcXHXdwPWTiGToaYibevYJA4Hy7h4fJvqSXd1IAzoglA0wIh9WMNGLgxN5mHRclbu1-FTsk83kw6cF47pIe9GfkhojYnLYk6SnIwcp6I-ZGXmQKzuXiLRLvgeYYRBCKLCiEHgcPNa/s720-Ic42/html-to-put-add-this-into-blogger.PNG" width="640" /></a></div><br /><br /><h2>But it's not in the right place.</h2>If you install the code as is from AddThis, you will find that the row of sharing buttons is pretty tightly linked up with the rest of the page, and left-aligned.   Fortunately this is easy to change.<br /><br /><br /><h2>How to centre (or right align) rows of buttons from AddThis </h2>To put the set of sharing buttons from AddThis at the middle of the page, you need to surround the 2nd piece of code from AddThis with another Div statement, like the one in bold below:<br /><blockquote class="tr_bq"><b><div style = 'width:100%; text-align: center; margin-bottom:3em; margin-top:2em;'></b><!-- Go to www.addthis.com/dashboard to customize your tools --><br /><div class="addthis_sharing_toolbox"></div><br /><b></div></b></blockquote>The exact details to use depend on how exactly you want to set up your sharing-bar form AddThis.  I wanted it to be centre-aligned on one of my sites, with some extra white space above and below, so I used these commands:<br /><br /><ul><li><b>width:100%  -  </b>says to use all of the page-width in deciding where to put the sharing bar  (by detfault, it would just use the width of the sharing bar itself</li></ul><ul><li><b>text-align: centre</b>   -   means that he bar will be put in the middle</li></ul><ul><li><b>margin-bottom and </b><b>margin-top</b><b>   </b>put some extra space above and below the gadget, so it sticks out more-so.</li></ul><br /><br />But you may use a different approach, depending on what your blog is trying to achieve.<br /><div style="margin-bottom: 2em; margin-top: 3em; text-align: center; width: 100%;"><div class="addthis_sharing_toolbox"></div></div><h2>What your readers see</h2><h4>Visitors using a web-browsers</h4><div>Will see your AddThis buttons, as you defined them</div><div><br /></div><h4>Readers who subscribe to your blog's RSS feed</h4><div>Will not see your blog's AddThis sharing buttons, unless they happen to click through from their feed-reader to your blog.</div><div><br /></div><h4>Readers who follow-by-email </h4><div>Will not see your standard social sharing buttons at all, unless they visit your site.   (AddThis does have some email newsletter buttons, but these don't automatically go into emails generated from Blogger).<br /><br /><br /></div><div><h2>Is it worth it?</h2>For what it's worth, I recently made the change from custom sharing buttons that I'd made myself to classier looking ones from AddThis, and saw quite a jump (50% or more) in the number of social shares, across all my sites. <br /><br />YMMY, of course.<br /><br /></div><div><br /></div><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Installing 3rd party code into Blogger</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2014/08/how-to-put-pictures-side-by--side-using-html.html">Using Div statements to control layout</a>

How to centre-align the sharing-icons from AddThis in Blogger

This article shows how to get and then centre-align the row of sharing items that you can get from AddThis (and it's likely that a simi...

Read more »

How to tick the "expand widgets" checkbox in Blogger's new template editor

<b>This QuickTip is about finding the "expand widgets" option in Blogger's template editor.</b><br /><br /><br /><div style="clear: both;"></div><a name="more"></a><br />Today, Blogger Buzz announced <a href="http://buzz.blogger.com/2013/04/improvements-to-blogger-template-html.html" target="_blank">a new version of the template editor</a>. <br /><br />This is exciting in all sorts of ways, including that it implies that Blogger will continue to support template editing:   some people suspected that <a href="http://blogger-hints-and-tips.blogspot.com/2011/09/dynamic-templates-turning-them-on-in.html">Dynamic Templates</a>, which don't allow template editing, might be the way of the future.<br /><br />But there's one immediate issue: many of the existing "How to do XXXX in Blogger" tutorials include statements like<br /><blockquote>Open your template for editing, and tick the "Expand widgets" checkbox<br /><br />or<br /><br />Open your template for editing, and make sure that "Expand widgets" isn't ticked</blockquote><br /><br />However <b>today's changes have deleted the Expand Widgets checkbox</b>.<br /><br />So - what do you do if you need to expand the widgets?   Luckily, this is one of the things that has been made easier, once you find out where the option has moved to.<br /><br /><br /><h2>How to see expanded code for a gadget / widget</h2><br />The equivalent of ticking the "expand" check-box is to:<br /><br /><br />1)    <b>Find the gadgetID</b> <a href="http://blogger-hints-and-tips.blogspot.com/2012/04/finding-gadget-id-value-for-widget-in.html">in the usual way</a>.<br /><br /><br />2)   Open the template for editing, and <b>find the reference</b> to the widget / gadgetID in the code<br />(Either using the browser's find feature - or  the "Jump to Widget" feature that is now in the post editor.)<br /><br /><br />3)    <b>Click on the fold marker</b> for that gadget.<br />This is the horizontal arrow ( ? ) which is in the very left side of the editing window on the same line as the gadget name.<br /><br />Clicking it turns the sideways arrow into a down-arrow, and shows you the code that's included in that gadget - or at least as much of it as Blogger is going to let you see.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKOSmakPZuJYEZ455bRr8OQyd4DlR-dqfLKWoToDmQ8v-0bOrTO232WAW4zS6bLFMrR2YtXv2yFzxZmVsAZGH5CGg7QV1_C9MM-_2HxkRXJqtxXX0pxIvH3ac62eSvNGMepD33fE-I2n_z/s646/bh-edFold-750542.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKOSmakPZuJYEZ455bRr8OQyd4DlR-dqfLKWoToDmQ8v-0bOrTO232WAW4zS6bLFMrR2YtXv2yFzxZmVsAZGH5CGg7QV1_C9MM-_2HxkRXJqtxXX0pxIvH3ac62eSvNGMepD33fE-I2n_z/s640/bh-edFold-750542.png" width="640" /></a></div><br /><br />To un-tick the expand check-widgets checkbox, just make sure that all the fold-arrows are horizontal. (they work as toggles - clicking them changes them from one expanded to contracted, or vice versa).<br /><br /><br /><h2>What else has changed?</h2>I'll be updating Blogger-HAT's main "<a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">How to edit your Blogger template</a>" article soon - this is just a quick heads-up to start with. <br /><br />If you've found any more features of the new template editor that you like (or don't) or which need more explanation then drop a comment below and I'll see what I can do.

How to tick the "expand widgets" checkbox in Blogger's new template editor

This QuickTip is about finding the "expand widgets" option in Blogger's template editor. Today, Blogger Buzz announced a new v...

Read more »