List of Bloggers' Addons Categories

Below are the list of links to Bloggers' unofficial Hacks Categories

Embed Google Map Locations Using YourGMap

YourGMap lets you enter your locations in Google Maps and link to your map in their site or embed the map into your website using IFRAME TAGS.

1. Register with YourGMap.
2. Create a map.
3. Enter the Locations in your map. You can also add texts to describe your locations.
4. Customize how your map will look like by choosing a map type, zoom level, center location, and UI options (allow dragging?, show navigation/zoom controls, show type selector -map/-satellite/-hybrid) in Map Settings.
5. Customize your Marker Settings.
6. Now, change the Export Settings for your map. You can customize the size of the map and how you want your map to be exported - you can have a link to a page on their servers or embed the map into your website.
7. Finally Preview & Publish your map. Here you will be given a code that you can use on your website to embed or link your map.

You can view an example of an embeded YourGMap in a website here.

Create Javascript Picture Galleries

Here's an easy way to add picture galleries (with thumbnails) into your blog site. Note that the procedure presented here is for Blogger and Hello users only. This tutorial will help you easily embed picture galleries which you have uploaded using Hello. Follow the step by step procedures below on how to create your picture gallery using javascript.

1. Post/Upload your pictures to your blog using Hello.

2. After uploading, Edit/View your post source code in your Blogger account (Posting->Edit posts).

3. Copy the URL path to your pictures. You shuold see two URL path for your uploaded pictures: (Here's what it looks like on my account. Note: get only the folder path)
3.a. "http://photos1.blogger.com/hello/83/4276/1024/" -- This should point to your large image folder(Note: the "1024" may change on your account, it may be "1600" or any other value depending on the full picture size you have set in your Hello Settings).
3.b. "http://photos1.blogger.com/hello/83/4276/100/" -- This should point to your thumbnail image folder(Note: the "100" may change on your account, it may be "400" or any other value depending on the thumbail size you have set in your Hello Settings).

4. Now copy the codes below to your favorite text editor.

<p align="center"><script> var preurlimage="http://photos1.blogger.com/hello/83/4276/1024/"; var preurlthumb="http://photos1.blogger.com/hello/83/4276/100/"; function changeimage(towhat){if (document.images){document.images.targetimage.src=towhat.src; gotolink=towhat.src;}} function warp(){window.location=gotolink;}var myimages=new Array(); var gotolink="#"; function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=new Image(); myimages[i].src=preurlimage+preloadimages.arguments[i]; document.write('<a style="cursor:hand;" onClick="changeimage(myimages['+i+'])"><img width="50px" height="50px" border="0" class="phostImg" src="'+preurlthumb+preloadimages.arguments[i]+'" alt="'+preloadimages.arguments[i]+'"></a>');}}</script> <script>preloadimages('kitanglad01.jpg', 'kitanglad02.jpg', 'kitanglad03.jpg', 'kitanglad04.jpg', 'kitanglad05.jpg', 'kitanglad06.jpg', 'kitanglad07.jpg', 'kitanglad08.jpg', 'kitanglad09.jpg', 'kitanglad10.jpg', 'kitanglad11.jpg', 'kitanglad12.jpg', 'kitanglad13.jpg', 'kitanglad14.jpg', 'kitanglad15.jpg', 'kitanglad16.jpg', 'kitanglad17.jpg', 'kitanglad18.jpg', 'kitanglad19.jpg', 'kitanglad20.jpg', 'kitanglad21.jpg', 'kitanglad22.jpg', 'kitanglad23.jpg', 'kitanglad24.jpg')</script>
<a href="javascript:warp()" width="100%"><img width="100%" src="" alt="Click on the thumbnails above to preview and load the images here." name="targetimage" border=0></a></p>

5. Change the two quoted URL paths listed below to the URL path you retrieved in step 3.
5.a. "http://photos1.blogger.com/hello/83/4276/1024/"
5.b. "http://photos1.blogger.com/hello/83/4276/100/"

6. Also, change the image filenames inside the "preloadimages()" functions to the jpeg file names that you have uploaded using your Hello. In my example I have: 'kitanglad01.jpg', 'kitanglad02.jpg', 'kitanglad03.jpg', 'kitanglad04.jpg', 'kitanglad05.jpg', 'kitanglad06.jpg', 'kitanglad07.jpg', 'kitanglad08.jpg', 'kitanglad09.jpg', 'kitanglad10.jpg', 'kitanglad11.jpg', 'kitanglad12.jpg', 'kitanglad13.jpg', 'kitanglad14.jpg', 'kitanglad15.jpg', 'kitanglad16.jpg', 'kitanglad17.jpg', 'kitanglad18.jpg', 'kitanglad19.jpg', 'kitanglad20.jpg', 'kitanglad21.jpg', 'kitanglad22.jpg', 'kitanglad23.jpg', 'kitanglad24.jpg'

7. Check your code and delete any breaklines that you may have included during editing. Note that this step is optional and is needed if you have set in your blog posting settings to automatically insert "<BR />" on carriage returns in your posts.

8. Save your post. You may be warned "Your HTML cannot be accepted: Tag is not allowed: <script>", just check the "Stop showing HTML errors for this post" option and save again.

9. Preview your post in your blog site and see if your picture gallery was successfully created.

You can see my working example here.

List of All Blogger's Addons

Here are the list of all Blogger's Addons featured in this site. The list also shows in which category it belongs plus some short descriptions.