How To Improve Your Website's Cross-Browser Compatibility

Until today, people using Safari did not see my website in its tidy glory.  Things looked off kilter.  It looked fine in Firefox and Internet Explorer, but looked pretty terrible in Safari.

Today I navigated to a website called BrowserShots to check my website's look across a whole slew of browsers.  Sure enough, there were other browsers with the same problem.  Someone I know (thanks Lindsay at WyzAnt!) gave me a heads up that there is a simple fix out there to improve cross-browser compatibility.  It comes in the form of a snippet of CSS.  I did a quick Google search and found that CSS snippet at the following website:   PerishablePress.

I use Blogger's Template Designer.  This is located on the Design tab within Blogger Dashboard.  Once in the Template Designer, click the Advanced tab and scroll down.  Click Add CSS and paste the code from PerishablePress there.  Save.  I did this, then went back to Safari to re-check it.  It looked great.

Many thanks to Jeff Starr at PerishablePress!

How To Post Your Blog Feed and Specific Tweets To Your Facebook Fan Page

I like having a Facebook page for my blog since I'm already an active Facebook user in my personal life.

When I set it up, I wanted it to have the right mix of content there.   It needed to include my blog feed with titles and description AND the feed from my Twitter account without the tweets about my blog content (in other words, I wanted content from both social media without duplication).

Here's my solution:

Use Feedburner.com to post my blog feed to Twitter (go to http://www.Feedburner.com and burn your feed, then click Publicize, then click Socialize and adjust your settings). I like this better than TwitterFeed because it automatically turns my blog topic tags into hashtags on Twitter.

I use NetworkedBlogs to post my blog feed to my Facebook page.  It works well and is another entry point for followers.

Use the Selective Tweets app on Facebook to shoot select Tweets over to the Facebook blog page (i.e., the Tweets that are not related to blog posts).  All I did was install the app, set it up, then I add the hashtag #fb to any Tweet I want to also post on the Facebook blog page (when it appears on the fan page there's no #fb hash tag; appears within two minutes).

Check out my Facebook page and see what you think.

How To Offer ComLuv On A Blogger Blog

"ComLuv" is shorthand for CommentLuv, a plugin which allows folks who graciously comment on your blog to enhance their own blog's profile by adding a link to their most recent blog post at the end of their comment.  In other words, it allows bloggers to "share the love" by offering something in return for comments.  A win win.

For a long time it was only available to bloggers using the WordPress platform, a big frustration for those who are using the Blogger platform.

Now, however, ComLuv is available for Blogger blogs by replacing the Blogger comment system with another comment system called IntenseDebate. 

Once you have it set up, your Comments box can look like this:

Pretty cool.

Lijit Search Gadget Is Better for Blogger Blogs Than Google Search Gadget

If you've been frustrated with the inadequacy of the Google Custom Search gadget that is part of the basic gadget array in Blogger, as I have, you'll want to read on.  I'd often use it to try to search my own blog and couldn't find my posts, which begged the question of why I had the search bar on my site at all.

Recently, while catching up on Natural Papa's interesting blog, I noticed his Lijit search bar.  I did a quick search on it and was amazed at the rich content it delivered.  So I added it for free to my own site, which is very easy to do using the instructions the site provides.

Now, when I search my own site using my Lijit bar, I find everything I know should be there and have confidence that my readers will find all relevant content, too.

Note: For more TechnoMeg blog tips, check out my right sidebar.

How To Add Topic Feeds And Static Pages In Blogger

I've burned new RSS Feeds for a few of my key topics:
Subscribe to EcoMeg - Daily Photo
Subscribe to EcoMeg - Gardening
Subscribe to EcoMeg - Homemade Beauty Products
Subscribe to EcoMeg - Homemade Cleaning Supplies
Subscribe to EcoMeg - Recipes
Subscribe to EcoMeg - TechnoMeg

For TechnoMeg followers, here's how I did it:

1. From the Blogger Dashboard, navigate to Design.
2. Click Add A Gadget and scroll down to Labels.  Add this Gadget to your blog.
3. Navigate to your website and click on the label for which you'd like to burn an RSS feed.
4. Copy the URL to your clipboard.
5. Navigate to http://www.feedburner.com.  Sign in to Google (or create a username and do so).  In the box below Burn A Feed Right This Instant, paste the URL for your label.
6. Replace this code in the URL:  /search/label/        with this code:     /feeds/posts/default/-/
7. Click Next.  Modify the Feed Title and Feed Address as you wish.  Click Next.  Click Next again.  Put a check mark in the Clickthroughs box and the I Want More box.  Click Next.
8. Click the Optimize tab.  You'll probably want to activate Smart Feed and Feed Flare, but these can wait.
9. Click the Publicize tab.  You'll want to activate Buzz Boost, Email Subscriptions and PingShot, but these can wait.
10. Now, if you click back to the Feedburner.com page, you'll see your feed listed.  Click on it, then click on Edit Feed Details.  You'll see your feed address there.  Use that as you wish in whatever gadget or chicklet (you'll find these on the Publicize tab) you like on your website.

If you want to put your label RSS feed into a static Blogger page and put it on a toolbar beneath your header (as I did - check out my links bar):

1. On the Publicize tab within your RSS name in Feedburner, click BuzzBoost. 
2. Modify the feed settings, then click Save.
3. Scroll up and cut and paste the HTML into a new Page within Blogger (you need to go to your Blogger Dashboard, then click Posting, then click Edit Pages and start a new page.  Paste the HTML in the post section and label the header accordingly). 

TechnoMeg: Link Love

According to Bloggosary, Link love is linking, usually unsolicited, to a site you enjoy, admire, or find useful.  Many bloggers think that Link Love (particularly if it is swapped) is beneficial - it improves traffic, is free advertising, and may improve your Google PageRank.  While Google apparently no longer considers PageRank to be of paramount importance, many advertisers may still regard it as an important indicator.  So why not share the love?

If you would like to swap image button or hyperlink links with me, just grab my button (see below) or URL (http://www.EcoMeg.com) and leave a comment for me in my latest post telling me 1. the location of where you've placed my link and/or button and 2. the HTML of your button or the hyperlink you want me to include, and I will post it (or them) here.

Many thanks!






<br/><center><a href="http://www.ecomeg.com"><img src="http://i973.photobucket.com/albums/ae214/ecomeg/9jn0jl-1.jpg"/></a></center><br/>

Want to know how to create a button like that?  Read here.

****

Text Links:
The Self Love Project
Green Organic Energy

Button Links:

TechnoMeg: LinkWithin - Related Posts with Thumbnails

 

Every once in a while, I come across a blog that has a really nice feature and I do what I can to incorporate it in my blog, too.  Last week, I noticed folks adding Related Posts with Thumbnails, by LinkWithin.  It pops up below each blog entry, pointing readers to other posts of interest.  This is certainly a nice feature to promote longer visits on a website.  It's really easy to add it to a Blogger blog.  I can't speak for other blog platforms.  Just visit the website and follow the instructions.  It doesn't involve manipulation of HTML - you just add a widget.

Happy Blogging!

TechnoMeg: How to Automatically Greet Your New Twitter Followers

Want to be polite and greet your new Twitter followers but don't have the time?  Social Oomph is a free service that will automatically greet them for you, using a message you create yourself.

It also automates a number of other functions.  Check it out.

TechnoMeg: How To Add A Favicon To Your Blog

Do you see the tiny flower on the EcoMeg tab and address bar of your browser, above?  As you might have already surmised, it's my logo.

In this teeny tiny (16x16) form it is called a FAVICON ("favorite icon").  It adds a bit of flair and professionalism (wait, do those to together?) to your website.

Note: to add a favicon you will need to modify your HTML code in Blogger.  It is always a good idea to save a copy of your code before you make any modifications.  To do this: from the Blogger Dashboard, click Settings, Basic, Blog Tools, Export Blog, and save a copy.

Now, here is how I made my favicon:

1. Chose my image.
2. Uploaded it to www.Photobucket.com
3. Resized it to 16x16 (click edit, then resize, then enter 16x16, save)

How I affixed it to my EcoMeg tab and the browser address bar:

1. Still in Photobucket, looking at your flavicon, click Share, then More Options, then Get Link Code.
2. Copy the Direct Link for Layout Pages (the URL in that pale yellow box, below) and paste that URL into the following code:
   
   
   
   

   <link rel="icon" href="favicon.ico" type="image/x-icon" />

   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

   <link rel="shortcut icon" href="YOUR FAVICON IMAGE URL HERE" />

    <link rel="icon" href="YOUR FAVICON IMAGE URL HERE" />

   
   
3. From your Blogger Dashboard, click Layout, then Edit HTML.  Find the following line of code and paste the code from #2 right above it:    </head>
4. Click "PREVIEW" to see how it looks.  If your Favicon is there, click SAVE TEMPLATE and you're done.

Notes: a) You can also build a favicon and enjoy free hosting of it at ICONJ.  b) Examine the head section of your html to see if blogger has embedded its own favicon - if it has, you can substitute the url for your own favicon. 

TechnoMeg: How To Add A "Grab My Button" Image/Box

These things seem all the rage (see mine below and in my left column).  I'm not sure who would want mine but it's fun to have one and they are easy to create.



<br/><center><a href="http://www.ecomeg.com"><img src="http://i973.photobucket.com/albums/ae214/ecomeg/yaCLHW.jpg"/></a></center><br/>

From your Blogger Dashboard, click Layout, then Add A Gadget. Choose HTML/JavaScript.  Type your title (e.g., GRAB MY BUTTON!).  In the Content box below, paste the following code and modify it for your blog as indicated.  (Note: I've found http://www.photobucket.com to be a good host for my online images - a good image size for this is 100x100)

<center><img src="YOUR IMAGE URL HERE"/></center>

<center><textarea rows="5" cols="20" wrap="hard"><br/><center><a href="YOUR BLOG URL HERE"><img src="YOUR IMAGE URL HERE"/></a></center><br/></textarea><span style="font-weight: bold;"><span style="font-weight: bold;"></span></span></center>

(PS - For those of you who want to post similar how-to's through your Blogger blog, you will notice that you cannot simply paste your HTML/JavaScript code into a widget and have it post as regular text.  I used a super site called Postable to overcome this obstacle.  Many thanks to Tips-o-Tricks for pointing Postable out to me!)

TechnoMeg: How To Post An RSS Feed Of One Blogger Label

Highlight a particular label in your blog by giving it its own box, just like I did for my TechnoMeg label (see the left column on my blog, top box). 

I found this PIPE by Ro Zanchetta.  Just input the label name, your blog's URL and the number of posts you want displayed.  Click RUN PIPE.  Then click GET RSS FEED and copy the URL of the RSS Feed.  To add this to your Blogger blog, from your Blogger Dashboard, click Layout, Add a Gadget, scroll down the Basics until you find the FEED gadget.  Paste the URL into that gadget. 

Voila!

TechnoMeg: Adding An Amazon Store To Your Blogger Blog

Adding an Amazon Store to your website is an easy way to earn commissions off of the sale of products you highly recommend.  The best part of it is that you don't have to handle the order-taking, fulfillment, shipping, billing or returns - Amazon does that for you. 

You choose what products appear in your store.  You can add products as links on your blog, a link to a standalone site or in a widget box so shoppers don't feel like they are leaving your website to do their shopping.  You can also choose to add a category banner.

This is what a aStore can look like (this is my aStore).

Just set up an account with Amazon.com Associates and follow the instructions.

Introducing: TechnoMeg

Let me introduce a new label on my blog: TechnoMeg (completely tongue in cheek here, folks).  Blog posts with this label will detail how I built my Blogger blog.  You will have the benefit of reading about the solutions I found without having to listen to the many expletives I muttered while working on them.

If you have any questions about these posts, I am happy to answer them.  Just leave comments and I will do my best to promptly reply.

TechnoMeg: HTML Code for Your Blog's Title, Description and Keywords

Adding keywords (Meta tags) is not the silver bullet for improving web traffic but it should help search engines describe your website.  So in this spirit, it may be a good idea to add them.  Here's how.

1. Go to your DASHBOARD on Blogger.com.

2. Click on the DESIGN button for your blog.

3. Click EDIT HTML.  Save a copy of your template for safety purposes (just click DOWNLOAD FULL TEMPLATE).

4. Look for the following code in your HTML:

<head>

5. Just below the code indicated in 4., paste the following code and substitute your blog's info where you see the blue italicized font:

<TITLE>EcoMeg</TITLE>
<META content='A blog about green living, healthy cooking and organic gardening' name='description'/>
<META content='green living,be green,buy green,green technology,sustainable living,eco living,eco friendly living,eco,organic gardening,planters,garden tools,compost,mulch,gardener,garden design,gardeners,garden structures,patio gardening,organic fertilizers,healthy cooking,cooking recipes,healthy recipes,dinner recipes,quick recipes,healthy recipe,healthy snack,healthy meals,healthy cooking' name='keywords'/>

6. Click SAVE TEMPLATE and you're done.

NOTE: It may be worth your time to visit Google AdWords Keyword Tool to zero in on the most popular and relevant keywords for your blog.

TechnoMeg: How to Hide Your Blogger NavBar

1. Go to your DASHBOARD on Blogger.com.

2. Click on the DESIGN button for your blog.

3. Click EDIT HTML.  Save a copy of your template for safety purposes (just click DOWNLOAD FULL TEMPLATE).

4. Look for the following code in your HTML:

body {

5. Just above the code indicated in 4., paste the following code:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

6. Click SAVE TEMPLATE and you're done.