Understanding Basic Blogger Design Issues ~ Questions & Answers

Below is a PDF discussing basic differences between templates and themes. This information is important if you are interested in using Designer Themes and Backgrounds like those I to bloggers. This information will help you make the most out of your efforts to create a blog look that's truly 'yours'. Please read this information before using my free prefab backgrounds ~
Answering Basic Design Questions for Blogger Blogs
Now that you have a little more knowledge under you're belt, you are ready to move on to modifying your own blog with some fabulous theme elements.

Enjoy~

How to: Setup Blog Posts on Facebook

This tutorial will cover how to setup your blog postings to automatically feed into your Facebook profile or business page. A personal profile is the standard page you receive when you sign up for a Facebook account. A business page is a separate page you can set up that's related to your specific type of business. Note: you must have a personal FB profile in order to set up a business page. For more information on businesses pages visit this link and to create a business page visit this link.
For this tutorial you will need to have a Facebook profile page, and a business page if you are interested in adding your blog feed to that as well. We will begin with adding your blog posts to your personal page and then move on to adding them to your business page.

Setting up Notes on Your Personal Page

To begin, log in to your Facebook profile and go to your profile page...

Next click on this link ~http://www.facebook.com/editnotes.php?import~to be taken to the "Import Notes" page...
Now enter the url or web address of your blog in the text box ~ be sure you enter the entire address by including the "http://" part so that it looks like this - "http://yourblogname.blogspot.com...

Next click that you agree to the Terms of Use and click the "Save Settings" button...
On the next page click the "Confirm" button...
That's it! Your previous posts will appear in the Notes area and any new posts you make will automatically show up...
If you have any problems with the process you can view the Notes: Bugs and known problems section on Facebook for support. If you need any other help with Notes, either adding or stopping, visit this help page on Facebook.

Now we'll move on to...

Setting up Notes on Your Personal Page

Begin by logging into your Facebook account and navigate to your business page and click on the "Edit Page" button...
Now click on "Apps" in the left sidebar area...

On the next page you'll see an the area titled "Notes"...
Click on the "Go to App" link...

On the next page click on "Edit import settings" found at the bottom of the left sidebar area...

Now, just as you did above, enter your entire blog address in the box (be sure to include the http:// just as I've done in the example below), then click on the check box, and finish by clicking the "Start Importing" button...
On the next page you'll see a preview of your blog feed, click on the "Confirm" button...

You should now see your own blog posts appear in the Notes section of your business page, just as mine are shown on my page below...

And that's it! You've successfully added your blog feed ~ congratulation!

Enjoy~

Setting Up Mobil Viewing on Your Blog

I've just learned that Blogger is currently testing a new feature for viewing blogs on mobile devices. Up until this point, if you tried to view a blog through your mobile device, it appeared huge and was difficult to read in such a large state. This new feature reduces blogs down to a more readable size and organizes postings in a cohesive manner.

To set up this feature on your own blog follow the simple steps below...
First you'll need to log into your blog and then click on this link: http://draft.blogger.com/home This area is called "Blogger Draft" and appears to be a duplicate of the regular "Dashboard" area of our blogs.

There you will click on the "Settings tab" and then the blue "Email & Mobile" link...
At the top of this page you'll see a new section titled "Mobile Template (beta)"...

*In the online world "beta" usually denotes something new and in the testing stages.*

In this area you'll want to click the small button next to "Yes, On mobile devices, show the mobile version of my template"...
Be sure to scroll down the to the bottom and click the orange "Save Settings" button...
Once saved, you can then return to the top of the page and preview a sampling of your blog by clicking the blue "Mobile Preview" button...
Something else I noticed in this preview is that certain features, like the image navigation area at the top of my blog, will not show up in mobile view so some of the navigation is missing however is does display a nice reduced version of blog and that's pretty sweet!

Enjoy

How to: Add a Post Divider

The following tutorial will assist you in adding a post divider to your own blog. Post dividers serve as a decorative division between each blog posting. To view a selection of my coordinating post dividers.

To use this tutorial you will need to work in the html code area of your blog. For this reason I strongly recommend backing up your blog template before proceeding. To do this Log into your blogger account and navigate to the "Design" area of your blog.
Click on the "edit html" link, then click on "Download Full Template" to save a copy of your current template to your computer. You are now ready to proceed with the tutorial...
In the same html area scroll down through the html code until you find...

.post

this is the area that controls your post layout and style, it will contain items such as....

.post {
margin: 0 0 40px 0;
width: 90%
}

Personally I think it's easier to replace the entire code in that area with the new code so copy the following code and place it over the existing code so that it now reads...

.post{margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Now, all you'll need to do is copy and paste any of the post divider image codes into the red type area inside the parenthesis. In this example I'll use the Stormy Weather post divider so here that code:

Stormy Weather410 wide image & codehttp://i806.photobucket.com/albums/yy344/plumrose-lane/Blog%20Backgrounds/Blog%20Dividers/PrL-StormyWeather-postdivider-410x.png

and here is how the final code will look for this post divider...

.post{margin: 0 0 40px 0;
width: 90%;
background: url(http://i806.photobucket.com/albums/yy344/plumrose-lane/
Blog%20Backgrounds/Blog%20Dividers/PrL-StormyWeather-postdivider-410x.
png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

And that's it, click to "Save" and when you return to your blog you should now see a decorative post divider between each blog post.
If you find the post divider appears to be cramped in under the bottom of your post and your tags, try increasing the "padding-bottom: 2.5em" to a higher amount, such as 4.0 or 4.5. This will help to provide more area around the post divider image.
Enjoy!

How To Keep it Clear ~ using clear background images

This tutorial will help solve the issue where clear png images show a white background. First an explanation...

Clear Images

The only two types of clear images are gifs and pngs. Although jpgs have a nice resolution they are unable to sustain a clear background. This is important to notice when you're saving images to your computer. Always be sure to save a clear backed png image as just that - a png.

Loading Images:

In the first example I've posted a clear png image as it's meant to be...

However in the example below the same image now has a white background behind it. Why? You may ask...Well, the answer is simple - in this case when I loaded the second image I resized it. Making a clear png image smaller will automatically fill in the clear background. So to keep images with a clear back you'll either need to load the image in it's original size or resize the image in a graphics program before loading it.

There are two main areas image sizing is important in blogging, the first is when you're adding an image to the sidebar of your blog and the second is when you're including an image in a blog post.

We'll address both of these below....

Adding an Image to Your Sidebar

Most of my sidebar image tutorials already cover how to add images using various methods so for this example we'll just pay close attention to the sizing factor when adding images.

When you're using the "Add a Gadget" feature found under the "Design" tab to add an image to the sidebar of your blog...

Be sure to uncheck the "shrink to fit" box...

This will keep the image you're loading in it's original size so if it's a clear backed png your image will remain clear.

Adding an image to a Blog Post

The same rule applies when you're including an image in your blog post and so it's important to pay special attention to the "Add Image" feature and load your images large if they're clear backed...

Size does matter - keep it large

I hope this info has been helpful and I hope to see more and more clear backed images around blogland. Remember, if you need specific help just leave a comment and if you need any help beyond the basics highlighted above, be sure to visit the Tutorials section of my blog for step-by-step instructions.


Enjoy!

The Basics of "Following" & "Followers"

The tutorial below covers several key points to Following and Followers including ~

?Adding the Followers Gadget
?Following Other Blogs
?Troubleshooting
?Your Following List

If you're already familiar with one subject, simple scroll down to the area you find most helpful.
?Newbie Flash: For those of you who aren't familiar with "Following", this is a nifty feature Blogger offers where you can keep track of the blogs you like. Following another blog adds that blog to a list which you can easily find by visiting the Dashboard section of your blog. There you can view the most recently posted blogs and add or delete from the list. To find the Dashboard area of your blog click on the "Design" link at the top right side of your own blog and then click on "Dashboard" found in the same area. There's a good bit of info on the subject offered from Blogger and you can read more on that by clicking here.
Now on with our tutorial...
Adding the "Followers" Gadget
Let's begin by adding this feature to your own blog. To do so, log into your blog and click on "Design" found at the top right side of your blog, outlined in pink in the image below...
Next click on "Add a Gadget"...
In the pop-up window, scroll down to "Followers" and click on the blue plus button...
Here you can rename the object if you want to be creative, some bloggers come up with terrific alternatives, or leave it as is. The title can always be changed in the future so just be sure to add the gadget by clicking the orange "Save" button...
You will now see the new "Followers" gadget at the top of your sidebar...
This is a good place to keep the gadget so visitors can easily find it, however you can also move the gadget around by clicking and dragging it to a different location if you prefer...
Once finished, be sure to click the orange "Save" button to set it's location...
And then click the blue "View Blog" to see your new gadget in action...
With that completed, let's now go over how to "Follow" someone's blog...
Following Other Blogs
Here are a few pointers for "Following" other blogs. Since the "Follow" feature is directly tied into our Blogger profile, you may want to take a look at my other tutorial which covers profiles. You can view "How to: Set up and Edit Your Blogger Profile".
First, we'll begin by navigating to a blog you would like to Follow. This is also a good time to mention that you can Follow your own blog. So, navigate to the blog you wish to Follow and click on the "Follow" button...
A pop-up window will appear and there you will see a few options ~ let's take a look at these...
Aside from the gray "Follow this blog" button which we will continue on with in a moment, you also have the option of Following publicly or privately and the blue "More options" link...
The public and private options include descriptions right there so let's explore the "More options" link. By clicking on that link the options expand and you'll see the following items...
The first section covers your name and profile...
Here you can edit your profile and can even change which profile you use to Follow blogs. This is a handy area in the event you're having difficulty Following others or the "Follow" feature is drawing from the wrong profile. For more info on this, please see the "Troubleshooting" section of this tutorial below.
Next we have the "Settings" section, again this area enables you to Follow publicly or privately...
And then finally there is the gray "Follow" button and the "fewer options" link...
When you click the blue link it contracts back to the original view where you can then click the gray "Follow this blog" button...
Then click on the gray "Done" button... At this point your screen will refresh and you can scroll back down to view your own icon, now present in the list of "Followers"...

Troubleshooting

If you're experiencing issues with Following others, such as an incorrect profile showing up, then you can try these steps to remedy the situation.
Note: It should be noted that Blogger often experiences technical difficulties which can lend to issues with Following others. The information below is in lieu of Blogger not experiencing any of these issues currently.
First you can navigate to a blog you are currently Following and click on the "options" button just below your name...
Or second, navigate to a blog you are not currently Following and click on the "Follow" button, then click on the blue "more options" link...
Either method will take you to the Basics setting page for Following. Here you will see "Currently using your Blogger profile", go ahead and click the blue "Change" link... In this area you'll have the option to change OR reset where the Follow feature is drawing your profile from...
It will show you which profile you're currently using...
And give you a selection of other possible profiles to use...
Selecting your "Blogger" profile should reset any misdirections and help to ensure you're Following others with the correct profile...
Once complete you'll see a new pop-up, click "Close" to finish the reset...
You will now return to the previous window where you can click the red "X" to close this window...
As I mentioned at the beginning of this tutorial, be sure your Blogger profile is set up with all your info, to do this simply follow my other tutorial: How to: Setup and Edit Your Blogger Profile
Your Following List
You can always view the blogs you are Following and edit the list by visiting the Dashboard section of your blog. To find this area, click on the "Design" link from your blog...
Then click on the blue "Dashboard" link found at the top right side of your window...
In the Dashboard area, scroll down below your list of blogs and you'll see the "Reading List" area...
This is where you can view a list of the blogs you Follow along with an excerpt from their most recent blog postings. In this area you'll also see a few tabs to explore...
Becoming familiar with each tab and what it offers will help you keep track of the blogs you Follow and your Following list.
With that you're done ~ hopefully this has helped shed some light on the subject and even assisted you in gaining control of the blogs you most like to keep up to date with.

Enjoy!