The people at Skilled.co created a cheat sheet that allows developers from all experience levels to create unique images and art to fit any of their web design needs. HTML5 advanced technology permits designers to not only create images, but full animations that range from simple movements to complex. The <canvas> element bears significant potential for those interested in game design.

If your website is taking forever to load and you would like to optimize it but don't know where to start, Google PageSpeed Insights Tool is exactly what you need.

The end result will look like this.



The Time To Color script can be used on any HTML page. Here are the steps for adding it to Blogger as a widget:

Demo



In order to have a fully functional Twitter Bootstrap mobile menu Karate Button all you have to do is include the two links below in the header section of your website.

<link rel="stylesheet" type="text/css" href="http://ta-systems.net/Blogger/tudor-anghelina.com/Karate-Button/karate_button.css">

<script src="http://ta-systems.net/Blogger/tudor-anghelina.com/Karate-Button/karate-button.js"></script>

The Karate Button uses JavaScript for removing the standard Twitter Bootstrap default mobile menu button and replace it with the CSS3 animated mobile menu button.


Please leave your questions / suggestions in the comments sections below.

CSS3 is supported on most mobile devices nowadays so you have the option of designing a custom CSS3 logo.

See a demo of the Pure CSS3 logo here and download the code used for this tutorial here.

Each of the five words used for the creation of the CSS3 Logo is enclosed in an individual div. By applying CSS3 gradient backgrounds you will get the colored stripes.

The first letter of each word is actually a lighter version of the background color.

You can use different color combinations to mach the palette of your brand.

Download the Animated Responsive CSS3 HTML5 Image Slide Up Menu Template for free.

The easiest way to submit a sitemap to Google Webmaster Tools

   

To submit a sitemap to Google Webmaster Tools just follow the steps below:

The HTML5 Audio Tag

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.

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.

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.

The Popular Posts Gadget

1. Backing Up The Contents Of Your Blog

Responsive Design

Cross-screen compatible design featuring a responsive Navbar. The responsive layout adapts well to desktop, tablet and smartphone screens.

In this tutorial you will learn how to create a Navigation Bar using the Blogger Labels widget.

We will use the Blogger Simple template and style it using the Twitter Bootstrap 3 framework.

If you want to follow the tutorial step by step but don't know how to apply the Blogger Simple Template and integrate the Twitter Bootstrap 3 framework, you can find a tutorial here.

1.

First off all, we will remove the Blogger Navbar so that it will not conflict with the static navbar we will create in this tutorial.

If you are unsure how to do this you can find a tutorial here.

In this tutorial you will learn how to remove the Blogger Navbar Gadget.

 

1.

The firs step is to Log in to your Blogger account and go to your click on Layout.

In this tutorial you will learn how to integrate the Twitter Bootstrap 3 Framework with your Blogger template.

If you want to create your own Blogger Template or better understand the best way to customize an existing template this tutorial should help you.

 

In this tutorial we will modify the White "Simple" Blogger Template.

1. To follow the instructions in this tutorial step by step, please login to your Blogger Dashboard and click "Templates. Apply the White Simple template to your Blog;

Using the Blogger conditional tag will be easy if you have this cheat sheet handy:

Your standard conditional code will look like this:

<b:if cond='condition'>
    content to display
<b:else/>
    content to display otherwise
</b:if>

Or like this if you have no "else" condition:

<b:if cond='condition'>
    content to display
</b:if>

You can also embed an if condition into another if condition:

<b:if cond='condition'>
  <b:if cond='condition'>
    content to display
  </b:if>
</b:if> 

---

So let's have a look at the complete list of available <b:if> tags:

For showing content only on static pages:

<b:if cond='data:blog.pageType == "static_page"'>
    content to display
<b:else/>
    content to display otherwise
</b:if>

You will find that the Blogger Search widget is unbelievably difficult to customize. If you are using a pre-developed HTML and CSS template like twitter Bootstrap 3, the CSS stylesheets will not be applied to the Blogger Search Widget form.

The above form is styled using the default twitter Bootstrap 3 stylesheet. You can use this code to create your own easy to style Blogger Search Widget.

<form role="search" method="get" action="/search" class="form-inline">
  <div class="form-group">
    <input class="btn btn-default" id="submit" value="Search" type="submit" />
    <div class="form-group">
      <input id="searchBox" class="form-control" type="text" placeholder="Search" name="q"></input>
    </div>
  </div>
</form>