How to Embed Google Map Add Google Maps to your Website

Embed a map or directions

To embed a map or directions in a website or blog, follow the steps below.

1. Open Google Maps.
2. Make sure the map, Street View image, or directions you'd like to embed shows up on the map. Type your organization's address into the search box, and then hit [Enter]. Google Maps will display a pin on a map indicating the location
3. In the top left corner, click the Menu .
4. Click Share or Embed map.
5. At the top of the box that appears, choose Embed map.
6. Choose the size you want, then copy the HTML embed code and paste it into the source code of your website or blog.

Notes:

• If you're using Maps in Lite mode, you won't be able to embed a map.
• Traffic information and other Maps info might not be available in the embedded map.

Share a map or location

To share a link to your map with others, follow the steps below.

1. Open Google Maps.
2. Make sure the map, Street View image, or directions you'd like to embed shows up on the map.Type your organization's address into the search box, and then hit [Enter]. Google Maps will display a pin on a map indicating the location
3. When you're ready to share, click the Menu .
4. Select Share or Embed map. If you don't see this option, click Link to this map.
5. Optional: To create a shorter web page link, check the box next to "Short URL."
6. Copy and paste the link wherever you want to share the map, like an email or Google+ post.

Tip: You can also copy the web address from your browser's address bar in all browsers except Internet Explorer 8 or 9.

What you can and can't share

Things you can share:

• A place, business, or address
• A directions search
• A Street View image

Things you can't share:

• A map with your saved locations, which are private
• A map with a distance measurement
• A screenshot or image of the map itself

Examble:

<center>
 <iframe src =
  "https://www.google.com/maps/embed?pb=********"
    width = "600"
    height = "450"
    frameborder = "0"
    style = "border:0"
    allowfullscreen > 

 </iframe>
</center>

Resource https://support.google.com/maps/

Go back to home page 

How to Add Images in Blogger Widget Sidebar

Most of us already know adding images to Blogger posts or creating an image gallery in blogger is as simple as you like. However, have you ever thought about adding an image in the sidebar widget of your Blogger site? Recently, we were asked by one of our reader at our Facebook fan page that how to add images to Blogger Sidebar Widgets? You can use the same technique to display affiliate image advertisements on the sidebar of your site. In this article,f we will show you how to add images in blogger widget sidebar.

Fortunately, Blogger does provide a built-in image gallery widget that can easily be added to your blogger enabled site, to do so follow the following instructions.


The very first thing you’ll be doing is to go to Blogger.com >> Layout >> Add a Gadget. Now you’ll notice a list of widgets providedfac by Blogger that can be added to your site. Since, we are adding image widget so scroll down to “Image” Widget as it can be seen below:

Now you will notice a couple of options that you can fill according to your desire needs. Input the title of the image in the “Title” text field, “Caption” or “Hyperlink” of the image. Once you are done filling text fields, try uploading the image either from your hard drive by browsing the image or upload it form URL of the image as it can be seen in the below screenshot.

Once everything is done, Press the “Save” button and that’s it. You can arrange the widget in the sidebar by selecting and dragging to the location you like and after that “Save Arrangement”.

We hope this tutorial may have helped you in learning something that you didn’t knew before. Do share your thoughts by letting us know what your opinions about this simple but efficient tutorial.

If you like this tutorial, then do share it with your friends on Facebook, Google+ or  even twitter. If you want to get updates directly in your inbox then subscribe to our newsletter.

Resource http://3.bp.blogspot.com/

How to embed a flash .swf paint game to your webside

<div class="kidmonsgame" data-width="830" data-height="590" data-gameid="paint-online">
  <a class="kmlink" href="http://kidmons.com/game/paint-online" target="_blank">More free games</a></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 = "//cdn1.kidmons.com/sdk/embed.js";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'spritted-sdk'));
  </script>

Play also on your mobile device

Resource http://kidmons.com/embed/paint-online

Go back to home page 

How to Add Social Icons to Your Blogger Blog

Do you want to add social media icons to your blog so that readers can find you elsewhere on the web? Here are step-by-step instructions. 

Overview: You will add an "HTML/Java Script" gadget to your sidebar, and these instructions will walk you through writing the HTML code. I'm no HTML expert; if I can do it, so can you. The idea is to link publicly available images of social media icons (which you will host on Photobucket) to your own social media pages. 

Basic Tutorial

Step 1: Find a set of icons you like.

Google "free social media icons" and you'll find great links to free icons. Here are two I like: The Ultimate Roundup of Amazing Free Social Media Icon Packs and 50 Free Social Media Icon Sets. Download the set of icons, which often include different sizes. The buttons I use are 32 x 32 pixels.

Step 2: Upload the images you want from the set to a Photobucket account.

• Open a Photobucket account if you don't have one. Set it to public.
• Upload the specific icons you want to use to your account.

Step 3: Write HTML code that will link these images to your social sites.

• Open a separate text file or word document to write your code.

• The code for each icon will follow the format below (in this example, the red link is my Twitter page and the blue link is my Twitter icon on Photobucket). The rest of the steps will show you how to create this code. 

• To get this code, go to your Photobucket account. Go to the image you want on Photobucket (e.g., Twitter icon), click on it, and you will see a box like this on the right part of the page. Click your cursor inside the third box that says "HTML code." This will copy the code, but you will need to tweak it a bit.

click on the third line (HTML code)

• Paste the code into your working document. It will look like this:

• Replace the first link (the one highlighted in red) with your social media link. To get your social media link, go to your site (Facebook Fan page, Twitter profile, etc.) and copy the address from the browser bar. Your finished code for one social icon will look like my Twitter code above.

• Repeat this process for each social icon you want to use. If you have three icons, Facebook, Twitter, and G+, you will have three paragraphs in your code. At the end of this post are instructions for a more sophisticated look and specific instructions for an RSS feed icon.

• Copy the entire finished code. You will be pasting this into your Blogger gadget.

Step 4: Post the code onto your blog.

• In Blogger, go to Layout --> Add a Gadget. I recommend placing the gadget in the upper part of your sidebar.

• Find and select the HTML/Java Script gadget.
• Paste your code into the Content box. You can leave the title blank, or you can add a title like, "Find me on the Internet" or whatever you want to say about your icons. I think most people understand what the icons mean, so I don't use a title.
• Save and you're done. Admire it on your page. (And check to see that the links work).

Advanced Tutorial

1. Code for RSS Link

Before adding an RSS icon, you need to create an RSS feed. (An RSS feed is a way to syndicate your content. Readers subscribe to your feed and your posts show up in their readers of choice).

• To create/find the link for your RSS feed, go to www.feedburner.com. It may ask you to sign in with your Google account. Look for a box that will offer to burn a feed for you instantly. Insert your Blogger address and hit "Next." You will then see a screen like this:

• Pick a name for your feed address, then hit "Next." Feedburner will confirm that your feed address is "http://feed.feedburner.com/nameyoupicked." This is the link you use for your RSS icon (it will go where the red link was in the HTML code). 

2. Create a text that appears when someone hovers over your icon. 

If you hover over the icons on my website, you will get a message like, "Follow me on Twitter" or "Follow me on Pinterest." To get this effect, add the following (purple) text to your HTML code:

Change the label as appropriate for each social media icon.

3. Add spaces between your icons.

If you find the icons look too squished together, you can add some space between each icon by adding the following at the top of your code. Play around with the number of pixels to change the spacing (this code sets it at 3px):

4. Center your icons.

If you want to center your icons, add the blue bolded code in front of your first paragraph (your first set of icons):

Hope this has been helpful. If you're an HTML expert and have an easier way to do this, please let me know. Let me know if you have any questions or issues with these instructions. Thanks!

Resource http://www.sylvialiuland.com/2012/04/how-to-add-social-icons-to-your-blogger.html

How To Add Social Media Icons To Your Blog...

Hi everyone. I hope you are up for a little blogging tutorial....Adding social media icons to your blog!! You know I love picture tutorials, so this one will be loaded too.
What are social media icons? They are the little cute buttons you see on other blog that, if clicked on, will direct you to their Pinterest page, Facebook page, Twitter account, contact info etc...
Here are my new ones. Aren't they cute?

My old social icons were round with red and white polka dots. I made them my self a long time ago with Picnik, but never liked the fonts for each icon. Now that I belong to more sites like Pinterest etc, I just don't have the design programs or the skills to get fancy!!

Well, I found a fabulous website where you can chose from 15 different colors for each set social media icons...and they're FREE. Click HERE to visit Carrie Loves and see the beautiful social media icons she is sharing.

Here's just a peek...a set of 12 icons in 15 colors!!

Now let's get started...

How To Add social Media Icons To Your Blog

First, you will need to do a few preliminary things.

• down load the icons to your computer
• then upload them to Photobucket...this will give us the Direct Link address for each icon
• open a Word Document for the HTML code

STEP 1.

Down load any social media icons you like or icons you have designed yourself to your computer. Here is the set of icons in the color Fire that I picked for my blog from Carries site.

STEP 2.

Select the individual icons that you want on your blog and upload them to Photobucket. I've always used Photobucket to find linking codes for my images. Here are the icons I uploaded to my Photobucket account.

STEP 3.

Now open up a Word Document...this step just makes it easier to copy and paste the whole code into your dashboard. You will be copying and pasting THIS code for EACH icon you will be adding.

<a href="WebsiteAddressHere"><img src="ImageDirectLinkHere" /></a>

WebsiteAddressHere...this is the URL http address for each of YOUR websites like your facebook, twitter, pinterest etc.

My example for MY Pinterest account is...http://pinterest.com/sewmanyways/

ImageDirectLinkHere...this is the Direct Link address from each image on Photobucket. Just hover over each image and then click on the Direct Link and it will automatically copy it for you

STEP 4

Open a Word Document and copy that original code.

Here is a screen shot of the Word Document. I've added spaces between each one just to make it easier to see. 

When you are finished, delete the spaces before copying the whole code. 

STEP 5

Before you copy and paste all YOUR addresses and Direct Link codes into each space, make sure you delete my words that are highlighted...just don't delete the quotation marks. 

Here's MY example...

STEP 6

Next, remove the spaces and copy the whole code.

STEP 7

Now go to your Dashboard...click on

• Layout
• then Add Gadget
• then add HTML/JavaScript Code

STEP 8

PASTE your whole code you copied from the Word Document into the HTML box.

Click SAVE. 

To move your icons, drag and drop them where ever you want your icons to be on your side bar and click save again

That's it...Your Done!!!

Here are the sample icons I made for this tutorial...

I really hope you give this a try. I know the word CODE can be scary for some, but you are just copying and pasting. If you make a mistake and the icons don't work, just remove them and start over. 

UPDATE...I did a post specifically about the address for the email button. Click HERE for that.

Have fun with it!!

Happy Blogging,

~Karen~

Hi everyone. I hope you are up for a little blogging tutorial....Adding social media icons to your blog!! You know I love picture tutorials, so this one will be loaded too.

What are social media icons? They are the little cute buttons you see on other blog that, if clicked on, will direct you to their Pinterest page, Facebook page, Twitter account, contact info etc...

Here are my new ones. Aren't they cute?

My old social icons were round with red and white polka dots. I made them my self a long time ago with Picnik, but never liked the fonts for each icon. Now that I belong to more sites like Pinterest etc, I just don't have the design programs or the skills to get fancy!!

Well, I found a fabulous website where you can chose from 15 different colors for each set social media icons...and they're FREE. Click HERE to visit Carrie Loves and see the beautiful social media icons she is sharing.

Here's just a peek...a set of 12 icons in 15 colors!!

Now let's get started...

How To Add social Media Icons To Your Blog

First, you will need to do a few preliminary things.

• down load the icons to your computer
• then upload them to Photobucket...this will give us the Direct Link address for each icon
• open a Word Document for the HTML code

STEP 1.

Down load any social media icons you like or icons you have designed yourself to your computer. Here is the set of icons in the color Fire that I picked for my blog from Carries site.

STEP 2.

Select the individual icons that you want on your blog and upload them to Photobucket. I've always used Photobucket to find linking codes for my images. Here are the icons I uploaded to my Photobucket account.

STEP 3.

Now open up a Word Document...this step just makes it easier to copy and paste the whole code into your dashboard. You will be copying and pasting THIS code for EACH icon you will be adding.

<a href="WebsiteAddressHere"><img src="ImageDirectLinkHere" /></a>

WebsiteAddressHere...this is the URL http address for each of YOUR websites like your facebook, twitter, pinterest etc.

My example for MY Pinterest account is...http://pinterest.com/sewmanyways/

ImageDirectLinkHere...this is the Direct Link address from each image on Photobucket. Just hover over each image and then click on the Direct Link and it will automatically copy it for you

STEP 4

Open a Word Document and copy that original code.

Here is a screen shot of the Word Document. I've added spaces between each one just to make it easier to see. 

When you are finished, delete the spaces before copying the whole code. 

STEP 5

Before you copy and paste all YOUR addresses and Direct Link codes into each space, make sure you delete my words that are highlighted...just don't delete the quotation marks. 

Here's MY example...

STEP 6

Next, remove the spaces and copy the whole code.

STEP 7

Now go to your Dashboard...click on

• Layout
• then Add Gadget
• then add HTML/JavaScript Code

STEP 8

PASTE your whole code you copied from the Word Document into the HTML box.

Click SAVE. 

To move your icons, drag and drop them where ever you want your icons to be on your side bar and click save again

That's it...Your Done!!!

Here are the sample icons I made for this tutorial...

I really hope you give this a try. I know the word CODE can be scary for some, but you are just copying and pasting. If you make a mistake and the icons don't work, just remove them and start over. 

UPDATE...I did a post specifically about the address for the email button. Click HERE for that.

Have fun with it!! 

Happy Blogging,

~Karen~

Resource http://sewmanyways.blogspot.gr/2012/10/how-to-add-social-media-icons-to-your.html

Go back to home page