Adding a clean simple music player

In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player.

I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy!

Basic HTML5 Audio Tags Explained

The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites.

It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required.

There is a sample widget using the <audio> elementon the right sidebar, The audio player is produced using the following HTML code.

Copy Protection For Blog

Do you want to protect your website/blog from information stealers? This is what you will need. Add this widget to your blog and reduce the stolen percentage of your blog post(s) up to 99.8%!

Features:

• After adding this widget, your blog readers CANNOT highlight any characters in your blog. (This is to prevent stealers from using the hotkey CTRL + C function)
• Readers CANNOT right click in your blog. (To protect stealers from stealing your images or links

Note:

• If you require readers to copy a string of text, use pastie instead and link it to them.

Click here to see the a demo blog that uses this function

<script type="text/javascript"> var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reEnable(){ return true } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reEnable } var message="This site is copy protected by DMCA and COPYSCAPE, any duplicated content(s) on the web will be reported and removed. Please use the share option instead of copying."; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script><br /> <div align="middle"> <a href="http://www.dmca.com/" title="DMCA" target="_blank"> <img src ="http://images.dmca.com/Badges/DMCA_logo-200w_b.png" alt="DMCA.com" /></a><br /> <br /> <a href="http://www.copyscape.com/duplicate-content/" target="_blank"><img src="http://banners.copyscape.com/images/cs-gy-234x16.gif" alt="Protected by Copyscape Duplicate Content Finder" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." width="234" height="16" border="0" /></a></div> <!-- Please Don't Remove The Credits --> <div align="middle"> <font size="1"><a href="http://jkelvin5989.blogspot.com/2012/11/copy-protection-for-websiteblog.html" target="_blank">Copy Protection For Blog</a> by <a href="http://jkelvin5989.blogspot.com/" target="_blank">kelvin5989</a></div>

Standard Malaysian Time Widget

Do you want to add this Standard Malaysian Time Widget to your blog? Simply click on "Add to Blogger" button below.

Note: If you place this widget at your sidebar, your sidebar must be at least 920px or it will look very wierd.

<!-- MYSTW CODE START --> <div align="middle"> <iframe width="298" scrolling="no" height="265" frameborder="0" src="http://time.sirim.my/index.php?small=1"></iframe><br /> <!-- Please Don't Remove The Credits --> <font size="1"><a href="http://jkelvin5989.blogspot.com/2012/11/standard-malaysian-time-widget.html" target="_blank">Standard MY Time Widget</a> by <a href="http://jkelvin5989.blogspot.com" target="_blank">kelvin5989</a></font> </div> <!-- MYSTW CODE END -->