How to put music on Google Blogger/Blogspot

There are many ways of putting music on your Google Blogger/Blogspot and it's another fun easy way to draw more users to your site.  My favorite is mixpod, which has been around for quite some time now.  With mixpod is  you can select from a few of their ready made skins or, a personal favorite of mine, is the MiniPod which lets you customize the skin with the option of using some select eyecandy designs.  Mixpod has their own search engine, mostly YouTube approved videos/songs.  If you are unable to find the video/song you are looking for you have the option to manually enter a YouTube URL and once approved MixPod allow you to add to your playlist, the approval usually takes about twenty-four hours.

Here are the instructions to adding music to your Google Blogger/Blogspot:

© Copyright: see author in the original source of this image.

When done correctly the Music Player below will be your outcome.  As you can see, you can also copy and paste the code right into a blogpost.  This is a great idea when posting something and using music to get the artistic point across to the readers of your blog.







Music Playlist at MixPod.com

Free Resume Tip: Create an attractive Resume on #CapitalAreaHelpWanted.com

When posting your resume on CapitalAreaHelpWanted.com to apply for jobs you have probably noticed how there are no options to create an attractive resume using bullets, underline and bold.  There is actually a way around that when posting a resume on CapitalAreaHelpWanted.com's website, you can view how mine looks by clicking here to view it.

First, if you haven't already done so, is first create a resume using a word processing program, such as Microsft word or my personal favorite is LibreOffice Writer because it is free and you can save documents in *.doc Microsoft Word Format.  Once you have completed your resume at the top click File --> Save As and than save as a HTML document, you will need to change the file type from the default output format to HTML.  In the newer versions of word processing programs simply saving the resume as resume.html will also work.

Next open up your web browser and now on the menu bar you will need to go to File --> Open or use the shortcut/hotkey on your keyboard by pressing Ctrl+O.  Now browse to where the resume is save and open it.

To view the HTML source code for a Web page using Internet Explorer 3.x and later, click Source on the View menu. To view the HTML source code for a Web page using Internet Explorer 2.x, and FireFox you can right-click the Web page, and then click View Source.   FireFox's shortcut/hotkey is Ctrl+U on the keyboard.  In the new window that has opened, go to Edit on the menu bar and choose the option select all, the shortcut/hotkey on your keyboard is Ctrl+A.  Now go back to Edit on the menubar and choose Copy, the shortcut/hotkey on the keyboard is Ctrl+C.

Next go back to CapitalAreaHelpWanted.com and again you will need to go to the Edit on the menu bar and select Paste or use the shortcut/hotkey Ctrl+V.


*Note:  When creating a resume on CapitalAreaHelpWanted.com you have to use their name and address format at the top, so on your resume do not copy and paste or make sure that you have removed the name, address and telephone number field of the resume, just paste in the body of the resume is all that is needed.

How to get the facebook developer's Like box to work with Google blogger

To easily add a like box to your blogspot blog first you will need to create an app by going to the Facebook Developers website and clicking on the Get Started link to see their tutorial on creating your app.  The reason you need an app is so that you can obtain your own unique AppID for any app that you would like to use on Facebook, such as, the Like Box, the Facebook login button and networked blogs.  To make your personal like box go to the Like Box - Facebook Developers section. 

Once you are done setting up your Like Box at the bottom where it says Get Code, you want to change it to the IFrame than copy that code.  Next go to your blogger layout, add a new gadget, select the HTML/javascript and paste your code than save.

Click to enlarge

That is it, you are all done and you now have your own like box!

Add a facebook login button to your blogger using html code

UPDATE This is an updated tutorial on how to add a FaceBook Login button to your Google Blog/blogger/blogspot. Since my last post there are a few things that can be done so that the login button shows either when you are going directly to your personal blog or viewing a post. The earlier bug was that the login button was not showing, this has to do with the first step for it to work correctly.

Step One

• Create an FaceBook App on the Facebook Developers website.  This step is pretty much an easy walk through.  Below is an image of what you need to get your app working correctly.  Once you create your Facebook app it does take a little while for it to work on the website/blog so be patient.

• In the image below make note that the following fields need to be completed.  This set-up is a basic format.  Once you create the Facebook app, this will help to promote your website as well.

Click to Enlarge

Step Two

• Now that your Facebook app is ready the rest is very easy.  Go to the blogger design site and select the blog you wish to add the Facebook Login Button to.

• Select the Layout button and add a new Gadget, scroll down the list and select the HTML/Javascript Gadget.

Step Three

• In the window copy and paste the following code:

<div id="fb-root"></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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=CHANGE THIS TO YOUR PERSONAL APP ID TO YOUR OWN PERSONAL ID LIKE THE ONE IN THE IMAGE ABOVE, JUST ABOVE THE SECRET KEY";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>

Click Save and you are done!

IMPORTANT:  An issue that many of you will come across is:

An invalid API key was specified.  

If you read this post prior, it was incorrect.  The reason you will get this error is when you are using the Facebook Login button on a heavily scripted blog.  Another issue is that you will see a big annoying Facebook logo in place of the login button on your blog, the fix to this is to either go and find what the conflicting problem in the HTML of your blog that is causing this error or just back up your blogger template and than select one of the Google Blogspot templates offered.

After doing this myself the error disappeared and the login button works great and  Blogger does have some very nice templates now.

UPDATE: I have posted a more difficult tutorial for those who are running into the above problem.  Another common problem with the heavily scripted blogs is you will see a big ugly Facebook Logo instead of the nice login button like mine on the top left sidepane.

Add a login button to your google blog - More technical method with better results