Test Blog

The HTML5 Audio Tag The HLTM5 Audio Tag can be used to add background music to any website. The code provided in this tutorial will work on any platform. I will demonstrate the HTML5 Audio functionality right in this blog post. As you can see in the lower left side of this page, there is a speaker icon on a white background. If you hover this icon the HTML5 audio player, playing the background music for this tutorial, is displayed. HTML5 Audio Attributes We Will Use In This Tutorial For the purpose of this tutorial we will want the HTML5 Audio tag to preload the song, we will also want it to displays the audio controls, autoplay and loop the audio. So the audio tag we will use will look something like this: <audio controls autoplay preload loop> ... </audio> Adding The Audio We will add the audio track in both mp3 and ogg format so that we can get cross browser compatibility. Not all browsers support mp3 and not all browsers support ogg . But using them together we c...

Demo Download HTML5 Audio - Free Blogger Album Template Download the free Blogger template to present your Album to your fans. Your tracks can be played online and you can also add a download link to your entire album or the iTunes link. Minimal Design The Minimal dark design Template is easy to implement and customize.  The background can de easily changed to mack the cover image of your album. Song progress is tracked by turning the listed track duration into a countdown timer and also by a white progress bar displayed under each track while it is being played. Cross Screen Compatibility By using the twitter bootstrap grid system the template adapts to the browser size, be it desktop, tablet or smartphone. Integrated HTML5 Audio Player Each track can be played without leaving the website. The source of the individual tracks can be changed to 90 second previews. During playback track position is displayed through a white progress bar displayed under the active title. The song du...

Stylish Popular Posts Carousel for Blogger After reading a lot of questions regarding resizing the Popular Posts thumbnail image size, I decided to write this tutorial . But that wasn't enough. The reason for the many questions is that publishers using Blogger are searching for a better, more attractive way to display their popular posts. I wrote the code for a blogger carousel as displayed on this blog's homepage and decided to offer it for free for download. Customizable Date-range & Number of Sildes The Date-range for the Popular Posts Carousel can be set to show All time posts, posts from the Last 30 days or posts from the Last 7 days . The number of slides can be also modified to show anywhere between one and ten slides requiring only a minor code modification to adjust the number of carousel indicators. Minimalist Carousel Controls The Blogger Carousel can be controlled by using the left / right minimalist arrows or the minimalist carousel indicators. Autoplay with ...

Visit the album website here . New HTML5 Website Launched Download the complete album for free. For the release of the Shimmer album I have created an HTML5 website with integrated audio player, microdata markup for search engine optimisation and responsive design for cross screen compatibility. HTML5 Audio Player Each of the tracks can be played on the website using the HTML5 audio tag. Playing any track will stop the currently playing track. The track length also doubles as a countdown timer while the tracks are played. A minimal progress bar is displayed under the active track. Responsive Design The album website is designed to look great and offer maximum functionality on any screen size. Twitter Bootstrap3 Grid System The album website uses the Twitter Bootstrap3 responsive grid system. Microdata For Search Engine Optimisation By using microdata Album Name, Album Artist, Genre, Track Names and Track Duration are easily identifiable by search engines & web browsers.

The Popular Posts Gadget If you are reading this post you probably know that the Blogger Popular Posts gadget presents the option to include thumbnail images of the listed popular posts. The default size of the thumbnail images is 72 pixels high by 72 pixels wide. There is no option to change the size of the thumbnails from the gadget settings and if you change the width and height attributes of img tag in your Blogger Template the images will be stretched and low quality. The reason for this is that Blogger stores it's images using the Picasa web service and when the images are required for the Popular Posts gadget it calls them at a 72 by 72 resolution. The Popular Posts Thumbnails The resolution of the Popular Posts Thumbnails can be also seen by looking at the image url. As an example let us have a look at the Thumbnail image of one of the Posts from this Blog. The link for the thumbnail image of the  How To Completely Backup Your Blogger Data  post is the following: https...

1. Backing Up The Contents Of Your Blog You can easily  backup all posts, pages and labels by logging in to your Blogger Dashboard, clicking on Settings  and clicking on Export Blog , in the Blog Tools section. You will need to save the downloaded file. 2. Backing Up Your Template To save your Blogger Template and Layout you need to go to Template , click on Backup / Restore . Save this file together with the file you downloaded in point 1. Leave your comments and suggestions below.

In this tutorial you will learn how to integrate M icrodata  into your website. Microdata enables search engines, web crawlers, and browsers to extract and process information from your web page and use it to provide a richer browsing experience for users. We will be referencing the W3C HTML Microdata Nightly website and the Google Structured Data Testing Tool . We will also be using the John Doe - Resume free template html file, form an earlier post , offered for download here . What is Microdata? Compared to using using RDFa and Microformats, Microdata is an attempt to provide a simpler way of annotating HTML elements with tags. A supporting vocabulary is used to describe item and name-value pairs for assigning property values. Microdata allows nested groups of name-value pairs to be added to documents, in parallel with the existing content. Microdata Syntax In the John Doe - Resume file you have downloaded from the link above you will see the following code: <!DOCTYPE html...

Responsive Design Cross-screen compatible design featuring a responsive Navbar. The responsive layout adapts well to desktop, tablet and smartphone screens. Interactive Photo Gallery The Photo Gallery can be controlled through the thumbnail view, by mouse scroll-wheel or by using the keyboard right and left arrows. Photo Carousel Header The Hompage header is a responsive image carousel displaying images of the hotel and the beautiful historical city surroundings. Responsive Forms The cross-screen, responsive contact and reservation forms are easily accessible from desktop or touchscreen. Featuring date-picker, text-input fields and beautifully styled select menus. Have A Look You can view the hotel website here .

After posting the Free HTML5, CSS3 & Twitter Bootstrap 3 Minimalist Design Resume I got some interesting feedback. I decided to look at the improvement suggestions and release Version 2.0 of the Free HTML5, CSS3, Bootstrap3 Resume Template. Special thanks to +David Metcalfe  for the design improvement suggestions. Demo Demo Download Download Responsive Design The resume template was designed with cross-screen compatibility in mind. The responsive, scrollspy navigation ensures easy access to all sections of the resume while resizing in order to adapt to the screen size. Smooth Scrolling Navigation The resume scrollspy navigation specificcaly designed for single page design scrolls to the individual sections in the resume: Work Experience , Studies , Courses & Certificates , Language Skills . The navbar contains  LinkedIn  &  Download PDF  links as well as a Print button. Beautiful Typography & Colors The typography for the individual templates ha...

Today Google has announced the release of Google Web Designer public beta, a useful tool similar to Dreamweaver. Google Web Designer is available for Windows and OS X. Google Web Designer is a WYSIWYG (What You See Is What You Get) editor aimed at add creation, but it can also be used to create webpages. Google announced that, until recently advertisers did not have the possibility to easily create responsive Adds. Google Web Designer is aimed to fill this gap and offer an easy way, which does not require coding skills, to create cross-screen adds. Google Web Designer is focused on design, handling HTML5 and CSS3 in the background. If you have coding skills you can always access and modify the code. Google Web Designer features: Two animation modes Full 3D authoring environment Design view and code view Illustration tools Easy ad workflow You can download Google Web Designer from here .   What do you think of Google Web Designer? Leave your comments below.

I have put together a list of the most useful free online tools every Web Designer should know about. Whether you need to test the browser compatibility of your new design or just need to find some free graphics, here you will find the links to the best tools out there. 1. browsershots.org Browsershots tests your website's compatability on different browsers by taking screenshots of your web pages rendered by real browsers on different operating systems. 2. www.aptana.com Build web applications quickly and easily using the industry’s leading web application IDE. Aptana Studio harnesses the flexibility of Eclipse and focuses it into a powerful web development engine. 3. www.sxc.hu SXC was launched in February 2001 as an alternative for expensive stock photography. The idea was to create a site where creative people could exchange their photos for inspiration or work. The site has evolved into the massive community you see today — there are over 2,500,000 registered users and around ...