Sunday, April 24, 2011

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

Tuesday, April 19, 2011

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!