Display Your Photos By Adding A Flickr Badge To Your Sidebar

Displaying photos in your Blogger blog from your Flickr account is quite simple. All you need to do is get the Flickr Badge embed code from Flickr and paste it into an HTML/JavaScript page element. Of course, to get the Flickr badge to blend seamlessly with your layout, there are improvements to the styling you can apply.

To start, head over to Flickr (http://flickr.com/badge.gne) and configure your badge to your liking. If you want more freedom in the number of photos to show and image styling, make sure you opt for the HTML version. Make sure you choose an image size that will fit inside your sidebar or it will be cut off. You can force the badge to inherit your blog's background by selecting "No Background" in the Layout step of the Flickr badge configuration.

Once you have set up the badge to your liking, copy the embed code:



Then navigate to your blog's Template settings and select the Page Elements heading:



Click Add a Page Element:



Select HTML/JavaScript:



Paste the Flickr badge embed code into the content area and give your widget a useful title:



Save your changes and your Flickr photos will now display in a sidebar widget.

Tip: To center the badge within the page element you will need to add the following line of code to the <style> section of the badge code:

#flickr_badge_uber_wrapper {margin-right:auto; margin-left:auto;}