BP Web News and Tips

Adding a Retweet Button to Single Posts

2009-11-29T14:30:00.005-05:00

Continuing the theme of selectively showing widgets and stuff, I added a retweet button on single posts only. The button appears just below the post title.

If you have one or several full posts on your homepage then you want a retweet icon for each one! But if you use the readmore excepts then you don't want 7 or 8 buttons on the homepage. Besides, who would tweet before reading the entire post?

It's super easy to do, especially if you use this excellent post at BloggerPlugins.org. I don't believe in reinventing the wheel (or copying it either). Aneesh gives you code for positioning the button on the top left or right using a full icon like below or a compacted one (takes up one thin line).I opted for the left side since many of my images are aligned on the right.

If you want the button on your homepage then just follow Aneesh's tutorial and you're done! Otherwise, go there to select your code, add your Twitter account's url, post the code in your template. Don't forget to leave a comment on his post! Preview your template and you'll see the icon on your excerpts --- but not for long! While the template is open, follow the steps below. Basically you're adding conditional tags that limit the button to single pages only:

Step1: Place the code in green just before the div line in Aneesh's code:

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;padding:4px;'>

Step 2: Place the code in green just after the end div line:

</div>

</b:if>

Preview (now you will NOT see the buttons on the homepage), Save the template and Open a single page. Finished!

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

How to Show Blogger Table of Contents by Label Name

2009-11-06T14:00:00.003-05:00

One of our readers, goh left this question on the Beautiful Blogger Table of Contents tutorial:

"Wonder is this possible. Let's say if a blog post has 5 labels. Is it possible to create a TOC for each label and therefore have 5 TOC (one for each label) and in separate pages in blogspot?

I noticed that goh left a similar question on Techniqueal's post, table of contents- label sort tweak which linked to the TOC tutorial. Unfortunately Techniqueal's blog has been dormant since Dec, 2008 --- a real loss. Her tweak is about presenting the full TOC list, but sorted by label.

So, let's answer goh's query: YES!

The TOC works off the blog's RSS feed, plain and simple. It then sorts alphabetically and presents the list. If you need only certain labels then we can change the feed to specify a label instead of all.

Rather than bury the solution in comments, here are the steps:

Decide which labels you want and write down the exact spelling. Anything with a blank needs to be specified with %20. e.g "Blog Design" is "Blog%20Design" when we code the TOC.
Follow step 1 of the TOC tutorial to create styling (colors, etc) used by each page of TOC you'll create.
Follow step 2 of the tutorial and create a separate page(post with a very early date) for each label you intend to use in this way. Initially it shows all posts. Do this to verify you've implemented the steps correctly.
Change the feed in the TOC post code to show only your label. Find this code:

<script src="http://bpwebnews.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

*** remember you've changed the bpwebnews to your blog's url!

Replace the word in green only with

default/-/labelname

e.g. default/-/Blog%20Design
Publish the post. Repeat step 4 above for each page of labels.

I hope others can use this information. And goh, let us know how it turns out!

image credit:by Ivan Walsh

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

How to Make the most of Blogger's New Editor

2009-10-21T13:31:00.011-04:00

Blogger introduced its New Editor as part of the 10th Anniversary celebration. Even though the celebration started in August, some bloggers don't even know about it yet. Others want to wait for bugs to shake out. Those who have tried it give mixed reviews --- you either love it or hate it. I'm using it and can say I like the new Editor. I suggest you try it. The new features can solve one or two of those nagging, pet-peeve type problems.

How to switch to the New Editor

"To enable the new editor, first navigate to your blog's Settings | Basic tab. Near the bottom of the page you will see a field called Select Post Editor, and from there you simply need to select Updated Editor and save your settings." - overview in Blogger Help.

The selection will apply globally, across all of your blogs. If you decide you don't like the new Editor, then repeat your steps and select Old Editor instead.

Snapshots of the Toolbars

The new toolbar:

The old toolbars:

Obvious Differences in Toolbar icons:

Missing: ABC spell checker and uploading Video.
New: Undo/Redo arrows, Strikeout font, Text background, Remove formatting and Insert Jump Break (ReadMore).

New & Improved Features

Vast improvement of image handling.
Uploaded images show up as thumbnails, letting you add multiple images in one dialog. You can then close the dialog and add images throughout the post. The image gallery disappears after you close the post editing. This is great since now images are added at the insertion point of your cursor NOT at the top of the post !!!!!

You can then drag images around if you change your mind about the placement --- before you had to copy and paste the html to position the image and adjust sizes in the html --- the reason I published how to outsmart Blogger's image handling.

You can make images float left by dragging them left, right or center of the text. Also adjust sizes by clicking the image (small, med. large, x-large). If you right click the drag handles appear, letting your custom resize --- it's automatically changed in proportion.
Improved raw html handling.
Remember the extra blank (br) lines the old editor inserted in tables or around bullets? No more.The new editor preserves your tables, lists, and other advanced styling. You can specify line breaks setting by post rather than default across the blog. Use post options at the bottom of the edit window.
Easy way to define post summaries on the home page.
I jumped at this new feature, adding magazine style excerpts on the home page! See my post how to use Blogger's read more feature. While editing your new post, just click the page separator icon on the extreme at the point where you want the excerpt to end.
And there's more.
There are other features like the new post preview box which is much closer to the real width and font styling in your blog. (almost WYSIWYG). You can also increase the height size of the post edit window by dragging the right end. Etc, etc, etc.

It's very easy to switch back and forth, so why not at least use the New Editor for handling images and Html styling. Most of us have browsers which provide automatic spell checking. When you do try the New Editor, let me know which features you like best.

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

image by Smeerch

How to Hide Blogger Widgets on Home Page

2009-09-25T18:08:00.004-04:00

Recently I revised BPwebnews to show post excerpts on the homepage. The revision made the theme a magazine style, with 'read more' links. So now, there is no need to list recent articles in the sidebar on the home page. The 'recent posts' gadget is still useful when visitors arrive on a specific post --- they need only look in the sidebar for other articles that might interest them. This post will show you how to hide gadgets depending on which type of page is viewed.

Revise the template to hide recent posts on the home page.

Go to Blogger Dashboard, Select Layout, Edit Html.
Create a backup of your template by pressing "download full template."

Check the Expand Widget box so you can find the right code.
Basically, you'll find the section that contains the widget code, add a conditional if-statement at the start of the 'includable' and an end-if tag just before the close of the last 'includable for that widget.' Search for the lines in green and insert the four red lines. (copy and paste). You must put them in the proper position.

Here's all of the gadget code but you only need to add 2 lines after and 2 before the green sets. Remember your code might say gadget2 instead of gadget1, etc. Two of the red lines are optional comments, as they serve to identify the code if you need to remove it later. (
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2></b:if>
    <b:if cond='data:gadgetSnippet != ""'><data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:trackingUrl != ""'>
          <img expr:src='data:trackingUrl' height='1' width='1'/>
        </b:if><iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'>
        </iframe></div></b:if><b:else/><data:errorMessage/></b:if><b:include name='quickedit'/>



</b:if>
</b:includable>
Press the blue Preview button to see that the gadget is hidden on the home page.

If there are errors, just 'clear edits' and backtrack, otherwise 'save template.'

Summary

You can use this method for any gadget by expanding your template and searching for the title you used in the sidebar. If you want to show something only on the homepage and not on single posts then instead of
<b:if cond='data:blog.pageType == "item"'> use

<b:if cond='data:blog.url == data:blog.homepageUrl'>

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

How to Use Blogger's Integrated Read More Feature

2009-09-15T18:09:00.019-04:00

Mukund, who often leaves comments, suggested I try the new Blogger feature to create post summaries on the home page. Well, it was quick and easy! It's great for blogs that have long posts --- you can show magazine style summaries with just enough text to get readers to click the 'read more' link. Instead of 2 posts, I now have 6 highlighted on the home page.

This may be your dream solution since most Blogger template hacks are very complex and don't work for older posts! So try this. It will be a lot easier if you switch to the new Blogger editor. The editor has loads of new advancements on its own, including better image handling!

Follow instructions in Google's overview of the new editor.

Steps:

Edit your last few published posts. In each post, position the cursor in front of the sentence you want to excluding text from the summary. This is where the 'read more' link appears on the home page.
Click on the 'jump to' icon on the right side of the editor toolbar.

A separator appears across the page, dividing the summary and the rest of the text. This is the visual equivalent of the html code, to avoid accidental deletion. Of course you can move it around or delete it.
Publish the post.View the homepage. Click on the 'read more' to view the full text. If the 'read more' is not there you must update your template. This only happens if you've heavily modified your template.
Only do this step if the read more does not appear. This is the excerpt from Blogger help article for creating summaries:

To do this, access your blog's Layout | Edit HTML tab, and first backup your template by clicking the Download Full Template link at the top of the page. This will download an XML version of your template which you can upload later at any time if you need to.

After backing up your template, then click the Expand Widget Templates checkbox, and scan your HTML for the following snippet:

<data:post.body/>

Once you've located that code, paste the following snippet directly below it:

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if >

After you've pasted in the code, click Save and then you're done!
Then adjust your Layout, Settings, Formatting to show more posts. Don't forget your Adsense settings for ads between posts might also need to be changed.

For new posts, just use the jump icon as you compose your article! You can then change all of your posts over time to give summaries in search results as well.

Works like a charm. ~~Now I need to show recent posts gadget only on the single post pages --- it's now redundant on the home page. Oh well...~~ Took care of that with this post: Hiding widgets on the home page.

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

Keep Your Blogger Gadgets Current

2009-09-09T09:23:00.004-04:00

I'm sure you go to great pains to select and install widgets on your sidebar or footer. However, like most of us you may then forget about them --- unless they stop working. "If it ain't broke don't fix it." Here are some reasons to take a fresh look at your widgets with an eye toward pruning, replacing and adding. This can only make your overall design fresher and cleaner.

Technology Moves Forward - That includes Blogger. The old list of 9 or 10 basic gadgets is a thing of the past. You now have favorite widgets integrated into Blogger. This means fewer JavaScripts to stuggle with and no annoying credit links at the bottom of the widget.Why shouldn't our widgets look seamless like WordPress sidebars? Widget developers still get credit as you install their gadget.

Blogger organizes gadgets in 4 groups:

Basics - there are currently 20 familiar widgets like those for Html/JavaScript, Text, Adsense and Link Lists.The newest additions are highlighted at the top of the selections:

Followers (New!) Displays a list of users who follow your blog
By Blogger
The Followers is the Google Friend Connect widget.

Search Box (New!) Search over your blog, your blogroll, and everything you've linked to.
By Google Custom Search
The search is the Google search box which looks first in your blog and optionally all of your blogroll or links list, or the web. This is a preview of the box for inputting search phrases:

The search results display above your post column, using basic template colors and styling. However I didn't like the background displayed in my results and don't see any way to customize the colors. Although you might be able to adjust if you go directly to your Adsense account.

Tip: Improve your design by hidding the blogger navigation bar and install the blog search gadget. Read more: why you should be fearful of what blog is behind door #1 on Blogger?

Featured - there are nine featured gadgetss, including Recent Posts, Twiter Updates. I added the Recent Posts summaries which I like very much. It allows you to show fewer posts on the homepage and give visitors other pages to consider. Also in the featured category are these gadgets:

Flickr Photostream -Display thumbnails of your most recent Flickr photos
By Blogger Buster
TheFlickr Stream is cool to add at the bottom of your blog. There's a similar one for Picasa Photostream.

Recent Comments Show your most recent comments, with optional summaries
By Blogger Buster
I installed the Recent Comments widget just to update the one I had from BloggerBuster --- removes offsite link ("Add this widget to your blog.".) But I had to delete it since it doesn't show the post name and doesn't interpret special characters like apostophes. See my current one and the snapshot of the new one on the right:

Most Popular -The six most often installed --- including the Recent Comments widget. There's one for an animated fish pond where you feed custom colored fish with mouse clicks. Also Digg news, YouTube and Event Countdown clock.

More Gadgets - The complete list of 159, many you may already have on your iGoogle desktop. These include quotes, cute puppy photos, games, horoscopes, digital clocks and calendars. So maybe you don't need most of these on your blog's sidebar!

What's your favorite new gadget?

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

Make Your Own Post Rank Text Widget

2009-09-04T10:46:00.041-04:00

The Top Posts widget from PostRank.com does a fantastic job of calculating your most popular posts. But I have two problems with it:

In real time, using a javascript on another server, it's too slow and is prone to hanging or not displaying the list. This does not help your page's loading time.
The orange background for the rank number is glaring --- doesn't fit most designs, not even close. This is one element you can not customize.
well, maybe three problems. It takes up quite a bit of valuable sidebar real estate.

Alternative - Use PostRank as your source, updating your list periodically.

This may not be a real solution for many bloggers but I find my top posts don't change that often. They may jockey for position but the top 6 or so are pretty much the same 'usual suspects.' So I decided to obtain the information every few weeks and create my own text widget.

Here's how:

Go to the customization page on their website to generate your top posts by keying in your url and number of posts you want.
The preview shows your top posts exactly as the widget would generate on your sidebar. This is where you copy the list for your own text block, starting with the first orange rank down to the last post title.
Create (or edit) a text widget and paste the list of posts. Then if you want, you can delete the orange blocks with the numbers.
Of course you have to give credit with a linkback to the post rank site. So add a line and link to their site. e.g. "source: PostRank.com, Sept 2009." Take a look at my version on the sidebar.

I used html styling to add a border at the bottom and to reduce the size of the credit line to 85%.

<div style="border-bottom: 5px double rgb(73, 0, 152); font-size: 85%;">
as of Sept 2009 according to <a href="http://www.postrank.com/publishers">postrank.com</a></div>
picture....

Having the 'as of date' reminds me to update the list. I hope this is ethical since the source is credited. What do you think?

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

Check Out My Guest Post 2 - Comments still zero?

2009-08-31T11:44:00.007-04:00

About a year ago I said about my first guest writing experience :

It was the first time I wrote extensively about a subject that was more generic than technical. The call to action involved readers taking the analysis and making it personal. It was the first time one of my posts received so many reader comments and Stumble Upon reviews. It also generated backlinks. Of course the fact that it was on One Cool Site didn't hurt!

That post was called "Synergy- the human side of blogging." Read more of what I wrote in the Check Out My Guest Post article on this blog.

Well why question success? My second post was published recently on TimeThief's blog, One Cool Site. It's called "No Blog Comments? It's All a Matter of Perspective." Again I went outside my usual software and tutorial topics. It was good to shift gears again. This experience has strengthen my friendship with TimeThief. And her readers were very responsive to the topic --- but aren't all bloggers anxious about comments (or lack of... ).

Please visit her blog and tell me what you think about the topic. Would you like to see more of those posts or do you go to my team blog for that? You do know about BloggingWithSuccess don't you? What else is on your mind about this blog?

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

image by Felix Francis

Why Your Blogger Profile Says Very Little About You

2009-08-26T15:17:00.003-04:00

It's very easy to start a blog on Blogger. Blogger indexes your profile like a telephone directory. So when you drop a link by commenting on a Blogger post, the owner can ring you up, so to speak. Blogger also provides a nice link to your profile in your blog's sidebar, part of the "About Me" gadget. But, are you really reachable or under a false sense that people can communicate with you whenever they want to by calling the orange Blogger 'operator?'

Often we hurriedly add a profile before we publish the first blog entry and never look at it again. When you leave a comment the Blogger profile may be the only way for someone to 'track' you and visit your blog or contact you via email.

Personally, my pet peeve is wasting my time trying to use the Blogger profile to visit a blog or send a message to the owner. Most profiles are sparsely populated and can frustrate the reader. Some profiles don't even list the blog and others are not even turned on for viewers. It's like dialling the Operator and getting an unlisted phone number!

The Profile Gadget by Blogger
Profile- Display information about yourself.

This gadget uses the information in your Blogger profile to create an "About Me" widget in the sidebar. Similar to a full page on a menu bar, the text widget is meant to give some information about you and the blog and how to contact you. It's a perfect way to orient new visitors and keep them reading more posts.

Here's what you can type in or select when adding the gadget:

Here's what the widget looks like in your sidebar when you save the form. Notice the 'view my complete profile' link at the bottom. Given the limited space in the sidebar, many bloggers tend to leave out contact info and or rely too much on the profile link. So they may send visitors off on a wild goose chase.

Information on your Blogger Profile

If you don't have a contact information on your blog will visitors go to your profile and see an email listed? Or do you send them right back to your contact-less blog? An endless loop!

You may want to get a special email address and put that in your profile until you get a contact form on your blog. While viewing your profile you can edit the user section to show an email address. Make sure you check off 'show my blogs' and select which ones you want made public --- those on Blogger only. You can also show sites that you follow.

Communication Alternatives

Use a contact form if you want to hide your email or avoid spammers who latch onto the 'mail-to' tags. With an input form you can get questions, inquires about advertising, or feedback. One of the easiest is Kontactr. Another resource is FormSmarts which allows more customization of the form.

If you feel cramped by the text in the About Me gadget then this method is what you need:

Read this excellent article on by BloggingBasics, 'how to write an about me page"
Create and publish a full post with everything a real About Me page should have. You can give it a date going back to when you first published the blog. It will not appear on the home page with an early date.
View the post and copy the page url location. Create a text gadget as a teaser for visitor to click on the link and read the full page post. You can add an icon or symbol to the text. Here's a example where the 'read more' points to the post:

ABOUT ME

My goal is to provide excellent
... (read more)

How much (or little) is your profile saying about you? If you read it would you be interested in reading more? Do you need a full page About Me and a contact form for real connections?

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

Photo by Jeremy Brooks

Why CommentLuv may not be working for you

2009-08-15T11:41:00.012-04:00

I recently noticed all comment luv links have disappeared, new ones are not generated. This happened when JS-Kit upgraded to Echo. Apparently, CommentLuv was not given enough time to test the software interfaces and identify quirks. However, there is no excuse for not warning blog owners or readers who had registered for CommentLuv.

I found this informative post when searching Google for the problem

"Many of you may have noticed that my comment system looks different yet again. It is because JS-Kit upgraded to Echo last week. You can still use CommentLuv with Echo. You may just have to be a little more crafty in getting it to work." - Staci at JustBloggled.com

You should read the entire article but the basic action you need to take is re-Registering your blog with JS-kit/Echo. This can be done right in the add- comment form. After that it should pick up their lastest post. Both blog owners and readers must do this until someone fixes the software or administration.

I cooked up this quick template change to provide a warning --- feel free to use it. Just add a paragraph below the Echo comment box :

Warning: You may need to re-register with JS-kit(Echo) to leave CommentLuv link: uncheck the CommentLuv box, click 'add another site", type your blog url in "my site", re-check CommentLuv box. Also type over the name Guest!

Here are the steps to update your template:

Go to Layout, Edit html.
Check the 'expand widget templates' box and then save your template.
Find the following code: (type CTRL + F, type a few words for search)

<img alt='' height='12' src='http://js-kit.com/images/rss-icon.png' width='12'/> All comments</a>
<br/>
Insert this code after the break line (<br/>):


<p style='text-align: left'>Warning: You may need to re-register with JS-kit(Echo) to leave CommentLuv link: uncheck the CommentLuv box, click 'add another site", type your blog url in "my site", re-check CommentLuv box. Also type over the name Guest!</p>
Then preview just to make sure there are no errors. Save the template.

That's it! I'll update this post to let you know when to remove the code...

Update: I've removed the warning comment since the author of CommentLuv made some code revisions to address the Blogger- Echo interface problems. He updated

"the blogger commentluv code so it will add more stability and provide the user with a message if they haven't entered their url into their list of sites. (and) edited the code so it adds a warning to the user if no url is present and tells them what to do to add one."

Thanks Andy for responding.

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

How to Create a Print This Post Button on Blogger

2009-08-09T19:06:00.006-04:00

You may have noticed the "Print this post" link at the end of single page posts on BPWebNews. I thought it would help readers who need to follow one of my (often) long tutorials. With this feature, you print only post text, filling the width of the paper --- no header, sidebars, ads, footer, etc.

There are many who have problems with this hack as published on sites like BloggerBuster. You can easily hit a pitfall due to the variety of templates used on Blogspot blogs. What works for the tutorial author, may need some adjustments for your blog, even if you have the same template! Why? Because chances are you've installed other html changes that make it hard to follow the instructions. This post attempts to negotiate the stumbling blocks (which I hit already). With some patience you can get a working version of the hack on your blog.

The basic process for the feature is on BloggerBuster, print your Blogger posts. There are two steps for adding this function to Blogger:

1. Add a few lines of CSS/HTML code to your template (to make printed pages appear in this way.)

2. Add one line of JavaScript beneath your posts (which creates a link for readers to print the page without extras.) Icon/link shows only on the post, not the homepage.

I was all set to go until I saw over 90 comments, many of them having trouble implementing the code. Even the author had problems with the print feature when she changed templates. There was one glimmer of hope from a 'genius' reader but even that needed tweaking for my template. So this post attempts to give enough information so you can pick and choose the parts that you need. You'll probably want to print this post and allow yourself uninterrupted time! Remember to open the post by clicking the title if you arrived here on the homepage.

This whole adventure reminded me of the trek I took to build on another genius and create my beautiful table of contents (TOC). After reading Han's post --- a "simpler" version of his first post on installing a TOC widget, I said "bless him, he's too smart for us! " I was able to break it down for you and myself, the regular guys and dolls. It was worth it and many readers have used the tutorial for their own TOC. Enough of that. Let's get back to the print feature.

The Genius Commentators on BloggerBuster's Post

One person hailed another commentator named C. August as "clearly the genius of the group." This was based on August's reply to one of the key problems with the Firefox browser.

C. August said... on July 16, 2008 --- OK, I solved it! This is a bug in Firefox, where it can't print a DIV or a Table that spans multiple pages. This happens whether or not you use Amanda's print CSS code. It's just more obvious when you try to print just the body of a post. IE7 works fine. The fix is to edit the following line of CSS code, adding the "overflow" bit: ... etc.

Unfortunately, that was only a partial solution. Problems continued for nine months more, when another inspired reader said:

Ben Udell said... on April 11, 2009 --- Even better: Instead of removing "overflow:hidden" from under "#main-wrapper", leave it there,
but under your section style media='print' type='text/css' make it: .... etc.

Sounds confusing, eh? Enough to make us give up. However people are still leaving frustrated comments as of a few days ago. I decided to sniff around the C.August's site to see how he got it to work. At that point his solution on TitanicDeckChairs was different. Using my CSS background and Amanda's post, including C.August and B.Udell's comments I was able to get the right code for my blog.
Back to Basics
-----------------------
To customize the print post feature you need to understand some basic concepts about template structure. The template has a CSS portion with styling for unique element names like #header-wrapper. The HTML portion makes use of those styles to divide your blog into sections or wrappers, containing elements like post title and comments. Any section within another section can override the 'parent' styling. e.g. the header title and description can have different font colors.

Style.css: This is the default styling for font, color, etc. as it displays on the monitor. Screen style sheets are housed on your host server (in your template) or theme folder. These are the most common blocks of elements/sections:

#header
#content
#comments
#sidebar
#footer

Print.css: This CSS uses the same element names as defined in the Style.css, but lets you to exclude or override regular screen elements.

exclude a block from printing you use the "display:none" modifier after the element name. e.g.
#sidebar { display:none }
change styling just for printing, use the element name and type only the overrides, e.g.
body{ background:white; color:black; margin:0 }

If you don't list a block then it prints (with any changed styling you specify). If you exclude an outer block then all elements inside are excluded -- e.g. exclude header and you don't get title & description.

In this tutorial I put each element on a separate line for clarity and to let you substitute your element name or decide to include or not. However, you may string several elements with one modifier e.g

#sidebar, #footer { display:none }

What should you exclude?
-----------------------------------------
You want to print only what the reader can use from the printed page. Some of this is personal taste but these are the common exclusions for printer friendly pages:

Navigation menu/search box - these are useless for reading the post text.
Side bar(s) - readers are not interested in printing lists, widgets, etc.
Ads - these are sometimes sprinkled around your posts. Who needs to print them.
Comments - if your posts contain extra information in the comments then you may not want to exclude, but generally readers just want the post. My tutorial shows you how to start comments on a new printed page, so reader can simply not print them.
Footer - another one generally not needed.
Header - generally not necessary since you print the post title and the browser adds the the url of the page.

A quick visual example
-----------------------------------------
We already know that the Print.css must use the correct element names. So let's say I want to exclude the entire section that follows a post. One way is to look at the template style section and search for #post or .post and see what seems to be named post-footer or something of the sort. Mine is called ".postfooter", so I added this to my Print.css:

.post-footer {display: none;}

An easier way is to use a very handy tool called CSS Property Viewer . It's worth installing Firefox just for this add-on. Turn on the feature, view your blog post (not homepage). As you hover over different sections,they are outlined in red and the name pops up. It's a little quirky sometimes, but does the trick!

This image is a visual composite of those steps which we'll use in the real tutorial [coming soon.. lol]
-------------

The screen view is a preview of the homepage which Blogger generates (press 'preview' button when editing the template.) Using the preview version, verify the element is excluded by selecting File, Print Preview in the browser menu. Like magic the post footer disappeared.

Let's do it! Part 1- Set the Print Styling
---------------------------------------------------------
These are the actual steps and recommended approach for creating your print post feature. Let's start with the hardest part - Adding the CSS code to your template. Remember before you start you should find the element names you want to exclude or change for printing. My code gives the basic suggestions, but you can pick and choose. I suggest you start with the basics, preview how the homepage looks with File, Print, Preview then save the template. Go back in for the next set of things to add to your print file. Be sure to page down the entire preview document --- sometimes only the first page has text if you have an error.

Go to Blogger Dashboard, Select Layout, Edit Html.
Create a backup of your template by pressing "download full template."
First create the basic Print styling section. We'll add more later. Use CTRL + F to find this closing head tag:
</head>

Copy and paste these lines BEFORE the closing head tag


<style media='print' type='text/css'>

.noprint {display: none;}
#header-wrapper {display: none;}
#sidebar {display: none;}
.sidebar {display: none;}
#footer-wrapper {display: none;}
</style>



Notice the line highlighted in red. More blocks of code will be inserted here later.
*** substitute your element names which could be #header, #newsidebar, etc.
*** omit a line if you want the block to print or not be excluded.
This is where you press the blue Preview button to see the effect of the html so far.

In the preview document, press File, Print Preview on the browser menu. You can see if the header, sidebar and footer were excluded. If so then Save Template. Don't worry about the width of the printed page YET.

If you want more exclusions, insert lines you want before the line in red in step 2. Then repeat the previews. To really see the effect, save template and open a real single post, then use File, Print Preview.

.post-meta-data {display: none;}
.post-footer {display: none;}
.comment-link {display: none;}
#blog-pager {display: none;}
.feed-links {display: none;}
#backlinks-container {display: none;}
#google_ads_frame1, #google_ads_frame2,#google_ads_frame3 {display: none;}
Find the line in red again so you can copy and paste this section before that line:
***This block puts styling on the elements you want to print. I added zero margins and padding just about everywhere to use all white space. Some lines are optional like the fonts for the printing.


body {color:black; background-color:white !important; border:0px; padding:0px; margin:0px;}

#outer-wrapper {float:none !important; border:0px; margin:0px; padding:0px;}

#main {width:100%; overflow:visible !important; float:none; border:0px; margin:0px; padding:0px;}


body {font-family: "Times New Roman", Times, serif; font-size : 10pt; }

*** properties in red must appear for your post container, my blog div#main is the box I need; yours may be #main-wrapper, .main, .post, etc.
Repeat Step 3, but this time look for the width of the page to be wide and the full post text to appear --- at least as much as shows on the homepage. If you want more styling, insert these lines after any of the lines in step 4. Try them one at a time to see if you like it. To really see the effect, save template and open a real single post the use File, Print Preview.


#comments, .comments { page-break-before: always; }


div#main p a:after {content: " ("attr(href)") "; font-size: 8pt; }


a:link, a:visited {color: #0000ff; background: transparent; text-decoration: underline;}
Save the template when done and start the next part --- which is real easy! The reason we repeat previewing and saving is to keep what works and not have to backtrack to far if there is an error --- a technique I use when editing html.

NOTE: I use JS-Kit comments so for those who want to exclude some of their icons use this:

.jsk-CommentFormSurface, #jskit-commentRSSpost, #jskit-commentRSSfull {display: none;}

Let's do it! Part 2 - Add printer icon & link
----------------------------
You can use the printer icon that I stored on PhotoBucket or create your own. The code is conditional; the icon is not on the homepage.

As in Part 1, go to Blogger Dashboard, Select Layout, Edit Html.
Create a backup of your template by pressing "download full template."
Check Expand Widget box so we can place the code properly. You will not find the correct section if you don't do this!
Press CTRL + F to find this line of code (type into search box):
<data:post.body/>
You'll see a paragraph tag after that line (</p>). It's after that end paragraph tag, you then press the Enter key, insert a line so you can copy and paste these lines:

<b:if cond='data:blog.pageType == "item"'>
<span style='border:1px #181A43 solid; padding:5px; margin:3px; width:100%;'>
<span style='background: url(http://i282.photobucket.com/albums/kk272/SBA_jpgs/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span>
</span>
<br/> <br/>
</b:if>
As in part 1, this is where you press the blue Preview button to see the effect of the html change. You can not see the individual post page, so if there are no Blogger error messages, press Save Template. If there are errors, just press Clear Edits and review your steps.
View the Blog, open a single post. Press the print icon you just made and see what it looks like. To avoid printing, you can use the browser menu to File, Print Preview instead.

Conclusion:

This post took way longer than I expected, but I hope a lot of people can use it. I need your feedback on any areas where I can adjust the tutorial.

You will probably have some problems but remember only Part 1 can not cause any real damage since it's a print view only. I'll also help where I can. Be sure to use the CSS Viewer if you have a lot of customization. For most the basic exclusions and styling will do!

If this tutorial works, (as measured by your comments here) then I'll leave a note on the original BloggerBuster post to help those who may still want this!

If you found this post useful, grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.

Adsense Nonsense: When you display too many ads

2009-07-20T08:40:00.002-04:00

If you thought you could put as many Adsense ads on your blog as you want, then you'd be wrong. Google's documentation clearly states how many ads you can display, but it's easy to lose count in practice. If you do break the rules, then you'll get some crazy blank spaces in all the wrong places--- "Adsense nonsense". I know because until recently my blog had extra spaces between widgets, and I could not figure it out.

Here's the rule:

"AdSense publishers may place up to three AdSense for content ad units on one webpage. You may also place a maximum of three AdSense for content link units and two search boxes on each webpage."

Ad units contain either text ads, image ads, or both. The ads are targeted to the content of your page using contextual and placement targeting.

Each link unit displays a list of topics that are relevant to your page. When users click a topic, they're brought to a page of related ads.

Google further warns you that "ads may not always appear. In this case, the ad unit will show as a transparent box, or will contain any alternate ad or color specified in the ad code." Those crazy blank spaces are 'transparent' boxes where you expected the ad to appear. So can't they make the box height 3px instead of 450?

Here's one of my ad units and a sample link unit:

Here's how you get in trouble:

Many people just see 3 + 3 and assume they can have six of either type. Others forget to count the sidebar ads, or like myself lose count when we put ads between posts and then change the number of posts on the homepage. Awhile ago, I started to use Adsense and wrote about how you find the code to control ads between posts: Where did Blogger File That Adsense Code?

At that time, there were only 2 posts on the front page. So I had a link unit under the header, one ad unit on the sidebar and took the default of 1 ad unit after each post. Total: 1 link and 3 ad units. Later I started displaying 3 posts on the homepage, bringing the total to 4 ad units --- hence blank boxes on the sidebar. Not too unsightly, but if I went to 5 posts, the big spaces would appear between the last two posts.

Adsense makes you do the math:

This is how you can adjust the post ads. Go to Dashboard, Layout and select the 'Edit' text link inside the "Blog Posts" element, lower right corner.

You'll see a pop up window. Make sure you check 'show ads between posts'.

You then see this expanded section for controlling the ads. You can configure only one type of unit, either ad or link. The warning repeats "up to 3 times per page." The default is 1 ad per 1 post. If you have 3 posts on a page, you can't have other units of that type in the sidebar. If you show more than 3 posts you'll get blank spaces!

The solution is to adjust the "show after every" to a larger number. Use the drop down menu which goes up to 5. Just divide your planned number of posts by 2 to get the 'show after every' number. e.g. 6 posts means show after every 3 (6/2=3); that works for 7 also. (7/2= 3 + remainder of 1)

Remember to adjust by counting the same type in the sidebar and if you add more posts on the homepage. Just ask your kids to do the math for you. LOL

If you found this post useful, leave a comment, let me know you were here.

You're welcome to grab my button if you think others might like tips you found here.
Don't forget to subscribe by RSS or email!

Someone Grabbed My Tips Button

2009-07-13T18:29:00.008-04:00

As soon as I added a 'grab button' on the sidebar, Google alerted me that it was residing on Wirote's Tips and Tricks blog! Now that's fast. Many thanks for showing this type of support.

In case you want to create your own button, here's how to add the scroll box (which is all the rage on certain blog niches like scrapbooking and growing on technical blogs).

Created a 125 x 125 image using image creation software in my toolbox: MS Image Compose. Of course I used the color picker to match my blog design.

If you want something more basic try one of these sites to easily create a 125 x 125 image:
Free123.com or Free125cards.com. SplashUp is a site that lets you upload an image and then add your text online. Read more about other do-it-yourself resources.
Saved the image on PhotoBucket for anyone to access from their sidebar.
Used the BloggingWithSuccess Grab My Button, Promote My Blog tutorial to create the scroll box html code. Put the code in a gadget for the sidebar. Any one using the code will generate the 125 graphic with a clickable link back to my homepage.
Added the nifty orange/blue icon to automatically install the image on any blogspot blog. The steps are in the tutorial, Grab My Button Widget Tutorial: One Click Installation.
Created this Google Alert so I can tell if anyone installs the button, using the unique value alt = "BPWebnews tips button" for the image. Read more about that type of tracking in a post I wrote, Use Google Search to Track Your Tutorial Usage.

So,

Like my tips? Grab My Button!

P. S. I was trying to be brief and refer you to other posts, but let me clarify the tracking aspect mentioned in #5 (per Mukund's request, but others may find it useful).

The Google Alert page has a form like the one on the left --- this is where you put in the unique 'alt=' value from your scrollbox. Mine is 'bpwebnews tips button'. Right click on the image and you'll see the 'alternate text.'

I told Google to send me an email once a week. The email shows the url of any blog that has my alt value. Google knows because it indexes the page! The quotes are required otherwise you get all urls that contain one or more of the 3 words. This is really just an automated search you could do yourself by keying the same words into a regular google.com query. Both methods yield the same url list, e.g. here's the one I received:

Google Web Alert for: "BPWebnews tips button"
Tips and trick by Wirote: Protect excel and word document with ...
Jun 4, 2009 ... BlogMalaysia.com · books,reading,reviews. Link me http://wirote2008. blogspot.com" ...

Google was indexing the page "Protect excel and word... " when it found my alert keywords value. Just part of another day of robot-spider walking.

If you like the posts here, get them for free in your RSS feed or by email delivery.

BpWebNews Tool Box - Resources

2009-07-01T11:30:00.033-04:00

Personally, I find these links most useful for maintaining BPWebNews. Putting the links on this page makes it easier to revisit! I updated the menu bar to link to this page. I list only the ones which I've personally used at one time or another.

I hope you use my favorites and sample some on these comprehensive lists:

Blogging With Success - "101.5 Free Tools and Services for Bloggers"
covers major areas of Advertising, Comments, Contacts, Content, Design, Feeds, Html, Images, Monetization, Offline Editors, SEO, and Stats.
One Cool Site - "Resources"
covering Polls, Surveys, Tools, Browsers, Color, CSS, Html, Images, and Stat programs,

What's in my toolbox?

Images
- Zemanta - I use Zemanta's tool bar on my browser. The tools integrates with the Blogger (or WordPress) Editor for adding photos to posts. Images are Creative Commons license or free to share. Zemanta adds attrition along with the image. I also use it for my Gmail!
- Flickr - My favorite source for Creative common images. I add a note at the bottom of posts linking to the owner's album.
- Photobucket - Great place to store images you want to appear on other blogs, like the grab my button.
- MS Image Composer - A staple in my image creation and manipulation. This free software lets you create image properly sized for the web. You can combine images, add text in various fonts and save as gif, jpg or png.
- Resizr - Online software to resize images and save copy on your pc for use. You can also crop and rotate pictures. Be sure to see my friend's list of other online tools for image compression and optimization.
Design Developer Tools (color, CSS, Html)
- ColorZilla A must have color picker to get hex codes for any color on any web page. I wrote about it on Blogging with Success.
- List of Online Color Tools - extensive list for developers and anyone who wants to match colors of find the right color code to customize a template design. I haven't used most of these, but I did use Webmaster Orbit's Color Picker. It also compares color combinations.
- 35 Useful Firefox Plugins for Designers - includes many that I use frequently, like WebDeveloper.
- Screenshots - use any one of these to capture a page or thumbnail of your blog:
  Thumbalizr
  SuperScreenShot
  BrowserShots
  FireShot
- WebDeveloper - lots of tools to analyze any web page. Marks-up the page to show Id and Class details, and lets you edit CSS or html to see the effect of any changes - Great for testing before you change your template.
- Firebug --- similar to Web Developer, lets you debug css or html or javascript of any blog or web page. With both tools you can add and execute new code.
Stats/SEO
- Google Analytics -must have to analyzed traffic volume and source.
- Statcounter - similar in visitor monitoring to Analytics but breaks down Search Engine keywords with more detail. More for current look, not trends. I use both.
- MetaTag Analyzer - SEOCentro is a handy tool. Key in a specific post url and see keyword density, meta descriptions, etc.
- Website Grader - good overview of your search engine optimization.
- SeoSiteCheckup - used alongside Website Grader, this give you more insight and recommendation for improving your blog. [thanks Sayz ]
- SearchStatus - puts icons on Firefox to easily display any page's Google PageRank, Alexa rank, and more ...
Twitter
- TwitterBar (Firefox addon) - lets you type a tweet in the address bar and click the TwitterBar icon to send it to Twitter. I tried this one but prefer Echofon.
- Echofon for Twitter (formerly TwitterFox) (Firefox addon) - notifies you of your friends' status on Twitter. Uses a popup icon in lower bar. Window has a small text input field to send a Tweet.
Misc
- Html Escape - for tutorials, converts the html to characters for display version.
- Code Converter - does the html escape and vice-versa!
- Yet another converter - for escaped code. It filters, converts and colorizes.
- PollDaddy - nifty poll management; embed in post or put in sidebar.
- BlogThis! - Read my post on creating a Blogger draft post from anywhere on the internet. - "Quick Tip: Post While Browsing - Use BlogThis!
- IconJ - generate animated icons and host your own icons online.
- Free Icons - Sure to find something you like. Organized by categories.
- English Idioms - I confess to using idioms. This is a cute site to 'translate.'
Blogger Help - how to use Blogger

These are useful help pages (a rarity!)
- Dashboard - How can I use the Blogger Layouts features?
- New Post Editor - very good overview of features and how to make this your default editor.
- Make your blog load faster - Using slideshows and postioning third-party scripts.
- (more to be added!)

Check back often for updates! Leave a question or comment if you use any of these tools.

If you like the posts here, get them for free in your RSS feed or by email delivery. Speaking of buttons, be sure to grab the one in the sidebar to tell your friends about BPWebNews, share the luv.

image by ladyada

Disable Text Copying by Content Thieves

2009-06-28T15:33:00.000-04:00

Recently a reader asked me to help him prevent anyone from copying text on his blog. The method involves disabling the text selection function. If you can't select text, you can't copy and paste. While this approach is not the answer to content scraping, it can be a first level deterrent. This tutorial is probably more useful to owners of poetry and original storytelling blogs. Expect to catch only the less sophisticated scoundrels. The more experienced ones will use your RSS feed directly. Read more about how to find and fight content thieves.

I'll show you how to disable text copying. The first way is freezes all text on your blog. The second acts on just the post content --- in case you need to keep the sidebar open for a grab my button scroll box.

A. Freeze All Text Selection

Go to your Blogger Dashboard, Layout, Page Elements, Add a Gadget.
Copy and paste this code, preview and save if no errors.
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (c)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
disableSelection(document.body) //Disable text selection on entire body
</script>
View your blog to test that all copying is disabled. You're done. But do leave a comment on this post!

B. Freeze Post Content Only

Go to your Blogger Dashboard, Layout, Page Elements, Add a Gadget.
Copy and paste this code. Preview and save if no errors.
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (c)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
disableSelection(document.getElementById("mydiv")) //Disable text selection with id="mydiv"
</script>
Go to Layout, select Edit HTML and back up your template ('download full template')
Press Ctrl + F to find this line in the template code:
<div class='contentwrapper'>

Copy and paste these three lines underneath the line you found.

<div id='mydiv'>
<div id='content'>
Stay at that spot in the template, find these two lines in the html code: (Ctrl + F on the text of the first line in green)
</b:section>
</div>

Copy and paste this code after the second line in green ----to close the id= 'mydiv' tag at the end of post content:

</div>
Then preview. If there are errors, press the "Clear Edits" button at the bottom of the html edit screen. Otherwise, save your changes. View your blog to test that copying is disabled only on the posts. You're done. But do leave a comment on this post!

If you have trouble leave a comment with your blog address.

If you like the posts here, get them for free in your RSS feed or by email delivery. Speaking of buttons, be sure to grab the one in the sidebar to tell your friends about BPWebNews, share the luv.

How to Combine Subscribe and Twitter Into One Gadget

2009-06-15T17:05:00.027-04:00

There are many free icons you can use to invite readers to subscribe to your posts. You also want to show off your Feedburner and Twitter counters. And let's not forget those fetching 'follow me on Twitter' images! If you add each one as a separate gadget, you can clutter your sidebar. So why not create a table to hold everything in one place? Don't run away just because I mentioned tables --- this post gives you everything you need to install a Subscribe/Twitter gadget. I've even provided the fancy icons in one of my Photobucket albums, at no charge.

Here's what the gadget looks like. The layout is similar to the one on BloggingWithSuccess, where I also write. For this tutorial I use my custom purple RSS and a free Twitter icon. For my e-Mail icon I added purple to the gmail symbol. An optional gray bar separates the table from any text that you want in the same gadget.

Step: Preparation.

Find your Feedburner account name which you'll use to replace mine shown in red, WebNewsAndTipsFromBoldenProductions in sections B & D.

If you're on self-hosted WordPress your RSS link might look like this
"http://bloggingwithsuccess.net/feed". If so don't use the account name here. You will need to replace the entire "http://feeds2.feedburner.com/WebNewsAndTipsFromBoldenProductions " line in the section B of the tutorial. For the section D (email subscription form) you will need to use your unique account name to replace the name in red.

no Feedburner account?
Bookmark this post and come back after you read the Feedburner help pages.
Find your Twitter account name for the second line in the gadget. Use it to replace my account name in section C, sbanow.

no Twitter account?
You can omit that section of the code or return after you signup at Twitter!

Tip:To make the account name changes, do a text search and find (Ctrl + F keys) for the names in red. It's hard to spot words mixed in with html tags! You can also use your browser's Edit, Find feature.

Step: Add a Gadget

Go to your Blogger/WP Dashboard and add a text/html gadget to your sidebar. You'll be copying the code and pasting, using the html view of your editor --- not the visual or rich text view. The code is broken into sections so you can omit some of the icons (e.g. if you don't use Twitter, skip that section). As you copy each section, replace the items in red, if any, with your account information. Do not leave any empty lines.

Step: Copy and Paste the Table

Section A - Define the table (you must copy this section)

<div align="left">
<table border="0"><tbody>
Section B - Define the RSS row (optional)

<tr><td><a href="http://feeds2.feedburner.com/WebNewsAndTipsFromBoldenProductions" rel="alternate" title="Purple RSS image" type="application/rss+xml"><img alt="" style="margin: 0pt 3pt 0px 0px;" src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/rssbpwebnews.png" border="0" /> by RSS</a></td>
<td><a href="http://feeds2.feedburner.com/WebNewsAndTipsFromBoldenProductions"><img style="border: 0pt none ;" alt="" src="http://feeds2.feedburner.com/%7Efc/WebNewsAndTipsFromBoldenProductions?bg=99CCFF&fg=444444&anim=0" height="26" width="88" />
</a></td></tr>
Section C - Define the Twitter row. (optional)

<tr><td><a href="http://twitter.com/sbanow"><img src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/bpwebtwitter.png" align="middle" /></a>
</td>
<td><a href="http://twitter.com/sbanow"><script language="javascript" src="http://twittercounter.com/embed/?username=sbanow&style=blue" type="text/javascript"></script></a></td></tr>
Section D - Email Subscription (optional)

<tr><td valign="top"><img alt="subscribe by email" src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/emailicon.png" border="0" />ail</td>
<td><form action="http://feedburner.google.com/fb/a/mailverify" style="border: 0px solid rgb(204, 204, 204); padding: 3px; text-align: left;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WebNewsAndTipsFromBoldenProductions', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style="width: 140px;" name="email" type="text"><input value="WebNewsAndTipsFromBoldenProductions" name="uri" type="hidden"><input value="en_US" name="loc" type="hidden"><input value="Subscribe by e-mail" type="submit"></form></td>
Section E - End the table - (you must copy this section.)

</tr></tbody></table></div>
Section F - Gray separator bar (optional)

<p style="border-style: outset; border-color: rgb(51, 0, 0);"></p>

Step: Save the Gadget in the Sidebar

Save the gadget and try all of the links. Make any adjustments. The photobucket images are shown in bluish purple in case you want to replace those icons with your own.

That's it.

I'm anxious to hear if you used this or if you need any help --- Leave a comment and we can take a peek!

Template MakeOver - Procedure 3

2009-06-07T11:59:00.011-04:00

Considering my last post in this 'series' was published almost a year ago, an update is in order! My plans to present a 'reality' show the bland Sand Dollar template makeover went awry. There were several reasons:

the readership was not there to find a following to tune into this 'show'
those visiting the 'ugly' version were turned off or not interested in the nitty- gritty details
my attention was not focused on growing this blog (ironic since the tag line is about 'growth')

So I made changes periodically behind the scenes. Now what you see is what you get. It was a good experience in learning CSS (Cascade Style Sheet) . The process helped me understand how you can make dramatic effects with a quick template change.

Dramatic Column Swap with a few keystrokes

Most blogs display posts on the left side, so visitor's eyes become trained. Until today, my blog may have disoriented them a bit. Here's the quick fix I just made, so now you have no excuses for not leaving a comment.

Like many starter templates this one has variables defined for "$startSide" and '$endSide'. In Blogger language it's the left and right sides of a blog. So I was able to just switch the start/end names in the styling code. [If your template does not have these variables, just substitute 'left' for '$startSide', 'right' for '$endSide' in the instructions.]

Why change the margins? Regardless of which column touches down on the left side, it needs to have the custom distance you set from the left border.

1. find the main (post) section of the html, change float and margin only.

div#main {
float: $startSide;
margin-$startSide:15px;

2. find the sidebar (post) section of the html, change float and margin only.

div#sidebar {
float: $endSide;
margin-$endSide:15px;

Note: If you have "text-align: $startSide; " or "text-align: left;" do not change it. Your content must continue to align left, not right.

The only thing remaining on the previous makeover list is to divide the sidebar, for a three column design. Stay tuned for that magic act...

You may also be interested in other posts in this series.
Template Makeover - Procedure 1
Template MakeOver - Procedure 2
and Quick Tip: A Word About Blog Margins and Such

Adding Custom Social Bookmarks to Blogger

2009-05-25T16:00:00.011-04:00

Notice the large icons for social bookmarking that I recently added below each post. Visitors simply click the icon to send the post url and title to the desired social bookmarking site. Using my familiarity with Blogger template styling/html, I was able to modify a great WordPress tutorial. Now you too can have control over the look and placement of social bookmark icons. So this is officially a Blogger hack of WP!

What's available

The biggest resource in this effort is the WP tutorial at BloggingWithSuccess (BWS) on how to add attractive social bookmarklets.

The BWS tutorial has useful references to sites where you can find eye catching custom icons.
DryIcons:
Smashing: 3D icons :
Web2Icons: CircleIcons:
The same post also provides basic styling to offset your icons below your post. I used their CSS but made some changes for my theme. The suggested blue color (#d4e2eb) worked, but large icons standout enough and my design has lots of color (LOL.) So instead I used a colorless background with just a darker border on the top.
Each service has a unique format for passing data about the post your want to bookmark --- what else is new. This adds a wrinkle when going to icons other than the five shown in the BWS tutorial. They provide a strategy for using the old fashioned 'share this' button to see how to form the link expression for other services. Hover over the icon and you'll see the actual url and title. What you want is the format since you can not put a static url or title in your template! We'll discuss how you do that later. (See "Other Icons")

Getting it done

Many Blogspot blogs show several posts on the home page, so my procedure places the custom icons below every full post. It you want it to appear only on the single post page then see the note below the scroll box code. I always advice using a test blog first. However, you can safely apply directly to your blog without a net, as long as you preview before you save any template changes!

Go to your Blogger dashboard, choose Layout and Edit HTML tab. Check the Expand Widget Template box

Press 'Download full template' to save your current version. Find anchor lines of code, shown here in green, by using the Ctrl + F keys or your browser's Edit menu & Find feature.

A. Find this line in your template so we can add styling around the icons
]]></b:skin>
Copy the six lines below, then paste before the line you just found.

#Social{
background: #d4e2eb;
border: 1px solid #DDD;
padding: 5px;
margin: 5px;
}

Preview this version (press blue button at bottom of the html window) and make any color or border adjustments. For the border color, #ddd is short-hand for #dddddd, so find a color you want and just substitute the code. In my template I replaced lines 2 and 3 with

background: transparent;
border-top: 2px solid #DDD;

Whenever the preview is good, you can save the template. After a good save, if there is a problem you can try to backtrack or press 'clear any unsaved changes' and start over!
Now let's find the spot for the actual icons layout. The end of the post is signaled by 'post-footer-line post-footer-line-1' . For my theme the first line is the author/comment summary. The second held the AddToAny button. I put the social icons below that button as a new paragraph in line-2.

Find this line: <div class='post-footer-line post-footer-line-2'>

Can't find that line? If there is no line-2 , then find the same expression using 1 instead of 2. You'll be putting the code at the end of the line-1 section.

For either section, it's tricky finding the exact spot. The code must be a separate sub-section to not interfere with existing lines. So unless you know, ask for help or take the path of least resistance --- place it at the very end of the post before the footer! To do that instead, find <data:post.body/>and put the code after the </p> tag which may be on the same or separate line that you found. Just leave a comment if you need help.
Copy and paste all of the code in the scroll box after an end tag in your line- section. The scroll box contains the code for the five icons used at BWS. However, I've used the necessary Blogger code instead of php functions. Also the images are on Flickr so you can use these until you feel confident enough to switch images and or add other link services.

The Twitter link uses a service by bit.ly which has the features of the Simple Twitter Link plugin, sending a compressed url.

<p>
<DIV align='center' id='Social' style='text-align: center'>
<TABLE align='center' border='0'><TBODY><TR><TD width='68'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><IMG alt='Add To Delicious' src='http://farm4.static.flickr.com/3041/3554373391_cd28ab7c8d_o.png'/></a><br>Add to Del.icio.us</br> </TD>
<TD width='68'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><IMG alt='Digg This Post' src='http://farm4.static.flickr.com/3571/3555181686_fc76aa8c95_o.png'/></a><br></br>Digg<br>This Post</br> </TD>
<TD width='68'><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><IMG alt='Stumble This Post' src='http://farm4.static.flickr.com/3358/3554373453_a366370146_o.png'/></a><br>Stumble This Post</br> </TD>
<TD width='68'><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><IMG alt='Fave on Technorati' src='http://farm4.static.flickr.com/3590/3554373481_a4ea7b5152_o.png'/></a><br>Fave on Technorati </br></TD>

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<td width='68'><a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>
<span style='display:none;'>Reading: <data:post.title/></span><IMG alt='Tweet This' src='http://farm4.static.flickr.com/3411/3555181740_75748aed5c_o.png'/></a><br></br>Tweet<br> This Post</br> </td>
</TR></TBODY></TABLE>
</DIV>
</p>

Note:If you want the icons to show only when a single post is opened and not on the homepage, then add these conditional lines --- the first one just BEFORE the code in the scroll box and the second one just AFTER the code:

<b:if cond='data:blog.pageType == "item"'>
... ...
</b:if >

Again, preview and save if everything looks good. Then you can adjust icons and placement if you want to.

Other Icons

Here's the format for bookmarking links to some other popular sites. Use these to add other services.

Reddit <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>

Google Bookmarks <a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'>

Just select an icon and add it to your Flickr or blog image files, then follow the format used in the tutorial code above to replace or add to the five favorites. Example of entire entry for Digg:

<TD width='68'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><IMG alt='Digg This Post' src='http://farm4.static.flickr.com/3571/3555181686_fc76aa8c95_o.png'/></a>Digg<br>This Post</br> </TD>

Place the appropriate link at the expr:href=' spot. Put your new icon image location at the src=' spot, replacing the items in red. Naturally you'd have different 'Digg this Post' with the new service name, e.g. Reddit.

Why not give it a try. If the images are too large, use a smaller version. Let me know how it turns out!

You may also be interested in these posts.
Do I really need a test blog?
How To Outsmart Blogger's Image Handling
Fearful of What Blog is Behind Door #1 on Blogger?

Create Your Custom Signature Online in 10 minutes.

2009-04-10T20:26:00.011-04:00

Recently, I came across an online resource called MyLiveSignature. The site lets you generate a signature image using your name. It's free and has several script font styles. I used my initials and was able to adjust the size, color and slant. You can hot link to the image on their server or download it to your PC. Of course, once on the PC you can upload as a Blogger or WordPress image. You can create multiple signatures, and have a signature over a short line with your website or blog address. Used on your emails, that type of signature can promote and brand your blog. This is one variation I created:

A quick note about post templates: You can use this Blogger feature to pre-format each new post with the same information. I've been using the spider avatar and pointing to some posts I think you'd like to read. This avoids typing each time. I can always change or delete anything.

In this example from Blogger help, "the user links to an article on the first line, then quotes it." This is where you could put your signature image.

Just go to Blogger Settings, Formatting and find the "Post Template" section. Add your pre-formatted text or links here. Links and image references must be in html.

(trick: create a draft post with the information you want, then view the html so you can copy and paste into the post template!)

I took my custom html code from the MyLiveSignature site and put it in my post template. So, I can now sign 'SBA" every time. Try it!

Give More Comment Luv on Blogger

2009-02-25T22:30:00.003-05:00

CommentLuv is a plugin/gadget that displays the title and link to commentators' last blog post. This generous sharing of reader clicks is considered a valuable 'thank you' for visitor comments. I finally got around to adding this feature using their Blogger integration tool. It was quite easy, as long as you remember to go back in and visit the 'claim your site' page after adding the icon.

Image via CrunchBase

I was surprised that you also must use the JS-Kit for comments. But it turns out this is a feature rich comment system. It actually takes over your comments on a separate database, but synchronizes a backup version just in case you want to uninstall and go back to Blogger comments. I like the reply option and the use of avatars. It even has an Askimet spam control option.

Give it a try by leaving a comment on this post --- let me know whether you use the WordPress or Blogger CommentLuv and your experience! This will serve as a test also to see if everything is working. Thanks.

Also I've installed the Zemanta tool bar on my browser. It integrates with the dashboard for adding photos to blog posts. Images are Creative Commons license or free to share. Read more on BWS. See the related links generated by this tool based on the subject of this post.

How to use the Blogger Blog List

2009-02-07T11:45:00.008-05:00

About eight months ago I wrote a post, "Do you really want to showcase a blogroll?" Having recently started blogging I questioned "the 'honor roll' aspect and the inherent tendency to mushroom. Link maintenance and wrestling with who to blogroll can consume your time. If you're on their list, do you have to add them to yours? If you add them to your roll, are you expecting the same 'courtesy'?" Also there is the negative SEO aspect of linking to 'dissimilar' blogs. Many of your friends can be in a completely different niche.

Well, I've matured a bit as a blogger and started my own 'Blog List' using the Blogger widget. Ravon, the young blogger who had 19 honorees and prompted my post last June, said

"And like i said, the blogs will always be on my blogroll as long as i am interested in them and frequent them. Your blog will always be on my roll, unless your decided to quit blogging."

Yes, I'm still on his blogroll! (not that I was checking) His is a different niche but I've added his blog to my list --- a nice place to take a break from blogging lessons!

Here' how to add your blogroll:
1. Go to Blogger Layout
2. Press Page Elements tab, press Add a Gadget in your sidebar, select "Blog List"
3. Press Add and type in the url of the blog you want to display.
4. Select the aspects which you want with a checkmark; can always change later. Basically you this is like an RSS feed, showing only the last post information.

- The icon is the favicon associated with the blog (if you don't want the ugly orange Blogger icon, read my tutorial on making your own)
- snippet is an excerpt of the first paragraph of the latest post
- thumbnail is a very small image of the post's image --- I'd leave this unchecked.
5. Then move (drag and drop) the gadget to the spot you want on the sidebar.

That's it. Try different options until you're satisfied.

Caret Browsing with Firefox

2009-01-26T10:42:00.005-05:00

This post should help many of you who use Firefox and don't know what caret browsing is. No, it's not a diamond carat, but a text 'cursor' that points to a character on your monitor. The feature allows navigation without a mouse. The blinking cursor serves as the starting point to select text lines and navigate the page using arrow keys. This is how we're used to moving around in a word processor. The PF7 key turns caret browsing on and off in Firefox.

So one day, I got tired of selecting part of a word with the mouse and having it highlight the entire word. Decided to try caret browsing and went my merry way. Then I noticed I could no longer use the PgUp and PgDn buttons to scroll through web pages. Well it seems there's a long standing bug when you use caret mode. The only navigation that works with caret browsing are the arrow keys. No scrolling leaps.

The only solution is to turn off caret browsing when viewing pages. So toggle the PF7 key or use the Firefox menu: Tools - Options - Advanced - General --Accessibility then undo the check in the box called “Always use the cursor keys to navigate within pages." However, you can still accidentally press the PF7 key to toggle it on again. So remember this tip until Firefox is fixed.

Have you run into this problem?

photo by dkpto

Why Google Friends Don't Connect

2009-01-12T16:22:00.017-05:00

You may have noticed I installed the Google Friend widgets after seeing it on several blogs. Seemed like a good way for visitors to leave quick messages. Friends who join the community see their avatars with links to their favorite blogs, etc. I plan to delete the widgets but you can at least see the snapshots in this post.

What is it?
Google Friend Connect "means more people engaging more deeply with your website -- and with each other." It's supposed to attract more visitors. "Your users can easily invite friends from social networks and contact lists to visit and join your site."

How is it different?
Mashable compares Facebook Connect to Google Friend Connect:

The key difference between the two services is the fact that Facebook is one social network, while Google Friend Connect is open to any site, service or social network that uses OpenID for identification. For example, with Google Friend Connect your visitors can log in using their Gmail credentials, meaning that they don’t really have to be a part of any (strictly defined) social network at all. Facebook Connect, on the other hand, is useless to anyone who’s not a Facebook user.

Who Connected with BPWebNews?

Well, I invited a few friends and one decided to put his face out there --- thanks Daniel! But surprisingly a 'stranger' joined--- Esmeralda.

Her 'sites joined' has over 20 links.
Apparently she is using the networking features. But anyone seeing my blog on her list might click the link and visit. She may have found me in the widget of a site I joined (listed in the install instructions as a sample use Go2web20 Blog. She now has over 2600 friends in her Connection.

Why I'm removing the widgets
Like Twitter, you need lots of online friends who want to keep in touch this way! Fortunately, I'm not there yet! I would have liked more interaction via the message board widget. I did leave a note during the holidays, but no response. Since a couple of people left comments and seem interested, I moved one widget to the bottom of the page --- we'll see.
UPDATE:- guess usage of this gadget on Blogger reached critical mass. So I restored the follow widget in the sidebar.

Have you used these widgets? Leave a comment!
I'm anxious to hear your thoughts on this topic.

FYI for those who left comments on this post about the teenage millionaire 'scam': I published my research on my team blog: Contest Fraud, Beware It's Real. Any additional comments can be left there. Thanks. SBA
==========================

Technical Ravings from teenage millionaire blogger

2009-01-03T10:00:00.005-05:00

Warning: This article is here for historical purposes only. It was the entry for a contest that I later questioned --- see all details in the post on my team blog at Contest Fraud, Beware It's Real.
==============================

Who wants to listen to the technical ravings of a 16 year old? So what if he is giving blogging advice on making money. How big can his piggy bank be anyway?

What if I said that teenager earned a million dollars with his various enterprises, including several blogs. Surely you'll perk up when I say he recently started another blog aimed at telling you how to make money from your blog. The tag line is "Miscellaneous Ravings of a 15 year old Technoholic."

The blog is called TechRavings.info owned by Aditya Narain Dhar Dubey, a young student in India. As stated in his profile, his "professional interests lie in online marketing, social media, blogging and anything which results in good fortune of money."

Right away we know what his goals are and why he needs us. However he is willing in this blog to teach us how to not only get started with a blog but also to achieve some of those' good fortune' results.

Tech Ravings’ design is consistent with its message of learning. The overall look is fresh and simple with a white background, slim black header and post headings in red. The AdBrite and Adsense advertisements are well integrated in the layout. Some appear between posts. I was surprised to see a pop up ad on each first visit, but there is a ’skip this ad’ button. The navigation menu has two items : Contest and About Me. The About Me tab points to the about page on AddD Journal which says nothing about the Tech Ravings blog. It’s disconcerting to go directly to the other blog. AddD Journal is Aditya's older blog which generates income for his piggy bank.

The TechRavings sidebar is clean with black titles for the widgets and ads. A very attractive and large icon attracts your attention to the RSS signup with a bit of humor. Not sure if this is intentional, but the link only allows email signup. The topics and titles of posts are consistent with monetizing and strengthening the branding of the blog.

Each post has large interesting photos to complement the content. The topics are informative and give you just enough detail. Tutorials, like the one on Embedding Adsense in your posts, are thorough and provide ample screenshots for following along.

There are no social widgets but each post has a Digg icon and an AddThis icon for bookmarking. To me some more links to social profiles or communities adds credibility to a new blog. I’m sure he is planning to increase branding (for this blog) with more social interaction — the time investment can bring even more targeted visitors. I especially like StumbleUpon for networking and it could be useful here. Digg is not as helpful for this type of blogging niche. I sort of miss that there is no footer on this blog, but that may come in time. The platform is Blogger and you have to add a footer to many themes.

Who is the person behind the name? Let’s call him Aditya, which is how he signs his posts. Well he’s somewhat of a mystery man, doesn’t have any picture on this blog, nor on his big moneymaker, AndD Journal. Like me, he has different profile ids. I was able to find a few avatars on social media:
As 'richjunk', he's been a BlogCatalog since Dec '08. As 'Aditya', a MYBlogLog member since Oct '08. He uses his full name on the Blogger profile (since 2006), where he says " I am Freelance Writing Professional..." (probably never updated profile like the rest of ours), the same name used on other blogs' comment forms. On his 'about' page at AndD Journal blog, he says "I’ve worked (in my mother’s name ) as a freelance writer and previously spent some time in writing articles for Associated Content and Constant Content. I am also a clickbank affiliate."

You can see he sounds pretty ordinary.Tech Ravings has a PR0 and only 12 subscribers so it’s probably on an equal par with your blog! But he’s not your typical teenager. His career started in 2006 and since then his annual income is estimated at one million. He started the blog AndD Journal in 2008 as more of a personal one, and recently moved it to WordPress. It’s now PR2 with over 800 readers for its current news, reviews and web master tips. There he writes affiliate reviews for ClickBank as in a recent post ‘Earn and Learn Online..Beware!!!’

Why should you listen to him?
I can tell you the content is about more than ravings or ’speaking my freaking mind’ as quoted in reviews. In two years he’s learned quite a lot. Especially from his mistakes: “While I was just thinking of my success as a blogger, I recounted the days of failures. I went into an introspection and was finally up with answers. The answer was quite easy and amazingly simple one. It was my lack of planning and ignorance. …” He now sees three steps to being a successful blogger: 1) write outstanding posts, 2) use ‘“blogging tips websites” [like Tech Ravings] to learn how to promote your blog, and 3) don’t expect immediate traffic, build a relationship with readers and other bloggers.

Think of it as a reality show - I watch a couple of reality TV shows like the “Apprentice” and “Amazing Race” and I see this as a reality blog show. The reality part is that we see post by post how he goes about becoming a second millionaire! We can watch and participate as Aditya takes this new Tech Ravings to the same heights as his earlier journal. Playing along by reading his blog, we can share in that good fortune — not directly, but with the knowledge he shares, to gain income through our own efforts. So let’s watch Tech Ravings on the path to success in monetizing. Watch it climb the popularity charts, sign up for the feed so as not to miss anything. See if you can do even better with his advice.

piggy bank photo by ES
cartoon by hartboy
==========================
Warning: This article is here for historical purposes only. It was the entry for a contest that I later questioned.

Blogging into the New Year 2009

2008-12-30T21:38:00.003-05:00

Thank you for your support as we move into the New Year.
All the Best wishes for you and your family in 2009.

My resolution is to spend more time blogging here.
So hang in there!

photo by dincordero