Lots of Extra Power

One of these batteries has enough juice to charge my iPad once, or my iPhone multiple times. On a couple of road trips I was in a car that didn’t have a stereo, so I brought this along with some portable USB speakers. The speakers played for six hours powered by the Powerstation and only used a tiny fraction of their juice.

By keeping one of these charged at home, I never have to worry about finding an outlet or tethering any mobile device on a short cord to a wall. I can always charge wherever I want to be. I know that sounds trivial but once you have the ability to sit on your couch and charge your iPhone while you play Samurai vs Zombies you really how great portability really is.

Stays Charged

A really nice quality of these batteries is that once they are charged, they stay full for weeks without losing power. I had another similar battery in the past would dramatically lose power after a day or two. It’s great to be able to charge one battery and keep it in a drawer or bag until its really needed.

Looks/Feels Cool

The Powerstation Pro is a gadget I love to show off just for the coolness factor. It looks sleek and modern. It’s rubbery grip feels nice to hold, and the metal rivets around the edge give it a very tough look. I might be bold in saying this is a guy product, but it certainly has a masculine toughness to its design.

Very Durable

Aside from looking tough, this battery holds up to its image. I’ve dropped this thing in the dirt and treated it with zero care, and it seems completely unaffected. I’m not brave enough to test its limit, but if you go to mophie’s website I think they have some durability examples.

Easy to Use

If you have any other mophie products or anything that uses micro-USB to charge, this is a great match up simply for the cable they share. The older Powerstation used an odd female USB cable to charge, but this has a simple micro USB input. That means you can charge the battery wit the same cable you charge your mophie juice pace or other micro USB device with.

Portable

This battery is not the slimmest. Mophie has some very slim batteries in its line up, and this is not one of them. That said, with the amount of power this thing carries, it feels very small. It’s more than worth keeping this thing in my back for the amount of power it can supply.

Value

At $129, this is not the cheapest battery. However, this price is well worth the quality of the mophie Powerstation Pro, as cheaper options on the market may not be able to hold a charge as long or might break easily, which for me is worth the extra couple bucks.

Here’s how to do it:

1. Download lightbox files & unzip

Get lightbox here: http://lokeshdhakar.com/projects/lightbox2/#download

2. Upload the image files

Tumblr allows you to upload static files to your theme. There is a 15mb limit per day, so be careful to do it right the first time! For this step you will only upload the IMAGE files from the lightbox package. You’ll need to edit some of the other files before you upload them.

• Upload files here: http://www.tumblr.com/themes/upload_static_file
  You only need to upload these images:
  close.gif, closelabel.gif, nextlabel.gif, prevlabel.gif
• Copy URLS into notepad as you add them (they should look something like this):

  http://static.tumblr.com/ubwkmto/Nvrweyu/loading.gif

  http://static.tumblr.com/ubwkmto/LXZwerwf5b/close.gif

  http://static.tumblr.com/ubwkmto/5nfasf00f5t/closelabel.gif

  http://static.tumblr.com/ubwkmto/xxawerwef6r/nextlabel.gif

  http://static.tumblr.com/ubwkmto/iN5werw73/prevlabel.gif

3. Edit lightbox.js

find the closelabel.gif, close.gif, and loading.gif referenced in the lightbox.js file and replace them with the absolute image paths from tumblr:

change this (lines 48 – 50):

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

to this (using the URLs you copied from tumblr):

LightboxOptions = Object.extend({
fileLoadingImage: 'http://static.tumblr.com/ubwkmto/N5651/loading.gif',
fileBottomNavCloseImage: 'http://static.tumblr.com/ubwkmto/5sdf159/closelabel.gif',

also change this (on line 122):

<img src="images/close.gif" alt="" />

to something like this (use the URL you copied from tumblr):

<img src="http://static.tumblr.com/ubwkmto/LSDFasdfas651/close.gif" alt="" />

Now you can save and close

4. Edit lightbox.css

change this (line 16 & 17):

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

to this (using the URLS you copied from tumblr)

#prevLink:hover, #prevLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/iN55354f73/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/xx2353456r/nextlabel.gif) right 15% no-repeat; }

Now you can save and close

Note:
DON’T USE THE EXACT VALUES I PASTED ABOVE! They won’t work. I just made dummy URLs. Make sure to do the upload step (step two) and replace the relative paths (../images/whatever.gif) with the absolute paths tumblr gave you when you uploaded your files (http://static.tumblr.com/somegarbled/nonsense/yourimage.gif).

If you need more info about paths, go here: absolute vs relative paths

5. Upload the css and js files

Upload them here: http://www.tumblr.com/themes/upload_static_file
(you will need to upload lightbox.css, lightbox.js, prototype.js, builder.js, effects.js and scriptaculous.js)

Copy the URLs into notepad as you upload them:

http://static.tumblr.com/ubwkmto/fBxm00gtt/lightbox.css

http://static.tumblr.com/ubwkmto/6y3m00gua/lightbox.js

http://static.tumblr.com/ubwkmto/nsLm00fbl/prototype.js

http://static.tumblr.com/ubwkmto/Ag0m00fcp/builder.js

http://static.tumblr.com/ubwkmto/Ag0m00fcp/effects.js

http://static.tumblr.com/ubwkmto/Ag0m00fcp/scriptaculous.js

6. Reference the js and css files in your theme header:

In your Tumblr dash, go to Customize Theme > Edit HTML
Just before the </head> add these:

(these need to be in this order, make sure to replace the URLs with the ones you got from tumblr)

<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/nsLmasdfbl/prototype.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/Ag0asfdfcp/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/RUasdf2/effects.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/5adf0f7r/builder.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/6asfgua/lightbox.js"></script>

7. Activate the script in your theme images

Go to Customize Theme > Edit HTML
Just after the {block:Photo}, find the {LinkOpenTag} and change it to this:

<a href="{PhotoURL-HighRes}" rel="lightbox[image]" title="{PhotoAlt}">

Note:
the title=”{PhotoAlt}” part is optional
the title will give a caption to your lightbox images when viewed

If you did this correctly, now when someone clicks an image that has been posted as a photo-type post, it will bring up a cool slide show of all the images currently loaded on the page. This is a great feature for any photo blog!

See an example on my tumblr

Comment on this post or contact me on tumblr if you have any questions about this! Good luck!

Shoutout: I was having some trouble with this at first, but a little trick I got from Greg Riley’s Blog helped me figure this out. If this helps you out, show Greg a little appreciation by following his tumblr. Thanks Greg! 

The way to manage this problem is with a free utility called Treesize Free by Jam Software.

This awesome little application will scan your disc drives and give you a hierarchical view of which directories consume the most hard drive space. This way you can get a visual look at where you need to reduce space, and will help you locate any ballooning config files, remaining files from old programs, music directories you forgot about, or any other large files/folders on your windows computer.

Treesize Free:

most of my disc space is consumed by program files

looks like I need to delete some Steam games!

So that’s it really. Now it’s really easy to see how I can make the largest impact on my disc space in the least amount of time. This certainly beats checking file sizes by digging through every file and folder.

If you need any more information about this, feel free to contact me!

Some Helpful Links:

• Download Treesize Free
• Check out Treesize Pro
• See other tools from Jam Software

The easiest way to do it is to add a class that only appears on single posts, its actually pretty simple and really makes me love tumblr for having this kind of flexiblity. Here’s how:

1. In the Edit HTML view of your Tumblr (in customize appearance), find this tag: {block:Posts} and paste this code immediately AFTER it:

   {block:PermalinkPage}<div class="single-post"> {/block:PermalinkPage}

   

2. Find this tag: {/block:Posts} and paste this code immediately BEFORE it:

   {block:PermalinkPage}</div> {/block:PermalinkPage}

   

So what you’ve just done is added a containing div that only appears around content on a single page/post. This gives you a lot of flexibility in what you can do with the CSS, so if you want to remove your pinterest button from single posts, just add this to your custom CSS:

.single-post .pinterest {display: none;}

(this is assuming your pinterest button has a containing element with class=”pinterest”)

With a little CSS knowledge you could really use this information to completely redesign single pages and have them look entirely different from your index page if you want. Imagine the power!

Feel free to contact me on tumblr or comment below if you have questions about how to do this!

1. Log in to tumblr, go to Customize Appearance > Edit HTML
2. Paste this code immediately before the </head> tag:

   <div id="fb-root"></div>
   <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=271140516272162";
   fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));</script>

   
3. Paste this code just before the end of the post content. This is not the same for all themes, but usually it is between the tags {/block:PostNotes} and {/block:Posts}. Just try pasting it in different places within the code and hitting “update preview” until it looks right.

   <div class="facebook-button"><div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div></div>

   

Make sure to click “update preview” before saving to make sure you don’t break your theme. If you did something wrong or this doesn’t work with your theme you should just refresh the page or close your browser so you don’t save the changes (otherwise you’ll have to install a new theme/reinstall your theme).

Good luck!

To make life easier, I created a simple macro which turns [ctrl + 8] and [ctrl + shift + 8] into opening and closing comments. This dramatically reduces time and frustration in CSS. See the animation below for a quick example of how to do it:

Like this? Please contact me with any questions! Or leave a comment below.

Before reading: there are a couple problems with this Pinterest and Tumblr integration. It only works on image post types (as opposed to link, quote, video, etc.) on tumbrl. The Pinterest button will show on every post you make, but it will only work if there is a single image associated with the post in order for the {PostURL-500} shortcode to work.

Nonetheless, here is a way to make it work:

1. Get the “Pin-it” button code from Pinterest. It’s pretty far down the page.
   • For the first URL field just enter your website URL, like http://yoursite.tumblr.com
   • For the second URL field just enter something like xxxx (we’ll replace this in a minute)
   • Leave the description blank
   • Set to advanced mode
   • Copy the code
2. Find where to paste the code from your dashboard
   • From your tumblr dashboard go to: Preferences > Customize Your Blog > Edit HTML
   • Paste the <script> portion of the code wherever you keep your scripts
   • Paste the rest of the code code just before this line:
     

     </div><div class=”META” …

   • You may need to try placing this in other areas depending on your theme
3. Replace the media URL (xxxx) with the tumblr shortcode
   • Make it look like this:
     

     …&media={PhotoURL-500}” count-layout=”horizontal”>Pin It</a>

   • {PhotoURL-500} is the key part you’ll need to make this work dynamically for every different image.
4. Use CSS to place your link correctly.
• Unfortunately this post is not a lesson in CSS, but you’ll need to use CSS to move the link where you want it to be.

Some notes:
This method will make a “Pin It” button on every post you make on your tumblr. Unfortunately, if someone tries to pin a post that is not an image type, Pinterest will not grab an image. If someone knows a fix for this please comment below.

Check it out at my tumblr!

On Facebook, if your fans are not engaged by your content, Facebook’s not gonna share it with everyone. And why on earth would your friend Fran, a hairdresser in Minnesota, be interested in any content related to your surfing website (or whatever your niche might be)? If she and others don’t like or follow your page and don’t respond to your content, Facebook will algorithmically mark your posts as lame. No one will see the groundbreaking photo sesh you did of famous surfer Damien Hobgood.

On the other hand, a small list of very interested followers will likely click, comment on, and share your content. Facebook will promote these social “likes” and comments in the newsfeed of their connections who may be interested as well. If your 600 high school friends see your posts first and don’t “like” them, the five people out there who care will never hear the news.

I feel super dumb saying the title of this plugin, because it sounds so silly, but it’s definitely worth a recommendation and something you should have in your WordPress dashboard. The main reason you’ll be saying “Wassup” to any of your WordPress buddies (har har) is that this plugin gives you great data about how you’re coming up in search engines.

The plugin gives a very close look at the individuals who visit your site, vs Google Analytics which gives a much broader look at trends and demographic information. I’m sure that some way or another you could get this information from Google Analytics, but its really nice to have such a close look at how your SEO work is coming along right from the heart of your WordPress site.

Just some of the Wassup features you should know about:

• Allows you to filter by or exclude traffic from search engine spiders in your data
• Allows you to filter spam traffic from the results
• Graphs data for various time measurements, from one hour to all time
• Gives a top ten list of your incoming traffic’s top search query, top referrer, top request, top browser, and top OS
• Enables a graph of recent traffic directly on your dashboard
• Has a widget which allows you to post traffic information in any widgetized area of your site (sidebar, footer, etc.)
• It’s free! (download it here)

Have questions about this plugin or WordPress? Feel free to contact me or follow me on twitter: @nickolusweb.

1. A Class or Event Calendar

   If you have classes or events at your store, its easier than you think to have and manage a calendar on your website that all your customers can use.

2. Advanced Tracking of Your Traffic

   Do you know how many people visited your site today? Do you know the search they placed in Google to find you? If you don’t have tools in place to measure these kinds of details, they are free and can be implemented by anyone with just a little bit of web knowledge.

3. The Ability to Add/Remove/Change Content on the Fly

   Some designers put their clients into the trap of needing to return to them for any small change. With today’s modern web tools, no one should need to know how to edit code in order to be able to manage their website. If you’re in this trap, a small investment in building a new WordPress site could save you thousands over the years.

4. Tools to Connect Your Site With Social Media

   Your visitors should have the ability to connect with you on Facebook with a single click. If your website is lacking this simple feature, it may be time to upgrade your website.

5. Email Sign Up and Contact Forms

   Content management systems like WordPress have tools that allow you to create forms without editing a single line of code. If you have a WordPress site, creating a new sign up form is as easy as creating an account on any website.

6. A Blog or RSS Feed

   The main value of a blog is to continuously add content to your website so you’ll be more and more likely to be found in search engines. They also give the opportunity for your customers to interact with your site and give a reason for visitors to come back. Although it doesn’t need to be the main focus of your website, having a blog and posting regularly will give you more traffic and user interaction.

7. “Pretty” URLs

   Look at the address in your browser when you view different pages on your website.They should look like this:
   www.mysite.com/contact
   or
   www.mysite.com/about-usThey should not look like this:
   www.mysite.com/?thisisthepage&pageid=987965876

   Not only are URLs that are too long with special characters bad for your SEO, but they are also hard to remember, difficult to type, and don’t look as clean and professional. This alone is a good reason to get a new website if you’re not already running a site on WordPress.

8. Basic Search Engine “Friendliness” 

   If you’re not a very web savvy person, this next part will not make that much sense. If you rely on a web designer for your website, ask them the following questions, the answer should be “yes” to all of the following questions in order for your site to start getting noticed in Google.

   • Does it have a robots.txt file set up?
   • Does it have a sitemap.xml file?
   • Has the sitemap been submitted to Google and Bing?
   • Does every page have a Unique h1 tag?
   • Does it have a meta title and description that tell what your site is about?
   • Does your code validate and if not, has every fixable issue been taken care of?
   • Does the address http://yoursite.com/ redirect to http://www.yoursite.com/ ?

   Having all of these issues taken care of is a small but good start for any new or growing website.

How does your site match up with the eight features listed above? Is it time for an upgrade? Check out our pricing for small business websites, you’ll be surprised how little a new amazing website will actually cost.