This is where I keep the answers to "sorta frequently asked questions" for my tutorials. These are like special features, so don't start here! The original tutorials are linked beneath the title of each appendix item. If you have questions about any appendix item, please comment in the original tutorial's thread.
Enabling Post Timestamps
Appendix to the tutorial "Make Your Own Tweetable Links for Blogger"The tweetable links tutorial works best if you have your post timestamps enabled. To enable them, go to Layout and click the "Blog Posts" gadget. On the popup window, the timestamp is the third option under "Post Page Options" — I've highlighted it in yellow on the screenshot below.
The checkbox for this option must be checked to turn on your timestamps. You can choose from multiple different timestamp formats using the dropdown menu.
If you have any questions, please comment in the thread on the original post :)
« Back to the original post, "Make Your Own Tweetable Links for Blogger".Restrict Signature to Post Pages Only
Appendix to the tutorial "Automatic Post Signatures for Blogger"To restrict CSS signatures to your post pages you'll need to go into your blog's template. So first, back up your template!
To back up your template, go to "Template" and click the "Backup/Restore" button in the upper right.
On the next screen, click "Download full template" and save the .xml file to your computer.
After (and only after!) you have backed up your template, click the "Edit HTML" button beneath your "Live on Blog" screenshot.
Once you've opened your template, place your cursor over the code and click once. Press ctrl-f if you're on a PC or command-f if you're on a Mac to open a search box. Type .entry-content:after into the search box and press enter.
Your template will jump to your .entry-content:after CSS rule and highlight the selector in yellow.
Now, wrap it in <style> tags. Directly above the .entry-content:after line, add <style>. Directly below the closing curly brace } of the .entry-content:after rule, add </style>.
Next, we'll add the conditional tag. This is how you tell Blogger that you only want the signature images to appear on your post pages.
Add this line directly above the opening <style> tag you added in the last step:
<b:if cond='data:blog.pageType == "item"'>
Then, add a closing </b:if> tag directly below the closing </style> tag you added in the last step.
Next, select everything from the opening <b:if cond='data:blog.pageType == "item"'> tag to the closing </b:if> tag and cut it. Scroll all the way down to the bottom of your template and find the closing </html> tag.
Once you've found the closing </html> tag, insert your cursor between the < of the </html> tag and the > of the element beside it (in the example images, it's </b:section-contents> — it may be the same in your blog, too, but if it's not, don't panic. Just make sure you're placing the cursor right before the </html> tag).
Now, paste in the entire group of rules you cut in the last step.
Then, press the "Save template" button to apply the change to your blog.
Check your home page first. You should not see your signature images on the home page. Next, check a post and you should see your signature image at the bottom of the post.
If you have any questions, please comment in the thread on the original post :)
« Back to the original post, "Automatic Post Signatures for Blogger"Signatures with LinkWithin or nRelate
Appendix to the tutorial "Automatic Post Signatures for Blogger"If you use LinkWithin, nRelate, or another "related posts" widget, your signature image may appear below the related posts thumbnails. Here's how to move it above your related posts thumbnails.
Positioning Signatures with LinkWithin or nRelate
You can move the signature above your related posts widget with one quick change to the first line of the CSS. Everything else stays the same.
LinkWithin
To place your signature image above a LinkWithin gadget, change the first line of the CSS to:
.linkwithin_outer:before {
nRelate
To place your signature image above an nRelate gadget, change the first line of the CSS to:
.nr_clear:before {
If you have any questions, please comment in the thread on the original post :)
« Back to the original post, "Automatic Post Signatures for Blogger"Signatures for Group Blogs
Appendix to the tutorial "Automatic Post Signatures for Blogger"This method adds a signature image for each author in a group blog. In order for this to work, each author needs to post from their own Blogger account. This won't work if each post is posted to the blog from one account.
In this example, I'm going to show how to add signatures for two different authors. If you have more than two authors you can add more!
First, upload your signature to your Picasa album for your blog and save each image's URL (see the original tutorial for instructions).
Next, back up your template. Go to "Template" and click the "Backup/Restore" button in the upper right.
On the next screen, click "Download full template" and save the .xml file to your computer.
After (and only after!) you have backed up your template, click the "Edit HTML" button beneath your "Live on Blog" screenshot.
Hold your cursor over the template code, click once, then press CTRL+F (PC) or Command+F (Mac) to open a search box. Enter this into the search box:
<b:if cond='data:post.hasJumpLink'>
Your template will jump to this section of code and highlight the first line in yellow:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/</a>
</div>
</b:if>
Paste this code directly below the closing </b:if> in that block of code:
<b:if cond='data:post.author == "AUTHOR ONE"'>
<div class='signature'>
</div>
</b:if>
<b:if cond='data:post.author == "AUTHOR TWO"'>
<div class='signature2'>
</div>
</b:if>
Replace AUTHOR ONE and AUTHOR TWO with the name of each author as it appears in the "Posted by" line in the footer of their posts.
So for example, I'd enter my own name like this:
<b:if cond='data:post.author == "Marie Mosley"'>
And I'd add my (non-existent) co-author ObiWan, who doesn't have any spaces in his account name, like this:
<b:if cond='data:post.author == "ObiWan"'>
After you've filled in your author names, press the "Save Template" button. You won't see anything appear on your blog just yet.
If you have more than two authors, add author 3, 4, 5, etc., in the same way. Be sure to give each author an individual div class — for example, the third author's div should have the class 'signature3'.
Once you've saved your template, go to Template > Customize > Advanced > Add CSS and paste this into the "Add Custom CSS" box:
.signature {
height: SIGNATURE ONE HEIGHT IN PX;
background: transparent url(SIGNATURE-IMAGE-ONE-URL) center no-repeat;
}
.signature2 {
height: SIGNATURE 2 HEIGHT IN PX;
background: transparent url(SIGNATURE-IMAGE-TWO-URL) center no-repeat;
}
If you have more than two authors, be sure to add CSS rules for each of them, too.
Press the "Apply to Blog" button, then go to your blog and check the posts by each of your authors. You should see their signatures at the end of each of their posts. Nicely done!
If you have any questions, please comment in the thread on the original post :)
« Back to the original post, "Automatic Post Signatures for Blogger"Conditionally Hide Google Friend Connect or Google Plus Badge Gadgets
Appendix to the tutorial "How to Show and Hide Blogger Sidebar Gadgets"The Google Friend Connect and Google Plus Badge gadets are iframes, so the process for hiding them is a bit more complicated. We'll need a combination of conditional tags and CSS to hide them.
First, back up your template (instructions here). Do not skip the backup.
Open your template by pressing the "Edit HTML" button under your "Live on Blog" screenshot. Search your template for the </b:template-skin> line. To search, hover your cursor over the code, click once, then press CTRL and F at the same time (PC) or Command and F (Mac) to open the search box. Enter </b:template-skin> in the search box and press enter.
Immediately below the </b:template-skin> line you'll enter a code snippet to remove the gadgets.
I'm demonstrating hiding the gadget from the home page in these examples. You can choose a different conditional from the conditionals tutorial if you want to hide it from a different page.
To hide Google Friend Connect, use this conditional:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Followers1 { display: none !important; }
</style>
</b:if>
To hide the Google Plus Badge, use this code snippet:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#PlusBadge1 { display: none !important; }
</style>
</b:if>
If you have any questions, please comment in the thread on the original post :)
« Back to the original post, "How to Show and Hide Blogger Sidebar Gadgets"Hide "Empty" Gadgets on Awesome, Inc.
The "Awesome, Inc." template adds a border and shadow to every gadget, even those that don't have a title or any visible content. You can hide those gadgets with a little bit of CSS.
While signed in to your Blogger account, visit your blog's home page. Find the gadget that should be hidden, and hover your cursor over the wrench & screwdriver icon that appears at the bottom right edge of the gadget. While you're hovering the icon, you should see a URL appear at the lower left of your browser window. Look for "widgetID=" in that URL.
The HTML number after "widgetID=" is your widget's ID.
Write down or copy your widgetID, then go to Template > Customize > Advanced > Add CSS.
In the "Add CSS" window, enter this bit of CSS, replacing WIDGETIDHERE with your actual widget ID:
#WIDGETIDHERE { display: none; }For example, if I were hiding my HTML1 widget, my CSS rule would look like this:
#HTML1 { display: none; }After you've entered the CSS, press the orange "Apply to Blog" button to save your changes.
