The Life-Is-Travel Widget

Installing the "Life Is Travel" Widget
(estimated setup time < 3min)

Kicking off the first entry in the "Better Blogging" series. I want to help other travelers get the most out of their blogs (Facebook likes, organization, etc.). Of course, Other bloggers are free to peek in as well. The first is this widget. It auto-adjusts to fit into almost any sidebar or even a footer, then links to the Wayfaring Bloggers page. The same code that put the widget at the bottom of my sidebar put the widget at the end of this blog entry. Installing the widget is EASY!

Choose your blogging platform:
• How to Install the Widget on Blogger
• How to Install the Widget on Wordpress
• How to Install the Widget on a Different Platform

How to Install the Widget on Blogger

1. Copy this code:
<div style="margin: 0; padding: 0; text-align: center; border: 0; border-top: 2px #000 solid; border-bottom: #000 1px solid;" id="l2ttopdiv"><a style="margin: 0; padding: 0; display: block; border: 0; border-top: 4px #fff double; border-bottom: 2px #ff0 dashed; background-color: #000; color: #aaa; font-family: trebuchet, times, serif; font-weight: bold; line-height: 2.2em; height: 2.4em; font-size: 14pt; letter-spacing: 2px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2ttoplink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">life-is-travel</a></div><div style="margin: 0; padding: 0; text-align: center; border: 0; border-top: 1px #000 solid; border-bottom: #000 2px solid;" id="l2tbtmdiv"><a style="margin: 0; padding: 0; display: block; border: 0; border-top: 2px #ff0 solid; border-bottom: 4px #fff double; background-color: #000; color: #aaa; font-family: trebuchet, times, serif; font-weight: bold; line-height: 2.2em; height: 2.4em; font-size: 14pt; letter-spacing: 2px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2tbtmlink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">travel-to-live</a></div><div style="margin: 0; padding: 0; text-align: center; border: 0; background-color: #000;" id="l2tftrdiv"><a style="margin: 0; padding: 0; border: 0; color: #fff; font-family: trebuchet, times, serif; font-weight: normal; line-height: 1.2em; font-size: 12pt; letter-spacing: 1px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2tftrlink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">more travelers here</a></div>
2. Log in to blogger, then go to the "Design" section.
3. Go to "Page Elements" (if you're not already there)
4. Above your sidebar, click "Add a Gadget"
5. Click the + next to the "HTML/JavaScript" gadget
6. Paste the code into the gadget's "Content" section
7. Click the "Save" button in the gadget window
8. Move the gadget by dragging it where you want in the sidebar
9. Click the "Save" button in the design window

How to Install the Widget on Wordpress

1. Copy this code:
<div style="margin: 0; padding: 0; text-align: center; border: 0; border-top: 2px #000 solid; border-bottom: #000 1px solid;" id="l2ttopdiv"><a style="margin: 0; padding: 0; display: block; border: 0; border-top: 4px #fff double; border-bottom: 2px #ff0 dashed; background-color: #000; color: #aaa; font-family: trebuchet, times, serif; font-weight: bold; line-height: 2.2em; height: 2.4em; font-size: 14pt; letter-spacing: 2px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2ttoplink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">life-is-travel</a></div><div style="margin: 0; padding: 0; text-align: center; border: 0; border-top: 1px #000 solid; border-bottom: #000 2px solid;" id="l2tbtmdiv"><a style="margin: 0; padding: 0; display: block; border: 0; border-top: 2px #ff0 solid; border-bottom: 4px #fff double; background-color: #000; color: #aaa; font-family: trebuchet, times, serif; font-weight: bold; line-height: 2.2em; height: 2.4em; font-size: 14pt; letter-spacing: 2px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2tbtmlink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">travel-to-live</a></div><div style="margin: 0; padding: 0; text-align: center; border: 0; background-color: #000;" id="l2tftrdiv"><a style="margin: 0; padding: 0; border: 0; color: #fff; font-family: trebuchet, times, serif; font-weight: normal; line-height: 1.2em; font-size: 12pt; letter-spacing: 1px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2tftrlink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">more travelers here</a></div>
2. Log in to Wordpress and go to the Dashboard
3. Under "Appearance", click on "Widgets"
4. Drag a new "Text" widget to where you want it in the sidebar
5. Paste the code into the area below the title area
6. Click the "Save" button

How to Install the Widget on a Different Platform

1. Copy this code:
<div style="margin: 0; padding: 0; text-align: center; border: 0; border-top: 2px #000 solid; border-bottom: #000 1px solid;" id="l2ttopdiv"><a style="margin: 0; padding: 0; display: block; border: 0; border-top: 4px #fff double; border-bottom: 2px #ff0 dashed; background-color: #000; color: #aaa; font-family: trebuchet, times, serif; font-weight: bold; line-height: 2.2em; height: 2.4em; font-size: 14pt; letter-spacing: 2px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2ttoplink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">life-is-travel</a></div><div style="margin: 0; padding: 0; text-align: center; border: 0; border-top: 1px #000 solid; border-bottom: #000 2px solid;" id="l2tbtmdiv"><a style="margin: 0; padding: 0; display: block; border: 0; border-top: 2px #ff0 solid; border-bottom: 4px #fff double; background-color: #000; color: #aaa; font-family: trebuchet, times, serif; font-weight: bold; line-height: 2.2em; height: 2.4em; font-size: 14pt; letter-spacing: 2px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2tbtmlink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">travel-to-live</a></div><div style="margin: 0; padding: 0; text-align: center; border: 0; background-color: #000;" id="l2tftrdiv"><a style="margin: 0; padding: 0; border: 0; color: #fff; font-family: trebuchet, times, serif; font-weight: normal; line-height: 1.2em; font-size: 12pt; letter-spacing: 1px; text-decoration: none;" href="http://wayfaringblogs.blogspot.com/" target="_blank" id="l2tftrlink" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">more travelers here</a></div>
2. Create a new html-enabled item for your sidebar
3. Paste this code into your new object and save it
4. If you need assistance, contact me.


If you have any troubles with the widget, or would like to see steps for a different platform on this page, then contact me. Same goes if you just have any suggestions or other comments. Same goes if you'd like to see something specific in the "Better Blogging" series. I've found myself landlocked and wintering in Austin, Texas at the moment... so I actually have a bit 'o time on my hands to play around with the Internet. What can I do to make your own blogging experience better?

NOTE: For any code-junkies out there: yes, this widget is image-free and is HTML5 compatible. It uses CSS styles inside HTML blocks, using JavaScript to underline/de-underline the links. The triple usage of "travel" also makes it great for SEO on any travel blog. We came to drop bombs!

life-is-travel

travel-to-live

more travelers here