Showing posts with label Google. Show all posts

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

In a previous post we saw how to add a Google Map to blog. Sometimes having a simple map is not enough. Markers are used on a map to identify points on the map. See picture below (Click on picture to enlarge it):

In above picture you can see a Google Map with Markers in my test blog. Here are the steps to put such a map in your blog......................


STEP 1. Get a Google API key for your blog.

In the first step you have to generate a Google API key for your blog here.
Put a check in "I have read and agree with the terms and conditions (printable version)" box by clicking it. Paste your blogspot URL in the text box and click Generate API Key button. Copy down the key generated.


STEP 2. Modify the Template Code.

Login at Blogger.com

Click Layout link under Blog Title on Dashboard.

Click Edit HTML subtab of Layout tab.

Scroll down in Template Code box and change :

TO :

Save Template.

STEP 3. ADD HTML GADGET in sidebar.

Login at Blogger.com

Click Layout link on Dashboard under blog title.

Click Add Gadget link on Page Elements subtab of Layout tab.

In popup window scroll down and click HTML/Javascript Gadget.

Copy the code below and paste it in Contents window of the HTML gadget :

Customize the above code by :

1. Paste in the Google API key obtained in Step 1 where it says "PASTE_YOUR_GOOGLE_API_KEY_HERE".

2. Put in the latitude and longitude of your map center in this line :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

3. The above code will add 10 markers at random locations. For more information checkout the Google Maps documentation.

Save Gadget.


View the original article here

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Here is an easy way to add Google Calendar to your blog using Google Web Elements.

As shown above you can add it in a post or in a HTML gadget in the sidebar. You can also choose the Agenda view instead of the Monthly view shown above.

With Google Web Elements you can show Calendar, Conversation (Comments Gadget from Google Friend Connect), Custom Search, Map (Google Maps), News, Presentations, Spreadsheets and YouTube News at present and more will be added soon. They are all built by Google so no worries about third party hacks

You can also earn money with the The Custom Search element which displays Ads. by Google and you can choose to share in the revenue by associating your AdSense publisher ID..........................


To add the Google Calendar Web Element follow these steps :

1. Login at Google Calendar.

2. Click the down arrow next to calendar name in sidebar.

3. Select 'Share This Calendar' from drop down menu.

4. In right hand pane click the 'Calendar Details' link/tab at the top.

5. Scroll down and click the orange XML button under Calendar Address.

6. Copy the link in the popup window.

7. Go to Google Web Elements.

8. Click Calendar link in sidebar.

9. Paste your calendar address copied in 6. above in the Calendar Address text box.

10. Customize options : Choose Monthly or Agenda view and size. Choose a width smaller than width of your posts column or you will have to increase blog width.

11. Copy the code given below and paste it in Edit Html tab of Post Editor and publish post or paste in a HTML gadget in sidebar.


View the original article here

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The Blogger Archive Gadget which comes as default with the official Blogger templates has some disadvantages. It does not show all the post titles. Only the titles of the present month are shown leaving the viewer to toggle the arrows to expand the list to see the other titles.

Here is a Google Gadget incorporating Google AJAX API code to retrieve a list of all your post titles from your post feed (Please wait till whole page loads to see it in action) :

The features of this gadget are.............

1. Shows All Post Titles.

2. All Post Titles linked to their pages (permalinks).

3. Occupies small space on blog. Width and height can be customized.

4. Can be put in a post also (unlike Blogger gadgets).

5. Can be styled to match blog colors.

6. Contains official Google AJAX code.

7. It scrolls downwards automatically.

If you would like such a gadget for your blog drop me a mail at :


View the original article here

Powered by Blogger.