How To Add FancyBox to Blogger/Blogspot in 7 Steps

Hello everybody!

Long time no post, but I'm back today with a nifty tutorial on how to add lightbox effects to photos posted to Blogger/Blogspot.

Did you notice I didn't entitle this post "How To Add FancyBox to Blogger/Blogspot in 7 Easy Steps"?

That's because adding this feature takes some pretty advanced coding skills so be prepared to spend some time with this and look up other tutorials on the Web if my directions fail to give you results.  I installed this feature through trial and error and took me about four hours to get it right.

We'll be using a free tool called FancyBox which displays images, html content and multi-media "lightbox" that floats overtop of web page. Click on the photo (above left) of the glamourously bombastic Audrey Hepburn to see what I'm talkin' about!

FYI: this  photo and more very high quality images of famous screen stars can be grabbed for free from Dr. Macro's High Quality Movie Scans.

OK! Now that you've seen what FancyBox can do you want it too,  right? Let's get crackin' on how to install it!

HOW TO ADD FANCYBOX TO BLOGGER

Step #1
First of all BACKUP your template just in case you want to revert back to it.

Step #2
Download FancyBox for free!

Step #3
Rename the downloaded FancyBox folder to something simple like "fb".

Step #4
Upload the folder to your webhost. In this case you will need to use a hosting service to store the FancyBox files because Blogger/Blogspot does not offer storage capability. If you don't have a hosting service, you can get 2gb of storage from Dropbox for free ⬅ Please use this URL so I also can get some free additonal storage in referring them to you!

Step #5
Open the file "jquery.fancybox-1.3.4.css", change all the image URL to the correct image path. Scroll through the text box directly below to view an example of what it's supposed to look like. Remember to change all the URLs in the css document to your webhost. Upload the css file to your hosting site after you're done editing it.




Step #6
On Blogger, go to Edit HTML tab under Design, paste the following code before the </head> tag:



Make sure to change the js and css files to the correct path. I've highlighted the required changes for you!

Step #7
Upload your photos to your blog as you normally would. Then modify the code for the image under the "Edit HTML" tab from this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" imageanchor="1" style=""><img border="0" height="240" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" /></a>

 to this:

<a class="default" rel="fancybox" title:"Download FancyBox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" imageanchor="1" style=""><img border="0" height="240" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZlLsSFm68lCu0HW7grOzO3Ma680lILv8farAewzo2Acxne3fTm6g33I6m-PVTZVmCWVQMpGBQW_i0eKf-3lxjv-wR3IsyE64ZU9pKAmLCd4IOAzSjAqtHXlj5YZ2SejXW2oNWpNUmyTC/s800/Annex%252520-%252520Hepburn%25252C%252520Audrey_061.jpg" /></a>

That is to say to insert the code class="default" rel="fancybox" title:"Download Fancybox"
in between the the "a" and "href" of  "a href=".

I'm still pretty new to this so I'm not sure if I can assist you if you have any issues.  I had to fiddle with it for awhile to get it to work, but it was worth it.  If you need support, your best bet is to read the "How To" page directly on the FancyBox website.  If you have better methods on how to install FancyBox, I'd appreciate (as would other readers of this blog) if you would post your tips in the comments below.

LinkWithin - A Widget for Blogger Related Posts With Thumbnail Images

Hi Eeer-body!

(nod to the Halloweenstress :)

After seven fabulous months at this awesome job I'm about to get laid off next week. During my tenure the company I worked for launched two products. One did very well and I want to brag about it (but won't for privacy reasons) and the other will do well if given time.

However, the parent company I work for has pulled the plug on the late-blooming product so there goes my job as I was one of the last hired so therefore one of the first to be let go. There's talk that the fearless leaders of my company may reconsider their decision but so far it's just talk and I'm hitting the ground running to find another job as soon as possible. I don't know if after I become fun-employed if I'll be blogging again or what but we'll see. My first priority is to line up my next job.

Right now I want to talk about how to customize the "LinkWithin" widget which is designed to keep your readers engaged by featuring related posts with thumbnails appearing under each post and linking to related stories from your blog archive. It makes your old posts accessible to readers of your blog and I think it's a pretty nifty tool.  I began using it late last year when I noticed other crafty bloggeristas had installed it on their lovely blogs.

However, there's just one thing about LinkWithin that always bugged me: by default LinkWithin's related posts thumbnails appear after each post body, ABOVE the post footer. That means it appears (in most cases) above your signature image (if you use one like I do), labels, comments link and timestamp.

I think this placement is disruptive to the design flow of my blog. Personally I prefer the thumbnails to appear BELOW the post footer so I figured out how to fix that and now here's how you can do it:

1) Go to your dashboard and click Design > Edit HTML, and click on the Expand Widget Templates checkbox. Then search to find the following code:

<b:include data='post' name='post'/> 

2) Copy the following code:

<div class="linkwithin_div"></div>

3) And paste the snippet right after the line you just searched, like so:

<b:include data='post' name='post'/>
<div class="linkwithin_div"></div>

4) Click save. You're done!

How To Set Up Your RSS Feed in Blogger

We got mail!

As a matter of fact, it's a question about RSS feeds from SF (who, BTW, is enjoying the use of my free modified 3 column Minima template). SF wanted to know the answer to this question:

Hi Glamour Bomb!

I just wanted to say a thank you for your wonderful Minima wide template (just uploaded it for my blog, and am loving it), and ask a quick question: I'm hearing from my readers that those using Google reader that aren't able to see images in my blog.

Do you know if this is a Blogger issue? Or is there something in the template that I can change to enable them to see the pics? Thanks for any advice you have!

All the best,
SF
Sanity Fair Blog, sfair.blogspot.com

So I went into my Google Reader and subscribed to Sanity Fair's blog and low and behold I discovered that she had set her RSS feed to "Short". This means that subscribers were only getting her blog titles and not her blog body posts in which her photos and images were displayed.

Now why would anybody want to do that?

Well somebody like the Graphic's Fairy who has a sponsored blog may want to capture your eyeballs on behalf of her advertisers when you're grabbing her beautiful freebies.  In this case, it's her desire that you to take them off her blog and not her feed.

BTW, sponsored blogs are awesome because they match content creators with advertisers to offer products and services to a niche market. Sponsored blogs enable the blogger to be compensated for all the hard work they do. And somebody as awesome like the Graphic's Fairy who provides a ton of free, beautiful content deserves a little ching ching for her efforts. Besides, it's obvious that she puts it all back in her blog.  

While I personally am not sponsored, am entirely independent and receive no compensation for the reviews and recommendations I make on this blog, I recently set my RSS feed to short titled posts in an effort to require my readers to read my postings from Blogger directly and not Google Reader.

I did it for the sole purpose that because whenever I'm sharing a video that is not sourced from YouTube (or any other major video sharing site) it does not appear in Google Reader and therefore my readers miss the video. They never see it! And that makes me a sad panda (somebody please hug me) because usually the video I'm displaying is the crown jewel of the blog post so I don't want my readers to miss it.

So...back to Sanity Fair. How can she fix short titled posts to long body posts? It's super easy:

Go to Dashboard ➤ Settings ➤ Site Feed ➤ Change Blog Posts Feed from "Short" to "Long".

That's a wrap for today's post.  I'm always happy to answer your Blogger/Blogspot question. Just contact me!

Remember, I've got a contest giveaway that ends this Sunday and all you have to do is follow this here blog and leave a comment. There are NO comments at the time of this posting so please -- don't make me a sad panda. Give me a hug and go enter my contest right now!

Posting Transparent Images in Blogger (A Follow Up to 1stFloorFlat's Recent Blog Post)

Lucky for me, the background on my blog is white so my readers and I often fail to notice the effects of transparent .GIF and .PNG files.

But in designing darker Blogger templates I've noticed that the issue comes up where supposedly "transparent" items have a white background. In a recent blog post from Susie Jefferson of 1stFloorFlat she offers some quick and dirty work around solutions and it's worth checking it out over there.

I just wanted to take a moment to explain what is going on.

As examples, below are two images of the exact same transparent .PNG file I uploaded to Blogger. Click on them to embiggen.

Indeed one of them showed a white background as if it was mounted on a piece of copier paper.  It just looked horrible! But then with a little hacking, I managed get the file to display its glorious transparent background. (Note since this blog has a white background as I mentioned previously I used screenshots from a blog I'm designing with a darker background).



Now this file (courtesy of the Graphics Fairy) is rather large. I made a .PNG out of it that measures 1000px wide so therefore I selected Picasa's embed code of "400px" to ensure it would fit properly in the main column. For those of you that don't know, all images posted to Blogger are stored in Blogger's sister site Picasa Web Albums, a photo sharing site provided by Google.

Notice the white bits peaking through around the edges?

Well below is how I resolved it:




Notice this image has no bright white lines around the border. It's completely transparent! This is my workaround solution: take the original size and code the dimensions by hand like so:

1. Grab the URL for "Large 800px" (image only, no link).
2. Remove the the part in the URL that reads s800/.  Be sure to include only one (1) slash not two.
3. Insert the URL into your blog by handcoding the dimensions so that it fits precisely in your column. Example: <img src="THE ENTIRE URL WITH S800/ REMOVED" width="DESIRED WIDTH IN PIXELS" />

Of course Susie's got a quicker solution: just upload transparent GIFs and PNGs to Photobucket where you won't have this problem. Again, her detailed solution is here.

How To Install an .XML File for Blogger in 9 Easy Steps!

Ever since I released my FREE modified 3 column Minima templates for the Blogger/Blogspot platform I've been asked a million questions on how to install'em.

As I've suggested before (and now I'm gonna do it again) Sharnee at YummyLolly.com has a kick-ass tutorial that's all in text. It's concise, well written, and super informative.

But if you're anything like me, I never read the directions. Nope! Not me! I push forward and explore by trial and error.  O_o

Yep! That's how I process and integrate information. It's really true what Marshall Mclaren meant when he said "the medium is the message" because now that we're all connected digitally we are literally changing our brains. I mean there are so many ways to exchange information and ideas it's truly freaking amazing that I can share with  you this little video.

Now some folks learn aurally, others learn visually and still others learn kinesthetically.  I know this because used to teach private post-secondary vocational education and it was my job to make sure my students "got it".  If they didn't, well it was all on me for being a poor communicator.

Anyway, so I created this video for those who learn better by watching and doing.  All you have to do is follow along with me and click the "pause" button when you need to. The same steps in the video are also below.

I know this screen is teeny and it's difficult to see what exactly it is I'm doing. So if you click on the little expander on the menu of the player the video will blow up to full screen and you can see all the details.  If this doesn't work then by all means head on over to my YouTube channel 'cuz I know it will click to full screen there.

Remember: before you begin remember to back up your original template before installing!

Now, here's how you install a new one:

1. Click on "Download" button and save file to your hard drive.
2. Extract or "unzip" the file you just downloaded. The .ZIP file opens into an .XML file. UPDATE: 3/17/2010 I no longer zip these files because too many users were complaining they were unable to open them.
3. Login to your Blogger dashboard.
4. Click on "Layout" tab in the dashboard panel.
5. Click on "Edit HTML" menu item.
6. Click the "Browse" button and look for the extracted .XML file on your hard drive.
   (It may be in your Downloads folder or your desktop.)
7. Only select the .XML file. Do not select any other type of file.
8. Click "Upload" button. Be sure to "Keep Widgets" when asked in the pop-up menu.
9. Confirm this action and hit "Save".

Voila! You have a new template! Woo hoo! U R so kewl!

I may go back later and record a voiceover track for those of you who take in information better through their hearing but we'll see.  Somebody is going to have to request that by contacting me or leaving a comment!

Until then, I look forward to bloggers sharing with me what they've done to customize this modded 3 column Minima template and how they skinned it! 

Blogger Trick: How To Remove Banner Border (for Courtney)

Courtney from BeautyandtheBride just installed my 3 Column Minima (Wide) template and had the following question:

I am in the midst of uploading the Minima wide three column template you created for blogger (Thank you!) and have a question. I have a banner/image that I would like to install on my blog. In the fonts and colors area I clicked on the border color to white, so there would not be any lines around my image, but one gray line still remains. Is there any way to get the gray line out from around my image? Thank you again for a cool template! ~ Courtney

OK, Courtney.  This is pretty simple and I'm  going to break it down in 4 easy-peasy steps.

First, let's establish our goal: we want to remove the double border around the top banner. See the "before" and "after" photos below. If you need more clarity simply click on images to embiggen.

 

 This is pretty cinchy! Here we go:

#1

First of all, head to your Blogger dashboard and go to Layout → Fonts and Colors (see above).


#2

 

In the colors box on the left scroll down to "Border Color" and change the border from "Pink" to "White".  (See above).

Then hit "Save Changes".

In some templates this should do the trick. But Blogger is funny and sometimes there's a little code monkey running around in your code that will only allow you to remove just one border outline (not both).  I don't know how it got there and I don't know how to get rid of it. However, I can tell you how to remove the second border.  But I have to tell you now: you're gonna have to go into the HTML code. But don't panic! We can do this! Here we go:

#3

Go to Layout → Edit HTML (see above)

Scroll down until you see the following code:

#header-wrapper {
width: 1000px;
margin:0 auto 10px;
border:1px solid #cccccc;     ← CHANGE THIS VALUE
}

#4

 

Change the part where the hexidecimal color code* (aka HEX) says #cccccc (gray) to #ffffff (white). (See above). 

#header-wrapper {

width: 1000px;
margin:0 auto 10px;
border:1px solid #ffffff;       ← TO THIS VALUE
}

And voila! The color is now white, blending in with the background of your template. (See above).

Hit "Save Changes" and you're good to go!

------
* FYI the HEX code for black is #000000 and here's a table of other color codes.

How To Remove the Navigation Bar From Blogger

It's pretty simple to remove the navbar from your Blogger blog. Just follow the directions in the video above cut and paste the following code below into your template.

#navbar-iframe {
display: none !important;
}

Important: Cut and paste the snippet AFTER the credits as indicated in the video but BEFORE the variable definitions code. Let me know how it goes!

Removing the navbar from blogger disables the "follow" feature for your blog. Be sure to include the "follow" widget in your layout if you want to make it easier for others to follow your blog. Likewise, keeping the navbar brands your blog as a Blogger blog which really is a good thing. It means you're part of the the bigger community of bloggers who use this platform as opposed to WordPress or TypePad. According to Wikipedia, Blogger is ranked 16 on the list of top 50 domains in terms of number of unique visitors in 2007 so you're in good company. Leave the navbar on if you like it, remove it if it interferes with your design. Whatever you decide, I hope you found this tutorial useful.

Oh, and BTW... there's still time to enter my current contest giveaway. More information here.